View | Details | Raw Unified | Return to bug 31529
Collapse All | Expand All

(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss (-155 / +163 lines)
Lines 2-11 Link Here
2
$headings-color: #727272;
2
$headings-color: #727272;
3
$headings-font-weight: 600;
3
$headings-font-weight: 600;
4
$enable-gradients: false;
4
$enable-gradients: false;
5
5
$info: #2679CC;
6
$info:#2679cc;
6
$danger: rgb( 185, 32, 32 );
7
$danger: rgb(185, 32, 32);
8
9
$font-size-base: 1rem;
7
$font-size-base: 1rem;
10
$h1-font-size: $font-size-base * 1.5;
8
$h1-font-size: $font-size-base * 1.5;
11
$h2-font-size: $font-size-base * 1.4;
9
$h2-font-size: $font-size-base * 1.4;
Lines 13-33 $h3-font-size: $font-size-base * 1.3; Link Here
13
$h4-font-size: $font-size-base * 1.2;
11
$h4-font-size: $font-size-base * 1.2;
14
$h5-font-size: $font-size-base * 1.1;
12
$h5-font-size: $font-size-base * 1.1;
15
$h6-font-size: $font-size-base;
13
$h6-font-size: $font-size-base;
16
17
$base-theme-color: #548300;
14
$base-theme-color: #548300;
18
19
$color: #999999;
15
$color: #999999;
20
$links: #0074AD;
16
$links: #0074AD;
21
$links-hover: #005580;
17
$links-hover: #005580;
22
$footer-height: 45px;
18
$footer-height: 45px;
23
24
$sci-link-color: #0076B6;
19
$sci-link-color: #0076B6;
25
$sci-heading-color: #727272;
20
$sci-heading-color: #727272;
26
27
$high-contrast-grey: #666666;
21
$high-contrast-grey: #666666;
28
22
29
@mixin shadowed {
23
@mixin shadowed {
30
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
24
    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
31
}
25
}
32
26
33
@mixin border-radius-all($radius: 3px) {
27
@mixin border-radius-all($radius: 3px) {
Lines 36-42 $high-contrast-grey: #666666; Link Here
36
30
37
@mixin input-focus {
31
@mixin input-focus {
38
    border-color: $base-theme-color;
32
    border-color: $base-theme-color;
39
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(194, 228, 136, .6);
33
    box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 );
40
}
34
}
41
35
42
/* Bootstrap imports */
36
/* Bootstrap imports */
Lines 44-63 $high-contrast-grey: #666666; Link Here
44
@import "../../../../../node_modules/bootstrap/scss/variables";
38
@import "../../../../../node_modules/bootstrap/scss/variables";
45
@import "../../../../../node_modules/bootstrap/scss/mixins";
39
@import "../../../../../node_modules/bootstrap/scss/mixins";
46
@import "../../../../../node_modules/bootstrap/scss/alert";
40
@import "../../../../../node_modules/bootstrap/scss/alert";
41
47
// @import "../../../../../node_modules/bootstrap/scss/badge";
42
// @import "../../../../../node_modules/bootstrap/scss/badge";
48
@import "../../../../../node_modules/bootstrap/scss/breadcrumb";
43
@import "../../../../../node_modules/bootstrap/scss/breadcrumb";
49
@import "../../../../../node_modules/bootstrap/scss/button-group";
44
@import "../../../../../node_modules/bootstrap/scss/button-group";
50
@import "../../../../../node_modules/bootstrap/scss/buttons";
45
@import "../../../../../node_modules/bootstrap/scss/buttons";
51
@import "../../../../../node_modules/bootstrap/scss/card";
46
@import "../../../../../node_modules/bootstrap/scss/card";
47
52
// @import "../../../../../node_modules/bootstrap/scss/carousel";
48
// @import "../../../../../node_modules/bootstrap/scss/carousel";
53
@import "../../../../../node_modules/bootstrap/scss/close";
49
@import "../../../../../node_modules/bootstrap/scss/close";
50
54
// @import "../../../../../node_modules/bootstrap/scss/code";
51
// @import "../../../../../node_modules/bootstrap/scss/code";
55
@import "../../../../../node_modules/bootstrap/scss/custom-forms";
52
@import "../../../../../node_modules/bootstrap/scss/custom-forms";
56
@import "../../../../../node_modules/bootstrap/scss/dropdown";
53
@import "../../../../../node_modules/bootstrap/scss/dropdown";
57
@import "../../../../../node_modules/bootstrap/scss/forms";
54
@import "../../../../../node_modules/bootstrap/scss/forms";
58
@import "../../../../../node_modules/bootstrap/scss/grid";
55
@import "../../../../../node_modules/bootstrap/scss/grid";
56
59
// @import "../../../../../node_modules/bootstrap/scss/images";
57
// @import "../../../../../node_modules/bootstrap/scss/images";
60
@import "../../../../../node_modules/bootstrap/scss/input-group";
58
@import "../../../../../node_modules/bootstrap/scss/input-group";
59
61
// @import "../../../../../node_modules/bootstrap/scss/jumbotron";
60
// @import "../../../../../node_modules/bootstrap/scss/jumbotron";
62
// @import "../../../../../node_modules/bootstrap/scss/list-group";
61
// @import "../../../../../node_modules/bootstrap/scss/list-group";
63
// @import "../../../../../node_modules/bootstrap/scss/media";
62
// @import "../../../../../node_modules/bootstrap/scss/media";
Lines 65-83 $high-contrast-grey: #666666; Link Here
65
@import "../../../../../node_modules/bootstrap/scss/navbar";
64
@import "../../../../../node_modules/bootstrap/scss/navbar";
66
@import "../../../../../node_modules/bootstrap/scss/nav";
65
@import "../../../../../node_modules/bootstrap/scss/nav";
67
@import "../../../../../node_modules/bootstrap/scss/pagination";
66
@import "../../../../../node_modules/bootstrap/scss/pagination";
67
68
// @import "../../../../../node_modules/bootstrap/scss/popover";
68
// @import "../../../../../node_modules/bootstrap/scss/popover";
69
@import "../../../../../node_modules/bootstrap/scss/print";
69
@import "../../../../../node_modules/bootstrap/scss/print";
70
70
// @import "../../../../../node_modules/bootstrap/scss/progress";
71
// @import "../../../../../node_modules/bootstrap/scss/progress";
71
@import "../../../../../node_modules/bootstrap/scss/reboot";
72
@import "../../../../../node_modules/bootstrap/scss/reboot";
72
@import "../../../../../node_modules/bootstrap/scss/root";
73
@import "../../../../../node_modules/bootstrap/scss/root";
74
73
// @import "../../../../../node_modules/bootstrap/scss/spinners";
75
// @import "../../../../../node_modules/bootstrap/scss/spinners";
74
@import "../../../../../node_modules/bootstrap/scss/tables";
76
@import "../../../../../node_modules/bootstrap/scss/tables";
77
75
// @import "../../../../../node_modules/bootstrap/scss/toasts";
78
// @import "../../../../../node_modules/bootstrap/scss/toasts";
76
@import "../../../../../node_modules/bootstrap/scss/tooltip";
79
@import "../../../../../node_modules/bootstrap/scss/tooltip";
77
@import "../../../../../node_modules/bootstrap/scss/transitions";
80
@import "../../../../../node_modules/bootstrap/scss/transitions";
78
@import "../../../../../node_modules/bootstrap/scss/type";
81
@import "../../../../../node_modules/bootstrap/scss/type";
79
@import "../../../../../node_modules/bootstrap/scss/utilities";
82
@import "../../../../../node_modules/bootstrap/scss/utilities";
80
81
@import "flatpickr";
83
@import "flatpickr";
82
84
83
/* Koha imports */
85
/* Koha imports */
Lines 87-100 $high-contrast-grey: #666666; Link Here
87
html,
89
html,
88
body {
90
body {
89
    height: 100%;
91
    height: 100%;
92
90
    // The html and body elements cannot have any padding or margin.
93
    // The html and body elements cannot have any padding or margin.
91
}
94
}
92
95
93
body {
96
body {
94
    background: #FCF9FC none;
97
    background: #FCF9FC none;
95
    display: flex;
98
    display: flex;
96
    height: 100%;
97
    flex-direction: column;
99
    flex-direction: column;
100
    height: 100%;
98
}
101
}
99
102
100
a {
103
a {
Lines 160-166 caption { Link Here
160
            }
163
            }
161
        }
164
        }
162
    }
165
    }
163
164
}
166
}
165
167
166
.main {
168
.main {
Lines 170-176 caption { Link Here
170
    padding: 1rem 0;
172
    padding: 1rem 0;
171
}
173
}
172
174
173
174
.alert {
175
.alert {
175
    &.alert-info,
176
    &.alert-info,
176
    &.alert-warning {
177
    &.alert-warning {
Lines 178-190 caption { Link Here
178
    }
179
    }
179
180
180
    &.alert-error {
181
    &.alert-error {
181
        @extend .alert-warning
182
        @extend .alert-warning;
182
    }
183
    }
183
}
184
}
184
185
185
.btn-primary {
186
.btn-primary {
186
    background-color: $base-theme-color;
187
    background-color: $base-theme-color;
187
    border: 1px solid darken($base-theme-color, 10%);
188
    border: 1px solid darken( $base-theme-color, 10% );
188
    color: #FFF;
189
    color: #FFF;
189
190
190
    &:link,
191
    &:link,
Lines 195-252 caption { Link Here
195
    &:hover,
196
    &:hover,
196
    &:active {
197
    &:active {
197
        background-color: $base-theme-color;
198
        background-color: $base-theme-color;
198
        border-color: lighten($base-theme-color, 5%);
199
        border-color: lighten( $base-theme-color, 5% );
199
        box-shadow: 0 0 0 1px lighten(saturate($base-theme-color, 0.5), 4);
200
        box-shadow: 0 0 0 1px lighten( saturate( $base-theme-color, .5 ), 4 );
200
        color: #FFF;
201
        color: #FFF;
201
    }
202
    }
202
203
203
    &:focus {
204
    &:focus {
204
        box-shadow: 0 0 0 2px lighten($base-theme-color, 10%);
205
        box-shadow: 0 0 0 2px lighten( $base-theme-color, 10% );
205
    }
206
    }
206
207
207
    &.disabled,
208
    &.disabled,
208
    &:disabled {
209
    &:disabled {
209
        background-color: lighten($base-theme-color, 5%);
210
        background-color: lighten( $base-theme-color, 5% );
210
        border-color: lighten($base-theme-color, 5%);
211
        border-color: lighten( $base-theme-color, 5% );
211
        box-shadow: none;
212
        box-shadow: none;
212
        color: #fff;
213
        color: #FFF;
213
        cursor: not-allowed;
214
        cursor: not-allowed;
215
214
        &:hover,
216
        &:hover,
215
        &.hover {
217
        &.hover {
216
            background-color: lighten($base-theme-color, 5%);
218
            background-color: lighten( $base-theme-color, 5% );
217
            border-color: lighten($base-theme-color, 5%);
219
            border-color: lighten( $base-theme-color, 5% );
218
            box-shadow: none;
220
            box-shadow: none;
219
            color: #fff;
221
            color: #FFF;
220
            cursor: not-allowed;
222
            cursor: not-allowed;
221
        }
223
        }
222
    }
224
    }
223
225
224
    &:not(:disabled):not(.disabled):active:focus,&
226
    &:not( :disabled, .disabled ):active:focus,
225
    &:not(:disabled):not(.disabled).active:focus {
227
    & &:not( :disabled, .disabled ).active:focus {
226
        box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%);
228
        box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% );
227
    }
229
    }
228
230
229
    &:not(:disabled):not(.disabled).active,
231
    &:not( :disabled, .disabled ).active,
230
    &:not(:disabled):not(.disabled):active,
232
    &:not( :disabled, .disabled ):active,
231
    &:not(:disabled):not(.disabled):focus,
233
    &:not( :disabled, .disabled ):focus,
232
    &:not(:disabled):not(.disabled).focus {
234
    &:not( :disabled, .disabled ).focus {
233
        background-color: lighten($base-theme-color, 5%);
235
        background-color: lighten( $base-theme-color, 5% );
234
        border-color: lighten($base-theme-color, 10%);
236
        border-color: lighten( $base-theme-color, 10% );
235
    }
237
    }
236
}
238
}
237
239
238
.show > .btn-primary.dropdown-toggle {
240
.show > .btn-primary.dropdown-toggle {
239
    background-color: lighten($base-theme-color, 5%);
241
    background-color: lighten( $base-theme-color, 5% );
240
    border-color: lighten($base-theme-color, 10%);
242
    border-color: lighten( $base-theme-color, 10% );
243
241
    &:focus {
244
    &:focus {
242
        box-shadow: 0 0 0 0.2rem lighten($base-theme-color, 10%);
245
        box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% );
243
    }
246
    }
244
}
247
}
245
248
246
.btn-danger {
249
.btn-danger {
247
    $base-bg: #B92020;
250
    $base-bg: #B92020;
251
248
    background-color: $base-bg;
252
    background-color: $base-bg;
249
    background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
253
    background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
250
    background-position: 0;
254
    background-position: 0;
251
    border: 1px solid darken( $base-bg, 5% );
255
    border: 1px solid darken( $base-bg, 5% );
252
    color: #FFF;
256
    color: #FFF;
Lines 258-281 caption { Link Here
258
262
259
    &:hover,
263
    &:hover,
260
    &:active {
264
    &:active {
261
        $base-bg: darken( $base-bg, 2);
265
        $base-bg: darken( $base-bg, 2 );
266
262
        background-color: $base-bg;
267
        background-color: $base-bg;
263
        background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
268
        background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
264
        color: #FFF;
269
        color: #FFF;
265
    }
270
    }
266
271
267
    &:focus {
272
    &:focus {
268
        box-shadow: 0 0 0 2px lighten($base-bg, 10%);
273
        box-shadow: 0 0 0 2px lighten( $base-bg, 10% );
269
    }
274
    }
270
}
275
}
271
276
272
.btn-default,
277
.btn-default,
273
.btn-secondary {
278
.btn-secondary {
274
    $base-bg: #e6e6e6;
279
    $base-bg: #E6E6E6;
280
275
    background-color: $base-bg;
281
    background-color: $base-bg;
276
    background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
282
    background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
277
    background-position: 0;
283
    background-position: 0;
278
    border: 1px solid darken($base-bg, 20%);
284
    border: 1px solid darken( $base-bg, 20% );
279
    color: #000;
285
    color: #000;
280
286
281
    &:link,
287
    &:link,
Lines 285-302 caption { Link Here
285
291
286
    &:hover,
292
    &:hover,
287
    &:active {
293
    &:active {
288
        $base-bg: darken($base-bg, 2);
294
        $base-bg: darken( $base-bg, 2 );
295
289
        background-color: $base-bg;
296
        background-color: $base-bg;
290
        background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
297
        background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
291
        color: #000;
298
        color: #000;
292
    }
299
    }
293
300
294
    &:focus {
301
    &:focus {
295
        box-shadow: 0 0 0 2px darken($base-bg, 10%);
302
        box-shadow: 0 0 0 2px darken( $base-bg, 10% );
296
    }
303
    }
297
304
298
    &:not(:disabled):not(.disabled):active,
305
    &:not( :disabled, .disabled ):active,
299
    &:not(:disabled):not(.disabled).active {
306
    &:not( :disabled, .disabled ).active {
300
        color: #000;
307
        color: #000;
301
    }
308
    }
302
}
309
}
Lines 308-314 textarea, Link Here
308
.form-control {
315
.form-control {
309
    &:focus {
316
    &:focus {
310
        border-color: $base-theme-color;
317
        border-color: $base-theme-color;
311
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
318
        box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 );
312
    }
319
    }
313
}
320
}
314
321
Lines 324-330 textarea, Link Here
324
    line-height: 20px;
331
    line-height: 20px;
325
    padding: 4px 12px;
332
    padding: 4px 12px;
326
    text-align: center;
333
    text-align: center;
327
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
334
    text-shadow: 0 1px 1px rgba( 255, 255, 255, .75 );
328
    vertical-align: middle;
335
    vertical-align: middle;
329
336
330
    &:hover {
337
    &:hover {
Lines 337-344 textarea, Link Here
337
344
338
    &::before {
345
    &::before {
339
        color: #4466AE;
346
        color: #4466AE;
340
        font-family: FontAwesome;
341
        display: inline-block;
347
        display: inline-block;
348
        font-family: FontAwesome;
342
        padding-right: .5em;
349
        padding-right: .5em;
343
    }
350
    }
344
351
Lines 349-365 textarea, Link Here
349
356
350
        &:hover {
357
        &:hover {
351
            color: #333;
358
            color: #333;
352
            filter: alpha(opacity=65);
359
            filter: alpha( opacity=65 );
353
            opacity: 0.65;
360
            opacity: .65;
354
        }
361
        }
355
362
356
        i {
363
        i {
357
358
            &.fa,
364
            &.fa,
359
            &.fa:hover {
365
            &.fa:hover {
360
                color: #333;
366
                color: #333;
361
                filter: alpha(opacity=65);
367
                filter: alpha( opacity=65 );
362
                opacity: 0.65;
368
                opacity: .65;
363
            }
369
            }
364
        }
370
        }
365
    }
371
    }
Lines 368-460 textarea, Link Here
368
div.dt-button-collection button.dt-button,
374
div.dt-button-collection button.dt-button,
369
div.dt-button-collection div.dt-button,
375
div.dt-button-collection div.dt-button,
370
div.dt-button-collection a.dt-button {
376
div.dt-button-collection a.dt-button {
371
    position: relative;
372
    left: 0;
373
    right: 0;
374
    width: 100%;
375
    display: block;
377
    display: block;
376
    float: none;
378
    float: none;
379
    left: 0;
377
    margin-bottom: 4px;
380
    margin-bottom: 4px;
378
    margin-right: 0;
381
    margin-right: 0;
382
    position: relative;
383
    right: 0;
384
    width: 100%;
379
}
385
}
380
386
381
div.dt-button-collection {
387
div.dt-button-collection {
382
    width: auto
388
    width: auto;
383
}
389
}
384
390
385
div.dt-button-collection button.dt-button {
391
div.dt-button-collection button.dt-button {
386
    border-radius: 2px;
392
    border-radius: 2px;
387
    text-align: left
393
    text-align: left;
388
}
394
}
389
395
390
div.dt-button-collection button.dt-button.buttons-collection {
396
div.dt-button-collection button.dt-button.buttons-collection {
391
    border: 0
397
    border: 0;
392
}
398
}
393
399
394
div.dt-button-collection button.dt-button.buttons-columnVisibility {
400
div.dt-button-collection button.dt-button.buttons-columnVisibility {
395
    background: #fff none;
401
    background: #FFF none;
396
    border: 1px solid #eee;
402
    border: 1px solid #EEE;
397
    box-shadow: none;
403
    box-shadow: none;
398
    font-size: 1em;
404
    font-size: 1em;
399
    margin: 0 0 4px;
405
    margin: 0 0 4px;
400
    padding: .3em .7em;
406
    padding: .3em .7em;
401
    text-shadow: none
407
    text-shadow: none;
402
}
408
}
403
409
404
div.dt-button-collection button.dt-button.buttons-columnVisibility:before {
410
div.dt-button-collection button.dt-button.buttons-columnVisibility::before {
405
    color: #c00;
411
    color: #C00;
406
    content: "\f00d";
412
    content: "\f00d";
407
    display: inline-block;
413
    display: inline-block;
408
    font-family: FontAwesome;
414
    font-family: FontAwesome;
409
    margin-right: .5em;
415
    margin-right: .5em;
410
    width: 1em
416
    width: 1em;
411
}
417
}
412
418
413
div.dt-button-collection button.dt-button.buttons-columnVisibility:hover {
419
div.dt-button-collection button.dt-button.buttons-columnVisibility:hover {
414
    background: #ffc none;
420
    background: #FFC none;
415
    border: 1px solid #999;
421
    border: 1px solid #999;
416
    box-shadow: none
422
    box-shadow: none;
417
}
423
}
418
424
419
div.dt-button-collection button.dt-button.buttons-columnVisibility:hover:before {
425
div.dt-button-collection button.dt-button.buttons-columnVisibility:hover::before {
420
    color: #538200;
426
    color: #538200;
421
    content: "\f00c";
427
    content: "\f00c";
422
    display: inline-block;
428
    display: inline-block;
423
    font-family: FontAwesome;
429
    font-family: FontAwesome;
424
    margin-right: .5em;
430
    margin-right: .5em;
425
    width: 1em
431
    width: 1em;
426
}
432
}
427
433
428
div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not(.disabled):hover:not(.disabled) {
434
div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not( .disabled ):hover:not( .disabled ) {
429
    background: transparent none;
435
    background: transparent none;
430
    box-shadow: none
436
    box-shadow: none;
431
}
437
}
432
438
433
div.dt-button-collection button.dt-button.buttons-columnVisibility.active {
439
div.dt-button-collection button.dt-button.buttons-columnVisibility.active {
434
    background: #e6f0f2 none;
440
    background: #E6F0F2 none;
435
    border-color: #999;
441
    border-color: #999;
436
    box-shadow: none
442
    box-shadow: none;
437
}
443
}
438
444
439
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover {
445
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover {
440
    background: #ffc none
446
    background: #FFC none;
441
}
447
}
442
448
443
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover:before {
449
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover::before {
444
    color: #c00;
450
    color: #C00;
445
    content: "\f00d";
451
    content: "\f00d";
446
    display: inline-block;
452
    display: inline-block;
447
    font-family: FontAwesome;
453
    font-family: FontAwesome;
448
    margin-right: .5em;
454
    margin-right: .5em;
449
    width: 1em
455
    width: 1em;
450
}
456
}
451
457
452
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not(.disabled):hover:not(.disabled) {
458
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not( .disabled ):hover:not( .disabled ) {
453
    background: transparent none;
459
    background: transparent none;
454
    box-shadow: none
460
    box-shadow: none;
455
}
461
}
456
462
457
div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before {
463
div.dt-button-collection button.dt-button.buttons-columnVisibility.active::before {
458
    color: $base-theme-color;
464
    color: $base-theme-color;
459
    content: "\f00c";
465
    content: "\f00c";
460
    display: inline-block;
466
    display: inline-block;
Lines 465-536 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:before Link Here
465
471
466
div.dt-button-collection button.dt-button.buttons-html5,
472
div.dt-button-collection button.dt-button.buttons-html5,
467
div.dt-button-collection button.dt-button.buttons-print {
473
div.dt-button-collection button.dt-button.buttons-print {
468
    background: #fff none;
474
    background: #FFF none;
469
    border: 1px solid #eee;
475
    border: 1px solid #EEE;
470
    box-shadow: none;
476
    box-shadow: none;
471
    font-size: 1.2em;
477
    font-size: 1.2em;
472
    margin: 0 0 4px;
478
    margin: 0 0 4px;
473
    padding: .3em .7em;
479
    padding: .3em .7em;
474
    text-shadow: none
480
    text-shadow: none;
475
}
481
}
476
482
477
div.dt-button-collection button.dt-button.buttons-html5:hover,
483
div.dt-button-collection button.dt-button.buttons-html5:hover,
478
div.dt-button-collection button.dt-button.buttons-print:hover {
484
div.dt-button-collection button.dt-button.buttons-print:hover {
479
    background: #ffc none
485
    background: #FFC none;
480
}
486
}
481
487
482
div.dt-button-collection button.dt-button.buttons-html5:not(.disabled):before {
488
div.dt-button-collection button.dt-button.buttons-html5:not( .disabled )::before {
483
    color: #222bac;
489
    color: #222BAC;
484
    display: inline-block;
490
    display: inline-block;
485
    font-family: FontAwesome;
491
    font-family: FontAwesome;
486
    margin-right: .5em;
492
    margin-right: .5em;
487
    width: 1em
493
    width: 1em;
488
}
494
}
489
495
490
div.dt-button-collection button.dt-button.buttons-excel:not(.disabled):before {
496
div.dt-button-collection button.dt-button.buttons-excel:not( .disabled )::before {
491
    content: "\f1c3"
497
    content: "\f1c3";
492
}
498
}
493
499
494
div.dt-button-collection button.dt-button.buttons-csv:not(.disabled):before {
500
div.dt-button-collection button.dt-button.buttons-csv:not( .disabled )::before {
495
    content: "\f0ce"
501
    content: "\f0ce";
496
}
502
}
497
503
498
div.dt-button-collection button.dt-button.buttons-copy:not(.disabled):before {
504
div.dt-button-collection button.dt-button.buttons-copy:not( .disabled )::before {
499
    content: "\f0c5"
505
    content: "\f0c5";
500
}
506
}
501
507
502
div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before {
508
div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before {
503
    color: #222bac;
509
    color: #222BAC;
504
    content: "\f02f";
510
    content: "\f02f";
505
    display: inline-block;
511
    display: inline-block;
506
    font-family: FontAwesome;
512
    font-family: FontAwesome;
507
    margin-right: .5em;
513
    margin-right: .5em;
508
    width: 1em
514
    width: 1em;
509
}
515
}
510
516
511
.dt-button-info {
517
.dt-button-info {
512
    position: fixed;
513
    top: 50%;
514
    left: 50%;
515
    width: 400px;
516
    margin-top: -100px;
517
    margin-left: -200px;
518
    background-color: #FFF;
518
    background-color: #FFF;
519
    border: 2px solid $links-hover;
519
    border: 2px solid $links-hover;
520
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
521
    border-radius: 3px;
520
    border-radius: 3px;
521
    box-shadow: 3px 3px 8px rgba( 0, 0, 0, .3 );
522
    left: 50%;
523
    margin-left: -200px;
524
    margin-top: -100px;
525
    position: fixed;
522
    text-align: center;
526
    text-align: center;
527
    top: 50%;
528
    width: 400px;
523
    z-index: 21;
529
    z-index: 21;
524
530
525
    h2 {
531
    h2 {
526
        padding: 0.5em;
532
        background-color: #F3F3F3;
527
        margin: 0;
533
        border-bottom: 1px solid #DDD;
528
        font-weight: normal;
534
        font-weight: normal;
529
        border-bottom: 1px solid #ddd;
535
        margin: 0;
530
        background-color: #f3f3f3;
536
        padding: .5em;
531
    }
537
    }
532
538
533
    &>div {
539
    & > div {
534
        padding: 1em;
540
        padding: 1em;
535
    }
541
    }
536
}
542
}
Lines 591-596 div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { Link Here
591
        input {
597
        input {
592
            @extend .form-control;
598
            @extend .form-control;
593
            @extend .form-control-sm;
599
            @extend .form-control-sm;
600
594
            display: inline-block;
601
            display: inline-block;
595
            width: auto;
602
            width: auto;
596
603
Lines 602-633 div.dt-button-collection button.dt-button.buttons-print:not(.disabled):before { Link Here
602
}
609
}
603
610
604
.table_entries {
611
.table_entries {
612
    color: #797979;
613
    font-size: 90%;
605
    margin-left: 5px;
614
    margin-left: 5px;
606
    padding: 5px 0;
615
    padding: 5px 0;
607
    font-size: 90%;
608
    color: #797979;
609
}
616
}
610
617
611
[class^="icon-"] {
618
[class^="icon-"] {
612
    vertical-align: 0;
619
    vertical-align: 0;
613
}
620
}
621
614
[class*=" icon-"] {
622
[class*=" icon-"] {
615
    vertical-align: 0;
623
    vertical-align: 0;
616
}
624
}
617
625
618
.table {
626
.table {
619
    .sorting_asc {
627
    .sorting_asc {
620
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+") no-repeat scroll 100% 80% #E2E8E8;
628
        background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8;
621
        padding-right: 19px;
629
        padding-right: 19px;
622
    }
630
    }
623
631
624
    .sorting_desc {
632
    .sorting_desc {
625
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=") no-repeat scroll 100% 80% #E2E8E8;
633
        background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8;
626
        padding-right: 19px;
634
        padding-right: 19px;
627
    }
635
    }
628
636
629
    .sorting {
637
    .sorting {
630
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==") no-repeat scroll 100% 75% #E2E8E8;
638
        background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8;
631
        padding-right: 19px;
639
        padding-right: 19px;
632
    }
640
    }
633
641
Lines 691-696 ul { Link Here
691
699
692
                &.ui-state-hover {
700
                &.ui-state-hover {
693
                    background: #FFF none;
701
                    background: #FFF none;
702
694
                    &.ui-state-active {
703
                    &.ui-state-active {
695
                        background: #FFF none;
704
                        background: #FFF none;
696
                    }
705
                    }
Lines 744-760 ul { Link Here
744
}
753
}
745
754
746
.ui-corner-top {
755
.ui-corner-top {
747
    border-radius: 0px;
756
    border-radius: 0;
748
}
757
}
749
758
750
.statictabs {
759
.statictabs {
751
    ul {
760
    ul {
752
        background: none repeat scroll 0 0 transparent;
761
        background: none repeat scroll 0 0 transparent;
753
        border: 0 none;
762
        border: 0 none;
754
        border-bottom-left-radius: 4px;
763
        border-radius: 4px;
755
        border-bottom-right-radius: 4px;
756
        border-top-left-radius: 4px;
757
        border-top-right-radius: 4px;
758
        color: #222222;
764
        color: #222222;
759
        font-size: 100%;
765
        font-size: 100%;
760
        font-weight: bold;
766
        font-weight: bold;
Lines 905-911 ul { Link Here
905
911
906
.tab-content {
912
.tab-content {
907
    background-color: #FFF;
913
    background-color: #FFF;
908
    border: 1px solid #d8d8d8;
914
    border: 1px solid #D8D8D8;
909
    border-top-width: 0;
915
    border-top-width: 0;
910
    margin-bottom: 1em;
916
    margin-bottom: 1em;
911
    padding: 1em;
917
    padding: 1em;
Lines 913-931 ul { Link Here
913
919
914
.nav-tabs {
920
.nav-tabs {
915
    .nav-link {
921
    .nav-link {
916
        background-color: #f0f3f3;
922
        background-color: #F0F3F3;
917
        border: 1px solid #d8d8d8;
923
        border: 1px solid #D8D8D8;
918
        border-radius: 0;
924
        border-radius: 0;
919
        margin-right: .4em;
925
        margin-right: .4em;
920
926
921
        &:hover,
927
        &:hover,
922
        &:focus {
928
        &:focus {
923
            border-color: #d8d8d8;
929
            border-color: #D8D8D8;
924
        }
930
        }
925
931
926
        &.active {
932
        &.active {
927
            background-color: #fff;
933
            background-color: #FFF;
928
            border: 1px solid #d8d8d8;
934
            border: 1px solid #D8D8D8;
929
            border-bottom-color: transparent;
935
            border-bottom-color: transparent;
930
            color: #000;
936
            color: #000;
931
            cursor: default;
937
            cursor: default;
Lines 956-961 ul { Link Here
956
}
962
}
957
963
958
/* Redefine a new style for Bootstrap's class "close" since we use that already */
964
/* Redefine a new style for Bootstrap's class "close" since we use that already */
965
959
/* Use <a class="closebtn" href="#">&times;</a> */
966
/* Use <a class="closebtn" href="#">&times;</a> */
960
967
961
.modal-header .closebtn {
968
.modal-header .closebtn {
Lines 993-999 button { Link Here
993
1000
994
            i {
1001
            i {
995
                &.fa {
1002
                &.fa {
996
                    color: #c60000;
1003
                    color: #C60000;
997
                }
1004
                }
998
            }
1005
            }
999
        }
1006
        }
Lines 1009-1015 button { Link Here
1009
    }
1016
    }
1010
1017
1011
    &:focus {
1018
    &:focus {
1012
        box-shadow: 0 0 0 1px lighten($links, 20%);
1019
        box-shadow: 0 0 0 1px lighten( $links, 20% );
1013
    }
1020
    }
1014
1021
1015
    &.btn-lg {
1022
    &.btn-lg {
Lines 1020-1031 button { Link Here
1020
.btn.disabled,
1027
.btn.disabled,
1021
.btn[disabled] {
1028
.btn[disabled] {
1022
    &:hover {
1029
    &:hover {
1023
        opacity: 0.65;
1030
        opacity: .65;
1024
    }
1031
    }
1032
1025
    i {
1033
    i {
1026
        &.fa,
1034
        &.fa,
1027
        &.fa:hover {
1035
        &.fa:hover {
1028
            opacity: 0.65;
1036
            opacity: .65;
1029
        }
1037
        }
1030
    }
1038
    }
1031
}
1039
}
Lines 1054-1059 button { Link Here
1054
        padding: 40px 0 0;
1062
        padding: 40px 0 0;
1055
        text-decoration: none;
1063
        text-decoration: none;
1056
        width: 100px;
1064
        width: 100px;
1065
1057
        &:focus {
1066
        &:focus {
1058
            background-color: transparent;
1067
            background-color: transparent;
1059
        }
1068
        }
Lines 1063-1071 button { Link Here
1063
#changelanguage {
1072
#changelanguage {
1064
    background-color: #FFF;
1073
    background-color: #FFF;
1065
    border-top: 1px solid #EEE;
1074
    border-top: 1px solid #EEE;
1066
    padding: 0 1rem;
1075
    clear: both;
1067
    flex-shrink: 0;
1076
    flex-shrink: 0;
1068
1077
1078
    // Set the fixed height of the footer here
1079
    min-height: $footer-height;
1080
    padding: 0 1rem;
1081
1082
    .nav {
1083
        > .active {
1084
            > p {
1085
                padding: 0 15px;
1086
            }
1087
        }
1088
    }
1089
1069
    .navbar-text {
1090
    .navbar-text {
1070
        font-weight: bold;
1091
        font-weight: bold;
1071
    }
1092
    }
Lines 1079-1085 button { Link Here
1079
    option,
1100
    option,
1080
    select,
1101
    select,
1081
    textarea {
1102
    textarea {
1082
        font-family: "NotoSans", sans-serif;
1103
        font-family: NotoSans, sans-serif;
1083
    }
1104
    }
1084
}
1105
}
1085
1106
Lines 1206-1231 button { Link Here
1206
    height: auto !important;
1227
    height: auto !important;
1207
    height: 100%;
1228
    height: 100%;
1208
    margin: 0 auto -#{$footer-height + 1};
1229
    margin: 0 auto -#{$footer-height + 1};
1230
1209
    // Negative indent footer by its height
1231
    // Negative indent footer by its height
1210
    min-height: 100%;
1232
    min-height: 100%;
1211
    padding-left: 40px;
1233
    padding-left: 40px;
1212
    padding-right: 40px;
1234
    padding-right: 40px;
1213
}
1235
}
1214
1236
1215
#changelanguage {
1216
    clear: both;
1217
    // Set the fixed height of the footer here
1218
    min-height: $footer-height;
1219
1220
    .nav {
1221
        > .active {
1222
            > p {
1223
                padding: 0 15px;
1224
            }
1225
        }
1226
    }
1227
}
1228
1229
#i18nMenu {
1237
#i18nMenu {
1230
    margin-left: 1em;
1238
    margin-left: 1em;
1231
1239
Lines 1233-1238 button { Link Here
1233
        font-size: 85%;
1241
        font-size: 85%;
1234
1242
1235
        a {
1243
        a {
1244
            color: $links;
1245
1236
            &:hover {
1246
            &:hover {
1237
                color: $base-theme-color;
1247
                color: $base-theme-color;
1238
            }
1248
            }
Lines 1248-1258 button { Link Here
1248
                    color: #FFF;
1258
                    color: #FFF;
1249
                }
1259
                }
1250
            }
1260
            }
1251
1252
        }
1253
1254
        a {
1255
            color: $links;
1256
        }
1261
        }
1257
    }
1262
    }
1258
1263
Lines 1271-1283 button { Link Here
1271
}
1276
}
1272
1277
1273
.dropdown-menu {
1278
.dropdown-menu {
1274
    border-radius: 0px;
1279
    border-radius: 0;
1280
1275
    > li {
1281
    > li {
1276
        > a {
1282
        > a {
1277
            font-size: 90%;
1283
            font-size: 90%;
1284
1278
            &:hover {
1285
            &:hover {
1279
                background: $base-theme-color none;
1286
                background: $base-theme-color none;
1280
            }
1287
            }
1288
1281
            &:focus {
1289
            &:focus {
1282
                background: $base-theme-color none;
1290
                background: $base-theme-color none;
1283
            }
1291
            }
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr.scss (-287 / +179 lines)
Lines 1-70 Link Here
1
@import "flatpickr_vars";
1
@import "flatpickr_vars";
2
2
3
@-webkit-keyframes fpFadeInDown {
4
    from {
5
        opacity: 0;
6
        transform: translate3d(0, -20px, 0);
7
    }
8
9
    to {
10
        opacity: 1;
11
        transform: translate3d(0, 0, 0);
12
    }
13
}
14
15
@-moz-keyframes fpFadeInDown {
16
    from {
17
        opacity: 0;
18
        transform: translate3d(0, -20px, 0);
19
    }
20
21
    to {
22
        opacity: 1;
23
        transform: translate3d(0, 0, 0);
24
    }
25
}
26
27
@-ms-keyframes fpFadeInDown {
28
    from {
29
        opacity: 0;
30
        transform: translate3d(0, -20px, 0);
31
    }
32
33
    to {
34
        opacity: 1;
35
        transform: translate3d(0, 0, 0);
36
    }
37
}
38
39
@-o-keyframes fpFadeInDown {
40
    from {
41
        opacity: 0;
42
        transform: translate3d(0, -20px, 0);
43
    }
44
45
    to {
46
        opacity: 1;
47
        transform: translate3d(0, 0, 0);
48
    }
49
}
50
51
@keyframes fpFadeInDown {
3
@keyframes fpFadeInDown {
52
    from {
4
    from {
53
        opacity: 0;
5
        opacity: 0;
54
        transform: translate3d(0, -20px, 0);
6
        transform: translate3d( 0, -20px, 0 );
55
    }
7
    }
56
8
57
    to {
9
    to {
58
        opacity: 1;
10
        opacity: 1;
59
        transform: translate3d(0, 0, 0);
11
        transform: translate3d( 0, 0, 0 );
60
    }
12
    }
61
}
13
}
62
14
63
.flatpickr-calendar {
15
.flatpickr-calendar {
64
    animation: none;
16
    animation: none;
65
    background: transparent;
17
    background: transparent;
66
    border-radius: 5px;
67
    border: 0;
18
    border: 0;
19
    border-radius: 5px;
68
    box-sizing: border-box;
20
    box-sizing: border-box;
69
    direction: ltr;
21
    direction: ltr;
70
    display: none;
22
    display: none;
Lines 80-98 Link Here
80
    width: $calendarWidth;
32
    width: $calendarWidth;
81
33
82
    @if variable-exists( "noCalendarBorder" ) {
34
    @if variable-exists( "noCalendarBorder" ) {
83
        box-shadow: 0 3px 13px rgba(black, 0.08);
35
        box-shadow: 0 3px 13px rgb( #000 .08 );
84
    }
36
    } @else {
85
86
    @else {
87
88
        background: $calendarBackground;
37
        background: $calendarBackground;
89
        box-shadow: 1px 1px 3px 0 #666;
38
        box-shadow: 1px 1px 3px 0 #666;
90
    }
39
    }
91
40
92
    &.open,
41
    &.open,
93
    &.inline {
42
    &.inline {
94
        opacity: 1;
95
        max-height: 640px;
43
        max-height: 640px;
44
        opacity: 1;
96
        visibility: visible;
45
        visibility: visible;
97
    }
46
    }
98
47
Lines 113-136 Link Here
113
62
114
    &.static {
63
    &.static {
115
        position: absolute;
64
        position: absolute;
116
        top: calc(100% + 2px);
65
        top: calc( 100% + 2px );
117
66
118
        &.open {
67
        &.open {
119
            z-index: 999;
120
            display: block;
68
            display: block;
69
            z-index: 999;
121
        }
70
        }
122
    }
71
    }
123
72
124
    &.multiMonth {
73
    &.multiMonth {
125
        .flatpickr-days .dayContainer:nth-child(n+1) {
74
        .flatpickr-days .dayContainer:nth-child( n+1 ) {
126
            & .flatpickr-day.inRange:nth-child(7n+7) {
75
            & .flatpickr-day.inRange:nth-child( 7n+7 ) {
127
                box-shadow: none !important;
76
                box-shadow: none !important;
128
            }
77
            }
129
        }
78
        }
130
79
131
        .flatpickr-days .dayContainer:nth-child(n+2) {
80
        .flatpickr-days .dayContainer:nth-child( n+2 ) {
132
            & .flatpickr-day.inRange:nth-child(7n+1) {
81
            & .flatpickr-day.inRange:nth-child( 7n+1 ) {
133
                box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
82
                box-shadow: -2px 0 0 #E6E6E6, 5px 0 0 #E6E6E6;
134
            }
83
            }
135
        }
84
        }
136
    }
85
    }
Lines 139-146 Link Here
139
    .hasTime {
88
    .hasTime {
140
        .dayContainer {
89
        .dayContainer {
141
            border-bottom: 0;
90
            border-bottom: 0;
142
            border-bottom-right-radius: 0;
143
            border-bottom-left-radius: 0;
91
            border-bottom-left-radius: 0;
92
            border-bottom-right-radius: 0;
144
        }
93
        }
145
    }
94
    }
146
95
Lines 152-159 Link Here
152
101
153
    &.hasTime {
102
    &.hasTime {
154
        .flatpickr-time {
103
        .flatpickr-time {
155
            height: $timeHeight;
156
            border-top: 1px solid $calendarBorderColor;
104
            border-top: 1px solid $calendarBorderColor;
105
            height: $timeHeight;
157
        }
106
        }
158
107
159
        @if variable-exists( "noCalendarBorder" ) {
108
        @if variable-exists( "noCalendarBorder" ) {
Lines 173-258 Link Here
173
        }
122
        }
174
    }
123
    }
175
124
176
    &:before,
125
    &::before,
177
    &:after {
126
    &::after {
178
        position: absolute;
179
        display: block;
180
        pointer-events: none;
181
        border: solid transparent;
127
        border: solid transparent;
182
        content: '';
128
        content: "";
129
        display: block;
183
        height: 0;
130
        height: 0;
184
        width: 0;
185
        left: 22px;
131
        left: 22px;
132
        pointer-events: none;
133
        position: absolute;
134
        width: 0;
186
    }
135
    }
187
136
188
    &.rightMost,
137
    &.rightMost,
189
    &.arrowRight {
138
    &.arrowRight {
190
139
        &::before,
191
        &:before,
140
        &::after {
192
        &:after {
193
            left: auto;
141
            left: auto;
194
            right: 22px;
142
            right: 22px;
195
        }
143
        }
196
    }
144
    }
197
145
198
    &.arrowCenter {
146
    &.arrowCenter {
199
147
        &::before,
200
        &:before,
148
        &::after {
201
        &:after {
202
            left: 50%;
149
            left: 50%;
203
            right: 50%;
150
            right: 50%;
204
        }
151
        }
205
    }
152
    }
206
153
207
    &:before {
154
    &::before {
208
        border-width: 5px;
155
        border-width: 5px;
209
        margin: 0 -5px;
156
        margin: 0 -5px;
210
    }
157
    }
211
158
212
    &:after {
159
    &::after {
213
        border-width: 4px;
160
        border-width: 4px;
214
        margin: 0 -4px;
161
        margin: 0 -4px;
215
    }
162
    }
216
163
217
    &.arrowTop {
164
    &.arrowTop {
218
165
        &::before,
219
        &:before,
166
        &::after {
220
        &:after {
221
            bottom: 100%;
167
            bottom: 100%;
222
        }
168
        }
223
169
224
        &:before {
170
        &::before {
225
            border-bottom-color: $calendarBorderColor;
171
            border-bottom-color: $calendarBorderColor;
226
        }
172
        }
227
173
228
        &:after {
174
        &::after {
229
            @if variable-exists( "noCalendarBorder" ) {
175
            @if variable-exists( "noCalendarBorder" ) {
230
                border-bottom-color: $monthBackground;
176
                border-bottom-color: $monthBackground;
231
            }
177
            } @else {
232
233
            @else {
234
                border-bottom-color: $calendarBackground;
178
                border-bottom-color: $calendarBackground;
235
            }
179
            }
236
        }
180
        }
237
    }
181
    }
238
182
239
    &.arrowBottom {
183
    &.arrowBottom {
240
184
        &::before,
241
        &:before,
185
        &::after {
242
        &:after {
243
            top: 100%;
186
            top: 100%;
244
        }
187
        }
245
188
246
        &:before {
189
        &::before {
247
            border-top-color: $calendarBorderColor;
190
            border-top-color: $calendarBorderColor;
248
        }
191
        }
249
192
250
        &:after {
193
        &::after {
251
            @if variable-exists( "noCalendarBorder" ) {
194
            @if variable-exists( "noCalendarBorder" ) {
252
                border-top-color: $monthBackground;
195
                border-top-color: $monthBackground;
253
            }
196
            } @else {
254
255
            @else {
256
                border-top-color: $calendarBackground;
197
                border-top-color: $calendarBackground;
257
            }
198
            }
258
        }
199
        }
Lines 264-271 Link Here
264
}
205
}
265
206
266
.flatpickr-wrapper {
207
.flatpickr-wrapper {
267
    position: relative;
268
    display: inline-block;
208
    display: inline-block;
209
    position: relative;
269
}
210
}
270
211
271
.flatpickr-months {
212
.flatpickr-months {
Lines 279-304 Link Here
279
        background: $monthBackground;
220
        background: $monthBackground;
280
        color: $monthForeground;
221
        color: $monthForeground;
281
        fill: $monthForeground;
222
        fill: $monthForeground;
223
        flex: 1;
282
        height: $monthNavHeight;
224
        height: $monthNavHeight;
283
        line-height: 1;
225
        line-height: 1;
284
        text-align: center;
226
        overflow: hidden;
285
        position: relative;
227
        position: relative;
228
        text-align: center;
286
        user-select: none;
229
        user-select: none;
287
        overflow: hidden;
288
        flex: 1;
289
    }
230
    }
290
231
291
    .flatpickr-prev-month,
232
    .flatpickr-prev-month,
292
    .flatpickr-next-month {
233
    .flatpickr-next-month {
293
        text-decoration: none;
234
        color: $monthForeground;
294
        cursor: pointer;
235
        cursor: pointer;
295
        position: absolute;
236
        fill: $monthForeground;
296
        top: 0;
297
        height: $monthNavHeight;
237
        height: $monthNavHeight;
298
        padding: 10px;
238
        padding: 10px;
239
        position: absolute;
240
        text-decoration: none;
241
        top: 0;
299
        z-index: 3;
242
        z-index: 3;
300
        color: $monthForeground;
301
        fill: $monthForeground;
302
243
303
        &.flatpickr-disabled {
244
        &.flatpickr-disabled {
304
            display: none;
245
            display: none;
Lines 309-367 Link Here
309
        }
250
        }
310
251
311
        &.flatpickr-prev-month {
252
        &.flatpickr-prev-month {
312
            /*!
313
      /*rtl:begin:ignore*/
314
            /*
315
      */
316
            left: 0;
253
            left: 0;
317
            /*!
318
      /*rtl:end:ignore*/
319
            /*
320
      */
321
        }
254
        }
322
255
323
        &.flatpickr-next-month {
256
        &.flatpickr-next-month {
324
            /*!
325
      /*rtl:begin:ignore*/
326
            /*
327
      */
328
            right: 0;
257
            right: 0;
329
            /*!
330
      /*rtl:end:ignore*/
331
            /*
332
      */
333
        }
258
        }
334
259
335
        &:hover {
260
        &:hover {
336
            color: $todayColor;
261
            color: $todayColor;
337
262
338
            svg {
263
            svg {
339
                @if variable-exists( "arrow_hover_color" ){
264
                @if variable-exists( "arrow_hover_color" ) {
340
                    fill: $arrow_hover_color;
265
                    fill: $arrow_hover_color;
341
                }
266
                } @else {
342
343
                @else {
344
345
                    fill: $todayColor;
267
                    fill: $todayColor;
346
                }
268
                }
347
            }
269
            }
348
        }
270
        }
349
271
350
        svg {
272
        svg {
351
            width: 14px;
352
            height: 14px;
273
            height: 14px;
274
            width: 14px;
353
275
354
            path {
276
            path {
355
                transition: fill 0.1s;
356
                fill: inherit;
277
                fill: inherit;
278
                transition: fill .1s;
357
            }
279
            }
358
        }
280
        }
359
    }
281
    }
360
}
282
}
361
283
362
.numInputWrapper {
284
.numInputWrapper {
363
    position: relative;
364
    height: auto;
285
    height: auto;
286
    position: relative;
365
287
366
    input,
288
    input,
367
    span {
289
    span {
Lines 377-421 Link Here
377
299
378
        &::-webkit-outer-spin-button,
300
        &::-webkit-outer-spin-button,
379
        &::-webkit-inner-spin-button {
301
        &::-webkit-inner-spin-button {
302
            appearance: none;
380
            margin: 0;
303
            margin: 0;
381
            -webkit-appearance: none;
382
        }
304
        }
383
    }
305
    }
384
306
385
    span {
307
    span {
386
        position: absolute;
308
        border: 1px solid rgba( $dayForeground, .15 );
387
        right: 0;
309
        box-sizing: border-box;
388
        width: $timecontrols;
310
        cursor: pointer;
389
        padding: 0 4px 0 2px;
390
        height: 50%;
311
        height: 50%;
391
        line-height: 50%;
312
        line-height: 50%;
392
        opacity: 0;
313
        opacity: 0;
393
        cursor: pointer;
314
        padding: 0 4px 0 2px;
394
        border: 1px solid rgba($dayForeground, 0.15);
315
        position: absolute;
395
        box-sizing: border-box;
316
        right: 0;
317
        width: $timecontrols;
396
318
397
        &:hover {
319
        &:hover {
398
            background: rgba($invertedBg, 0.1);
320
            background: rgba( $invertedBg, .1 );
399
        }
321
        }
400
322
401
        &:active {
323
        &:active {
402
            background: rgba($invertedBg, 0.2);
324
            background: rgba( $invertedBg, .2 );
403
        }
325
        }
404
326
405
        &:after {
327
        &::after {
406
            display: block;
407
            content: "";
328
            content: "";
329
            display: block;
408
            position: absolute;
330
            position: absolute;
409
        }
331
        }
410
332
411
        &.arrowUp {
333
        &.arrowUp {
412
            top: 0;
413
            border-bottom: 0;
334
            border-bottom: 0;
335
            top: 0;
414
336
415
            &:after {
337
            &::after {
338
                border-bottom: 4px solid rgba( $dayForeground, .6 );
416
                border-left: 4px solid transparent;
339
                border-left: 4px solid transparent;
417
                border-right: 4px solid transparent;
340
                border-right: 4px solid transparent;
418
                border-bottom: 4px solid rgba($dayForeground, 0.6);
419
                top: 26%;
341
                top: 26%;
420
            }
342
            }
421
        }
343
        }
Lines 423-448 Link Here
423
        &.arrowDown {
345
        &.arrowDown {
424
            top: 50%;
346
            top: 50%;
425
347
426
            &:after {
348
            &::after {
427
                border-left: 4px solid transparent;
349
                border-left: 4px solid transparent;
428
                border-right: 4px solid transparent;
350
                border-right: 4px solid transparent;
429
                border-top: 4px solid rgba($dayForeground, 0.6);
351
                border-top: 4px solid rgba( $dayForeground, .6 );
430
                top: 40%;
352
                top: 40%;
431
            }
353
            }
432
        }
354
        }
433
355
434
        svg {
356
        svg {
435
            width: inherit;
436
            height: auto;
357
            height: auto;
358
            width: inherit;
437
359
438
            path {
360
            path {
439
                fill: rgba($monthForeground, 0.5);
361
                fill: rgba( $monthForeground, .5 );
440
            }
362
            }
441
        }
363
        }
442
    }
364
    }
443
365
444
    &:hover {
366
    &:hover {
445
        background: rgba($invertedBg, 0.05);
367
        background: rgba( $invertedBg, .05 );
446
368
447
        span {
369
        span {
448
            opacity: 1;
370
            opacity: 1;
Lines 451-515 Link Here
451
}
373
}
452
374
453
.flatpickr-current-month {
375
.flatpickr-current-month {
376
    color: inherit;
377
    display: inline-block;
454
    font-size: 135%;
378
    font-size: 135%;
455
    line-height: inherit;
456
    font-weight: 300;
379
    font-weight: 300;
457
    color: inherit;
380
    height: $monthNavHeight;
458
    position: absolute;
459
    width: 75%;
460
    left: 12.5%;
381
    left: 12.5%;
461
    padding: 0.22 * $monthNavHeight 0 0 0;
382
    line-height: inherit;
462
    line-height: 1;
383
    line-height: 1;
463
    height: $monthNavHeight;
384
    padding: .22 * $monthNavHeight 0 0 0;
464
    display: inline-block;
385
    position: absolute;
465
    text-align: center;
386
    text-align: center;
466
    transform: translate3d(0px, 0px, 0px);
387
    transform: translate3d( 0, 0, 0 );
388
    width: 75%;
467
389
468
    span.cur-month {
390
    span.cur-month {
469
        font-family: inherit;
470
        font-weight: 700;
471
        color: inherit;
391
        color: inherit;
472
        display: inline-block;
392
        display: inline-block;
473
        margin-left: 0.5ch;
393
        font-family: inherit;
394
        font-weight: 700;
395
        margin-left: .5ch;
474
        padding: 0;
396
        padding: 0;
475
397
476
        &:hover {
398
        &:hover {
477
            background: rgba($invertedBg, 0.05);
399
            background: rgba( $invertedBg, .05 );
478
        }
400
        }
479
    }
401
    }
480
402
481
    .numInputWrapper {
403
    .numInputWrapper {
482
        width: 8ch;
483
        display: inline-block;
404
        display: inline-block;
405
        width: 8ch;
484
406
485
        span.arrowUp:after {
407
        span.arrowUp::after {
486
            border-bottom-color: $monthForeground;
408
            border-bottom-color: $monthForeground;
487
        }
409
        }
488
410
489
        span.arrowDown:after {
411
        span.arrowDown::after {
490
            border-top-color: $monthForeground;
412
            border-top-color: $monthForeground;
491
        }
413
        }
492
    }
414
    }
493
415
494
    input.cur-year {
416
    input.cur-year {
417
        appearance: textfield;
495
        background: transparent;
418
        background: transparent;
419
        border: 0;
420
        border-radius: 0;
496
        box-sizing: border-box;
421
        box-sizing: border-box;
497
        color: inherit;
422
        color: inherit;
498
        cursor: text;
423
        cursor: text;
499
        padding: 0 0 0 0.5ch;
500
        margin: 0;
501
        display: inline-block;
424
        display: inline-block;
502
        font-size: inherit;
503
        font-family: inherit;
425
        font-family: inherit;
426
        font-size: inherit;
504
        font-weight: 300;
427
        font-weight: 300;
505
        line-height: inherit;
506
        height: auto;
428
        height: auto;
507
        border: 0;
429
        line-height: inherit;
508
        border-radius: 0;
430
        margin: 0;
431
        padding: 0 0 0 .5ch;
509
        vertical-align: initial;
432
        vertical-align: initial;
510
        -webkit-appearance: textfield;
511
        -moz-appearance: textfield;
512
        appearance: textfield;
513
433
514
        &:focus {
434
        &:focus {
515
            outline: 0;
435
            outline: 0;
Lines 517-532 Link Here
517
437
518
        &[disabled],
438
        &[disabled],
519
        &[disabled]:hover {
439
        &[disabled]:hover {
520
            font-size: 100%;
521
            color: rgba($monthForeground, 0.5);
522
            background: transparent;
440
            background: transparent;
441
            color: rgba( $monthForeground, .5 );
442
            font-size: 100%;
523
            pointer-events: none;
443
            pointer-events: none;
524
        }
444
        }
525
    }
445
    }
526
446
527
    .flatpickr-monthDropdown-months {
447
    .flatpickr-monthDropdown-months {
528
        appearance: none;
448
        appearance: none;
529
        background-image: url('data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e');
449
        background-image: url( 'data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e' );
530
        background-position: 100% 50%;
450
        background-position: 100% 50%;
531
        background-repeat: no-repeat;
451
        background-repeat: no-repeat;
532
        background-size: 24px 24px;
452
        background-size: 24px 24px;
Lines 535-542 Link Here
535
        box-sizing: border-box;
455
        box-sizing: border-box;
536
        color: inherit;
456
        color: inherit;
537
        cursor: pointer;
457
        cursor: pointer;
538
        font-size: 90%;
539
        font-family: inherit;
458
        font-family: inherit;
459
        font-size: 90%;
540
        font-weight: 300;
460
        font-weight: 300;
541
        height: auto;
461
        height: auto;
542
        line-height: 120%;
462
        line-height: 120%;
Lines 561-573 Link Here
561
}
481
}
562
482
563
.flatpickr-weekdays {
483
.flatpickr-weekdays {
484
    align-items: center;
564
    background: $weekdaysBackground;
485
    background: $weekdaysBackground;
565
    text-align: center;
566
    overflow: hidden;
567
    width: 100%;
568
    display: flex;
486
    display: flex;
569
    align-items: center;
570
    height: $weekdaysHeight;
487
    height: $weekdaysHeight;
488
    overflow: hidden;
489
    text-align: center;
490
    width: 100%;
571
491
572
    .flatpickr-weekdaycontainer {
492
    .flatpickr-weekdaycontainer {
573
        display: flex;
493
        display: flex;
Lines 575-593 Link Here
575
    }
495
    }
576
}
496
}
577
497
578
579
580
span.flatpickr-weekday {
498
span.flatpickr-weekday {
581
    cursor: default;
582
    font-size: 90%;
583
    background: $monthBackground;
499
    background: $monthBackground;
584
    color: $weekdaysForeground;
500
    color: $weekdaysForeground;
585
    line-height: 1;
501
    cursor: default;
586
    margin: 0;
587
    text-align: center;
588
    display: block;
502
    display: block;
589
    flex: 1;
503
    flex: 1;
504
    font-size: 90%;
590
    font-weight: bolder;
505
    font-weight: bolder;
506
    line-height: 1;
507
    margin: 0;
508
    text-align: center;
591
}
509
}
592
510
593
.dayContainer,
511
.dayContainer,
Lines 596-605 span.flatpickr-weekday { Link Here
596
}
514
}
597
515
598
.flatpickr-days {
516
.flatpickr-days {
599
    position: relative;
600
    overflow: hidden;
601
    display: flex;
602
    align-items: flex-start;
517
    align-items: flex-start;
518
    display: flex;
519
    overflow: hidden;
520
    position: relative;
603
    width: $daysWidth;
521
    width: $daysWidth;
604
522
605
    &:focus {
523
    &:focus {
Lines 613-636 span.flatpickr-weekday { Link Here
613
}
531
}
614
532
615
.dayContainer {
533
.dayContainer {
616
    padding: 0;
617
    outline: 0;
618
    text-align: left;
619
    width: $daysWidth;
620
    min-width: $daysWidth;
621
    max-width: $daysWidth;
622
    box-sizing: border-box;
534
    box-sizing: border-box;
623
    display: inline-block;
535
    display: inline-block;
624
    display: -ms-flexbox;
625
    display: flex;
536
    display: flex;
626
    flex-wrap: wrap;
537
    flex-wrap: wrap;
627
    -ms-flex-wrap: wrap;
628
    -ms-flex-pack: justify;
629
    justify-content: space-around;
538
    justify-content: space-around;
630
    transform: translate3d(0px, 0px, 0px);
539
    max-width: $daysWidth;
540
    min-width: $daysWidth;
631
    opacity: 1;
541
    opacity: 1;
542
    outline: 0;
543
    padding: 0;
544
    text-align: left;
545
    transform: translate3d( 0, 0, 0 );
546
    width: $daysWidth;
632
547
633
    &+.dayContainer {
548
    & + .dayContainer {
634
        box-shadow: -1px 0 0 $calendarBorderColor;
549
        box-shadow: -1px 0 0 $calendarBorderColor;
635
    }
550
    }
636
}
551
}
Lines 638-673 span.flatpickr-weekday { Link Here
638
.flatpickr-day {
553
.flatpickr-day {
639
    background: none;
554
    background: none;
640
    border: 1px solid transparent;
555
    border: 1px solid transparent;
641
    border-radius: 150px;
556
    border-radius: 0;
642
    box-sizing: border-box;
557
    box-sizing: border-box;
643
    color: $dayForeground;
558
    color: $dayForeground;
644
    cursor: pointer;
559
    cursor: pointer;
645
560
    display: inline-block;
561
    flex-basis: 14.2857%;
646
    font-weight: 400;
562
    font-weight: 400;
647
    width: 14.2857143%;
648
    flex-basis: 14.2857143%;
649
    max-width: $daySize;
650
    height: $daySize;
563
    height: $daySize;
564
    justify-content: center;
651
    line-height: $daySize;
565
    line-height: $daySize;
652
    margin: 0;
566
    margin: 0;
653
567
    max-width: $daySize;
654
    display: inline-block;
655
    position: relative;
568
    position: relative;
656
    justify-content: center;
657
    text-align: center;
569
    text-align: center;
570
    width: 14.2857%;
658
571
659
    &,
572
    &,
660
    &.prevMonthDay,
573
    &.prevMonthDay,
661
    &.nextMonthDay {
574
    &.nextMonthDay {
662
663
        &.inRange,
575
        &.inRange,
664
        &.today.inRange,
576
        &.today.inRange,
665
        &:hover,
577
        &:hover,
666
        &:focus {
578
        &:focus {
667
            cursor: pointer;
668
            outline: 0;
669
            background: $dayHoverBackground;
579
            background: $dayHoverBackground;
670
            border-color: $dayHoverBackground;
580
            border-color: $dayHoverBackground;
581
            cursor: pointer;
582
            outline: 0;
671
        }
583
        }
672
    }
584
    }
673
585
Lines 676-690 span.flatpickr-weekday { Link Here
676
588
677
        &:hover,
589
        &:hover,
678
        &:focus {
590
        &:focus {
679
            border-color: $todayColor;
680
            background: $todayColor;
591
            background: $todayColor;
592
            border-color: $todayColor;
681
593
682
            @if variable-exists( "today_fg_color" ){
594
            @if variable-exists( "today_fg_color" ) {
683
                color: $today_fg_color;
595
                color: $today_fg_color;
684
            }
596
            } @else {
685
597
                color: #FFF;
686
            @else {
687
                color: white;
688
            }
598
            }
689
        }
599
        }
690
    }
600
    }
Lines 692-698 span.flatpickr-weekday { Link Here
692
    &.selected,
602
    &.selected,
693
    &.startRange,
603
    &.startRange,
694
    &.endRange {
604
    &.endRange {
695
696
        &,
605
        &,
697
        &.inRange,
606
        &.inRange,
698
        &:focus,
607
        &:focus,
Lines 700-716 span.flatpickr-weekday { Link Here
700
        &.prevMonthDay,
609
        &.prevMonthDay,
701
        &.nextMonthDay {
610
        &.nextMonthDay {
702
            background: $selectedDayBackground;
611
            background: $selectedDayBackground;
612
            border-color: $selectedDayBackground;
703
            box-shadow: none;
613
            box-shadow: none;
704
614
705
            @if variable-exists( "selectedDayForeground" ){
615
            @if variable-exists( "selectedDayForeground" ) {
706
                color: $selectedDayForeground;
616
                color: $selectedDayForeground;
617
            } @else {
618
                color: #FFF;
707
            }
619
            }
708
709
            @else {
710
                color: white;
711
            }
712
713
            border-color: $selectedDayBackground;
714
        }
620
        }
715
621
716
        &.startRange {
622
        &.startRange {
Lines 721-727 span.flatpickr-weekday { Link Here
721
            border-radius: 0 50px 50px 0;
627
            border-radius: 0 50px 50px 0;
722
        }
628
        }
723
629
724
        &.startRange+.endRange:not(:nth-child(7n+1)) {
630
        &.startRange + .endRange:not( :nth-child( 7n+1 ) ) {
725
            box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
631
            box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
726
        }
632
        }
727
633
Lines 742-766 span.flatpickr-weekday { Link Here
742
    &.notAllowed,
648
    &.notAllowed,
743
    &.notAllowed.prevMonthDay,
649
    &.notAllowed.prevMonthDay,
744
    &.notAllowed.nextMonthDay {
650
    &.notAllowed.nextMonthDay {
745
        color: rgba($dayForeground, 0.3);
746
        background: transparent;
651
        background: transparent;
652
        color: rgba( $dayForeground, .3 );
653
        cursor: default;
747
654
748
        @if variable-exists( "disabled_border_color" ){
655
        @if variable-exists( "disabled_border_color" ) {
749
            border-color: $disabled_border_color;
656
            border-color: $disabled_border_color;
750
        }
657
        } @else {
751
752
        @else {
753
754
            border-color: transparent;
658
            border-color: transparent;
755
        }
659
        }
756
757
        cursor: default;
758
    }
660
    }
759
661
760
    &.flatpickr-disabled,
662
    &.flatpickr-disabled,
761
    &.flatpickr-disabled:hover {
663
    &.flatpickr-disabled:hover {
664
        color: rgba( $dayForeground, .1 );
762
        cursor: not-allowed;
665
        cursor: not-allowed;
763
        color: rgba($dayForeground, 0.1);
764
    }
666
    }
765
667
766
    &.week.selected {
668
    &.week.selected {
Lines 785-822 span.flatpickr-weekday { Link Here
785
687
786
        @if variable-exists( "noCalendarBorder" ) {
688
        @if variable-exists( "noCalendarBorder" ) {
787
            border-left: 1px solid $calendarBorderColor;
689
            border-left: 1px solid $calendarBorderColor;
788
        }
690
        } @else {
789
790
        @else {
791
            box-shadow: 1px 0 0 $calendarBorderColor;
691
            box-shadow: 1px 0 0 $calendarBorderColor;
792
        }
692
        }
793
    }
693
    }
794
694
795
    .flatpickr-weekday {
695
    .flatpickr-weekday {
796
        float: none;
696
        float: none;
797
        width: 100%;
798
        line-height: $weekdaysHeight;
697
        line-height: $weekdaysHeight;
698
        width: 100%;
799
    }
699
    }
800
700
801
    span.flatpickr-day {
701
    span.flatpickr-day {
802
803
        &,
702
        &,
804
        &:hover {
703
        &:hover {
805
            display: block;
806
            width: 100%;
807
            max-width: none;
808
            color: rgba($dayForeground, 0.3);
809
            background: transparent;
704
            background: transparent;
810
            cursor: default;
811
            border: none;
705
            border: none;
706
            color: rgba( $dayForeground, .3 );
707
            cursor: default;
708
            display: block;
709
            max-width: none;
710
            width: 100%;
812
        }
711
        }
813
    }
712
    }
814
}
713
}
815
714
816
.flatpickr-innerContainer {
715
.flatpickr-innerContainer {
716
    box-sizing: border-box;
817
    display: block;
717
    display: block;
818
    display: flex;
718
    display: flex;
819
    box-sizing: border-box;
820
    overflow: hidden;
719
    overflow: hidden;
821
720
822
    @if variable-exists( "noCalendarBorder" ) {
721
    @if variable-exists( "noCalendarBorder" ) {
Lines 826-869 span.flatpickr-weekday { Link Here
826
}
725
}
827
726
828
.flatpickr-rContainer {
727
.flatpickr-rContainer {
728
    box-sizing: border-box;
829
    display: inline-block;
729
    display: inline-block;
830
    padding: 0;
730
    padding: 0;
831
    box-sizing: border-box;
832
}
731
}
833
732
834
.flatpickr-time {
733
.flatpickr-time {
835
    text-align: center;
734
    box-sizing: border-box;
836
    outline: 0;
837
    display: block;
735
    display: block;
736
    display: flex;
838
    height: 0;
737
    height: 0;
839
    line-height: $timeHeight;
738
    line-height: $timeHeight;
840
    max-height: $timeHeight;
739
    max-height: $timeHeight;
841
    box-sizing: border-box;
740
    outline: 0;
842
    overflow: hidden;
741
    overflow: hidden;
843
    display: flex;
742
    text-align: center;
844
743
845
    @if variable-exists( "noCalendarBorder" ) {
744
    @if variable-exists( "noCalendarBorder" ) {
846
        background: $calendarBackground;
745
        background: $calendarBackground;
847
        border-radius: 0 0 5px 5px;
746
        border-radius: 0 0 5px 5px;
848
    }
747
    }
849
748
850
    &:after {
749
    &::after {
750
        clear: both;
851
        content: "";
751
        content: "";
852
        display: table;
752
        display: table;
853
        clear: both;
854
    }
753
    }
855
754
856
    .numInputWrapper {
755
    .numInputWrapper {
857
        flex: 1;
756
        flex: 1;
858
        width: 40%;
859
        height: $timeHeight;
860
        float: left;
757
        float: left;
758
        height: $timeHeight;
759
        width: 40%;
861
760
862
        span.arrowUp:after {
761
        span.arrowUp::after {
863
            border-bottom-color: $dayForeground;
762
            border-bottom-color: $dayForeground;
864
        }
763
        }
865
764
866
        span.arrowDown:after {
765
        span.arrowDown::after {
867
            border-top-color: $dayForeground;
766
            border-top-color: $dayForeground;
868
        }
767
        }
869
    }
768
    }
Lines 877-898 span.flatpickr-weekday { Link Here
877
    }
776
    }
878
777
879
    input {
778
    input {
779
        appearance: textfield;
880
        background: transparent;
780
        background: transparent;
881
        box-shadow: none;
882
        border: 0;
781
        border: 0;
883
        border-radius: 0;
782
        border-radius: 0;
884
        text-align: center;
783
        box-shadow: none;
885
        margin: 0;
784
        box-sizing: border-box;
886
        padding: 0;
887
        height: inherit;
888
        line-height: inherit;
889
        color: $dayForeground;
785
        color: $dayForeground;
890
        font-size: 14px;
786
        font-size: 14px;
787
        height: inherit;
788
        line-height: inherit;
789
        margin: 0;
790
        padding: 0;
891
        position: relative;
791
        position: relative;
892
        box-sizing: border-box;
792
        text-align: center;
893
        -webkit-appearance: textfield;
894
        -moz-appearance: textfield;
895
        appearance: textfield;
896
793
897
        &.flatpickr-hour {
794
        &.flatpickr-hour {
898
            font-weight: bold;
795
            font-weight: bold;
Lines 904-948 span.flatpickr-weekday { Link Here
904
        }
801
        }
905
802
906
        &:focus {
803
        &:focus {
907
            outline: 0;
908
            border: 0;
804
            border: 0;
805
            outline: 0;
909
        }
806
        }
910
    }
807
    }
911
808
912
    .flatpickr-time-separator,
809
    .flatpickr-time-separator,
913
    .flatpickr-am-pm {
810
    .flatpickr-am-pm {
914
        height: inherit;
811
        align-self: center;
915
        float: left;
916
        line-height: inherit;
917
        color: $dayForeground;
812
        color: $dayForeground;
813
        float: left;
918
        font-weight: bold;
814
        font-weight: bold;
919
        width: 2%;
815
        height: inherit;
816
        line-height: inherit;
920
        user-select: none;
817
        user-select: none;
921
        align-self: center;
818
        width: 2%;
922
    }
819
    }
923
820
924
    .flatpickr-am-pm {
821
    .flatpickr-am-pm {
925
        outline: 0;
926
        width: 18%;
927
        cursor: pointer;
822
        cursor: pointer;
928
        text-align: center;
929
        font-weight: 400;
823
        font-weight: 400;
824
        outline: 0;
825
        text-align: center;
826
        width: 18%;
930
    }
827
    }
931
828
932
    input,
829
    input,
933
    .flatpickr-am-pm {
830
    .flatpickr-am-pm {
934
935
        &:hover,
831
        &:hover,
936
        &:focus {
832
        &:focus {
937
            background: lighten($dayHoverBackground, 3);
833
            background: lighten( $dayHoverBackground, 3 );
938
        }
834
        }
939
    }
835
    }
940
}
836
}
941
837
942
.flatpickr-input {
838
.flatpickr-input {
943
    background-repeat: no-repeat;
839
    background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='#369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E" );
944
    background-position: 3px;
840
    background-position: 3px;
945
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='#369' class='bi bi-calendar3'%3E%3Cg stroke-width='1.333'%3E%3Cpath d='M10.5 0h-9A1.5 1.5 0 0 0 0 1.5v9A1.5 1.5 0 0 0 1.5 12h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 10.5 0zM.75 2.893c0-.355.336-.643.75-.643h9c.414 0 .75.288.75.643v7.714c0 .355-.336.643-.75.643h-9c-.414 0-.75-.288-.75-.643z'/%3E%3Cpath d='M4.875 5.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM2.625 7.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm-6.75 2.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zm2.25 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z'/%3E%3C/g%3E%3C/svg%3E");
841
    background-repeat: no-repeat;
946
    border-style: inset;
842
    border-style: inset;
947
    border-width: 1px;
843
    border-width: 1px;
948
    padding: 3px 3px 3px 20px;
844
    padding: 3px 3px 3px 20px;
Lines 956-965 span.flatpickr-weekday { Link Here
956
    }
852
    }
957
}
853
}
958
854
959
.flatpickr-day {
960
    border-radius: 0;
961
}
962
963
.flatpickr_wrapper {
855
.flatpickr_wrapper {
964
    white-space: nowrap;
856
    white-space: nowrap;
965
}
857
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/_flatpickr_vars.scss (-21 / +8 lines)
Lines 1-37 Link Here
1
$bezier: cubic-bezier(0.23, 1, 0.32, 1);
1
$bezier: cubic-bezier( .23, 1, .32, 1 );
2
$slideTime: 400ms;
2
$slideTime: 400ms;
3
4
5
$daySize: 39px !default;
3
$daySize: 39px !default;
6
$padding: $daySize / 16;
4
$padding: $daySize / 16;
7
$dayMargin: 2px !default;
5
$dayMargin: 2px !default;
8
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
6
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
9
$calendarWidth: $daysWidth;
7
$calendarWidth: $daysWidth;
10
11
$monthNavHeight: 34px !default;
8
$monthNavHeight: 34px !default;
12
$weekdaysHeight: 28px !default;
9
$weekdaysHeight: 28px !default;
13
$timeHeight: 40px;
10
$timeHeight: 40px;
14
11
$calendarBackground: #FFFFFF !default;
15
12
$calendarBorderColor: #E6E6E6 !default;
16
13
$monthForeground: rgba( 0, 0, 0, .9 ) !default;
17
$calendarBackground: #ffffff !default;
14
$arrow_hover_color: #F64747 !default;
18
$calendarBorderColor: #e6e6e6 !default;
19
20
$monthForeground: rgba(black, 0.9) !default;
21
$arrow_hover_color: #f64747 !default;
22
23
$monthBackground: transparent !default;
15
$monthBackground: transparent !default;
24
25
$weekdaysBackground: transparent !default;
16
$weekdaysBackground: transparent !default;
26
$weekdaysForeground: rgba(black, 0.54) !default;
17
$weekdaysForeground: rgba( 0, 0, 0, .54 ) !default;
27
28
$dayForeground: #000 !default;
18
$dayForeground: #000 !default;
29
$dayHoverBackground: #e6e6e6 !default;
19
$dayHoverBackground: #E6E6E6 !default;
30
31
$todayColor: #538200 !default;
20
$todayColor: #538200 !default;
32
$selectedDayBackground: #FFF4C6 !default;
21
$selectedDayBackground: #FFF4C6 !default;
33
$selectedDayForeground: #000;
22
$selectedDayForeground: #000;
34
23
$invertedBg: invert( $calendarBackground );
35
$invertedBg: invert($calendarBackground);
36
37
$timecontrols: 25px;
24
$timecontrols: 25px;
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/_fonts.scss (-16 / +16 lines)
Lines 1-35 Link Here
1
@font-face {
1
@font-face {
2
    font-family: "NotoSans";
2
    font-family: NotoSans;
3
    font-style: normal;
3
    font-style: normal;
4
    font-weight: 400;
4
    font-weight: 400;
5
    src: local("Noto Sans Regular"),
5
    src: local( "Noto Sans Regular" ),
6
    url("fonts/NotoSans-Regular-webfont.woff2") format("woff2"),
6
        url( "fonts/NotoSans-Regular-webfont.woff2" ) format( "woff2" ),
7
    url("fonts/NotoSans-Regular-webfont.woff") format("woff");
7
        url( "fonts/NotoSans-Regular-webfont.woff" ) format( "woff" );
8
}
8
}
9
9
10
@font-face {
10
@font-face {
11
    font-family: "NotoSans";
11
    font-family: NotoSans;
12
    font-style: bold;
12
    font-style: bold;
13
    font-weight: 700;
13
    font-weight: 700;
14
    src: local("Noto Sans Bold"),
14
    src: local( "Noto Sans Bold" ),
15
    url("fonts/NotoSans-Bold-webfont.woff2") format("woff2"),
15
        url( "fonts/NotoSans-Bold-webfont.woff2" ) format( "woff2" ),
16
    url("fonts/NotoSans-Bold-webfont.woff") format("woff");
16
        url( "fonts/NotoSans-Bold-webfont.woff" ) format( "woff" );
17
}
17
}
18
18
19
@font-face {
19
@font-face {
20
    font-family: "NotoSans";
20
    font-family: NotoSans;
21
    font-style: italic;
21
    font-style: italic;
22
    font-weight: 400;
22
    font-weight: 400;
23
    src: local("Noto Sans Italic"),
23
    src: local( "Noto Sans Italic" ),
24
    url("fonts/NotoSans-Italic-webfont.woff2") format("woff2"),
24
        url( "fonts/NotoSans-Italic-webfont.woff2" ) format( "woff2" ),
25
    url("fonts/NotoSans-Italic-webfont.woff") format("woff");
25
        url( "fonts/NotoSans-Italic-webfont.woff" ) format( "woff" );
26
}
26
}
27
27
28
@font-face {
28
@font-face {
29
    font-family: "NotoSans";
29
    font-family: NotoSans;
30
    font-style: italic;
30
    font-style: italic;
31
    font-weight: 700;
31
    font-weight: 700;
32
    src: local("Noto Sans Bold Italic"),
32
    src: local( "Noto Sans Bold Italic" ),
33
    url("fonts/NotoSans-BoldItalic-webfont.woff2") format("woff2"),
33
        url( "fonts/NotoSans-BoldItalic-webfont.woff2" ) format( "woff2" ),
34
    url("fonts/NotoSans-BoldItalic-webfont.woff") format("woff");
34
        url( "fonts/NotoSans-BoldItalic-webfont.woff" ) format( "woff" );
35
}
35
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss (-13 / +12 lines)
Lines 8-14 Link Here
8
    }
8
    }
9
}
9
}
10
10
11
@media only screen and ( min-width: 0 ) and ( max-width: 440px ){
11
@media only screen and ( min-width: 0 ) and ( max-width: 440px ) {
12
    /* Screens bewteen 0 and 390 pixels wide */
12
    /* Screens bewteen 0 and 390 pixels wide */
13
    .ui-tabs .ui-tabs-nav li a,
13
    .ui-tabs .ui-tabs-nav li a,
14
    .statictabs li a {
14
    .statictabs li a {
Lines 18-24 Link Here
18
    .input-fluid {
18
    .input-fluid {
19
        width: 90%;
19
        width: 90%;
20
    }
20
    }
21
22
}
21
}
23
22
24
@media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
23
@media only screen and ( min-width: 342px ) and ( max-width: 479px ) {
Lines 31-36 Link Here
31
        display: block;
30
        display: block;
32
    }
31
    }
33
}
32
}
33
34
/* Override Bootstrap Responsive CSS fixed navbar */
34
/* Override Bootstrap Responsive CSS fixed navbar */
35
@media ( max-width: 979px ) {
35
@media ( max-width: 979px ) {
36
    .navbar-fixed-top,
36
    .navbar-fixed-top,
Lines 129-140 Link Here
129
129
130
        &:first-child {
130
        &:first-child {
131
            .btn-link {
131
            .btn-link {
132
                padding: 0.375rem 0.75rem;
132
                padding: .375rem .75rem;
133
            }
133
            }
134
        }
134
        }
135
135
136
        a {
136
        a {
137
            @include border-radius-all( 4px );
137
            @include border-radius-all( 4px );
138
138
            background-color: #F2F2EF;
139
            background-color: #F2F2EF;
139
            border: 1px solid #DDD;
140
            border: 1px solid #DDD;
140
            display: block;
141
            display: block;
Lines 164-169 Link Here
164
    .toolbar {
165
    .toolbar {
165
        .resort {
166
        .resort {
166
            @include border-radius-all( 5px );
167
            @include border-radius-all( 5px );
168
167
            font-size: 14px;
169
            font-size: 14px;
168
            max-width: 100%;
170
            max-width: 100%;
169
            padding: 4px 6px;
171
            padding: 4px 6px;
Lines 181-192 Link Here
181
183
182
    .mastheadsearch {
184
    .mastheadsearch {
183
        @include border-radius-all( 0 );
185
        @include border-radius-all( 0 );
184
        margin: 0;
185
186
187
        margin: 0;
186
    }
188
    }
187
189
188
    .main {
190
    .main {
189
        @include border-radius-all( 0 );
191
        @include border-radius-all( 0 );
192
190
        margin: 0;
193
        margin: 0;
191
        padding: 0;
194
        padding: 0;
192
    }
195
    }
Lines 258-264 Link Here
258
261
259
        .btn {
262
        .btn {
260
            flex-grow: 1;
263
            flex-grow: 1;
261
            padding: 0.375rem 0.75rem
264
            padding: .375rem .75rem;
262
        }
265
        }
263
    }
266
    }
264
267
Lines 298-307 Link Here
298
        display: inline;
301
        display: inline;
299
        margin-right: 12px;
302
        margin-right: 12px;
300
    }
303
    }
301
302
    #members {
303
304
    }
305
}
304
}
306
305
307
@media only screen and ( min-width: 480px ) and ( max-width: 608px ) {
306
@media only screen and ( min-width: 480px ) and ( max-width: 608px ) {
Lines 312-323 Link Here
312
}
311
}
313
312
314
@media only screen and ( min-width: 608px ) {
313
@media only screen and ( min-width: 608px ) {
315
316
    .advanced-search-terms {
314
    .advanced-search-terms {
317
        .search-term-row {
315
        .search-term-row {
318
            display: grid;
316
            display: grid;
319
            grid-template-columns: 10% 30% 60%;
320
            gap: 5px 5px;
317
            gap: 5px 5px;
318
            grid-template-columns: 10% 30% 60%;
321
            margin: 5px 0;
319
            margin: 5px 0;
322
        }
320
        }
323
321
Lines 462-468 Link Here
462
@media only screen and ( min-width: 992px ) {
460
@media only screen and ( min-width: 992px ) {
463
    /* Screens above 768 pixels wide */
461
    /* Screens above 768 pixels wide */
464
    #menu {
462
    #menu {
465
        border-right: 1px solid #d8d8d8;
463
        border-right: 1px solid #D8D8D8;
466
464
467
        ul {
465
        ul {
468
            padding: 1em 0;
466
            padding: 1em 0;
Lines 472-480 Link Here
472
            &.active {
470
            &.active {
473
                a {
471
                a {
474
                    border-right: 0;
472
                    border-right: 0;
475
                    border-top: 1px solid #d8d8d8;
473
                    border-top: 1px solid #D8D8D8;
476
                }
474
                }
477
            }
475
            }
476
478
            a {
477
            a {
479
                border-bottom: 1px solid #999;
478
                border-bottom: 1px solid #999;
480
                margin: .4em 0;
479
                margin: .4em 0;
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss (-241 / +214 lines)
Lines 20-25 Link Here
20
        padding-left: 0;
20
        padding-left: 0;
21
        padding-right: 0;
21
        padding-right: 0;
22
    }
22
    }
23
23
    .dropdown-toggle::after {
24
    .dropdown-toggle::after {
24
        border: 0;
25
        border: 0;
25
    }
26
    }
Lines 68-74 a { Link Here
68
            padding-left: 0;
69
            padding-left: 0;
69
70
70
            &:hover {
71
            &:hover {
71
                color: #c60000;
72
                color: #C60000;
72
            }
73
            }
73
        }
74
        }
74
    }
75
    }
Lines 78-84 a { Link Here
78
    }
79
    }
79
80
80
    &.clear_date {
81
    &.clear_date {
81
        color: #c33;
82
        color: #C33;
82
        font-size: 130%;
83
        font-size: 130%;
83
    }
84
    }
84
85
Lines 103-109 a { Link Here
103
104
104
    &.reviewlink,
105
    &.reviewlink,
105
    &.reviewlink:visited {
106
    &.reviewlink:visited {
106
        color: black;
107
        color: #000;
107
        font-weight: normal;
108
        font-weight: normal;
108
        text-decoration: none;
109
        text-decoration: none;
109
    }
110
    }
Lines 130-136 a { Link Here
130
131
131
            i {
132
            i {
132
                .fa {
133
                .fa {
133
                    color: #c60000
134
                    color: #C60000;
134
                }
135
                }
135
            }
136
            }
136
        }
137
        }
Lines 172-177 td { Link Here
172
        max-width: none;
173
        max-width: none;
173
    }
174
    }
174
175
176
    &.bookcover {
177
        background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat;
178
        min-width: 120px;
179
        text-align: center;
180
    }
181
182
    .cover-slides {
183
        background: transparent none;
184
        border: 0;
185
        margin: 0;
186
        min-height: unset;
187
        padding: 0;
188
    }
189
175
    &.overdue {
190
    &.overdue {
176
        color: #CC3333;
191
        color: #CC3333;
177
    }
192
    }
Lines 226-237 th { Link Here
226
}
241
}
227
242
228
#backtotop {
243
#backtotop {
244
    bottom: 40px;
229
    display: inline-block;
245
    display: inline-block;
230
    text-align: center;
231
    font-size: 120%;
246
    font-size: 120%;
232
    position: fixed;
247
    position: fixed;
233
    bottom: 40px;
234
    right: 40px;
248
    right: 40px;
249
    text-align: center;
235
    z-index: 1000;
250
    z-index: 1000;
236
}
251
}
237
252
Lines 264-273 th { Link Here
264
279
265
.actions {
280
.actions {
266
    white-space: nowrap;
281
    white-space: nowrap;
282
283
    &:first-child {
284
        .btn-link {
285
            padding-left: 0;
286
        }
287
    }
267
}
288
}
268
289
269
.advsearch_limit {
290
.advsearch_limit {
270
    border: 1px solid #d8d8d8;
291
    border: 1px solid #D8D8D8;
271
    font-size: 90%;
292
    font-size: 90%;
272
    height: 100%;
293
    height: 100%;
273
    margin-bottom: 15px;
294
    margin-bottom: 15px;
Lines 296-305 th { Link Here
296
317
297
    span {
318
    span {
298
        @include border-radius-all( 3px );
319
        @include border-radius-all( 3px );
320
299
        background-color: $base-theme-color;
321
        background-color: $base-theme-color;
300
        color: #FFF;
322
        color: #FFF;
301
        display: inline;
323
        display: inline;
302
        font-family: 'NotoSans';
324
        font-family: NotoSans;
303
        font-size: 80%;
325
        font-size: 80%;
304
        font-weight: normal;
326
        font-weight: normal;
305
        margin: 0 0 0 .9em;
327
        margin: 0 0 0 .9em;
Lines 307-313 th { Link Here
307
    }
329
    }
308
}
330
}
309
331
310
311
#members {
332
#members {
312
    p {
333
    p {
313
        color: #727272;
334
        color: #727272;
Lines 392-398 th { Link Here
392
                content: "";
413
                content: "";
393
            }
414
            }
394
        }
415
        }
395
396
    }
416
    }
397
417
398
    ul {
418
    ul {
Lines 437-446 th { Link Here
437
#rssnews-container {
457
#rssnews-container {
438
    color: #727272;
458
    color: #727272;
439
    font-size: 90%;
459
    font-size: 90%;
440
}
441
442
#rssnews-container {
443
    font-size: 90%;
444
    padding: .5em 0;
460
    padding: .5em 0;
445
}
461
}
446
462
Lines 452-463 th { Link Here
452
468
453
.fa {
469
.fa {
454
    &.fa-rss {
470
    &.fa-rss {
455
        background: rgb(240, 109, 52) none;
471
        background: rgb( 240, 109, 52 ) none;
456
        border-radius: 3px;
472
        border-radius: 3px;
457
        color: #FFF;
473
        color: #FFF;
458
        margin: 0 2px;
474
        margin: 0 2px;
459
        padding: 2px 4px;
475
        padding: 2px 4px;
460
        text-shadow: 1px 0 1px rgba(0, 0, 0, .25);
476
        text-shadow: 1px 0 1px rgba( 0, 0, 0, .25 );
461
477
462
        &.rsssearchicon {
478
        &.rsssearchicon {
463
            font-size: 70%;
479
            font-size: 70%;
Lines 466-472 th { Link Here
466
}
482
}
467
483
468
.form-control-filtered {
484
.form-control-filtered {
469
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E");
485
    background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E" );
470
    background-position-x: 6px;
486
    background-position-x: 6px;
471
    background-position-y: center;
487
    background-position-y: center;
472
    background-repeat: no-repeat;
488
    background-repeat: no-repeat;
Lines 509-515 th { Link Here
509
525
510
                i {
526
                i {
511
                    &.fa {
527
                    &.fa {
512
                        color: #c60000;
528
                        color: #C60000;
513
                    }
529
                    }
514
                }
530
                }
515
            }
531
            }
Lines 518-530 th { Link Here
518
        &.disabled,
534
        &.disabled,
519
        &[disabled] {
535
        &[disabled] {
520
            color: #333;
536
            color: #333;
521
            opacity: 0.65;
537
            opacity: .65;
522
538
523
            &:hover {
539
            &:hover {
524
                i {
540
                i {
525
                    &.fa {
541
                    &.fa {
526
                        color: #333;
542
                        color: #333;
527
                        opacity: 0.65;
543
                        opacity: .65;
528
                    }
544
                    }
529
                }
545
                }
530
            }
546
            }
Lines 532-548 th { Link Here
532
    }
548
    }
533
}
549
}
534
550
535
.actions {
536
    &:first-child {
537
        .btn-link {
538
            padding-left: 0;
539
        }
540
    }
541
}
542
543
/* Override Bootstrap alert */
551
/* Override Bootstrap alert */
544
.alert {
552
.alert {
545
    /* Redefine a new style for Bootstrap's class "close" since we use that already */
553
    /* Redefine a new style for Bootstrap's class "close" since we use that already */
554
546
    /* Use <a class="closebtn" href="#">&times;</a> */
555
    /* Use <a class="closebtn" href="#">&times;</a> */
547
556
548
    .closebtn {
557
    .closebtn {
Lines 555-566 th { Link Here
555
564
556
/* Add style for Bootstrap dropdown-header class */
565
/* Add style for Bootstrap dropdown-header class */
557
.dropdown-header {
566
.dropdown-header {
558
    border-top: 1px solid #eee;
567
    border-top: 1px solid #EEE;
559
    color: #000;
568
    color: #000;
560
    display: block;
569
    display: block;
561
    font-size: 90%;
570
    font-size: 90%;
562
    font-weight: 700;
571
    font-weight: 700;
563
    line-height: 1.42857143;
572
    line-height: 1.4286;
564
    padding: 3px 20px;
573
    padding: 3px 20px;
565
    padding-left: 10px;
574
    padding-left: 10px;
566
    white-space: nowrap;
575
    white-space: nowrap;
Lines 570-596 th { Link Here
570
    .btn-link {
579
    .btn-link {
571
        &.dropdown-toggle {
580
        &.dropdown-toggle {
572
            background-image: none;
581
            background-image: none;
573
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
582
            box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .25 );
574
        }
583
        }
575
    }
584
    }
576
}
585
}
577
586
578
.breadcrumb {
587
.breadcrumb {
579
    background-color: #F0F3F3;
588
    background-color: #F0F3F3;
589
    border-radius: 0;
580
    font-size: 85%;
590
    font-size: 85%;
581
    list-style: none outside none;
591
    list-style: none outside none;
582
    margin: 15px;
592
    margin: 15px;
583
    padding: 5px 10px;
593
    padding: 5px 10px;
584
    border-radius: 0px;
585
594
586
    a {
595
    a {
587
596
        color: darken( $links, 5% );
588
            color: darken( $links, 5%);
589
590
    }
597
    }
591
}
598
}
592
599
593
.breadcrumb-item {
600
.breadcrumb-item {
601
    + .breadcrumb-item {
602
        &::before {
603
            background: transparent url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E" ) 50% 50% no-repeat;
604
            background-size: 8px;
605
            content: "";
606
            display: inline-block;
607
            float: none;
608
            height: .8em;
609
            width: .8em;
610
        }
611
    }
612
594
    &.active {
613
    &.active {
595
        a:link,
614
        a:link,
596
        a:visited,
615
        a:visited,
Lines 604-610 th { Link Here
604
}
623
}
605
624
606
#opac-main-search {
625
#opac-main-search {
607
    background: #f0f3f3;
626
    background: #F0F3F3;
608
    margin: 7px 0;
627
    margin: 7px 0;
609
    padding: 15px;
628
    padding: 15px;
610
629
Lines 620-631 th { Link Here
620
    flex-grow: 2;
639
    flex-grow: 2;
621
}
640
}
622
641
623
.table-striped tbody > tr:nth-child(odd) > td,
642
.table-striped tbody > tr:nth-child( odd ) > td,
624
.table-striped tbody > tr:nth-child(odd) > th {
643
.table-striped tbody > tr:nth-child( odd ) > th {
625
    background-color: #F0F3F3;
644
    background-color: #F0F3F3;
626
645
627
    a {
646
    a {
628
        color: darken( $links, 5%);
647
        color: darken( $links, 5% );
629
648
630
        &.btn {
649
        &.btn {
631
            color: #FFF;
650
            color: #FFF;
Lines 652-663 th { Link Here
652
}
671
}
653
672
654
#toolbar {
673
#toolbar {
655
    background-color: #f0f3f3;
674
    background-color: #F0F3F3;
656
    border: 1px solid #f0f3f3;
675
    border: 1px solid #F0F3F3;
657
    margin: 0;
676
    margin: 0;
658
677
659
    &.clearfix {
678
    &.clearfix {
660
        background-color: #f0f3f3;
679
        background-color: #F0F3F3;
661
    }
680
    }
662
}
681
}
663
682
Lines 667-672 th { Link Here
667
686
668
.no-image {
687
.no-image {
669
    @include border-radius-all( 3px );
688
    @include border-radius-all( 3px );
689
670
    background-color: #FFF;
690
    background-color: #FFF;
671
    border: 1px solid #AAA;
691
    border: 1px solid #AAA;
672
    color: #979797;
692
    color: #979797;
Lines 700-715 th { Link Here
700
}
720
}
701
721
702
#biblio-cover-slider {
722
#biblio-cover-slider {
703
    background-color: #fff;
723
    background-color: #FFF;
704
    border: 1px solid #b9d8d9;
724
    border: 1px solid #B9D8D9;
705
    border-radius: 3px;
725
    border-radius: 3px;
706
    margin: 0 1em .5em 0;
726
    margin: 0 1em .5em 0;
707
    padding: 10px 5px 5px 5px;
708
    min-height: 175px;
727
    min-height: 175px;
728
    padding: 10px 5px 5px 5px;
709
}
729
}
710
730
711
.cover-slides {
731
.cover-slides {
712
    background: #FFF url("../images/spinner-small.gif") center center no-repeat;
732
    background: #FFF url( "../images/spinner-small.gif" ) center center no-repeat;
713
733
714
    .hint {
734
    .hint {
715
        font-size: 80%;
735
        font-size: 80%;
Lines 720-747 th { Link Here
720
        &.nav-active {
740
        &.nav-active {
721
            &:link,
741
            &:link,
722
            &:visited {
742
            &:visited {
723
                color: #85ca11;
743
                color: #85CA11;
724
            }
744
            }
725
        }
745
        }
726
    }
746
    }
727
}
747
}
728
748
729
td {
730
    &.bookcover {
731
        background: #FFF url("../images/spinner-small.gif") center center no-repeat;
732
        min-width: 120px;
733
        text-align: center;
734
    }
735
736
    .cover-slides {
737
        background: transparent none;
738
        border: 0;
739
        margin: 0;
740
        min-height: unset;
741
        padding: 0;
742
    }
743
}
744
745
.cover-image {
749
.cover-image {
746
    display: none;
750
    display: none;
747
751
Lines 768-773 div { Link Here
768
            margin-top: 3px;
772
            margin-top: 3px;
769
        }
773
        }
770
    }
774
    }
775
776
    &.rows {
777
        clear: left;
778
        float: left;
779
        margin: 0;
780
        padding: 0;
781
        width: 100%;
782
783
        + div.rows {
784
            margin-top: .6em;
785
        }
786
787
        span {
788
            &.label {
789
                float: left;
790
                font-weight: bold;
791
                margin-right: 1em;
792
                text-align: left;
793
                width: 9rem;
794
            }
795
        }
796
797
        ol {
798
            list-style-type: none;
799
            margin-left: 0;
800
            padding: .5em 1em 0 0;
801
802
            li {
803
                li {
804
                    border-bottom: 0;
805
                }
806
            }
807
        }
808
809
        li {
810
            border-bottom: 1px solid #EEE;
811
            clear: left;
812
            float: left;
813
            list-style-type: none;
814
            padding-bottom: .2em;
815
            padding-top: .1em;
816
            width: 100%;
817
        }
818
819
        ul {
820
            li {
821
                margin-left: 7.3em;
822
823
                &:first-child {
824
                    clear: none;
825
                    float: none;
826
                    margin-left: 0;
827
                }
828
            }
829
        }
830
    }
771
}
831
}
772
832
773
.required {
833
.required {
Lines 776-782 div { Link Here
776
    }
836
    }
777
}
837
}
778
838
779
780
.label {
839
.label {
781
    background-color: transparent;
840
    background-color: transparent;
782
    color: inherit;
841
    color: inherit;
Lines 832-840 fieldset { Link Here
832
891
833
        div.label {
892
        div.label {
834
            display: inline-block;
893
            display: inline-block;
835
            width: 9rem;
836
            margin-right: 1rem;
837
            float: none;
894
            float: none;
895
            margin-right: 1rem;
896
            width: 9rem;
838
        }
897
        }
839
898
840
        label,
899
        label,
Lines 848-855 fieldset { Link Here
848
907
849
        label.checkbox-label {
908
        label.checkbox-label {
850
            float: none;
909
            float: none;
851
            margin-right: 0;
852
            font-weight: normal;
910
            font-weight: normal;
911
            margin-right: 0;
853
            text-align: left;
912
            text-align: left;
854
            width: auto;
913
            width: auto;
855
        }
914
        }
Lines 857-870 fieldset { Link Here
857
        label {
916
        label {
858
            &.error {
917
            &.error {
859
                color: #C00;
918
                color: #C00;
860
                float: none;
861
                display: inline;
919
                display: inline;
920
                float: none;
862
                font-style: italic;
921
                font-style: italic;
863
                font-weight: normal;
922
                font-weight: normal;
864
                margin-left: 1rem;
923
                margin-left: 1rem;
865
                text-align: left;
924
                text-align: left;
866
                width: auto;
925
                width: auto;
867
            }
926
            }
927
868
            &.lradio {
928
            &.lradio {
869
                float: none;
929
                float: none;
870
                margin: inherit;
930
                margin: inherit;
Lines 896-902 fieldset { Link Here
896
            }
956
            }
897
        }
957
        }
898
958
899
900
        li {
959
        li {
901
            clear: left;
960
            clear: left;
902
            float: left;
961
            float: left;
Lines 912-917 fieldset { Link Here
912
                    margin: 0;
971
                    margin: 0;
913
                    width: auto;
972
                    width: auto;
914
                }
973
                }
974
915
                input {
975
                input {
916
                    margin-right: 1rem;
976
                    margin-right: 1rem;
917
                }
977
                }
Lines 942-1005 fieldset { Link Here
942
    }
1002
    }
943
}
1003
}
944
1004
945
div {
946
    &.rows {
947
        float: left;
948
        clear: left;
949
        margin: 0;
950
        padding: 0;
951
        width: 100%;
952
953
        + div.rows {
954
            margin-top: .6em;
955
        }
956
957
        span {
958
            &.label {
959
                float: left;
960
                font-weight: bold;
961
                margin-right: 1em;
962
                text-align: left;
963
                width: 9rem;
964
            }
965
        }
966
967
        ol {
968
            list-style-type: none;
969
            margin-left: 0;
970
            padding: .5em 1em 0 0;
971
972
            li {
973
                li {
974
                    border-bottom: 0;
975
                }
976
            }
977
        }
978
979
        li {
980
            border-bottom: 1px solid #EEE;
981
            clear: left;
982
            float: left;
983
            list-style-type: none;
984
            padding-bottom: .2em;
985
            padding-top: .1em;
986
            width: 100%;
987
        }
988
989
        ul {
990
            li {
991
                margin-left: 7.3em;
992
993
                &:first-child {
994
                    clear: none;
995
                    float: none;
996
                    margin-left: 0;
997
                }
998
            }
999
        }
1000
    }
1001
}
1002
1003
/* different sizes for different tags in opac-tags.tt */
1005
/* different sizes for different tags in opac-tags.tt */
1004
1006
1005
.tagweight0 {
1007
.tagweight0 {
Lines 1092-1123 div { Link Here
1092
    font-weight: bold;
1094
    font-weight: bold;
1093
1095
1094
    &::before {
1096
    &::before {
1095
        color: #6c757d;
1097
        color: #6C757D;
1096
        content: "|";
1098
        content: "|";
1097
        display: inline-block;
1099
        display: inline-block;
1098
        font-weight: normal;
1100
        font-weight: normal;
1099
        padding: 0 .5rem;
1101
        padding: 0 .5rem;
1100
        text-shadow: 1px 1px 0 #fff;
1102
        text-shadow: 1px 1px 0 #FFF;
1101
    }
1103
    }
1102
}
1104
}
1103
1105
1104
.check_control {
1106
.check_control {
1105
    &::before {
1107
    &::before {
1106
        color: #6c757d;
1108
        color: #6C757D;
1107
        content: "|";
1109
        content: "|";
1108
        display: inline-block;
1110
        display: inline-block;
1109
        font-weight: normal;
1111
        font-weight: normal;
1110
        padding: 0 .5rem;
1112
        padding: 0 .5rem;
1111
        text-shadow: 1px 1px 0 #fff;
1113
        text-shadow: 1px 1px 0 #FFF;
1112
    }
1114
    }
1113
}
1115
}
1114
1116
1115
.selections-toolbar {
1117
.selections-toolbar {
1116
    background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
1118
    background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
1117
    border-bottom: none;
1119
    border-bottom: none;
1118
    margin-top: 3px;
1119
    display: flex;
1120
    display: flex;
1120
    margin: 0;
1121
    margin: 0;
1122
    margin-top: 3px;
1121
    padding-left: 10px;
1123
    padding-left: 10px;
1122
    padding-top: .5em;
1124
    padding-top: .5em;
1123
1125
Lines 1206-1218 div { Link Here
1206
1208
1207
    a,
1209
    a,
1208
    span {
1210
    span {
1209
        font-size: 87%;
1210
        font-weight: normal;
1211
        display: inline-block;
1211
        display: inline-block;
1212
        padding: 4px 12px;
1212
        font-size: 87%;
1213
        margin-bottom: 0;
1214
        font-size: 14px;
1213
        font-size: 14px;
1214
        font-weight: normal;
1215
        line-height: 20px;
1215
        line-height: 20px;
1216
        margin-bottom: 0;
1217
        padding: 4px 12px;
1216
        text-align: center;
1218
        text-align: center;
1217
        text-decoration: none;
1219
        text-decoration: none;
1218
        vertical-align: middle;
1220
        vertical-align: middle;
Lines 1281-1292 div { Link Here
1281
    }
1283
    }
1282
}
1284
}
1283
1285
1284
nav {
1285
    .pagination {
1286
        margin: 0;
1287
    }
1288
}
1289
1290
.pagination_footer {
1286
.pagination_footer {
1291
    background-color: #E1E1E1;
1287
    background-color: #E1E1E1;
1292
    text-align: center;
1288
    text-align: center;
Lines 1399-1409 nav { Link Here
1399
        }
1395
        }
1400
1396
1401
        i.fa {
1397
        i.fa {
1402
            color:  #7cbc0f;
1398
            color: #7CBC0F;
1403
        }
1399
        }
1404
1400
1405
        .fa-li {
1401
        .fa-li {
1406
            top:  unset;
1402
            top: unset;
1407
        }
1403
        }
1408
    }
1404
    }
1409
1405
Lines 1420-1438 nav { Link Here
1420
            text-decoration: none;
1416
            text-decoration: none;
1421
        }
1417
        }
1422
    }
1418
    }
1423
}
1424
1419
1425
.breadcrumb-item {
1420
    .pagination {
1426
    + .breadcrumb-item {
1421
        margin: 0;
1427
        &::before {
1428
            background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M7.37 0l5.35 7.3c.2.2.2.51 0 .7l-5.38 8h-4.2l5.64-8.35L3.13.01z'/%3E%3C/svg%3E") 50% 50% no-repeat;
1429
            background-size: 8px;
1430
            display: inline-block;
1431
            content: '';
1432
            float: none;
1433
            height: .8em;
1434
            width: .8em;
1435
        }
1436
    }
1422
    }
1437
}
1423
}
1438
1424
Lines 1473-1480 nav { Link Here
1473
    a {
1459
    a {
1474
        color: darken( $links, 5% );
1460
        color: darken( $links, 5% );
1475
        font-weight: bold;
1461
        font-weight: bold;
1476
        text-decoration: none;
1477
        text-align: left;
1462
        text-align: left;
1463
        text-decoration: none;
1478
    }
1464
    }
1479
}
1465
}
1480
1466
Lines 1499-1512 nav { Link Here
1499
    }
1485
    }
1500
1486
1501
    .dropdown-menu a {
1487
    .dropdown-menu a {
1488
        border: 0;
1489
        clear: both;
1502
        display: block;
1490
        display: block;
1503
        width: 100%;
1504
        padding: .25rem 1.5rem;
1491
        padding: .25rem 1.5rem;
1505
        clear: both;
1506
        text-align: inherit;
1492
        text-align: inherit;
1507
        white-space: nowrap;
1493
        white-space: nowrap;
1508
        border: 0;
1494
        width: 100%;
1509
     }
1495
    }
1510
}
1496
}
1511
1497
1512
.hint {
1498
.hint {
Lines 1543-1559 nav { Link Here
1543
    margin: .3em 0;
1529
    margin: .3em 0;
1544
}
1530
}
1545
1531
1546
.ui-widget-content {
1547
    a {
1548
        &:link,
1549
        &:visited {
1550
            &.btn-default,
1551
            &.btn-secondary {
1552
            }
1553
        }
1554
    }
1555
}
1556
1557
#social_networks {
1532
#social_networks {
1558
    margin-top: .5em;
1533
    margin-top: .5em;
1559
1534
Lines 1594-1600 nav { Link Here
1594
    }
1569
    }
1595
1570
1596
    #linkedin {
1571
    #linkedin {
1597
        color: #0073b0;
1572
        color: #0073B0;
1598
    }
1573
    }
1599
1574
1600
    #email {
1575
    #email {
Lines 1732-1737 nav { Link Here
1732
1707
1733
#didyoumean {
1708
#didyoumean {
1734
    @include border-radius-all( 3px );
1709
    @include border-radius-all( 3px );
1710
1735
    background-color: #EEE;
1711
    background-color: #EEE;
1736
    border: 1px solid #E8E8E8;
1712
    border: 1px solid #E8E8E8;
1737
    box-sizing: border-box;
1713
    box-sizing: border-box;
Lines 1775-1803 nav { Link Here
1775
1751
1776
            &.jstree-clicked {
1752
            &.jstree-clicked {
1777
                background: transparent none;
1753
                background: transparent none;
1778
                box-shadow: none;
1779
                border: 0;
1754
                border: 0;
1755
                box-shadow: none;
1780
            }
1756
            }
1781
        }
1757
        }
1782
    }
1758
    }
1783
}
1759
}
1784
1760
1785
1786
1787
#cartDetails {
1761
#cartDetails {
1788
    background-color: #FFF;
1762
    background-color: #FFF;
1789
    border: 1px solid rgba( 0, 0, 0, .2 );
1763
    border: 1px solid rgba( 0, 0, 0, .2 );
1790
    border-radius: 6px;
1764
    border-radius: 6px;
1791
    box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
1765
    box-shadow: 0 5px 10px rgba( 0, 0, 0, .2 );
1792
    color: black;
1766
    color: #000;
1793
    display: none;
1767
    display: none;
1794
    font-size: 90%;
1768
    font-size: 90%;
1769
    left: 50px;
1795
    margin: 0;
1770
    margin: 0;
1796
    padding: 8px 20px;
1771
    padding: 8px 20px;
1797
    position: fixed;
1772
    position: fixed;
1798
    text-align: center;
1773
    text-align: center;
1799
    top: 50px;
1774
    top: 50px;
1800
    left: 50px;
1801
    width: 180px;
1775
    width: 180px;
1802
    z-index: 10;
1776
    z-index: 10;
1803
}
1777
}
Lines 1864-1870 nav { Link Here
1864
    .facet-count {
1838
    .facet-count {
1865
        display: inline-block;
1839
        display: inline-block;
1866
    }
1840
    }
1867
1868
}
1841
}
1869
1842
1870
#menu {
1843
#menu {
Lines 1891-1898 nav { Link Here
1891
        }
1864
        }
1892
1865
1893
        a {
1866
        a {
1894
            background-color: #f0f3f3;
1867
            background-color: #F0F3F3;
1895
            border: 1px solid #d8d8d8;
1868
            border: 1px solid #D8D8D8;
1896
            border-bottom-width: 0;
1869
            border-bottom-width: 0;
1897
            color: darken( $links, 5% );
1870
            color: darken( $links, 5% );
1898
            display: block;
1871
            display: block;
Lines 1900-1906 nav { Link Here
1900
            padding: .4em .6em;
1873
            padding: .4em .6em;
1901
            text-decoration: none;
1874
            text-decoration: none;
1902
        }
1875
        }
1903
1904
    }
1876
    }
1905
}
1877
}
1906
1878
Lines 1924-1929 nav { Link Here
1924
    .commentline {
1896
    .commentline {
1925
        @include border-radius-all( 3px );
1897
        @include border-radius-all( 3px );
1926
        @include shadowed;
1898
        @include shadowed;
1899
1927
        background-color: rgba( 255, 255, 204, .4 );
1900
        background-color: rgba( 255, 255, 204, .4 );
1928
        border: 1px solid #CCC;
1901
        border: 1px solid #CCC;
1929
        display: inline-block;
1902
        display: inline-block;
Lines 2017-2022 nav { Link Here
2017
1990
2018
    .inactive {
1991
    .inactive {
2019
        @extend %page-middle-child;
1992
        @extend %page-middle-child;
1993
2020
        background-color: #F5F5F5;
1994
        background-color: #F5F5F5;
2021
    }
1995
    }
2022
1996
Lines 2024-2030 nav { Link Here
2024
        @extend %page-middle-child;
1998
        @extend %page-middle-child;
2025
    }
1999
    }
2026
2000
2027
    a[rel='last'] {
2001
    a[rel="last"] {
2028
        border-bottom-right-radius: 3px;
2002
        border-bottom-right-radius: 3px;
2029
        border-top-right-radius: 3px;
2003
        border-top-right-radius: 3px;
2030
    }
2004
    }
Lines 2032-2037 nav { Link Here
2032
2006
2033
.hold-message {
2007
.hold-message {
2034
    @include border-radius-all( 3px );
2008
    @include border-radius-all( 3px );
2009
2035
    background-color: #FFF0B1;
2010
    background-color: #FFF0B1;
2036
    display: inline-block;
2011
    display: inline-block;
2037
    margin: .5em;
2012
    margin: .5em;
Lines 2056-2068 nav { Link Here
2056
        padding: .4em;
2031
        padding: .4em;
2057
        width: 100%;
2032
        width: 100%;
2058
2033
2059
        &[type='submit'] {
2034
        &[type="submit"] {
2060
            font-size: 100%;
2035
            font-size: 100%;
2061
            padding: .5em;
2036
            padding: .5em;
2062
            transition: background-color .5s ease;
2037
            transition: background-color .5s ease;
2063
2038
2064
            &:hover {
2039
            &:hover {
2065
                background: #77b50f none;
2040
                background: #77B50F none;
2066
            }
2041
            }
2067
        }
2042
        }
2068
    }
2043
    }
Lines 2097-2103 nav { Link Here
2097
}
2072
}
2098
2073
2099
.registration-value {
2074
.registration-value {
2100
    background-color: #ebf8ff;
2075
    background-color: #EBF8FF;
2101
    border-radius: 5px;
2076
    border-radius: 5px;
2102
    display: inline-block;
2077
    display: inline-block;
2103
    font-family: monospace;
2078
    font-family: monospace;
Lines 2163-2169 nav { Link Here
2163
    width: 100%;
2138
    width: 100%;
2164
}
2139
}
2165
2140
2166
2167
#user-menu-trigger {
2141
#user-menu-trigger {
2168
    display: none;
2142
    display: none;
2169
2143
Lines 2179-2185 nav { Link Here
2179
    }
2153
    }
2180
}
2154
}
2181
2155
2182
/* Class to be added to toolbar when it starts being fixed at the top of the screen*/
2156
/* Class to be added to toolbar when it starts being fixed at the top of the screen */
2183
.floating {
2157
.floating {
2184
    box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2158
    box-shadow: 0 3px 2px 0 rgba( 0, 0, 0, .4 );
2185
    margin-top: 0;
2159
    margin-top: 0;
Lines 2211-2230 nav { Link Here
2211
2185
2212
.table-bordered {
2186
.table-bordered {
2213
    border-radius: 0;
2187
    border-radius: 0;
2188
2214
    thead:first-child tr:first-child > th {
2189
    thead:first-child tr:first-child > th {
2215
        &:last-child {
2190
        &:last-child {
2216
        border-radius: 0;
2191
            border-radius: 0;
2217
        }
2192
        }
2193
2218
        &:first-child {
2194
        &:first-child {
2219
        border-radius: 0;
2195
            border-radius: 0;
2220
        }
2196
        }
2221
    }
2197
    }
2198
2222
    tbody:last-child tr:last-child > td {
2199
    tbody:last-child tr:last-child > td {
2223
        &:last-child {
2200
        &:last-child {
2224
        border-radius: 0;
2201
            border-radius: 0;
2225
        }
2202
        }
2203
2226
        &:first-child {
2204
        &:first-child {
2227
        border-radius: 0;
2205
            border-radius: 0;
2228
        }
2206
        }
2229
    }
2207
    }
2230
}
2208
}
Lines 2267-2273 nav { Link Here
2267
    }
2245
    }
2268
}
2246
}
2269
2247
2270
2271
#overdrive-results,
2248
#overdrive-results,
2272
#recordedbooks-results,
2249
#recordedbooks-results,
2273
#openlibrary-results {
2250
#openlibrary-results {
Lines 2324-2338 nav { Link Here
2324
        text-decoration: none;
2301
        text-decoration: none;
2325
2302
2326
        &.shelfbrowser_cover {
2303
        &.shelfbrowser_cover {
2304
            display: inline-block;
2327
            min-height: 80px;
2305
            min-height: 80px;
2328
            min-width: 80px;
2306
            min-width: 80px;
2329
            display: inline-block;
2330
        }
2307
        }
2331
    }
2308
    }
2332
2309
2333
    #browser_previous {
2310
    #browser_previous {
2334
        a {
2311
        a {
2335
            transform: rotate(-90deg);
2312
            transform: rotate( -90deg );
2336
            white-space: nowrap;
2313
            white-space: nowrap;
2337
2314
2338
            i {
2315
            i {
Lines 2343-2349 nav { Link Here
2343
2320
2344
    #browser_next {
2321
    #browser_next {
2345
        a {
2322
        a {
2346
            transform: rotate(90deg);
2323
            transform: rotate( 90deg );
2347
            white-space: nowrap;
2324
            white-space: nowrap;
2348
2325
2349
            i {
2326
            i {
Lines 2428-2435 nav { Link Here
2428
2405
2429
    a,
2406
    a,
2430
    a:visited {
2407
    a:visited {
2431
        text-decoration: none;
2432
        color: #29ADE4;
2408
        color: #29ADE4;
2409
        text-decoration: none;
2433
    }
2410
    }
2434
}
2411
}
2435
2412
Lines 2453-2460 nav { Link Here
2453
    }
2430
    }
2454
2431
2455
    .t {
2432
    .t {
2456
        font-weight: bold;
2457
        display: inline;
2433
        display: inline;
2434
        font-weight: bold;
2458
    }
2435
    }
2459
2436
2460
    .r {
2437
    .r {
Lines 2462-2474 nav { Link Here
2462
    }
2439
    }
2463
}
2440
}
2464
2441
2465
2466
.contentblock {
2442
.contentblock {
2467
    font-size: 95%;
2443
    font-size: 95%;
2468
    line-height: 135%;
2444
    line-height: 135%;
2469
    margin-left: 2em;
2445
    margin-left: 2em;
2470
2446
2471
    :first-child:not(.term)::before {
2447
    :first-child:not( .term )::before {
2472
        content: "→ ";
2448
        content: "→ ";
2473
    }
2449
    }
2474
}
2450
}
Lines 2488-2494 nav { Link Here
2488
2464
2489
        &:focus {
2465
        &:focus {
2490
            border-color: #C00;
2466
            border-color: #C00;
2491
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
2467
            box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 204, 0, 0, .6 );
2492
            outline: 0 none;
2468
            outline: 0 none;
2493
        }
2469
        }
2494
2470
Lines 2500-2506 nav { Link Here
2500
    }
2476
    }
2501
}
2477
}
2502
2478
2503
2504
#illrequests {
2479
#illrequests {
2505
    .illrequest-actions {
2480
    .illrequest-actions {
2506
        margin-bottom: 20px;
2481
        margin-bottom: 20px;
Lines 2525-2531 nav { Link Here
2525
            top: 50%;
2500
            top: 50%;
2526
            transform: translateY( -50% );
2501
            transform: translateY( -50% );
2527
        }
2502
        }
2528
2529
    }
2503
    }
2530
2504
2531
    #freeform-fields .custom-name {
2505
    #freeform-fields .custom-name {
Lines 2541-2577 nav { Link Here
2541
2515
2542
    div.rows span.label {
2516
    div.rows span.label {
2543
        float: inherit;
2517
        float: inherit;
2544
        width: inherit;
2545
        text-align: inherit;
2546
        margin-right: 0;
2518
        margin-right: 0;
2519
        text-align: inherit;
2520
        width: inherit;
2547
    }
2521
    }
2548
2522
2549
    #ill-supplier-metadata {
2523
    #ill-supplier-metadata {
2550
        display: flex;
2524
        display: flex;
2551
        flex-flow: column nowrap;
2552
        flex: 1 1 auto;
2525
        flex: 1 1 auto;
2526
        flex-flow: column nowrap;
2553
    }
2527
    }
2554
2528
2555
    div[class^='requestattr-'] {
2529
    div[class^="requestattr-"] {
2556
        width: 100%;
2557
        display: flex;
2530
        display: flex;
2558
        flex-flow: row nowrap;
2531
        flex-flow: row nowrap;
2559
        padding: 5px;
2532
        padding: 5px;
2560
        &:nth-of-type(even) {
2533
        width: 100%;
2561
            background-color: #f2f2f2;
2534
2535
        &:nth-of-type( even ) {
2536
            background-color: #F2F2F2;
2562
        }
2537
        }
2563
        &:nth-of-type(odd) {
2538
2564
            background-color: #ffffff;
2539
        &:nth-of-type( odd ) {
2540
            background-color: #FFFFFF;
2565
        }
2541
        }
2566
    }
2542
    }
2567
2543
2568
    #ill-supplier-metadata > div > span {
2544
    #ill-supplier-metadata > div > span {
2569
        display: flex;
2545
        display: flex;
2546
        flex-basis: 0;
2570
        flex-flow: row nowrap;
2547
        flex-flow: row nowrap;
2571
        flex-grow: 1;
2548
        flex-grow: 1;
2572
        flex-basis: 0;
2573
    }
2549
    }
2574
2575
}
2550
}
2576
2551
2577
.ill_availability_sourcename {
2552
.ill_availability_sourcename {
Lines 2597-2607 nav { Link Here
2597
}
2572
}
2598
2573
2599
.btn-danger {
2574
.btn-danger {
2600
    color: white !important;
2575
    color: #FFF !important;
2601
}
2576
}
2602
2577
2603
.count_label {
2578
.count_label {
2604
    $base: #369;
2579
    $base: #369;
2580
2605
    background-color: $base;
2581
    background-color: $base;
2606
    border-radius: 5px;
2582
    border-radius: 5px;
2607
    color: #FFF;
2583
    color: #FFF;
Lines 2672-2685 $star-selected: #EDB867; Link Here
2672
}
2648
}
2673
2649
2674
.br-theme-fontawesome-stars {
2650
.br-theme-fontawesome-stars {
2675
2676
    .br-widget {
2651
    .br-widget {
2677
        height: 28px;
2652
        height: 28px;
2678
        white-space: nowrap;
2653
        white-space: nowrap;
2679
2654
2680
        a {
2655
        a {
2681
            -webkit-font-smoothing: antialiased;
2682
            font: normal normal normal 20px/1 FontAwesome;
2656
            font: normal normal normal 20px/1 FontAwesome;
2657
            -webkit-font-smoothing: antialiased;
2683
            margin-right: 2px;
2658
            margin-right: 2px;
2684
            text-decoration: none;
2659
            text-decoration: none;
2685
            text-rendering: auto;
2660
            text-rendering: auto;
Lines 2702-2708 $star-selected: #EDB867; Link Here
2702
            }
2677
            }
2703
        }
2678
        }
2704
2679
2705
2706
        .br-current-rating {
2680
        .br-current-rating {
2707
            display: none;
2681
            display: none;
2708
        }
2682
        }
Lines 2713-2719 $star-selected: #EDB867; Link Here
2713
            cursor: default;
2687
            cursor: default;
2714
        }
2688
        }
2715
    }
2689
    }
2716
2717
}
2690
}
2718
2691
2719
#cancel_rating_text {
2692
#cancel_rating_text {
Lines 2724-2730 $star-selected: #EDB867; Link Here
2724
2697
2725
@media print {
2698
@media print {
2726
    .br-theme-fontawesome-stars {
2699
    .br-theme-fontawesome-stars {
2727
2728
        .br-widget {
2700
        .br-widget {
2729
            a {
2701
            a {
2730
                &::after {
2702
                &::after {
Lines 2738-2746 $star-selected: #EDB867; Link Here
2738
                    content: "\f005";
2710
                    content: "\f005";
2739
                }
2711
                }
2740
            }
2712
            }
2741
2742
        }
2713
        }
2743
2744
    }
2714
    }
2745
}
2715
}
2746
2716
Lines 2755-2778 $star-selected: #EDB867; Link Here
2755
    }
2725
    }
2756
}
2726
}
2757
2727
2758
/*opac browse search*/
2728
/* opac browse search */
2759
2729
2760
#browse-resultswrapper {
2730
#browse-resultswrapper {
2761
    margin-top: 15px;
2731
    margin-top: 15px;
2762
}
2732
}
2733
2763
#browse-searchfuzziness {
2734
#browse-searchfuzziness {
2764
    padding: 15px 0;
2735
    padding: 15px 0;
2765
}
2736
}
2766
2737
2767
#browse-searchresults, #browse-selectionsearch {
2738
#browse-searchresults,
2739
#browse-selectionsearch {
2768
    border: 1px solid #E3E3E3;
2740
    border: 1px solid #E3E3E3;
2769
    border-radius: 4px;
2741
    border-radius: 4px;
2770
    padding: 0;
2771
    margin-bottom: 2em;
2742
    margin-bottom: 2em;
2743
    padding: 0;
2772
}
2744
}
2773
2745
2774
#browse-selectionsearch p.subjects {
2746
#browse-selectionsearch p.subjects {
2775
    font-size: 0.9em;
2747
    font-size: .9em;
2776
    margin-bottom: 0;
2748
    margin-bottom: 0;
2777
}
2749
}
2778
2750
Lines 2789-2797 $star-selected: #EDB867; Link Here
2789
        text-align: center;
2761
        text-align: center;
2790
2762
2791
        img {
2763
        img {
2792
            margin:0.5em 0;
2793
            position: relative;
2794
            left: -5px;
2764
            left: -5px;
2765
            margin: .5em 0;
2766
            position: relative;
2795
        }
2767
        }
2796
    }
2768
    }
2797
}
2769
}
Lines 2804-2832 $star-selected: #EDB867; Link Here
2804
    margin-bottom: .4rem;
2776
    margin-bottom: .4rem;
2805
    margin-left: 1rem;
2777
    margin-left: 1rem;
2806
}
2778
}
2807
/*end browse search*/
2779
2780
/* end browse search */
2808
2781
2809
/* Skip to content link. CSS adapted from https://webaim.org/ */
2782
/* Skip to content link. CSS adapted from https://webaim.org/ */
2810
#scrolltocontent {
2783
#scrolltocontent {
2811
    background: #c60000;
2784
    background: #C60000;
2812
    border: 1px solid white;
2785
    border: 1px solid #FFF;
2813
    border-radius: 0 0 4px 0;
2786
    border-radius: 0 0 4px 0;
2814
    border-width: 0 1px 1px 0;
2787
    border-width: 0 1px 1px 0;
2815
    color: white;
2788
    color: #FFF;
2816
    left: 0px;
2789
    left: 0;
2817
    padding: 6px 12px;
2790
    padding: 6px 12px;
2818
    position: absolute;
2791
    position: absolute;
2819
    text-decoration: none;
2792
    text-decoration: none;
2820
    text-shadow: 0 -1px 0 rgba(58, 0, 0, 0.75);
2793
    text-shadow: 0 -1px 0 rgba( 58, 0, 0, .75 );
2821
    top: -40px;
2794
    top: -40px;
2822
    transition: top .5s ease-out;
2795
    transition: top .5s ease-out;
2823
    z-index: 100;
2796
    z-index: 100;
2824
2797
2825
    &:focus {
2798
    &:focus {
2826
        left: 0px;
2799
        left: 0;
2827
        outline-color: transparent;
2800
        outline-color: transparent;
2828
        position: absolute;
2801
        position: absolute;
2829
        top: 0px;
2802
        top: 0;
2830
        transition: top .1s ease-in;
2803
        transition: top .1s ease-in;
2831
    }
2804
    }
2832
}
2805
}
Lines 2843-2849 $star-selected: #EDB867; Link Here
2843
            &[aria-expanded="false"] { font-weight: normal; }
2816
            &[aria-expanded="false"] { font-weight: normal; }
2844
2817
2845
            &:hover {
2818
            &:hover {
2846
                background-color: rgba(255, 255, 204, 0.8);
2819
                background-color: rgba( 255, 255, 204, .8 );
2847
                text-decoration: none;
2820
                text-decoration: none;
2848
            }
2821
            }
2849
        }
2822
        }
Lines 2861-2873 $star-selected: #EDB867; Link Here
2861
}
2834
}
2862
2835
2863
#openid_connect {
2836
#openid_connect {
2864
    background-color: #fff;
2837
    background-color: #FFF;
2865
    border: 1px solid #AAA;
2838
    border: 1px solid #AAA;
2866
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
2839
    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
2867
    margin: .5em 0;
2840
    margin: .5em 0;
2868
2841
2869
    i {
2842
    i {
2870
        color: #b53329;
2843
        color: #B53329;
2871
        margin: 0 .5em;
2844
        margin: 0 .5em;
2872
    }
2845
    }
2873
}
2846
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/print.scss (-18 / +19 lines)
Lines 148-153 body#basket a { Link Here
148
body#basket table {
148
body#basket table {
149
    border-collapse: collapse;
149
    border-collapse: collapse;
150
}
150
}
151
151
body#basket td,
152
body#basket td,
152
body#basket th {
153
body#basket th {
153
    background-color: transparent;
154
    background-color: transparent;
Lines 161-173 body#basket th { Link Here
161
}
162
}
162
163
163
body#basket th,
164
body#basket th,
164
body#basket th[scope=col] {
165
body#basket th[scope="col"] {
165
    border: 0;
166
    border: 0;
166
    text-align: center;
167
    text-align: center;
167
    vertical-align: middle;
168
    vertical-align: middle;
168
}
169
}
169
170
170
body#basket th[scope=row] {
171
body#basket th[scope="row"] {
171
    border: 0;
172
    border: 0;
172
    font-size: 89%;
173
    font-size: 89%;
173
    text-align: right;
174
    text-align: right;
Lines 207-214 body#basket p { Link Here
207
208
208
#userresults {
209
#userresults {
209
    display: block;
210
    display: block;
210
    position: absolute;
211
    left: 1;
211
    left: 1;
212
    position: absolute;
212
    word-wrap: break-word;
213
    word-wrap: break-word;
213
}
214
}
214
215
Lines 245-251 body#basket p { Link Here
245
.screen,
246
.screen,
246
.suggestion,
247
.suggestion,
247
.views,
248
.views,
248
a[href]:after,
249
a[href]::after,
249
fieldset.action,
250
fieldset.action,
250
h2 span.hint,
251
h2 span.hint,
251
input,
252
input,
Lines 292-342 td.resultscontrol, Link Here
292
    display: none;
293
    display: none;
293
}
294
}
294
295
295
a[href]:after {
296
a[href]::after {
296
    display:none;
297
    display: none;
297
}
298
}
298
299
299
#social_networks {
300
#social_networks {
300
    display:none;
301
    display: none;
301
}
302
}
302
303
303
a.tag_add {
304
a.tag_add {
304
    display:none;
305
    display: none;
305
}
306
}
306
307
307
.results_summary.online_resources {
308
.results_summary.online_resources {
308
    display:none;
309
    display: none;
309
}
310
}
310
311
311
a#Normalview,
312
a#Normalview,
312
a#MARCview,
313
a#MARCview,
313
a#ISBDview {
314
a#ISBDview {
314
    display:none;
315
    display: none;
315
}
316
}
316
317
317
.ui-tabs-panel {
318
.ui-tabs-panel {
318
    border:none !important;
319
    border: none !important;
319
}
320
}
320
321
321
#addcomment {
322
#addcomment {
322
    display:none;
323
    display: none;
323
}
324
}
324
325
325
#ulactioncontainer {
326
#ulactioncontainer {
326
    display:none;
327
    display: none;
327
}
328
}
328
329
329
#usermenu {
330
#usermenu {
330
    display:none;
331
    display: none;
331
}
332
}
332
333
333
#didyoumean {
334
#didyoumean {
334
    display:none;
335
    display: none;
335
}
336
}
336
337
337
#top-pages,
338
#top-pages,
338
#bottom-pages {
339
#bottom-pages {
339
    display:none;
340
    display: none;
340
}
341
}
341
342
342
#selections-toolbar {
343
#selections-toolbar {
Lines 348-356 a#ISBDview { Link Here
348
}
349
}
349
350
350
#numresults a {
351
#numresults a {
351
    display:none;
352
    display: none;
352
}
353
}
353
354
354
#numresults {
355
#numresults {
355
    float:left;
356
    float: left;
356
}
357
}
(-)a/koha-tmpl/opac-tmpl/bootstrap/css/src/sco.scss (-12 / +2 lines)
Lines 16-22 a { Link Here
16
    }
16
    }
17
}
17
}
18
18
19
20
#members {
19
#members {
21
    a {
20
    a {
22
        &.logout {
21
        &.logout {
Lines 41-47 a { Link Here
41
        &:first-child {
40
        &:first-child {
42
            tr {
41
            tr {
43
                &:first-child {
42
                &:first-child {
44
                    &> th {
43
                    & > th {
45
                        &:first-child,
44
                        &:first-child,
46
                        &:last-child {
45
                        &:last-child {
47
                            border-radius: 0;
46
                            border-radius: 0;
Lines 50-56 a { Link Here
50
                }
49
                }
51
50
52
                &:last-child {
51
                &:last-child {
53
                    &> th {
52
                    & > th {
54
                        &:first-child,
53
                        &:first-child,
55
                        &:last-child {
54
                        &:last-child {
56
                            border-radius: 0;
55
                            border-radius: 0;
Lines 79-90 a { Link Here
79
    padding-top: 1rem;
78
    padding-top: 1rem;
80
}
79
}
81
80
82
#sci_checkin_button,
83
#sci_refresh_button,
84
#sci_append_button {
85
}
86
87
#sci_refresh_button {
88
}
89
90
@import "responsive";
81
@import "responsive";
91
- 

Return to bug 31529