-
Notifications
You must be signed in to change notification settings - Fork 11
/
theme-night.less
153 lines (140 loc) · 4.17 KB
/
theme-night.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
@import 'mediawiki.skin.variables.less';
@import 'mixins.less';
/* TODO: Check matches https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/hacks.less#L188 onwards
before merging. */
/* T358385 */
[ bgcolor ] {
// Important: this should correspond with the light mode theme version of color-base
color: #333;
}
@selector-inline-style-color: ~'[style*="background"]:not( [style*="transparent"] ):not( [style*="inherit"] )';
.mixin-links-in-styled-tables-readable() {
/* Limited to article namespace. This should not be added to namespaces which reset colors e.g. Portal (100) */
body.ns-0:not( .page-Main_Page ) .mw-parser-output table:not( .infobox ):not( .navbox-inner ):not( .navbox ) {
[bgcolor],
&[style*="background"]:not([style*="transparent"]):not([style*="inherit"]),
th@{selector-inline-style-color},
td@{selector-inline-style-color},
tr@{selector-inline-style-color} td {
a:not( .mw-selflink ) {
color: var( --color-base-fixed, #202122 );
text-decoration: underline;
}
// For red links use a wavy underline, to distinguish them from standard links.
a.new {
text-decoration-style: wavy;
}
}
}
}
@media screen {
html.skin-theme-clientpref-night {
// These colors become !important in night mode to avoid color contrast issues.
.hatnote:not( .notheme ),
.dablink:not( .notheme ),
.rellink:not( .notheme ),
.infobox:not( .notheme ) {
color: @color-base !important;
background-color: @background-color-interactive-subtle !important;
}
/* T357453 - attempt to strip colors from the majority of infoboxes in night mode (unless notheme specified) */
// please forgive me for bypassing the linter there is no easy way to keep all of the infobox classes grouped without
.infobox td,
.infobox th,
.infobox-above,
/* T359644 */
.infobox p,
.infobox > div,
.infobox caption,
/* frwiki T359644 */
.infobox--frwiki td,
.infobox--frwiki th,
.infobox--frwiki p,
.infobox--frwiki > div,
.infobox--frwiki caption,
/* itwiki */
.sinottico th,
.infobox-header,
/* T358164 General case that templates/extensions can opt into */
.skin-nightmode-reset-color,
.navigation-box,
.metadata,
/* T357735 */
.quotebox,
/* T357726 */
.side-box,
.side-box div,
/* T358012 */
.navbox,
.navbox-subgroup,
.navbox-group,
.navbox-even,
.navbox-abovebelow,
.navbox-title {
&:not( .notheme ) {
.night-mode-strip-all-colors-when-safe();
}
}
// T358797 - if a background color is specified, assume they wanted the day mode font color
.mw-parser-output [ style*='background' ] {
/* @color-base */
color: #202122; // not !important so that if a color is also specified it will take priority
}
.mixin-links-in-styled-tables-readable();
}
}
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os {
/* T357453 */
.infobox td,
.infobox th,
.infobox-above,
/* T359644 */
.infobox p,
.infobox > div,
.infobox caption,
/* frwiki T359644 */
.infobox--frwiki td,
.infobox--frwiki th,
.infobox--frwiki p,
.infobox--frwiki > div,
.infobox--frwiki caption,
/* itwiki */
.sinottico th,
.infobox-header,
/* T358164 General case that templates/extensions can opt into */
.skin-nightmode-reset-color,
.navigation-box,
.metadata,
/* T357735 */
.quotebox,
/* T357726 */
.side-box,
.side-box div,
/* T358012 */
.navbox,
.navbox-subgroup,
.navbox-group,
.navbox-even,
.navbox-abovebelow,
.navbox-title {
&:not( .notheme ) {
.night-mode-strip-all-colors-when-safe();
}
}
// These colors become !important in night mode to avoid color contrast issues.
.hatnote:not( .notheme ),
.dablink:not( .notheme ),
.rellink:not( .notheme ),
.infobox:not( .notheme ) {
color: @color-base !important;
background-color: @background-color-interactive-subtle !important;
}
// T358797 - if a background color is specified, assume they wanted the day mode font color
.mw-parser-output [ style*='background' ] {
/* @color-base */
color: #202122; // not !important so that if a color is also specified it will take priority
}
.mixin-links-in-styled-tables-readable();
}
}