26 |
26 |
|
27 |
27 |
$link-color: $primary-color;
|
28 |
28 |
|
|
29 |
|
|
30 |
html {
|
|
31 |
--primary-color: #{$primary-color};
|
|
32 |
--secondary-color: #{$secondary-color};
|
|
33 |
--font-color: #{$font-color};
|
|
34 |
--font-color-light: #666;
|
|
35 |
--link-color: #{$primary-color};
|
|
36 |
--background: #ecf0f3;
|
|
37 |
--white: white;
|
|
38 |
}
|
|
39 |
|
|
40 |
@media (prefers-color-scheme: dark) {
|
|
41 |
html {
|
|
42 |
--primary-color: #{darken($primary-color, 10%)};
|
|
43 |
--secondary-color: #{darken($secondary-color, 25%)};
|
|
44 |
--font-color: white;
|
|
45 |
--font-color-light: #ccc;
|
|
46 |
--background: #292929;
|
|
47 |
--link-color: #{lighten($primary-color, 20%)};
|
|
48 |
--white: #292929;
|
|
49 |
}
|
|
50 |
}
|
|
51 |
|
|
52 |
|
29 |
53 |
/* generalities */
|
30 |
54 |
|
31 |
55 |
html, body {
|
... | ... | |
41 |
65 |
@media print {
|
42 |
66 |
font-size: 14px;
|
43 |
67 |
}
|
44 |
|
color: $font-color;
|
45 |
|
background: #ecf0f3;
|
46 |
|
background: linear-gradient(#ecf0f3, white);
|
|
68 |
color: var(--font-color);
|
|
69 |
background: var(--background);
|
|
70 |
background: linear-gradient(var(--background), white);
|
|
71 |
@media (prefers-color-scheme: dark) {
|
|
72 |
background: linear-gradient(var(--background), black);
|
|
73 |
}
|
47 |
74 |
}
|
48 |
75 |
|
49 |
76 |
html {
|
... | ... | |
56 |
83 |
}
|
57 |
84 |
|
58 |
85 |
a {
|
59 |
|
color: $link-color;
|
|
86 |
color: var(--link-color);
|
60 |
87 |
text-decoration: none;
|
61 |
88 |
border-width: 0;
|
62 |
|
border-bottom: 1px dotted $link-color;
|
|
89 |
border-bottom: 1px dotted var(--link-color);
|
63 |
90 |
transition: color 200ms ease-out;
|
64 |
91 |
&:hover {
|
65 |
92 |
color: #003388;
|
... | ... | |
131 |
158 |
top: 0px;
|
132 |
159 |
right: 0px;
|
133 |
160 |
z-index: 100;
|
134 |
|
background: $secondary-color;
|
|
161 |
background: var(--secondary-color);
|
135 |
162 |
li {
|
136 |
163 |
display: inline-block;
|
137 |
164 |
vertical-align: middle;
|
... | ... | |
150 |
177 |
padding-left: 3em;
|
151 |
178 |
}
|
152 |
179 |
.ui-avatar {
|
153 |
|
color: $primary-color;
|
|
180 |
color: var(--primary-color);
|
154 |
181 |
vertical-align: middle;
|
155 |
182 |
font-size: $header-height * 0.35;
|
156 |
183 |
background: white;
|
... | ... | |
209 |
236 |
/* header */
|
210 |
237 |
|
211 |
238 |
div#header {
|
212 |
|
background: $primary-color;
|
|
239 |
background: var(--primary-color);
|
213 |
240 |
padding-left: 0px;
|
214 |
241 |
position: relative;
|
215 |
242 |
height: $header-height;
|
... | ... | |
469 |
496 |
width: 24rem;
|
470 |
497 |
box-sizing: border-box;
|
471 |
498 |
padding: 0 1rem;
|
472 |
|
background: white;
|
|
499 |
background: var(--white);
|
473 |
500 |
max-width: 24rem;
|
474 |
501 |
word-wrap: break-word;
|
475 |
502 |
@media screen and (max-width: $mobile-limit) {
|
476 |
503 |
width: auto;
|
477 |
504 |
max-width: 100%;
|
478 |
505 |
}
|
479 |
|
color: #666;
|
|
506 |
color: var(--font-color-light);
|
480 |
507 |
position: relative;
|
481 |
508 |
#sidebar-toggle {
|
482 |
509 |
left: -10px;
|
483 |
510 |
width: 10px;
|
484 |
511 |
background: #d4cbff;
|
|
512 |
@media (prefers-color-scheme: dark) {
|
|
513 |
background: #444;
|
|
514 |
}
|
485 |
515 |
border-bottom-right-radius: 0px;
|
486 |
516 |
border-bottom-left-radius: 10px;
|
487 |
517 |
}
|
... | ... | |
604 |
634 |
border: 1px solid #ccc;
|
605 |
635 |
text-decoration: none;
|
606 |
636 |
transition: all .2s ease-in-out;
|
607 |
|
color: $primary-color;
|
|
637 |
color: var(--primary-color);
|
608 |
638 |
border-radius: 15px;
|
609 |
639 |
}
|
610 |
640 |
|
611 |
641 |
ul.apps li a:hover {
|
612 |
642 |
border: 1px solid #333;
|
613 |
|
color: $primary-color;
|
|
643 |
color: var(--primary-color);
|
614 |
644 |
border-radius: 25px;
|
615 |
645 |
}
|
616 |
646 |
|
... | ... | |
728 |
758 |
}
|
729 |
759 |
|
730 |
760 |
p.paginator span.this-page {
|
731 |
|
background: $primary-color;
|
|
761 |
background: var(--primary-color);
|
732 |
762 |
border-color: #5B616B;
|
733 |
763 |
color: white;
|
734 |
764 |
}
|
... | ... | |
810 |
840 |
box-sizing: border-box;
|
811 |
841 |
border-radius: 1ex;
|
812 |
842 |
padding: 0 1ex;
|
813 |
|
background: $primary-color;
|
|
843 |
background: var(--primary-color);
|
814 |
844 |
color: white;
|
815 |
845 |
}
|
816 |
846 |
|
... | ... | |
903 |
933 |
font-weight: normal;
|
904 |
934 |
font-size: 20px;
|
905 |
935 |
border-bottom: 1px solid #7F8F9E;
|
906 |
|
background: white;
|
|
936 |
background: var(--white);
|
907 |
937 |
box-sizing: border-box;
|
908 |
938 |
width: calc(#{$sidepage-icon-width} + #{$sidepage-width});
|
909 |
939 |
}
|
... | ... | |
917 |
947 |
position: absolute;
|
918 |
948 |
top: 50px;
|
919 |
949 |
right: $sidepage-width - $sidepage-left-space - 10px + $sidepage-border-width / 2;
|
920 |
|
background: $primary-color;
|
|
950 |
background: var(--primary-color);
|
921 |
951 |
color: white;
|
922 |
952 |
height: 20px;
|
923 |
953 |
width: 20px;
|
... | ... | |
945 |
975 |
}
|
946 |
976 |
|
947 |
977 |
#sidepage ul#sidepage-menu {
|
948 |
|
background: white;
|
|
978 |
background: var(--white);
|
949 |
979 |
position: relative;
|
950 |
980 |
left: $sidepage-left-space;
|
951 |
981 |
@media screen and (max-width: $mobile-limit) {
|
... | ... | |
958 |
988 |
min-height: 100%;
|
959 |
989 |
min-height: calc(100% - #{$header-height} - 1px); /* #top 40px + border 1px */
|
960 |
990 |
box-sizing: border-box;
|
961 |
|
border-right: $sidepage-border-width solid $primary-color;
|
|
991 |
border-right: $sidepage-border-width solid var(--primary-color);
|
962 |
992 |
transition: all 0ms ease;
|
963 |
993 |
&::before {
|
964 |
994 |
content: "";
|
965 |
995 |
position: absolute;
|
966 |
996 |
left: -$sidepage-left-space;
|
967 |
997 |
width: $sidepage-left-space;
|
968 |
|
background: linear-gradient(to bottom, $primary-color 0%, $secondary-color 130vh);
|
|
998 |
background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 130vh);
|
969 |
999 |
height: 100%;
|
970 |
1000 |
top: 0px;
|
971 |
1001 |
}
|
... | ... | |
986 |
1016 |
white-space: nowrap;
|
987 |
1017 |
text-overflow: ellipsis;
|
988 |
1018 |
overflow: hidden;
|
989 |
|
color: $primary-color;
|
|
1019 |
color: var(--link-color);
|
990 |
1020 |
}
|
991 |
1021 |
}
|
992 |
1022 |
|
... | ... | |
1004 |
1034 |
#sidepage ul#sidepage-menu li:hover a,
|
1005 |
1035 |
#sidepage ul#sidepage-menu .active a {
|
1006 |
1036 |
color: darken($primary-color, 30%);
|
|
1037 |
@media (prefers-color-scheme: dark) {
|
|
1038 |
color: white;
|
|
1039 |
}
|
1007 |
1040 |
filter: none;
|
1008 |
1041 |
}
|
1009 |
1042 |
|
... | ... | |
1015 |
1048 |
display: block;
|
1016 |
1049 |
width: 7px;
|
1017 |
1050 |
height: 7px;
|
1018 |
|
background: white;
|
|
1051 |
background: var(--white);
|
1019 |
1052 |
position: absolute;
|
1020 |
1053 |
right: -3px;
|
1021 |
1054 |
top: $sidepage-icon-width / 2 - 3px;
|
... | ... | |
1193 |
1226 |
}
|
1194 |
1227 |
}
|
1195 |
1228 |
&.highlight {
|
1196 |
|
background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
|
|
1229 |
background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
|
1197 |
1230 |
border-radius: $cell-border-radius;
|
1198 |
1231 |
padding: 1rem;
|
1199 |
1232 |
padding-bottom: 5px;
|
... | ... | |
1221 |
1254 |
}
|
1222 |
1255 |
border: 1px solid transparent;
|
1223 |
1256 |
border-radius: 3px;
|
1224 |
|
background: white;
|
|
1257 |
background: var(--white);
|
1225 |
1258 |
&.padded {
|
1226 |
1259 |
padding: 1em;
|
1227 |
1260 |
}
|
... | ... | |
1235 |
1268 |
margin-top: 0;
|
1236 |
1269 |
margin-bottom: 0;
|
1237 |
1270 |
background: $primary-color;
|
1238 |
|
background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
|
|
1271 |
background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
|
1239 |
1272 |
color: white;
|
1240 |
1273 |
a:not(.button) {
|
1241 |
1274 |
color: white;
|
1242 |
|
-
|