MediaWiki:Gadget-skinToggles.css

  1 /* <pre> */
  2 #pt-skin-toggles .oo-ui-icon-advanced {
  3     width: 15px;
  4     min-width: 15px;
  5     height: 14px;
  6     background-size: 14px;
  7     display: block;
  8     background-repeat: no-repeat;
  9     /* background-image is in vector.css */
 10     opacity: 1;
 11     margin-bottom: -2px;
 12 }
 13 
 14 .rsw-skin-toggle-popup .oo-ui-window-frame {
 15     width: 440px !important;
 16 }
 17 
 18 .rsw-skin-toggle-popup .appearance-modal {
 19     background-color: var(--body-main);
 20     border-color: var(--body-border);
 21     font-size: .9em;
 22     padding: 1em 2em 1.5em;
 23 }
 24 
 25 .rsw-skin-toggle-popup .appearance-modal h2 {
 26     padding-top: .25em;
 27     text-align: center;
 28 }
 29 
 30 .rsw-skin-toggle-popup .appearance-buttons {
 31     display: flex;
 32     margin: .5em auto 1.75em;
 33     width: 100%;
 34     justify-content: center;
 35 }
 36 
 37 .rsw-skin-toggle-popup .light-mode-button .oo-ui-buttonElement-button,
 38 .rsw-skin-toggle-popup .light-mode-button .oo-ui-buttonElement-button:hover {
 39     background: white !important;
 40     border-color: #949eaa !important;
 41     z-index: 4 !important;
 42 }
 43 
 44 .rsw-skin-toggle-popup .light-mode-button .button-img {
 45     background: url('images/Light_mode_icon.png?width=70') center no-repeat;
 46     height: 70px;
 47     width: 70px;
 48 }
 49 
 50 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 51     .rsw-skin-toggle-popup .light-mode-button .button-img {
 52           background-image: url('images/Light_mode_icon.png');
 53           background-size: 70px;
 54     }
 55 
 56 }
 57 
 58 .rsw-skin-toggle-popup .light-mode-button .button-text {
 59     color: #444e5a;
 60 }
 61 
 62 .rsw-skin-toggle-popup .dark-mode-button .oo-ui-buttonElement-button,
 63 .rsw-skin-toggle-popup .dark-mode-button .oo-ui-buttonElement-button:hover {
 64     background: #222e45 !important;
 65     border-color: #172136 !important;
 66 }
 67 
 68 .rsw-skin-toggle-popup .dark-mode-button .button-img {
 69     background: url('images/Dark_mode_icon.png?width=70') center no-repeat;
 70     height: 70px;
 71     width: 70px;
 72 }
 73 
 74 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 75     .rsw-skin-toggle-popup .dark-mode-button .button-img {
 76           background-image: url('images/Dark_mode_icon.png');
 77           background-size: 70px;
 78     }
 79 
 80 }
 81 
 82 .rsw-skin-toggle-popup .dark-mode-button .button-text {
 83     color: #cbd9f4;
 84 }
 85 
 86 .rsw-skin-toggle-popup .button-text-selected {
 87     height: 15px;
 88     padding-top: 1em;
 89     margin-bottom: -1.7em;
 90 }
 91 
 92 .rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {
 93     background: url('images/Checkmark_green.png?width=15') center no-repeat;
 94     position: relative;
 95     top: 1.4em;
 96 }
 97 
 98 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 99     .rsw-skin-toggle-popup .oo-ui-optionWidget-selected .button-text-selected {
100           background-image: url('images/Checkmark_green.png');
101           background-size: 15px;
102     }
103 
104 }
105 
106 .rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
107     background-image: url('images/Checkmark_grey.png?width=15');
108     opacity: .5;
109 }
110 
111 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
112     .rsw-skin-toggle-popup .oo-ui-widget-disabled .oo-ui-optionWidget-selected .button-text-selected {
113           background-image: url('images/Checkmark_grey.png');
114     }
115 
116 }
117 
118 .rsw-skin-toggle-popup .reader-mode {
119     border-top: 2px solid var(--body-border);
120     border-bottom: 2px solid var(--body-border);
121     margin: 1em -2em 1.5em;
122     padding: 1.75em 2em .5em;
123 }
124 
125 body.wgl-darkmode .rsw-skin-toggle-popup .reader-mode {
126     border-color: #596e96;
127 }
128 
129 .setting-header {
130     font-weight: bold;
131 }
132 
133 .rsw-skin-toggle-popup .reader-mode p {
134     line-height: 1.7em;
135     margin-bottom: 1.25em;
136 }
137 
138 .rsw-skin-toggle-popup .reader-toggle {
139     float: right;
140     margin-left: 1em;
141     margin-right: -0.25em;
142     transform: scale(0.8);
143 }
144 
145 .rsw-skin-toggle-popup .appearance-save {
146     display: flex;
147     justify-content: space-between;
148     align-items: center;
149 }
150 
151 .rsw-skin-toggle-popup .floornumber-select {
152     float: right;
153 }
154 
155 .rsw-skin-toggle-popup .save-button-container {
156     display: flex;
157 }
158 
159 .rsw-skin-toggle-popup .save-button-desc {
160     margin-right: 1em;
161     line-height: 1.7em;
162 }
163 
164 body.wgl-readermode #ca-reader-menu {
165     position: relative;
166 }
167 
168 body.wgl-readermode #ca-reader-dropdown {
169     display: none;
170     padding: 1.5em .75em 1.25em;
171     box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); /* @box-shadow-dark */
172     position: absolute;
173     top: 2.5em;
174     left: 0;
175     z-index: 10;
176     width: auto;
177 
178     /* same as "More" dropdown */
179     background: var(--body-light);
180     border: 1px solid var(--body-border);
181     transition: opacity 100ms;
182 }
183 
184 body.wgl-readermode #ca-reader-dropdown .vector-menu-content {
185     height: auto;
186 }
187 
188 body.wgl-readermode #ca-reader-menu:hover #ca-reader-dropdown {
189     display: flex;
190 }
191 
192 body.wgl-readermode #ca-reader-menu > a {
193     position: relative;
194     margin-right: .6em;
195     padding-right: 1.2em;
196 }
197 
198 body.wgl-readermode #ca-reader-menu > a::after {
199     content: '';
200     position: absolute;
201     top: .1em;
202     right: 0;
203     bottom: 0;
204     left: 0;
205     background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23222%22/%3E %3C/svg%3E");
206     background-position: 100% 50%;
207     background-repeat: no-repeat;
208     opacity: 0.85;
209 }
210 
211 body.wgl-readermode #ca-reader-dropdown .portal {
212     margin: 0 .565em;
213     padding: 0;
214 }f
215 
216 body.wgl-readermode #ca-reader-dropdown h3 {
217     display: block;
218     float: initial;
219     font-size: .9em;
220     margin: 0 .6em .75em;
221     background: none;
222     box-shadow: none;
223 }
224 
225 body.wgl-readermode #ca-reader-dropdown ul {
226     background: none;
227     padding: 0;
228 }
229 
230 body.wgl-readermode #ca-reader-dropdown li {
231     background: none;
232     box-shadow: none;
233     width: 100%;
234 }
235 
236 body.wgl-readermode #ca-reader-dropdown a {
237     background: none;
238     box-shadow: none;
239     width: 100%;
240 
241     /* Vector defaults conflict here */
242     float: none;
243     font-size: 1.05em;
244     height: initial;
245     padding: .5em 0;
246 }
247 
248 body.wgl-readermode #ca-reader-dropdown a:hover {
249     text-decoration: underline;
250 }
251 
252 body.wgl-readermode #p-logo,
253 body.wgl-readermode #p-Discord {
254     display: none;
255 }
256 
257 /* it's a fix */
258 body.wgl-readermode #p-Recent_changes .rc-sidebar-user {
259 	display: flex;
260 	align-items: center;
261 }
262 
263 body.wgl-readermode #p-Recent_changes .rc-sidebar-user a:last-of-type {
264 	margin-left: .25em;
265 }
266 
267 body.wgl-readermode.wgl-darkmode #ca-reader-menu > a::after {
268     background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%238cabe6%22/%3E %3C/svg%3E");
269 }
270 
271 /* this should be in core readermode instead */
272 body.wgl-readermode .mw-footer {
273     max-width: 56rem;
274     margin: 0 auto;
275 }
276 
277 #mw-head.sticky-hidden {
278     position: fixed;
279     top: 0;
280     width: 100%;
281     background: var(--body-background-color);
282     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
283     z-index: 500;
284 }
285 
286 #mw-head.sticky-hidden #left-navigation,
287 #mw-head.sticky-hidden #right-navigation {
288     margin-top: 0;
289 }
290 
291 #mw-head.sticky-hidden .vector-menu-tabs ul li:not(.selected),
292 #mw-head.sticky-hidden .vector-menu-dropdown .vector-menu-heading,
293 #mw-head.sticky-hidden .vector-search-box-inner {
294     box-shadow: none;
295 }
296 
297 #mw-head:not(.sticky-hidden) #ca-nstab-mainpage {
298     display: none;
299 }
300 
301 /* #p-personal background overlaps with the prompt */
302 #rsw-color-scheme-prompt {
303     top: 32px !important;
304 }
305 
306 /* Disable April fools 2020 */
307 .af2020-header,
308 .af2020-desc,
309 .af2020-switch {
310 	display: none !important;
311 }