blob: f2070455bf063ed7beb2f8cbd86169570eb763b9 [file] [log] [blame]
Akron49bfdbf2016-11-22 21:47:33 +01001@charset "utf-8";
2@import "../util";
3
Akron7e5afce2020-08-25 15:50:19 +02004/**
5 * Styles for the KWIC view.
6 */
7
Akron08b82d62016-12-05 15:06:05 +01008$font-size: 10pt;
Akron49bfdbf2016-11-22 21:47:33 +01009
10#search {
Akron7e5afce2020-08-25 15:50:19 +020011 position: relative;
Akron49bfdbf2016-11-22 21:47:33 +010012 margin-bottom: 30px;
Akron7e5afce2020-08-25 15:50:19 +020013 overflow: visible;
Akron49bfdbf2016-11-22 21:47:33 +010014
Akron7e5afce2020-08-25 15:50:19 +020015 div.matchinfo {
16 display: none;
17 }
Akron49bfdbf2016-11-22 21:47:33 +010018
Akron7e5afce2020-08-25 15:50:19 +020019 > ol {
20 overflow-x: hidden;
21 overflow-y: visible;
22 width: auto;
23 text-indent: 0;
24 list-style-type: none;
25 margin: 0;
26 padding: 0;
27 border: $result-border-size solid $kwic-border;
28 font-size: $font-size;
Akronf74cd2e2018-08-15 16:26:18 +020029
Akron7e5afce2020-08-25 15:50:19 +020030 > li {
31 display: flex;
32 flex-direction: row;
33 flex-wrap: nowrap;
34 align-items: stretch;
35 align-content: stretch;
36
37 border: {
38 style: solid;
39 color: $dark-orange;
40 width: 0;
41 }
Akronf74cd2e2018-08-15 16:26:18 +020042
Akron7e5afce2020-08-25 15:50:19 +020043 // Actions
44 .button-group.button-view {
45 display: none;
46 }
47
48 // Zebra style
49 &:nth-of-type(even) div.match-main div.match-wrap {
50 background-color: $kwic-line-even;
51 }
52
53 // References
54 p.ref {
55 display: none;
Akronf74cd2e2018-08-15 16:26:18 +020056 }
57
Akron7e5afce2020-08-25 15:50:19 +020058 div.meta,
59 div.match-main {
60 position: relative;
61 cursor: pointer;
Akron46b9f212017-05-01 13:55:17 +020062 }
Akron7e5afce2020-08-25 15:50:19 +020063
64 div.match-main {
65 display: block;
66 flex: 7 0;
67 z-index: 4;
68 overflow: hidden;
69
70 > div.match-wrap {
71 width: 99999%;
72 margin-left: -49999.5%;
73 background-color: $kwic-line-noneven;
74 overflow-x: hidden;
75 overflow-y: visible;
76 white-space: normal;
77 }
Akron46b9f212017-05-01 13:55:17 +020078 }
Akron7e5afce2020-08-25 15:50:19 +020079
80 div.meta {
81 flex: 1 0;
82 min-width: 12em;
83 max-width: 15em;
84 text-align: left;
85 width: 2px;
86 z-index: 5;
87 overflow-y: hidden;
88 overflow-x: hidden;
89 text-overflow: ellipsis;
90 white-space: nowrap;
91 background-color: lighten($middle-grey, 5%);
92 color: $nearly-white;
93 font-size: 75%;
94 padding: 0 5pt;
95
96 border: {
97 color: $dark-grey;
98 style: solid;
99 width: 2px 1px 0 0;
100 }
101
102 // Tiny hack
103 &:before {
104 content: " ";
105 display: inline-block;
106 height: 100%;
107 vertical-align: middle;
108 }
109
110 &:empty {
111 border-width: 0 1px 0 0;
112 }
113
114 &.flip {
115 background-color: lighten($middle-grey, 17%);
116 }
Akron08b82d62016-12-05 15:06:05 +0100117 }
Akron7e5afce2020-08-25 15:50:19 +0200118
119 &:first-of-type div.meta {
120 border-top-width: 0;
121 }
122
123 &:last-of-type div.meta {
124 border-bottom-width: 0;
125 }
Akron08b82d62016-12-05 15:06:05 +0100126 }
Akron49bfdbf2016-11-22 21:47:33 +0100127 }
128}
129
Akron49bfdbf2016-11-22 21:47:33 +0100130
Akron7e5afce2020-08-25 15:50:19 +0200131/**
132 * Snippet rules
Akron49bfdbf2016-11-22 21:47:33 +0100133 */
Akron49bfdbf2016-11-22 21:47:33 +0100134div.snippet {
135 text-overflow: ellipsis;
Akron7e5afce2020-08-25 15:50:19 +0200136 text-indent: 0;
137 text-shadow: $light-shadow;
138 font-size: 0;
139 white-space: nowrap !important;
Akronf74cd2e2018-08-15 16:26:18 +0200140
Akron49bfdbf2016-11-22 21:47:33 +0100141 > span, mark {
Akron7e5afce2020-08-25 15:50:19 +0200142 padding: 5pt 0 6pt 0;
Akron2b75b132018-08-13 09:47:47 +0200143 font-size: $font-size;
Akron49bfdbf2016-11-22 21:47:33 +0100144 }
Akron7e5afce2020-08-25 15:50:19 +0200145
146 > mark,
147 > span.match {
Akron49bfdbf2016-11-22 21:47:33 +0100148 font-weight: bold;
Akron08b82d62016-12-05 15:06:05 +0100149 color: $black;
150 text-shadow: none;
Akron49bfdbf2016-11-22 21:47:33 +0100151 padding-left: 4pt;
152 padding-right: 2pt;
153 }
Akron7e5afce2020-08-25 15:50:19 +0200154
Akron09e7f1f2018-05-28 14:08:14 +0200155 > span.match > span.cutted::after {
Akron7e5afce2020-08-25 15:50:19 +0200156 @include icon-font;
Akron09e7f1f2018-05-28 14:08:14 +0200157 content: $fa-cut;
Akron7e5afce2020-08-25 15:50:19 +0200158 color: $light-green;
159
Akron09e7f1f2018-05-28 14:08:14 +0200160 padding: {
Akron7e5afce2020-08-25 15:50:19 +0200161 left: 4pt;
Akron09e7f1f2018-05-28 14:08:14 +0200162 right: 4pt;
163 }
Akronb6685bb2018-02-04 00:44:47 +0100164 }
165
Akron7e5afce2020-08-25 15:50:19 +0200166 &.startMore:before,
167 &.endMore:after {
168 content: "…";
169 padding-left: 2pt;
170 padding-right: 2pt;
Akronb6685bb2018-02-04 00:44:47 +0100171 }
Akron3bb91bc2016-12-02 16:43:17 +0100172
Akron7e5afce2020-08-25 15:50:19 +0200173 // Flags
174 div.flag {
175 position: absolute;
176 height: 100%;
177 top: 0;
178 left: 0;
179 width: 11px;
180 background-color: $dark-orange;
181 border-right: 1px solid $darkest-orange;
Akron49bfdbf2016-11-22 21:47:33 +0100182 }
183}
Akron49bfdbf2016-11-22 21:47:33 +0100184
Akron8b592d42018-01-26 18:33:06 +0100185
Akron49bfdbf2016-11-22 21:47:33 +0100186/**
Akron7e5afce2020-08-25 15:50:19 +0200187 * Active rules
Akron49bfdbf2016-11-22 21:47:33 +0100188 */
Akron2a4e9af2017-12-22 15:45:22 +0100189body.no-js #search > ol > li:active,
190#search > ol > li.active,
191#search > ol > li:target {
Akron7e5afce2020-08-25 15:50:19 +0200192 position: relative;
193 display: block;
Akron2a4e9af2017-12-22 15:45:22 +0100194 background-color: $dark-orange;
Akron7e5afce2020-08-25 15:50:19 +0200195 text-align: left;
196 border-width: 2px;
197 white-space: wrap;
198 height: auto;
199 width: auto;
200 overflow: hidden;
Akron3bb91bc2016-12-02 16:43:17 +0100201
Akron7e5afce2020-08-25 15:50:19 +0200202 div.matchinfo {
203 display: block;
Akron49bfdbf2016-11-22 21:47:33 +0100204 }
Akron7e5afce2020-08-25 15:50:19 +0200205
206 + li.active {
207 border-top: $border-size solid $light-grey;
208 padding-top: 3 * $border-size;
209
210 .button-group.button-view {
211 padding-top: 3 * $border-size;
212 }
Akronf74cd2e2018-08-15 16:26:18 +0200213 }
214
Akron7e5afce2020-08-25 15:50:19 +0200215 .snippet {
216 white-space: normal !important;
217 padding: 2pt 0 5pt 5pt;
218 background-color: $light-orange;
219
220 span {
221 display: inline !important;
222 }
223
224 > * {
225 background-color: transparent;
226 }
227
228 div.flag {
229 display: none;
230 }
231
232 margin: {
233 top: 0;
234 right: $right-view-distance;
235 bottom: 0;
236 left: 0;
237 }
238
239 > span {
240 line-height: 1.4em;
241 width: auto;
242
243 &.context-left {
244 margin-left: 0;
245 display: inline;
246 overflow: visible;
247 text-align: left;
248 width: auto;
249 }
250 }
Akron3bb91bc2016-12-02 16:43:17 +0100251 }
Akron7e5afce2020-08-25 15:50:19 +0200252
Akronbfe912c2018-07-17 19:30:52 +0200253 .button-group.button-view {
Akron3bb91bc2016-12-02 16:43:17 +0100254 display: block;
255 }
Akron7e5afce2020-08-25 15:50:19 +0200256
257 div.match-main {
258 display: block;
259 width: 100%;
260
261 div.match-wrap {
262 cursor: default;
263 min-height: 20pt;
264 background-color: $dark-orange;
265 width: 100%;
266 margin-left: 0;
267 overflow-x: visible;
268 white-space: wrap;
Akron49bfdbf2016-11-22 21:47:33 +0100269 }
270 }
Akron49bfdbf2016-11-22 21:47:33 +0100271
Akron49bfdbf2016-11-22 21:47:33 +0100272 div.meta {
Akron97d42802016-11-26 22:45:46 +0100273 display: none;
Akron49bfdbf2016-11-22 21:47:33 +0100274 }
Akron7e5afce2020-08-25 15:50:19 +0200275
Akron49bfdbf2016-11-22 21:47:33 +0100276 p.ref {
Akron7e5afce2020-08-25 15:50:19 +0200277 display: block;
278 color: $nearly-white;
279 padding: 3pt 10pt 3pt 3pt;
Akronfc8dbae2019-02-15 13:16:20 +0100280 padding-right: $right-view-distance;
Akron7e5afce2020-08-25 15:50:19 +0200281 margin: 0pt;
282 width: 100%;
283 bottom: 0;
284 z-index: 30;
285
Akron49bfdbf2016-11-22 21:47:33 +0100286 > span.sigle {
Akron7e5afce2020-08-25 15:50:19 +0200287 font-size: 75%;
Akron49bfdbf2016-11-22 21:47:33 +0100288 vertical-align: top;
Akron7e5afce2020-08-25 15:50:19 +0200289 color: $light-orange;
290 float: right;
Akron49bfdbf2016-11-22 21:47:33 +0100291 }
292 }
293}
Akron49bfdbf2016-11-22 21:47:33 +0100294
Akronf74cd2e2018-08-15 16:26:18 +0200295
296/**
Akron7e5afce2020-08-25 15:50:19 +0200297 * Alignment rules
Akronf74cd2e2018-08-15 16:26:18 +0200298 */
Akron7e5afce2020-08-25 15:50:19 +0200299#search ol {
300 span.context-left {
301 display: inline-block;
302 width: 50.01%;
303 text-align: right;
Akronad739342018-08-14 13:48:14 +0200304 }
305
Akron7e5afce2020-08-25 15:50:19 +0200306 // Right aligned
307 &.align-right {
308 text-align: right;
Akronf74cd2e2018-08-15 16:26:18 +0200309
Akron7e5afce2020-08-25 15:50:19 +0200310 div.match-main span.context-right {
311 display: inline-block;
312 width: 49.915%;
Akronf74cd2e2018-08-15 16:26:18 +0200313 text-align: left;
Akron7e5afce2020-08-25 15:50:19 +0200314 }
315 }
316
317 // Center aligned
318 &.align-center {
319 div.match-main {
320 width: 100% !important;
321
322 > .match-wrap {
323 position: relative;
324 margin-left: 0;
325 }
326 }
327
328 li:not(.active) div.snippet {
329 white-space: normal;
330 text-align: center;
331 width: 100000pt;
332 margin-left: -50000pt;
333
334 span.context-left {
335 display: inline-block;
336 text-align: right;
337 width: 40000pt;
338 margin-left: 70vw;
339 }
340
341 span.context-right {
342 display: inline-block;
343 text-align: left;
344 width: 40000pt;
345 }
Akronad739342018-08-14 13:48:14 +0200346 }
347 }
348}
349
350
Akron7e5afce2020-08-25 15:50:19 +0200351/**
352 * Fix empty contexts
353 */
354#search ol span {
355 &.context-left,
356 &.context-right {
357 &:empty::after {
358 content: " ";
359 display: inline-block;
360 }
Akron01231002017-06-29 20:47:58 +0200361 }
362}
Akron49bfdbf2016-11-22 21:47:33 +0100363
Akron7e5afce2020-08-25 15:50:19 +0200364
Akron49bfdbf2016-11-22 21:47:33 +0100365/**
Akron7e5afce2020-08-25 15:50:19 +0200366 * Highlight rules
Akron49bfdbf2016-11-22 21:47:33 +0100367 */
368mark {
369 background-color: inherit;
Akron7e5afce2020-08-25 15:50:19 +0200370 color: inherit;
Akron49bfdbf2016-11-22 21:47:33 +0100371}
372
373mark > mark,
374em,
375.level-0 {
376 border-bottom-width: 2px;
377 border-bottom-style: solid;
Akron7e5afce2020-08-25 15:50:19 +0200378 padding-bottom: 0px !important;
379 font-style: normal;
Akron49bfdbf2016-11-22 21:47:33 +0100380}
381
382mark > mark > mark,
383em > em,
384.level-1 {
Akron3bb91bc2016-12-02 16:43:17 +0100385 padding-bottom: 3px !important;
Akron49bfdbf2016-11-22 21:47:33 +0100386}
387
388mark > mark > mark > mark,
389em > em > em,
390.level-2 {
Akron3bb91bc2016-12-02 16:43:17 +0100391 padding-bottom: 6px !important;
Akron49bfdbf2016-11-22 21:47:33 +0100392}
393
394
395#search > ol > li {
396 &:not(.active) mark > mark > mark > mark,
397 &:not(.active) em > em > em {
398 line-height: 180%;
399 }
400 &.active mark > mark > mark > mark,
401 &.active em > em > em {
402 line-height: 250%;
403 }
404}
405
406.class-1 { border-color: $kwic-highlight-1; }
407.class-2 { border-color: $kwic-highlight-2; }
408.class-3 { border-color: $kwic-highlight-3; }
409.class-4 { border-color: $kwic-highlight-4; }