Switch from SASS variables to CSS variables

* Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.

Jed Fox committed 8 years ago

Commit a30fcf91 parent 2ad466253 files · +434 −582Browse files

Unified · Split

53 files

assets/javascripts/views/content/settings_page.coffee +3 −5
assets/stylesheets/application-dark.css.scss +0 −108
assets/stylesheets/application.css.scss +3 −1
assets/stylesheets/components/_app.scss +5 −5
assets/stylesheets/components/_content.scss +27 −32
assets/stylesheets/components/_fail.scss +1 −1
assets/stylesheets/components/_header.scss +25 −35
assets/stylesheets/components/_mobile.scss +2 −2
assets/stylesheets/components/_notice.scss +5 −5
assets/stylesheets/components/_notif.scss +12 −12
assets/stylesheets/components/_page.scss +4 −4
assets/stylesheets/components/_path.scss +6 −6
assets/stylesheets/components/_prism.scss +25 −32
assets/stylesheets/components/_settings.scss +12 −12
assets/stylesheets/components/_sidebar.scss +37 −39
assets/stylesheets/global/_base.scss +33 −33
assets/stylesheets/global/_classes.scss +24 −25
assets/stylesheets/global/_icons.scss +2 −2
assets/stylesheets/global/_mixins.scss +6 −0
assets/stylesheets/global/_print.scss +2 −2
assets/stylesheets/global/_variables-dark.scss +53 −71
assets/stylesheets/global/_variables-light.scss +76 −0
assets/stylesheets/global/_variables.scss +24 −87
assets/stylesheets/pages/_angularjs.scss +1 −1
assets/stylesheets/pages/_async.scss +2 −2
assets/stylesheets/pages/_bootstrap.scss +1 −1
assets/stylesheets/pages/_c.scss +2 −2
assets/stylesheets/pages/_clojure.scss +1 −1
assets/stylesheets/pages/_d.scss +3 −3
assets/stylesheets/pages/_dojo.scss +1 −1
assets/stylesheets/pages/_ember.scss +2 −2
assets/stylesheets/pages/_erlang.scss +1 −1
assets/stylesheets/pages/_jquery.scss +2 −2
assets/stylesheets/pages/_love.scss +2 −2
assets/stylesheets/pages/_mdn.scss +3 −3
assets/stylesheets/pages/_meteor.scss +2 −2
assets/stylesheets/pages/_npm.scss +1 −1
assets/stylesheets/pages/_phalcon.scss +1 −1
assets/stylesheets/pages/_php.scss +2 −2
assets/stylesheets/pages/_postgres.scss +1 −1
assets/stylesheets/pages/_rdoc.scss +4 −4
assets/stylesheets/pages/_react_native.scss +1 −1
assets/stylesheets/pages/_redis.scss +2 −2
assets/stylesheets/pages/_rfc.scss +1 −1
assets/stylesheets/pages/_sphinx.scss +2 −2
assets/stylesheets/pages/_sphinx_simple.scss +1 −1
assets/stylesheets/pages/_support_tables.scss +1 −1
assets/stylesheets/pages/_yard.scss +1 −1
assets/stylesheets/pages/_yii.scss +1 −1
lib/app.rb +0 −16
views/index.erb +2 −2
views/manifest.erb +1 −1
views/other.erb +2 −2

assets/javascripts/views/content/settings_page.coffee+3−5

@@ -24,12 +24,10 @@ class app.views.SettingsPage extends app.View · 23 unmodified lines
24	24	'Preferences'
25	25
26	26	toggleDark: (enable) ->
27		− css = $('link[rel="stylesheet"][data-alt]')
28		− alt = css.getAttribute('data-alt')
29		− css.setAttribute('data-alt', css.getAttribute('href'))
30		− css.setAttribute('href', alt)
	27	+ html = document.documentElement
	28	+ html.classList.toggle('_theme-default')
	29	+ html.classList.toggle('_theme-dark')
31	30	app.settings.set('dark', !!enable)
32		− app.appCache?.updateInBackground()
33	31	return
34	32
35	33	toggleLayout: (layout, enable) ->

assets/stylesheets/application-dark.css.scss+0−108

@@ -1,108 +0,0 @@
1		−//= depend_on docs-1.png
2		−//= depend_on docs-1@2x.png
3		−//= depend_on docs-2.png
4		−//= depend_on docs-2@2x.png
5		−
6		−/*!
7		− * Copyright 2013-2018 Thibaut Courouble and other contributors
8		− *
9		− * This source code is licensed under the terms of the Mozilla
10		− * Public License, v. 2.0, a copy of which may be obtained at:
11		− * http://mozilla.org/MPL/2.0/
12		− */
13		−
14		−@import 'global/variables-dark',
15		− 'global/mixins',
16		− 'global/icons',
17		− 'global/classes',
18		− 'global/base';
19		−
20		−@import 'components/app',
21		− 'components/header',
22		− 'components/notif',
23		− 'components/sidebar',
24		− 'components/settings',
25		− 'components/content',
26		− 'components/page',
27		− 'components/fail',
28		− 'components/path',
29		− 'components/notice',
30		− 'components/prism',
31		− 'components/mobile';
32		−
33		−@import 'pages/simple',
34		− 'pages/angular',
35		− 'pages/angularjs',
36		− 'pages/apache',
37		− 'pages/async',
38		− 'pages/bash',
39		− 'pages/bootstrap',
40		− 'pages/c',
41		− 'pages/cakephp',
42		− 'pages/clojure',
43		− 'pages/codeception',
44		− 'pages/coffeescript',
45		− 'pages/cordova',
46		− 'pages/crystal',
47		− 'pages/d',
48		− 'pages/d3',
49		− 'pages/dart',
50		− 'pages/dojo',
51		− 'pages/drupal',
52		− 'pages/elixir',
53		− 'pages/ember',
54		− 'pages/erlang',
55		− 'pages/express',
56		− 'pages/git',
57		− 'pages/github',
58		− 'pages/go',
59		− 'pages/graphite',
60		− 'pages/haskell',
61		− 'pages/jekyll',
62		− 'pages/jquery',
63		− 'pages/julia',
64		− 'pages/knockout',
65		− 'pages/kotlin',
66		− 'pages/laravel',
67		− 'pages/liquid',
68		− 'pages/love',
69		− 'pages/lua',
70		− 'pages/mdn',
71		− 'pages/meteor',
72		− 'pages/modernizr',
73		− 'pages/moment',
74		− 'pages/nginx',
75		− 'pages/node',
76		− 'pages/npm',
77		− 'pages/openjdk',
78		− 'pages/perl',
79		− 'pages/phalcon',
80		− 'pages/phaser',
81		− 'pages/php',
82		− 'pages/phpunit',
83		− 'pages/postgres',
84		− 'pages/pug',
85		− 'pages/python',
86		− 'pages/qt',
87		− 'pages/ramda',
88		− 'pages/rdoc',
89		− 'pages/react_native',
90		− 'pages/redis',
91		− 'pages/rethinkdb',
92		− 'pages/rfc',
93		− 'pages/rubydoc',
94		− 'pages/rust',
95		− 'pages/sinon',
96		− 'pages/socketio',
97		− 'pages/sphinx',
98		− 'pages/sphinx_simple',
99		− 'pages/sqlite',
100		− 'pages/support_tables',
101		− 'pages/tcl_tk',
102		− 'pages/tensorflow',
103		− 'pages/terraform',
104		− 'pages/underscore',
105		− 'pages/vue',
106		− 'pages/webpack',
107		− 'pages/yard',
108		− 'pages/yii';

assets/stylesheets/application.css.scss+3−1

@@ -11,7 +11,9 @@ · 10 unmodified lines
11	11	* http://mozilla.org/MPL/2.0/
12	12	*/
13	13
14		−@import 'global/variables',
	14	+@import 'global/variables-light',
	15	+ 'global/variables-dark',
	16	+ 'global/variables',
15	17	'global/mixins',
16	18	'global/icons',
17	19	'global/classes',

assets/stylesheets/components/_app.scss+5−5

@@ -1,6 +1,6 @@
1		−html._booting { background: $contentBackground; }
	1	+html._booting { background: var(--contentBackground); }
2	2	body._max-width { background: none; }
3		−html._booting body._max-width { background: $documentBackground; }
	3	+html._booting body._max-width { background: var(--documentBackground); }
4	4
5	5	._app {
6	6	position: relative;
@@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; } · 8 unmodified lines
15	15
16	16	._max-width & {
17	17	margin: 0 auto;
18		− max-width: $maxWidth;
19		− background: $contentBackground;
20		− box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
	18	+ max-width: var(--maxWidth);
	19	+ background: var(--contentBackground);
	20	+ box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder);
21	21	}
22	22	}

assets/stylesheets/components/_content.scss+27−32

@@ -4,13 +4,13 @@ · 3 unmodified lines
4	4
5	5	._container {
6	6	position: relative;
7		− z-index: $contentZ;
	7	+ z-index: var(--contentZ);
8	8	height: 100%;
9		− margin-left: $sidebarWidth;
	9	+ margin-left: var(--sidebarWidth);
10	10	pointer-events: none;
11	11	@extend %border-box;
12	12
13		− @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
	13	+ @include mobile { margin-left: var(--sidebarMediumWidth); }
14	14
15	15	._sidebar-hidden & { margin-left: 0; }
16	16	body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
@@ -30,7 +30,7 @@ · 13 unmodified lines
30	30	._sidebar-hidden &:before {
31	31	content: '';
32	32	display: block;
33		− margin-top: $headerHeight;
	33	+ margin-top: var(--headerHeight);
34	34	}
35	35
36	36	._overlay-scrollbars & { padding-left: .625rem; }
@@ -54,7 +54,7 @@ · 17 unmodified lines
54	54	font-size: 4rem;
55	55	font-weight: 300;
56	56	letter-spacing: -.125rem;
57		− color: $loadingText;
	57	+ color: var(--loadingText);
58	58	text-align: center;
59	59	cursor: default;
60	60	}
@@ -68,7 +68,7 @@ · 7 unmodified lines
68	68	//
69	69
70	70	._splash-title {
71		− color: $splashText;
	71	+ color: var(--splashText);
72	72	@extend %loading, %user-select-none;
73	73	}
74	74
@@ -88,7 +88,7 @@ · 13 unmodified lines
88	88	min-height: calc(100vh - 2.375rem);
89	89
90	90	._sidebar-hidden & {
91		− min-height: calc(100vh - 2.375rem - #{$headerHeight});
	91	+ min-height: calc(100vh - 2.375rem - var(--headerHeight));
92	92	}
93	93	}
94	94
@@ -140,12 +140,12 @@ · 45 unmodified lines
140	140
141	141	._error-text {
142	142	margin: 0 0 1rem;
143		− color: $textColorLight;
	143	+ color: var(--textColorLight);
144	144	}
145	145
146	146	._error-links {
147	147	font-size: 1rem;
148		− font-weight: $boldFontWeight;
	148	+ font-weight: var(--boldFontWeight);
149	149	}
150	150
151	151	._error-link { padding: 0 .5rem; }
@@ -167,7 +167,7 @@ · 15 unmodified lines
167	167	height: 1px;
168	168	margin-top: .25rem;
169	169	margin-left: 1rem;
170		− background: $boxBorderLight;
	170	+ background: var(--boxBorderLight);
171	171	}
172	172	}
173	173
@@ -197,7 +197,7 @@ · 23 unmodified lines
197	197	._toc-title {
198	198	margin: 0 0 .5rem;
199	199	font-size: inherit;
200		− font-weight: $boldFontWeight;
	200	+ font-weight: var(--boldFontWeight);
201	201	}
202	202
203	203	._toc-list {
@@ -252,7 +252,7 @@ · 48 unmodified lines
252	252	._docs-size {
253	253	text-align: right;
254	254
255		− > small { color: $textColorLight; }
	255	+ > small { color: var(--textColorLight); }
256	256	}
257	257
258	258	._docs-tools {
@@ -285,7 +285,7 @@ · 26 unmodified lines
285	285	padding: 0 .75rem;
286	286	}
287	287	._btn-link:not(._show) { display: none; }
288		− ._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; }
	288	+ ._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); }
289	289	}
290	290
291	291	//
@@ -297,7 +297,7 @@ · 5 unmodified lines
297	297	position: relative;
298	298	padding-left: 10em;
299	299	font-size: .8125rem;
300		− color: $textColorLight;
	300	+ color: var(--textColorLight);
301	301
302	302	+ ._news-row { margin-top: 1em; }
303	303	}
@@ -305,7 +305,7 @@ · 1 unmodified line
305	305	._news-title {
306	306	display: block;
307	307	font-size: .875rem;
308		− color: $textColor;
	308	+ color: var(--textColor);
309	309	}
310	310
311	311	._news-date {
@@ -372,12 +372,12 @@ · 60 unmodified lines
372	372	// Utilities
373	373	//
374	374
375		−._bold { font-weight: $boldFontWeight; }
	375	+._bold { font-weight: var(--boldFontWeight); }
376	376	._note { @extend %note; }
377	377	._note-green { @extend %note-green; }
378	378	._label { @extend %label; }
379	379	._code { @extend %code; }
380		−._highlight { background: $highlightBackground !important; }
	380	+._highlight { background: var(--highlightBackground) !important; }
381	381
382	382	._table { width: 100%; }
383	383	._mobile ._table { overflow-x: auto; }
@@ -396,12 +396,9 @@ · 12 unmodified lines
396	396	pre:hover > & { display: block; }
397	397	&:hover { opacity: 1; }
398	398
399		− > svg { @extend %svg-icon; }
400		−
401		− @if $style == 'dark' {
402		− > svg { fill: white; }
403		− } @else {
404		− > svg { fill: black; }
	399	+ > svg {
	400	+ @extend %svg-icon;
	401	+ fill: var(--absolute);
405	402	}
406	403
407	404	&._pre-clip-success > svg,
@@ -419,15 +416,13 @@ · 11 unmodified lines
419	416	line-height: normal;
420	417	white-space: nowrap;
421	418	padding: .375rem .675rem;
422		− background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%));
423		− border: 1px solid $boxBorder;
	419	+ background-color: var(--boxBackground);
	420	+ border: 1px solid var(--boxBorder);
424	421	border-radius: 3px;
425		− box-shadow: 0 1px rgba($boxBorder, .08);
426	422	cursor: pointer;
427	423
428	424	&:active {
429		− background-color: $boxBackground;
430		− box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder;
	425	+ box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
431	426	}
432	427	}
433	428
@@ -447,18 +442,18 @@ · 13 unmodified lines
447	442
448	443	._btn-link {
449	444	line-height: inherit;
450		− color: $linkColor;
451		− text-decoration: $linkTextDecoration;
	445	+ color: var(--linkColor);
	446	+ text-decoration: var(--linkTextDecoration);
452	447
453	448	&:hover {
454		− color: $linkColorHover;
	449	+ color: var(--linkColorHover);
455	450	text-decoration: underline;
456	451	}
457	452	}
458	453
459	454	._reset-btn,
460	455	._reset-btn:hover {
461		− color: $textColorRed;
	456	+ color: var(--textColorRed);
462	457	}
463	458
464	459	._github-btn {

assets/stylesheets/components/_fail.scss+1−1

@@ -23,7 +23,7 @@ · 22 unmodified lines
23	23	._fail-title {
24	24	margin: 0 0 1rem;
25	25	font-size: 1rem;
26		− font-weight: $boldFontWeight;
	26	+ font-weight: var(--boldFontWeight);
27	27	}
28	28
29	29	._fail-text, ._fail-list {

assets/stylesheets/components/_header.scss+25−35

@@ -4,20 +4,20 @@ · 3 unmodified lines
4	4
5	5	._header {
6	6	position: absolute;
7		− z-index: $headerZ;
	7	+ z-index: var(--headerZ);
8	8	top: 0;
9	9	left: 0;
10	10	display: -ms-flexbox;
11	11	display: flex;
12		− width: $sidebarWidth;
13		− height: $headerHeight;
14		− background: $headerBackground;
15		− border-bottom: 1px solid $headerBorder;
16		− border-right: 1px solid $headerBorder;
	12	+ width: var(--sidebarWidth);
	13	+ height: var(--headerHeight);
	14	+ background: var(--headerBackground);
	15	+ border-bottom: 1px solid var(--headerBorder);
	16	+ border-right: 1px solid var(--headerBorder);
17	17	@extend %border-box;
18	18	@extend %user-select-none;
19	19
20		− @media #{$mediumScreen} { width: $sidebarMediumWidth; }
	20	+ @include mobile { width: var(--sidebarMediumWidth); }
21	21	}
22	22
23	23	._header-left {
@@ -35,7 +35,7 @@ · 11 unmodified lines
35	35	flex: 0 0 auto;
36	36	width: 2.25rem;
37	37	height: 100%;
38		− color: $textColorLight;
	38	+ color: var(--textColorLight);
39	39	text-align: center;
40	40
41	41	&[hidden] { display: none; }
@@ -67,8 +67,8 @@ · 25 unmodified lines
67	67	word-wrap: normal;
68	68	overflow-wrap: normal;
69	69	font-size: .875rem;
70		− background: $contentBackground;
71		− border: 1px solid $headerBorder;
	70	+ background: var(--contentBackground);
	71	+ border: 1px solid var(--headerBorder);
72	72	border-radius: 3px;
73	73	box-shadow: -1px 1px 1px rgba(black, .05);
74	74	transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
@@ -98,10 +98,10 @@ · 23 unmodified lines
98	98	margin: 0;
99	99	line-height: 1.5rem;
100	100	font-size: 1rem;
101		− font-weight: $boldFontWeight;
	101	+ font-weight: var(--boldFontWeight);
102	102	letter-spacing: -.5px;
103		− background: $sidebarBackground;
104		− border-bottom: 1px solid $sidebarBorder;
	103	+ background: var(--sidebarBackground);
	104	+ border-bottom: 1px solid var(--sidebarBorder);
105	105	border-radius: 2px 2px 0 0;
106	106	}
107	107
@@ -109,7 +109,7 @@ · 1 unmodified line
109	109	._menu-title-link:hover {
110	110	display: block;
111	111	padding: .5rem 1rem;
112		− color: $focusText;
	112	+ color: var(--focusText);
113	113	text-decoration: none;
114	114	}
115	115
@@ -121,9 +121,9 @@ · 5 unmodified lines
121	121	text-decoration: none;
122	122
123	123	&:hover {
124		− color: $focusText;
	124	+ color: var(--focusText);
125	125	text-decoration: none;
126		− background: $sidebarBackground;
	126	+ background: var(--sidebarBackground);
127	127	}
128	128
129	129	&:last-child { border-radius: 0 0 2px 2px; }
@@ -151,11 +151,7 @@ · 21 unmodified lines
151	151	opacity: .42;
152	152	@extend %svg-icon;
153	153
154		− @if $style == 'dark' {
155		− fill: white;
156		− } @else {
157		− fill: black;
158		− }
	154	+ fill: var(--absolute);
159	155	}
160	156	}
161	157
@@ -166,21 +162,19 @@ · 4 unmodified lines
166	162	height: 100%;
167	163	padding: 0 .75rem 1px 1.75rem;
168	164	font-size: .875rem;
169		− background: $contentBackground;
	165	+ background: var(--contentBackground);
170	166	border: 1px solid;
171		− border-color: darken($headerBorder, 2%);
	167	+ border-color: var(--searchBorder);
172	168	border-radius: 3px;
173	169
174	170	&:focus {
175	171	outline: 0;
176		− @if $inputFocusBorder {
177		− border-color: $inputFocusBorder;
178		− box-shadow: 0 0 1px $inputFocusBorder;
179		− }
	172	+ border-color: var(--inputFocusBorder);
	173	+ box-shadow: 0 0 1px var(--inputFocusBorder);
180	174	}
181	175
182	176	&[disabled] {
183		− background: $sidebarBackground;
	177	+ background: var(--sidebarBackground);
184	178	cursor: not-allowed;
185	179	}
186	180	}
@@ -202,13 +196,9 @@ · 15 unmodified lines
202	196	top: .5rem;
203	197	left: .375rem;
204	198	@extend %svg-icon;
	199	+ fill: var(--absolute);
205	200	}
206	201
207		− @if $style == 'dark' {
208		− > svg { fill: white; }
209		− } @else {
210		− > svg { fill: black; }
211		− }
212	202	._search-active > & { display: block; }
213	203	}
214	204
@@ -222,8 +212,8 @@ · 7 unmodified lines
222	212	line-height: 1.25rem;
223	213	max-width: 50%;
224	214	font-size: .8125rem;
225		− color: $textColorLight;
226		− background: darken($headerBackground, 5%);
	215	+ color: var(--textColorLight);
	216	+ background: var(--searchTagBackground);
227	217	border-radius: 2px;
228	218	@extend %truncate-text;
229	219	}

assets/stylesheets/components/_mobile.scss+2−2

@@ -4,7 +4,7 @@ · 3 unmodified lines
4	4
5	5	._mobile {
6	6	font-size: 100%;
7		− background: $contentBackground;
	7	+ background: var(--contentBackground);
8	8
9	9	._hide-on-mobile { display: none; }
10	10
@@ -18,7 +18,7 @@ · 7 unmodified lines
18	18
19	19	._container {
20	20	margin: 0;
21		− padding-top: $headerHeight;
	21	+ padding-top: var(--headerHeight);
22	22	}
23	23
24	24	._content {

assets/stylesheets/components/_notice.scss+5−5

@@ -1,15 +1,15 @@
1	1	._notice {
2	2	position: absolute;
3		− z-index: $noticeZ;
	3	+ z-index: var(--noticeZ);
4	4	bottom: 0;
5		− left: $sidebarWidth;
	5	+ left: var(--sidebarWidth);
6	6	right: 0;
7	7	height: 2.5rem;
8	8	padding: 0 1.25rem;
9		− background: $noticeBackground;
10		− box-shadow: inset 0 1px $noticeBorder;
	9	+ background: var(--noticeBackground);
	10	+ box-shadow: inset 0 1px var(--noticeBorder);
11	11
12		− @media #{$mediumScreen} { left: $sidebarMediumWidth; }
	12	+ @include mobile { left: var(--sidebarMediumWidth); }
13	13
14	14	._sidebar-hidden & { left: 0; }
15	15

assets/stylesheets/components/_notif.scss+12−12

@@ -7,9 +7,9 @@ · 6 unmodified lines
7	7	max-width: 90%;
8	8	padding: .625rem 1rem;
9	9	font-size: .75rem;
10		− color: $notifColor;
11		− background: $notifBackground;
12		− border: $notifBorder;
	10	+ color: var(--notifColor);
	11	+ background: var(--notifBackground);
	12	+ border: var(--notifBorder);
13	13	border-radius: .25rem;
14	14	transition: opacity .2s;
15	15	opacity: 0;
@@ -30,7 +30,7 @@ · 14 unmodified lines
30	30
31	31	._notif-info {
32	32	float: right;
33		− color: $notifColorLight;
	33	+ color: var(--notifColorLight);
34	34	}
35	35
36	36	._notif-link,
@@ -69,13 +69,13 @@ · 32 unmodified lines
69	69	&::-webkit-scrollbar { width: 10px !important; }
70	70
71	71	&::-webkit-scrollbar-track {
72		− background: $notifBackground !important;
	72	+ background: var(--notifBackground) !important;
73	73	border: 0 !important;
74	74	border-radius: 5px !important;
75	75	}
76	76
77	77	&::-webkit-scrollbar-thumb {
78		− border: 3px solid $notifBackground !important;
	78	+ border: 3px solid var(--notifBackground) !important;
79	79
80	80	&:hover, &:active { border-width: 2px !important; }
81	81	}
@@ -90,7 +90,7 @@ · 8 unmodified lines
90	90	> ._news-row {
91	91	line-height: 1.125rem;
92	92	font-size: .6875rem;
93		− color: $notifColorLight;
	93	+ color: var(--notifColorLight);
94	94	margin-bottom: .25rem;
95	95
96	96	+ ._news-row { margin-top: .625rem; }
@@ -107,7 +107,7 @@ · 10 unmodified lines
107	107	._news-date {
108	108	float: right;
109	109	margin-left: 1rem;
110		− font-weight: $boldFontWeight;
	110	+ font-weight: var(--boldFontWeight);
111	111	}
112	112
113	113	code {
@@ -128,9 +128,9 @@ · 14 unmodified lines
128	128	}
129	129
130	130	._notif-tip {
131		− color: $textColor;
132		− background: $tipBackground;
133		− border: $tipBorder;
	131	+ color: var(--textColor);
	132	+ background: var(--tipBackground);
	133	+ border: var(--tipBorder);
134	134
135		− ._notif-info { color: $textColorLight; }
	135	+ ._notif-info { color: var(--textColorLight); }
136	136	}

assets/stylesheets/components/_page.scss+4−4

@@ -23,7 +23,7 @@ · 22 unmodified lines
23	23	max-width: 100%;
24	24	margin-bottom: 1em;
25	25	padding: 1px;
26		− border: 1px dotted $boxBorder;
	26	+ border: 1px dotted var(--boxBorder);
27	27	border-radius: 3px;
28	28	@extend %border-box;
29	29	}
@@ -50,7 +50,7 @@ · 20 unmodified lines
50	50	display: inline-block;
51	51	vertical-align: top;
52	52	padding: 0 .5rem;
53		− background: $contentBackground;
	53	+ background: var(--contentBackground);
54	54	@extend %internal-link;
55	55
56	56	& + & { margin-left: .75rem; }
@@ -66,7 +66,7 @@ · 9 unmodified lines
66	66	clear: both;
67	67	margin: 2rem 0 1.5rem;
68	68	font-size: .75rem;
69		− color: $textColorLight;
	69	+ color: var(--textColorLight);
70	70	text-align: center;
71	71	-webkit-font-smoothing: subpixel-antialiased;
72	72
@@ -78,7 +78,7 @@ · 5 unmodified lines
78	78	display: inline-block;
79	79	margin: 0;
80	80	padding: .25rem .75rem;
81		− background: $labelBackground;
	81	+ background: var(--labelBackground);
82	82	border-radius: 3px;
83	83	}
84	84

assets/stylesheets/components/_path.scss+6−6

@@ -1,17 +1,17 @@
1	1	._path {
2	2	position: absolute;
3		− z-index: $noticeZ - 1;
	3	+ z-index: var(--headerZ);
4	4	bottom: 0;
5		− left: $sidebarWidth;
	5	+ left: var(--sidebarWidth);
6	6	right: 0;
7	7	height: 2rem;
8	8	line-height: 2rem;
9	9	padding: 0 .375rem;
10	10	font-size: .875rem;
11		− background: $pathBackground;
12		− box-shadow: inset 0 1px $pathBorder;
	11	+ background: var(--pathBackground);
	12	+ box-shadow: inset 0 1px var(--pathBorder);
13	13
14		− @media #{$mediumScreen} { left: $sidebarMediumWidth; }
	14	+ @include mobile { left: var(--sidebarMediumWidth); }
15	15
16	16	._sidebar-hidden & { left: 0; }
17	17
@@ -24,7 +24,7 @@ · 6 unmodified lines
24	24	display: inline-block;
25	25	vertical-align: top;
26	26	padding: 0 .375rem;
27		− color: $textColor;
	27	+ color: var(--textColor);
28	28	text-decoration: none;
29	29
30	30	&:first-child:before {

assets/stylesheets/components/_prism.scss+25−32

@@ -1,9 +1,26 @@
	1	+html {
	2	+ --prismValue: #905;
	3	+ --prismText: #5e8e01;
	4	+ --prismOperator: #a67f59;
	5	+ --prismKeyword: #0070a3;
	6	+ --prismFunction: #dd4a68;
	7	+ --prismVariable: #e90;
	8	+}
	9	+html.dark {
	10	+ --prismValue: #eb8160;
	11	+ --prismText: #ddcf88;
	12	+ --prismOperator: #b1c676;
	13	+ --prismKeyword: #91b3ed;
	14	+ --prismFunction: #c79e6b;
	15	+ --prismVariable: #e9c062;
	16	+}
	17	+
1	18	.token.comment,
2	19	.token.prolog,
3	20	.token.doctype,
4	21	.token.cdata,
5	22	.token.punctuation {
6		− color: $textColorLight;
	23	+ color: var(--textColorLight);
7	24	}
8	25
9	26	.namespace {
@@ -17,11 +34,7 @@ · 7 unmodified lines
17	34	.token.constant,
18	35	.token.symbol,
19	36	.token.deleted {
20		− @if $style == 'dark' {
21		− color: #eb8160;
22		− } @else {
23		− color: #905;
24		− }
	37	+ color: var(--prismValue);
25	38	}
26	39
27	40	.token.selector,
@@ -30,11 +43,7 @@ · 2 unmodified lines
30	43	.token.char,
31	44	.token.builtin,
32	45	.token.inserted {
33		− @if $style == 'dark' {
34		− color: #ddcf88;
35		− } @else {
36		− color: #5e8e01;
37		− }
	46	+ color: var(--prismText);
38	47	}
39	48
40	49	.token.operator,
@@ -42,44 +51,28 @@ · 1 unmodified line
42	51	.token.url,
43	52	.language-css .token.string,
44	53	.style .token.string {
45		− @if $style == 'dark' {
46		− color: #b1c676;
47		− } @else {
48		− color: #a67f59;
49		− }
	54	+ color: var(--prismOperator);
50	55	}
51	56
52	57	.token.atrule,
53	58	.token.attr-value,
54	59	.token.keyword {
55		− @if $style == 'dark' {
56		− color: #91b3ed;
57		− } @else {
58		− color: #0070a3;
59		− }
	60	+ color: var(--prismKeyword);
60	61	}
61	62
62	63	.token.function {
63		− @if $style == 'dark' {
64		− color: #c79e6b;
65		− } @else {
66		− color: #dd4a68;
67		− }
	64	+ color: var(--prismFunction);
68	65	}
69	66
70	67	.token.regex,
71	68	.token.important,
72	69	.token.variable {
73		− @if $style == 'dark' {
74		− color: #e9c062;
75		− } @else {
76		− color: #e90;
77		− }
	70	+ color: var(--prismVariable);
78	71	}
79	72
80	73	.token.important,
81	74	.token.bold {
82		− font-weight: $boldFontWeight;
	75	+ font-weight: var(--boldFontWeight);
83	76	}
84	77
85	78	.token.italic {

assets/stylesheets/components/_settings.scss+12−12

@@ -7,15 +7,15 @@ · 6 unmodified lines
7	7	position: absolute;
8	8	top: 0;
9	9	bottom: 0;
10		− z-index: $headerZ;
	10	+ z-index: var(--headerZ);
11	11
12	12	&._in { display: block; }
13	13
14	14	> ._header { justify-content: space-between; }
15	15
16	16	&._dirty > ._header {
17		− background: $noteGreenBackground;
18		− border-color: $noteGreenBorder;
	17	+ background: var(--noteGreenBackground);
	18	+ border-color: var(--noteGreenBorder);
19	19	}
20	20	}
21	21
@@ -37,7 +37,7 @@ · 15 unmodified lines
37	37	padding-right: .5rem;
38	38	line-height: inherit;
39	39	font-size: inherit;
40		− font-weight: $boldFontWeight;
	40	+ font-weight: var(--boldFontWeight);
41	41	text-align: right;
42	42	@extend %border-box;
43	43	}
@@ -52,7 +52,7 @@ · 8 unmodified lines
52	52
53	53	> small {
54	54	display: block;
55		− color: $textColorLight;
	55	+ color: var(--textColorLight);
56	56	margin-left: 1.75rem;
57	57	}
58	58
@@ -62,7 +62,7 @@ · 3 unmodified lines
62	62	}
63	63	}
64	64
65		−@media (max-width: $maxWidth) {
	65	+@media (max-width: 80rem) {
66	66	._setting-max-width { display: none; }
67	67	}
68	68
@@ -80,7 +80,7 @@ · 11 unmodified lines
80	80	line-height: 1.5rem;
81	81	padding: 0 .75rem;
82	82	font-size: .875rem;
83		− font-weight: $boldFontWeight;
	83	+ font-weight: var(--boldFontWeight);
84	84	color: inherit;
85	85	text-align: left;
86	86	cursor: pointer;
@@ -119,12 +119,12 @@ · 32 unmodified lines
119	119	position: relative;
120	120	vertical-align: top;
121	121	padding: 0 .75rem;
122		− line-height: $headerHeight;
123		− color: $textColorLight;
	122	+ line-height: var(--headerHeight);
	123	+ color: var(--textColorLight);
124	124
125	125	&.active {
126		− color: $textColor;
127		− font-weight: $boldFontWeight;
128		− box-shadow: inset 0 -2px $linkColor;
	126	+ color: var(--textColor);
	127	+ font-weight: var(--boldFontWeight);
	128	+ box-shadow: inset 0 -2px var(--linkColor);
129	129	}
130	130	}

assets/stylesheets/components/_sidebar.scss+37−39

@@ -4,14 +4,14 @@ · 3 unmodified lines
4	4
5	5	._sidebar {
6	6	position: absolute;
7		− z-index: $sidebarZ;
	7	+ z-index: var(--sidebarZ);
8	8	top: 0;
9	9	bottom: 0;
10	10	left: 0;
11	11	overflow-x: hidden;
12	12	overflow-y: scroll;
13		− padding-top: $headerHeight;
14		− background: $sidebarBackground;
	13	+ padding-top: var(--headerHeight);
	14	+ background: var(--sidebarBackground);
15	15	background-clip: content-box;
16	16	-webkit-overflow-scrolling: touch;
17	17	-ms-overflow-style: none; // IE 10 doesn't support pointer-events
@@ -22,13 +22,13 @@ · 4 unmodified lines
22	22
23	23	._overlay-scrollbars & {
24	24	padding-top: 0;
25		− top: $headerHeight;
	25	+ top: var(--headerHeight);
26	26	}
27	27
28	28	body:not(._native-scrollbars) & {
29	29	&::-webkit-scrollbar { width: 10px; }
30	30	&::-webkit-scrollbar-track {
31		− background: $contentBackground;
	31	+ background: var(--contentBackground);
32	32	border: 0;
33	33	}
34	34	&::-webkit-scrollbar-thumb {
@@ -52,10 +52,10 @@ · 17 unmodified lines
52	52
53	53	._resizer {
54	54	position: absolute;
55		− z-index: $sidebarZ + 1;
56		− top: $headerHeight;
57		− bottom: $headerHeight;
58		− left: $sidebarWidth;
	55	+ z-index: var(--headerZ);
	56	+ top: var(--headerHeight);
	57	+ bottom: var(--headerHeight);
	58	+ left: var(--sidebarWidth);
59	59	margin-left: -2px;
60	60	width: 3px;
61	61	cursor: col-resize;
@@ -72,11 +72,11 @@ · 10 unmodified lines
72	72	margin: 0;
73	73	padding: 0;
74	74	list-style: none;
75		− width: $sidebarWidth;
76		− box-shadow: inset -1px 0 $sidebarBorder;
	75	+ width: var(--sidebarWidth);
	76	+ box-shadow: inset -1px 0 var(--sidebarBorder);
77	77	@extend %border-box;
78	78
79		− @media #{$mediumScreen} { width: $sidebarMediumWidth; }
	79	+ @include mobile { width: var(--sidebarMediumWidth); }
80	80
81	81	._sidebar > & { min-height: 100%; }
82	82
@@ -89,7 +89,7 @@ · 6 unmodified lines
89	89	padding: 0 .75rem 0 2.125rem;
90	90	line-height: 2rem;
91	91	font-size: .75rem;
92		− color: $textColorLight;
	92	+ color: var(--textColorLight);
93	93	text-transform: uppercase;
94	94	cursor: default;
95	95	}
@@ -110,8 +110,8 @@ · 14 unmodified lines
110	110	line-height: 1.5rem;
111	111	font-size: .875rem;
112	112	cursor: default;
113		− background: $sidebarBackground;
114		− box-shadow: inset -1px 0 $sidebarBorder;
	113	+ background: var(--sidebarBackground);
	114	+ box-shadow: inset -1px 0 var(--sidebarBorder);
115	115	@extend %truncate-text;
116	116
117	117	&, &:hover {
@@ -123,16 +123,16 @@ · 5 unmodified lines
123	123	&.focus:hover,
124	124	&.active,
125	125	&.active:hover {
126		− color: $focusText;
127		− background: $focusBackground;
128		− box-shadow: inset -1px 0 $focusBorder;
	126	+ color: var(--focusText);
	127	+ background: var(--focusBackground);
	128	+ box-shadow: inset -1px 0 var(--focusBorder);
129	129	}
130	130
131	131	&.active,
132	132	&.active:hover {
133		− color: $selectionText;
134		− background: $selectionBackground;
135		− box-shadow: inset -1px 0 $selectionBorder;
	133	+ color: var(--selectionText);
	134	+ background: var(--selectionBackground);
	135	+ box-shadow: inset -1px 0 var(--selectionBorder);
136	136	}
137	137
138	138	&:before {
@@ -160,7 +160,7 @@ · 21 unmodified lines
160	160	}
161	161
162	162	._list-count {
163		− color: $textColorLighter;
	163	+ color: var(--textColorLighter);
164	164	pointer-events: none;
165	165
166	166	._list-disabled:hover > & { display: none; }
@@ -168,7 +168,7 @@ · 1 unmodified line
168	168
169	169	._list-enable {
170	170	display: none;
171		− color: $linkColor;
	171	+ color: var(--linkColor);
172	172	cursor: pointer;
173	173
174	174	&:hover { text-decoration: underline; }
@@ -188,7 +188,7 @@ · 13 unmodified lines
188	188	._list-disabled {
189	189	@extend %_list-dir;
190	190
191		− &, &:hover { color: $textColorLight; }
	191	+ &, &:hover { color: var(--textColorLight); }
192	192	&:before { opacity: .7; }
193	193	}
194	194
@@ -200,11 +200,9 @@ · 5 unmodified lines
200	200	width: 1rem;
201	201	height: 1rem;
202	202	cursor: pointer;
203		− fill: black;
	203	+ fill: var(--absolute);
204	204	opacity: .4;
205	205
206		− @if $style == 'dark' { fill: white; }
207		−
208	206	&:hover { opacity: .65; }
209	207
210	208	._list-rdir > & {
@@ -239,11 +237,11 @@ · 28 unmodified lines
239	237	//
240	238
241	239	._list-pagelink {
242		− color: $linkColor;
	240	+ color: var(--linkColor);
243	241	cursor: pointer;
244	242
245	243	&:hover {
246		− color: $linkColorHover;
	244	+ color: var(--linkColorHover);
247	245	text-decoration: underline;
248	246	}
249	247	}
@@ -275,9 +273,9 @@ · 25 unmodified lines
275	273	left: .75rem;
276	274	width: .75rem;
277	275	height: 1px;
278		− background: rgba($selectionText, .9);
279		− box-shadow: 0 -3px rgba($selectionText, .9), // top line
280		− 0 3px rgba($selectionText, .9); // bottom line
	276	+ background: var(--transparentSelectionText);
	277	+ box-shadow: 0 -3px var(--transparentSelectionText), // top line
	278	+ 0 3px var(--transparentSelectionText); // bottom line
281	279	}
282	280	}
283	281
@@ -289,7 +287,7 @@ · 5 unmodified lines
289	287	padding: .5rem .75rem;
290	288	line-height: 1.25rem;
291	289	font-size: .8125rem;
292		− color: $textColorLight;
	290	+ color: var(--textColorLight);
293	291
294	292	& + & { padding-top: 0; }
295	293	}
@@ -303,9 +301,9 @@ · 7 unmodified lines
303	301	._list-hover.clone {
304	302	position: fixed;
305	303	overflow: visible;
306		− z-index: $hoverZ;
	304	+ z-index: var(--hoverZ);
307	305	left: 0;
308		− min-width: $sidebarWidth;
	306	+ min-width: var(--sidebarWidth);
309	307	padding: .25rem .75rem;
310	308	pointer-events: none;
311	309	-webkit-font-smoothing: subpixel-antialiased;
@@ -313,7 +311,7 @@ · 1 unmodified line
313	311	transform: translate3d(0, 0, 0);
314	312	@extend %border-box;
315	313
316		− @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
	314	+ @include mobile { min-width: var(--sidebarMediumWidth); }
317	315
318	316	> ._list-text { display: inline; }
319	317
@@ -346,10 +344,10 @@ · 26 unmodified lines
346	344	padding: .5rem .75rem .25rem .75rem;
347	345	line-height: 1.5rem;
348	346	font-size: .75rem;
349		− font-weight: $bolderFontWeight;
350		− color: $textColorLight;
	347	+ font-weight: var(--bolderFontWeight);
	348	+ color: var(--textColorLight);
351	349	text-transform: uppercase;
352		− background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0));
	350	+ background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground));
353	351	cursor: default;
354	352	}
355	353

assets/stylesheets/global/_base.scss+33−33

@@ -1,9 +1,9 @@
1	1	html {
2	2	height: 100%;
3	3	font-size: 100%;
4		− background: $documentBackground;
	4	+ background: var(--documentBackground);
5	5
6		− @media #{$mediumScreen} { font-size: 93.75%; }
	6	+ @include mobile { font-size: 93.75%; }
7	7
8	8	@include print { background: none; }
9	9	@import 'global/print';
@@ -15,12 +15,12 @@ body { · 5 unmodified lines
15	15	overflow: auto;
16	16	font-size: 1em;
17	17	font-weight: normal;
18		− font-family: $baseFont;
	18	+ font-family: var(--baseFont);
19	19	line-height: 1.7;
20		− color: $textColor;
	20	+ color: var(--textColor);
21	21	word-wrap: break-word;
22	22	overflow-wrap: break-word;
23		− background: $contentBackground;
	23	+ background: var(--contentBackground);
24	24	touch-action: manipulation;
25	25	-webkit-tap-highlight-color: rgba(black, 0);
26	26	-webkit-touch-callout: none;
@@ -29,11 +29,11 @@ body { · 2 unmodified lines
29	29	}
30	30
31	31	a {
32		− color: $linkColor;
33		− text-decoration: $linkTextDecoration;
	32	+ color: var(--linkColor);
	33	+ text-decoration: var(--linkTextDecoration);
34	34
35	35	&:hover {
36		− color: $linkColorHover;
	36	+ color: var(--linkColorHover);
37	37	text-decoration: underline;
38	38	}
39	39	}
@@ -47,7 +47,7 @@ img { · 7 unmodified lines
47	47	h1, h2, h3, h4, h5, h6 {
48	48	margin: 1.5em 0 1em;
49	49	line-height: 1.3;
50		− font-weight: $bolderFontWeight;
	50	+ font-weight: var(--bolderFontWeight);
51	51	}
52	52
53	53	h1 { font-size: 1.5em; }
@@ -59,7 +59,7 @@ h5, h6 { font-size: 1em; } · 5 unmodified lines
59	59	p { margin: 0 0 1em; }
60	60	p:last-child { margin-bottom: 0; }
61	61
62		−b, strong { font-weight: $boldFontWeight; }
	62	+b, strong { font-weight: var(--boldFontWeight); }
63	63
64	64	small { font-size: .9em; }
65	65
@@ -79,7 +79,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; } · 13 unmodified lines
79	79	li > p { margin-bottom: .25em; }
80	80
81	81	dl { margin: 1.5em 0; }
82		−dt { font-weight: $boldFontWeight; }
	82	+dt { font-weight: var(--boldFontWeight); }
83	83	dd {
84	84	margin: .375em;
85	85	padding-left: 1em;
@@ -91,15 +91,15 @@ dfn, var { font-style: normal; } · 5 unmodified lines
91	91
92	92	abbr, acronym, dfn {
93	93	cursor: help;
94		− border-bottom: 1px dotted $textColor;
	94	+ border-bottom: 1px dotted var(--textColor);
95	95	}
96	96
97	97	pre, code, samp, %pre, %code {
98		− font-family: $monoFont;
	98	+ font-family: var(--monoFont);
99	99	font-weight: normal;
100	100	font-style: normal;
101	101	font-size: .9em;
102		− color: $textColor;
	102	+ color: var(--textColor);
103	103	white-space: pre-wrap;
104	104	direction: ltr;
105	105	-moz-tab-size: 2;
@@ -121,14 +121,14 @@ a > code { color: inherit; } · 15 unmodified lines
121	121	table {
122	122	margin: 1.5em 0;
123	123	background: none;
124		− border: 1px solid $boxBorder;
	124	+ border: 1px solid var(--boxBorder);
125	125	border-collapse: separate;
126	126	border-spacing: 0;
127	127	border-radius: 3px;
128	128	}
129	129
130	130	caption {
131		− font-weight: $boldFontWeight;
	131	+ font-weight: var(--boldFontWeight);
132	132	padding: 0 .7em .3em;
133	133	}
134	134
@@ -142,15 +142,15 @@ th, td { · 7 unmodified lines
142	142	}
143	143
144	144	th {
145		− font-weight: $boldFontWeight;
	145	+ font-weight: var(--boldFontWeight);
146	146	border: 0;
147		− border-bottom: 1px solid $boxBorder;
	147	+ border-bottom: 1px solid var(--boxBorder);
148	148	border-radius: 0;
149	149	@extend %heading-box;
150	150
151	151	&:empty { background: none; }
152	152
153		− + th, + td { border-left: 1px solid $boxBorder; }
	153	+ + th, + td { border-left: 1px solid var(--boxBorder); }
154	154
155	155	tr:first-child > &:first-child { border-top-left-radius: 3px; }
156	156	tr:first-child > &:last-child { border-top-right-radius: 3px; }
@@ -161,10 +161,10 @@ th { · 4 unmodified lines
161	161	}
162	162
163	163	td {
164		− background: $contentBackground;
165		− border-bottom: 1px solid $boxBorderLight;
	164	+ background: var(--contentBackground);
	165	+ border-bottom: 1px solid var(--boxBorderLight);
166	166
167		− + td { border-left: 1px solid $boxBorderLight; }
	167	+ + td { border-left: 1px solid var(--boxBorderLight); }
168	168	tr:last-child > & { border-bottom: 0; }
169	169
170	170	> pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {
@@ -190,7 +190,7 @@ input, button { · 19 unmodified lines
190	190	margin: 0;
191	191	font-family: inherit;
192	192	font-size: 100%;
193		− color: $textColor;
	193	+ color: var(--textColor);
194	194	line-height: normal;
195	195	@extend %border-box;
196	196	}
@@ -219,7 +219,7 @@ button:focus { · 22 unmodified lines
219	219	}
220	220
221	221	img, iframe {
222		− background: $externalsBackground;
	222	+ background: var(--externalsBackground);
223	223	}
224	224
225	225	input[type="search"]::-webkit-search-cancel-button,
@@ -234,9 +234,9 @@ input[type="search"]::-webkit-search-decoration { · 8 unmodified lines
234	234	border: 0 !important;
235	235	}
236	236
237		−::-webkit-input-placeholder { color: $textColorLighter; }
238		−::-moz-placeholder { color: $textColorLighter; opacity: 1; }
239		−:-ms-input-placeholder { color: $textColorLighter; }
	237	+::-webkit-input-placeholder { color: var(--textColorLighter); }
	238	+::-moz-placeholder { color: var(--textColorLighter); opacity: 1; }
	239	+:-ms-input-placeholder { color: var(--textColorLighter); }
240	240
241	241	body:not(._native-scrollbars) {
242	242	*::-webkit-scrollbar { -webkit-appearance: none; }
@@ -247,12 +247,12 @@ body:not(._native-scrollbars) { · 4 unmodified lines
247	247	*::-webkit-scrollbar-corner { display: none; }
248	248
249	249	*::-webkit-scrollbar-track {
250		− background: $contentBackground;
251		− border: 1px solid $contentBackground;
	250	+ background: var(--contentBackground);
	251	+ border: 1px solid var(--contentBackground);
252	252
253	253	&:hover {
254		− background: $sidebarBackground;
255		− border-color: $sidebarBorder;
	254	+ background: var(--sidebarBackground);
	255	+ border-color: var(--sidebarBorder);
256	256	}
257	257
258	258	&:vertical { border-width: 0 0 0 1px; }
@@ -270,14 +270,14 @@ body:not(._native-scrollbars) { · 11 unmodified lines
270	270
271	271	*::-webkit-scrollbar-thumb {
272	272	min-height: 2rem;
273		− background: $scrollbarColor;
	273	+ background: var(--scrollbarColor);
274	274	background-clip: padding-box;
275	275	border: 5px solid rgba(black, 0);
276	276	border-radius: 10px;
277	277
278	278	&:hover,
279	279	&:active {
280		− background-color: $scrollbarColorHover;
	280	+ background-color: var(--scrollbarColorHover);
281	281	border-width: 4px;
282	282	}
283	283	}

assets/stylesheets/global/_classes.scss+24−25

@@ -36,15 +36,15 @@ · 35 unmodified lines
36	36	//
37	37
38	38	%box {
39		− background: $boxBackground;
40		− border: 1px solid $boxBorder;
	39	+ background: var(--boxBackground);
	40	+ border: 1px solid var(--boxBorder);
41	41	border-radius: 3px;
42	42	}
43	43
44	44	%heading-box {
45		− color: $boxHeaderColor;
46		− background: $boxHeaderBackground;
47		− border: 1px solid $boxBorder;
	45	+ color: var(--boxHeaderColor);
	46	+ background: var(--boxHeaderBackground);
	47	+ border: 1px solid var(--boxBorder);
48	48	border-radius: 3px;
49	49	}
50	50
@@ -82,15 +82,15 @@ · 31 unmodified lines
82	82	%note {
83	83	margin: 1.5rem 0;
84	84	padding: .5rem .875rem;
85		− background: $noteBackground;
86		− border: 1px solid $noteBorder;
	85	+ background: var(--noteBackground);
	86	+ border: 1px solid var(--noteBorder);
87	87	border-radius: 3px;
88	88	}
89	89
90	90	%label {
91	91	margin: 0 1px;
92	92	padding: 1px 4px 2px;
93		− background: $labelBackground;
	93	+ background: var(--labelBackground);
94	94	border-radius: 3px;
95	95	}
96	96
@@ -102,35 +102,35 @@ · 5 unmodified lines
102	102	padding-right: .5em;
103	103	overflow: hidden;
104	104	font-size: inherit;
105		− color: $boxHeaderColor;
106		− border: 1px solid $boxBorder;
	105	+ color: var(--boxHeaderColor);
	106	+ border: 1px solid var(--boxBorder);
107	107	border-radius: 2px;
108	108	@extend %label;
109	109	}
110	110
111	111	%label-yellow {
112		− background: $noteBackground;
113		− border-color: $noteBorder;
	112	+ background: var(--noteBackground);
	113	+ border-color: var(--noteBorder);
114	114	}
115	115
116	116	%note-green, %label-green {
117		− background: $noteGreenBackground;
118		− border-color: $noteGreenBorder;
	117	+ background: var(--noteGreenBackground);
	118	+ border-color: var(--noteGreenBorder);
119	119	}
120	120
121	121	%note-blue, %label-blue {
122		− background: $noteBlueBackground;
123		− border-color: $noteBlueBorder;
	122	+ background: var(--noteBlueBackground);
	123	+ border-color: var(--noteBlueBorder);
124	124	}
125	125
126	126	%note-orange, %label-orange {
127		− background: $noteOrangeBackground;
128		− border-color: $noteOrangeBorder;
	127	+ background: var(--noteOrangeBackground);
	128	+ border-color: var(--noteOrangeBorder);
129	129	}
130	130
131	131	%note-red, %label-red {
132		− background: $noteRedBackground;
133		− border-color: $noteRedBorder;
	132	+ background: var(--noteRedBackground);
	133	+ border-color: var(--noteRedBorder);
134	134	}
135	135
136	136	//
@@ -149,12 +149,11 @@ · 12 unmodified lines
149	149	pointer-events: none;
150	150
151	151	// <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15,15H2V6h2.595c0,0,0.689-0.896,2.17-2H1C0.447,4,0,4.449,0,5v11c0,0.553,0.447,1,1,1h15c0.553,0,1-0.447,1-1v-3.746 l-2,1.645V15z M13.361,8.05v3.551L20,6.4l-6.639-4.999v3.131C5.3,4.532,5.3,12.5,5.3,12.5C7.582,8.752,8.986,8.05,13.361,8.05z"/></svg>
152		− @if $style == 'dark' {
153		− background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
154		− } @else {
155		− background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
156		− }
	152	+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
157	153	}
158	154	}
	155	+html.dark %external-link {
	156	+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
	157	+}
159	158
160	159	%internal-link:after { content: none !important; }

assets/stylesheets/global/_icons.scss+2−2

@@ -23,8 +23,8 @@ · 22 unmodified lines
23	23	%doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
24	24	}
25	25
26		−%darkIconFix {
27		− @if $style == 'dark' {
	26	+html._theme-dark {
	27	+ %darkIconFix {
28	28	filter: invert(100%) grayscale(100%);
29	29	-webkit-filter: invert(100%) grayscale(100%);
30	30	}

assets/stylesheets/global/_mixins.scss+6−0

@@ -7,3 +7,9 @@ · 6 unmodified lines
7	7	@content;
8	8	}
9	9	}
	10	+
	11	+@mixin mobile {
	12	+ @media (max-width: 800px) {
	13	+ @content;
	14	+ }
	15	+}

assets/stylesheets/global/_print.scss+2−2

@@ -25,14 +25,14 @@ · 24 unmodified lines
25	25
26	26	._attribution-p {
27	27	background: none;
28		− border: 2px solid $boxBorder;
	28	+ border: 2px solid var(--boxBorder);
29	29	}
30	30
31	31	._attribution:last-child:after {
32	32	content: 'Exported from DevDocs \2014 https://devdocs.io';
33	33	display: block;
34	34	margin-top: 1rem;
35		− font-weight: $bolderFontWeight;
	35	+ font-weight: var(--bolderFontWeight);
36	36	}
37	37
38	38	._attribution {

assets/stylesheets/global/_variables-dark.scss+53−71

@@ -1,94 +1,76 @@
1		−$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
2		−$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
3		−$boldFontWeight: 500;
4		−$bolderFontWeight: 600;
	1	+html._theme-dark {
	2	+ --absolute: white;
5	3
6		−$style: 'dark';
	4	+ --documentBackground: #222;
	5	+ --contentBackground: #33373a;
7	6
8		−$maxWidth: 80rem;
9		−$headerHeight: 3rem;
10		−$sidebarWidth: 20rem;
11		−$sidebarMediumWidth: 16rem;
	7	+ --textColor: #cbd0d0;
	8	+ --textColorLight: #9da5ad;
	9	+ --textColorLighter: #77787a;
12	10
13		−$documentBackground: #222;
14		−$contentBackground: #33373a;
	11	+ --externalsBackground: #fff;
15	12
16		−$externalsBackground: #fff;
	13	+ --inputFocusBorder: transparent;
17	14
18		−$textColor: #cbd0d0;
19		−$textColorLight: #9da5ad;
20		−$textColorLighter: #77787a;
21		−$textColorRed: #f44336;
	15	+ --focusBackground: #3f4042;
	16	+ --focusBorder: #000;
	17	+ --focusText: #f7f2f2;
22	18
23		−$inputFocusBorder: false;
	19	+ --loadingText: #5d6164;
24	20
25		−$focusBackground: #3f4042;
26		−$focusBorder: #000;
27		−$focusText: #f7f2f2;
	21	+ --selectionBackground: #007acc;
	22	+ --selectionBorder: #000;
28	23
29		−$loadingText: #5d6164;
30		−$splashText: $loadingText;
	24	+ --highlightBackground: #64675f;
31	25
32		−$selectionBackground: #007acc;
33		−$selectionBorder: #000;
34		−$selectionText: #fff;
	26	+ --linkColor: var(--textColor);
	27	+ --linkColorHover: white;
	28	+ --linkTextDecoration: underline;
35	29
36		−$highlightBackground: #64675f;
	30	+ --headerBackground: #1c1c1c;
	31	+ --headerBorder: #000;
	32	+ --searchTagBackground: #{darken(#1c1c1c, 5%)};
	33	+ --searchBorder: #{darken(#000, 2%)};
37	34
38		−$linkColor: $textColor;
39		−$linkColorHover: white;
40		−$linkTextDecoration: underline;
	35	+ --sidebarBackground: #24282a;
	36	+ --transparentSidebarBackground: #{rgba(#24282a, 0)};
	37	+ --sidebarBorder: #000;
41	38
42		−$headerBackground: #1c1c1c;
43		−$headerBorder: #000;
	39	+ --scrollbarColor: #6c6c6f;
	40	+ --scrollbarColorHover: #949697;
44	41
45		−$sidebarBackground: #24282a;
46		−$sidebarBorder: #000;
	42	+ --pathBackground: var(--headerBackground);
	43	+ --pathBorder: var(--headerBorder);
47	44
48		−$scrollbarColor: #6c6c6f;
49		−$scrollbarColorHover: #949697;
	45	+ --noticeBackground: var(--sidebarBackground);
	46	+ --noticeBorder: var(--sidebarBorder);
50	47
51		−$pathBackground: $headerBackground;
52		−$pathBorder: $headerBorder;
	48	+ --boxBackground: var(--sidebarBackground);
	49	+ --boxBorder: var(--headerBorder);
	50	+ --boxBorderLight: var(--headerBorder);
	51	+ --boxHeaderColor: #dbe4e4;
	52	+ --boxHeaderBackground: var(--sidebarBackground);
53	53
54		−$noticeBackground: $sidebarBackground;
55		−$noticeBorder: $sidebarBorder;
	54	+ --noteBackground: #45474b;
	55	+ --noteBorder: #000;
56	56
57		−$boxBackground: $sidebarBackground;
58		−$boxBorder: $headerBorder;
59		−$boxBorderLight: $headerBorder;
60		−$boxHeaderColor: #dbe4e4;
61		−$boxHeaderBackground: $sidebarBackground;
	57	+ --noteGreenBackground: #284a2a;
	58	+ --noteGreenBorder: #000;
62	59
63		−$noteBackground: #45474b;
64		−$noteBorder: #000;
	60	+ --noteBlueBackground: #2a4151;
	61	+ --noteBlueBorder: #000;
65	62
66		−$noteGreenBackground: #284a2a;
67		−$noteGreenBorder: #000;
	63	+ --noteOrangeBackground: #563322;
	64	+ --noteOrangeBorder: #000;
68	65
69		−$noteBlueBackground: #2a4151;
70		−$noteBlueBorder: #000;
	66	+ --noteRedBackground: #603033;
	67	+ --noteRedBorder: #000;
71	68
72		−$noteOrangeBackground: #563322;
73		−$noteOrangeBorder: #000;
	69	+ --labelBackground: var(--boxBackground);
74	70
75		−$noteRedBackground: #603033;
76		−$noteRedBorder: #000;
	71	+ --notifBackground: #{rgba(#555, .95)};
	72	+ --notifBorder: 1px solid #000;
77	73
78		−$labelBackground: $boxBackground;
79		−
80		−$notifBackground: rgba(#555, .95);
81		−$notifBorder: 1px solid #000;
82		−$notifColor: #fff;
83		−$notifColorLight: #ccc;
84		−
85		−$tipBackground: $notifBackground;
86		−$tipBorder: $notifBorder;
87		−
88		−$mediumScreen: '(max-width: 800px)';
89		−
90		−$contentZ: 1;
91		−$sidebarZ: 2;
92		−$headerZ: 3;
93		−$noticeZ: 4;
94		−$hoverZ: 5;
	74	+ --tipBackground: var(--notifBackground);
	75	+ --tipBorder: var(--notifBorder);
	76	+}

assets/stylesheets/global/_variables-light.scss+76−0

@@ -0,0 +1,76 @@
	1	+html._theme-default {
	2	+ --absolute: black;
	3	+
	4	+ --documentBackground: #f3f3f3;
	5	+ --contentBackground: #fff;
	6	+
	7	+ --textColor: #333;
	8	+ --textColorLight: #666;
	9	+ --textColorLighter: #888;
	10	+
	11	+ --externalsBackground: #fff;
	12	+
	13	+ --inputFocusBorder: #35b5f4;
	14	+
	15	+ --focusBackground: #e5e5e5;
	16	+ --focusBorder: #d4d4d4;
	17	+ --focusText: #000;
	18	+
	19	+ --loadingText: #ccc;
	20	+
	21	+ --selectionBackground: #398df0;
	22	+ --selectionBorder: #196fc2;
	23	+
	24	+ --highlightBackground: #fffdcd;
	25	+
	26	+ --linkColor: #3377c0;
	27	+ --linkColorHover: #2f6cb6;
	28	+ --linkTextDecoration: none;
	29	+
	30	+ --headerBackground: #eee;
	31	+ --headerBorder: #d7d7d7;
	32	+ --searchTagBackground: #{darken(#eee, 5%)};
	33	+ --searchBorder: #{darken(#d7d7d7, 2%)};
	34	+
	35	+ --sidebarBackground: #f9f9f9;
	36	+ --transparentSidebarBackground: #{rgba(#f9f9f9, 0)};
	37	+ --sidebarBorder: #e1e1e1;
	38	+
	39	+ --scrollbarColor: #ccc;
	40	+ --scrollbarColorHover: #999;
	41	+
	42	+ --pathBackground: var(--sidebarBackground);
	43	+ --pathBorder: var(--sidebarBorder);
	44	+
	45	+ --noticeBackground: #faf9e2;
	46	+ --noticeBorder: #e2e2c1;
	47	+
	48	+ --boxBackground: #fafafa;
	49	+ --boxBorder: #d8d8d8;
	50	+ --boxBorderLight: #e5e5e5;
	51	+ --boxHeaderColor: var(--textColor);
	52	+ --boxHeaderBackground: #f5f5f5;
	53	+
	54	+ --noteBackground: #f8f8dd;
	55	+ --noteBorder: #d3d952;
	56	+
	57	+ --noteGreenBackground: #e7f8e1;
	58	+ --noteGreenBorder: #89da70;
	59	+
	60	+ --noteBlueBackground: #d4f3fd;
	61	+ --noteBlueBorder: #94bbeb;
	62	+
	63	+ --noteOrangeBackground: #fbe6d1;
	64	+ --noteOrangeBorder: #ec8b01;
	65	+
	66	+ --noteRedBackground: #fed5d3;
	67	+ --noteRedBorder: #dc7874;
	68	+
	69	+ --labelBackground: #f4f4f4;
	70	+
	71	+ --notifBackground: #{rgba(#333, .85)};
	72	+ --notifBorder: none;
	73	+
	74	+ --tipBackground: #{rgba(#fffdcd, .95)};
	75	+ --tipBorder: 1px solid #e7dca9;
	76	+}

assets/stylesheets/global/_variables.scss+24−87

@@ -1,94 +1,31 @@
1		−$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
2		−$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
3		−$boldFontWeight: 500;
4		−$bolderFontWeight: 600;
	1	+html {
	2	+ --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
	3	+ --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
	4	+ --boldFontWeight: 500;
	5	+ --bolderFontWeight: 600;
5	6
6		−$style: 'light';
	7	+ --textColorRed: #f44336;
7	8
8		−$maxWidth: 80rem;
9		−$headerHeight: 3rem;
10		−$sidebarWidth: 20rem;
11		−$sidebarMediumWidth: 16rem;
	9	+ --splashText: var(--loadingText);
12	10
13		−$documentBackground: #f3f3f3;
14		−$contentBackground: #fff;
	11	+ --selectionText: #fff;
	12	+ --transparentSelectionText: rgba(255, 255, 255, 0.9);
15	13
16		−$externalsBackground: $contentBackground;
	14	+ --notifColor: #fff;
	15	+ --notifColorLight: #ccc;
17	16
18		−$textColor: #333;
19		−$textColorLight: #666;
20		−$textColorLighter: #888;
21		−$textColorRed: #f44336;
	17	+ --maxWidth: 80rem;
	18	+ --headerHeight: 3rem;
	19	+ --sidebarWidth: 20rem;
	20	+ --sidebarMediumWidth: 16rem;
22	21
23		−$inputFocusBorder: #35b5f4;
	22	+ --focusBackground: #e5e5e5;
	23	+ --focusBorder: #d4d4d4;
	24	+ --focusText: #000;
24	25
25		−$focusBackground: #e5e5e5;
26		−$focusBorder: #d4d4d4;
27		−$focusText: #000;
28		−
29		−$loadingText: #ccc;
30		−$splashText: #ccc;
31		−
32		−$selectionBackground: #398df0;
33		−$selectionBorder: #196fc2;
34		−$selectionText: #fff;
35		−
36		−$highlightBackground: #fffdcd;
37		−
38		−$linkColor: #3377c0;
39		−$linkColorHover: #2f6cb6;
40		−$linkTextDecoration: none;
41		−
42		−$headerBackground: #eee;
43		−$headerBorder: #d7d7d7;
44		−
45		−$sidebarBackground: #f9f9f9;
46		−$sidebarBorder: #e1e1e1;
47		−
48		−$scrollbarColor: #ccc;
49		−$scrollbarColorHover: #999;
50		−
51		−$pathBackground: $sidebarBackground;
52		−$pathBorder: $sidebarBorder;
53		−
54		−$noticeBackground: #faf9e2;
55		−$noticeBorder: #e2e2c1;
56		−
57		−$boxBackground: #fafafa;
58		−$boxBorder: #d8d8d8;
59		−$boxBorderLight: #e5e5e5;
60		−$boxHeaderColor: $textColor;
61		−$boxHeaderBackground: #f5f5f5;
62		−
63		−$noteBackground: #f8f8dd;
64		−$noteBorder: #d3d952;
65		−
66		−$noteGreenBackground: #e7f8e1;
67		−$noteGreenBorder: #89da70;
68		−
69		−$noteBlueBackground: #d4f3fd;
70		−$noteBlueBorder: #94bbeb;
71		−
72		−$noteOrangeBackground: #fbe6d1;
73		−$noteOrangeBorder: #ec8b01;
74		−
75		−$noteRedBackground: #fed5d3;
76		−$noteRedBorder: #dc7874;
77		−
78		−$labelBackground: #f4f4f4;
79		−
80		−$notifBackground: rgba(#333, .85);
81		−$notifBorder: none;
82		−$notifColor: #fff;
83		−$notifColorLight: #ccc;
84		−
85		−$tipBackground: rgba(#fffdcd, .95);
86		−$tipBorder: 1px solid #e7dca9;
87		−
88		−$mediumScreen: '(max-width: 800px)';
89		−
90		−$contentZ: 1;
91		−$sidebarZ: 2;
92		−$headerZ: 3;
93		−$noticeZ: 4;
94		−$hoverZ: 5;
	26	+ --contentZ: 1;
	27	+ --sidebarZ: 2;
	28	+ --headerZ: 3;
	29	+ --noticeZ: 4;
	30	+ --hoverZ: 5;
	31	+}

assets/stylesheets/pages/_angularjs.scss+1−1

@@ -8,7 +8,7 @@ · 7 unmodified lines
8	8	.nav-index-section {
9	9	margin: 1.5em 0 1em -2em;
10	10	list-style: none;
11		− font-weight: $boldFontWeight;
	11	+ font-weight: var(--boldFontWeight);
12	12	text-transform: capitalize;
13	13	}
14	14

assets/stylesheets/pages/_async.scss+2−2

@@ -3,13 +3,13 @@ · 2 unmodified lines
3	3
4	4	h3 > .type-signature {
5	5	float: right;
6		− color: $textColorLight;
	6	+ color: var(--textColorLight);
7	7	}
8	8
9	9	h3 > .signature-attributes {
10	10	font-size: .75rem;
11	11	font-weight: normal;
12	12	font-style: italic;
13		− color: $textColorLighter;
	13	+ color: var(--textColorLighter);
14	14	}
15	15	}

assets/stylesheets/pages/_bootstrap.scss+1−1

@@ -4,7 +4,7 @@ · 3 unmodified lines
4	4	h4 > code, h5 > code, strong > code { @extend %label; }
5	5
6	6	h2 > small {
7		− color: $textColorLight;
	7	+ color: var(--textColorLight);
8	8	float: right;
9	9	}
10	10

assets/stylesheets/pages/_c.scss+2−2

@@ -23,7 +23,7 @@ · 22 unmodified lines
23	23
24	24	.t-spar { // language/switch, language/for, etc.
25	25	font-style: italic;
26		− color: $textColorLight;
	26	+ color: var(--textColorLight);
27	27	}
28	28	.t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; }
29	29
@@ -57,7 +57,7 @@ · 27 unmodified lines
57	57	margin: 1rem 0;
58	58	padding: .375rem;
59	59	font-size: .75rem;
60		− border: 1px solid $boxBorder;
	60	+ border: 1px solid var(--boxBorder);
61	61	border-radius: 2px;
62	62	}
63	63

assets/stylesheets/pages/_clojure.scss+1−1

@@ -5,6 +5,6 @@ · 4 unmodified lines
5	5	.type {
6	6	float: right;
7	7	font-size: .9em;
8		− color: $textColorLight;
	8	+ color: var(--textColorLight);
9	9	}
10	10	}

assets/stylesheets/pages/_d.scss+3−3

@@ -2,10 +2,10 @@ · 1 unmodified line
2	2	h2 { @extend %block-heading; }
3	3	h3, .d_decl { @extend %block-label, %label-blue; }
4	4	.d_decl { @extend %code; }
5		− .d_decl > small { color: $textColorLight; }
6		− .d_decl > strong { font-weight: $bolderFontWeight; }
	5	+ .d_decl > small { color: var(--textColorLight); }
	6	+ .d_decl > strong { font-weight: var(--bolderFontWeight); }
7	7
8	8	p > code, li > code, td > code, dd > code { @extend %label; }
9	9
10		− span.red { color: $textColorRed; }
	10	+ span.red { color: var(--textColorRed); }
11	11	}

assets/stylesheets/pages/_dojo.scss+1−1

@@ -1,5 +1,5 @@
1	1	._dojo {
2	2	@extend %simple;
3	3
4		− .jsdoc-inheritance { color: $textColorLight; }
	4	+ .jsdoc-inheritance { color: var(--textColorLight); }
5	5	}

assets/stylesheets/pages/_ember.scss+2−2

@@ -5,7 +5,7 @@ · 4 unmodified lines
5	5
6	6	h3 > .access {
7	7	float: right;
8		− color: $textColorLight;
	8	+ color: var(--textColorLight);
9	9	font-weight: normal;
10	10	}
11	11
@@ -15,6 +15,6 @@ · 3 unmodified lines
15	15	}
16	16
17	17	p.github-link {
18		− color: $textColorLight;
	18	+ color: var(--textColorLight);
19	19	}
20	20	}

assets/stylesheets/pages/_erlang.scss+1−1

@@ -5,5 +5,5 @@ · 4 unmodified lines
5	5	code.code { @extend %label; }
6	6	.note { @extend %note; }
7	7	.warning { @extend %note, %note-red; }
8		− .note .label, .warning .label { font-weight: $boldFontWeight; }
	8	+ .note .label, .warning .label { font-weight: var(--boldFontWeight); }
9	9	}

assets/stylesheets/pages/_jquery.scss+2−2

@@ -32,7 +32,7 @@ · 31 unmodified lines
32	32
33	33	.toc-list {
34	34	margin-top: 0;
35		− font-weight: $boldFontWeight;
	35	+ font-weight: var(--boldFontWeight);
36	36
37	37	> li + li { margin-top: 1em; }
38	38	> li > ul { font-weight: normal; }
@@ -48,7 +48,7 @@ · 9 unmodified lines
48	48	.returns,
49	49	.option-type {
50	50	float: right;
51		− font-weight: $boldFontWeight;
	51	+ font-weight: var(--boldFontWeight);
52	52	margin-left: 1em;
53	53	}
54	54

assets/stylesheets/pages/_love.scss+2−2

@@ -12,6 +12,6 @@ · 11 unmodified lines
12	12	.smwtable { width: 100%; }
13	13	.smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; }
14	14
15		− .cell-green { background: $noteGreenBackground; }
16		− .cell-red { background: $noteRedBackground; }
	15	+ .cell-green { background: var(--noteGreenBackground); }
	16	+ .cell-red { background: var(--noteRedBackground); }
17	17	}

assets/stylesheets/pages/_mdn.scss+3−3

@@ -7,7 +7,7 @@ · 6 unmodified lines
7	7	> span {
8	8	display: block;
9	9	font-size: 1rem;
10		− font-weight: $boldFontWeight;
	10	+ font-weight: var(--boldFontWeight);
11	11	}
12	12
13	13	ul, ol {
@@ -42,7 +42,7 @@ · 28 unmodified lines
42	42	> .note {
43	43	em {
44	44	font-style: normal;
45		− font-weight: $boldFontWeight;
	45	+ font-weight: var(--boldFontWeight);
46	46	}
47	47
48	48	> ul { margin: 1em 0; }
@@ -93,7 +93,7 @@ · 44 unmodified lines
93	93	dt > strong > code, // HTML element attribute
94	94	dl > dt > code { // CSS property value, Javascript function argument
95	95	font-family: inherit;
96		− font-weight: $boldFontWeight;
	96	+ font-weight: var(--boldFontWeight);
97	97	font-size: inherit;
98	98	}
99	99

assets/stylesheets/pages/_meteor.scss+2−2

@@ -9,10 +9,10 @@ · 8 unmodified lines
9	9	dt > code { @extend %label; }
10	10
11	11	.api-heading { overflow: hidden; }
12		− .api-heading > code { font-weight: $boldFontWeight; }
	12	+ .api-heading > code { font-weight: var(--boldFontWeight); }
13	13	.locus, .src-code { float: right; }
14	14	.locus, .type, .src-code { margin-left: .5em; }
15	15	h2 .subtext-api { margin-top: .25rem; }
16	16	.locus, .subtext-api, .subtext-api > code { font-size: .75rem; }
17		− .locus, .type { color: $textColorLight; }
	17	+ .locus, .type { color: var(--textColorLight); }
18	18	}

assets/stylesheets/pages/_npm.scss+1−1

@@ -8,7 +8,7 @@ · 7 unmodified lines
8	8
9	9	.faint.heading {
10	10	font-size: .9em;
11		− color: $textColorLight;
	11	+ color: var(--textColorLight);
12	12	}
13	13
14	14	.youtube-video iframe { width: 420px; height: 315px; }

assets/stylesheets/pages/_phalcon.scss+1−1

@@ -3,6 +3,6 @@ · 2 unmodified lines
3	3
4	4	h3 > small {
5	5	float: right;
6		− color: $textColorLight;
	6	+ color: var(--textColorLight);
7	7	}
8	8	}

assets/stylesheets/pages/_php.scss+2−2

@@ -13,7 +13,7 @@ · 12 unmodified lines
13	13
14	14	.verinfo {
15	15	float: right;
16		− font-weight: $boldFontWeight;
	16	+ font-weight: var(--boldFontWeight);
17	17	}
18	18
19	19	.classsynopsis,
@@ -21,7 +21,7 @@ · 1 unmodified line
21	21	.description > .methodsynopsis,
22	22	.description > .fieldsynopsis { @extend %note, %note-blue; }
23	23
24		− .classsynopsisinfo_comment { color: $textColorLight; }
	24	+ .classsynopsisinfo_comment { color: var(--textColorLight); }
25	25
26	26	.classsynopsisinfo_comment,
27	27	.classsynopsis > .constructorsynopsis,

assets/stylesheets/pages/_postgres.scss+1−1

@@ -16,7 +16,7 @@ · 15 unmodified lines
16	16	}
17	17
18	18	p > code { @extend %label; }
19		− p.c2 { font-weight: $boldFontWeight; }
	19	+ p.c2 { font-weight: var(--boldFontWeight); }
20	20
21	21	.navfooter > table { width: 100%; }
22	22	td[align=center] { text-align: center; }

assets/stylesheets/pages/_rdoc.scss+4−4

@@ -6,7 +6,7 @@ · 5 unmodified lines
6	6	.method-description > h2, h3, h4, h5, h6 { font-size: 1em; }
7	7
8	8	.method-heading {
9		− font-weight: $boldFontWeight;
	9	+ font-weight: var(--boldFontWeight);
10	10	@extend %block-label, %label-blue;
11	11
12	12	+ .method-heading { margin-top: -.5em; }
@@ -22,7 +22,7 @@ · 9 unmodified lines
22	22	a.method-click-advice {
23	23	float: right;
24	24	font-size: .75rem;
25		− color: $linkColor;
	25	+ color: var(--linkColor);
26	26	cursor: pointer;
27	27	@extend %user-select-none;
28	28
@@ -42,8 +42,8 @@ · 13 unmodified lines
42	42	top: 0;
43	43	left: -1em;
44	44	right: 0;
45		− background: rgba($contentBackground, .95);
46		− box-shadow: 0 1em 1em 1em $contentBackground;
	45	+ background: var(--contentBackground);
	46	+ box-shadow: 0 1em 1em 1em var(--contentBackground);
47	47
48	48	> pre { margin: 0; }
49	49	}

assets/stylesheets/pages/_react_native.scss+1−1

@@ -2,7 +2,7 @@ · 1 unmodified line
2	2	@extend %simple;
3	3
4	4	.deprecated { @extend %note, %note-orange; }
5		− .deprecatedTitle { font-weight: $boldFontWeight; }
	5	+ .deprecatedTitle { font-weight: var(--boldFontWeight); }
6	6
7	7	span.platform { float: right; }
8	8	span.propType, span.platform { font-weight: normal; }

assets/stylesheets/pages/_redis.scss+2−2

@@ -14,7 +14,7 @@ · 13 unmodified lines
14	14
15	15	.args {
16	16	font-size: .75rem;
17		− color: $textColorLight;
	17	+ color: var(--textColorLight);
18	18	}
19	19
20	20	// Others
@@ -35,7 +35,7 @@ · 14 unmodified lines
35	35	> .prompt {
36	36	float: left;
37	37	margin-right: .5em;
38		− color: $textColorLight;
	38	+ color: var(--textColorLight);
39	39	}
40	40
41	41	> code {

assets/stylesheets/pages/_rfc.scss+1−1

@@ -10,6 +10,6 @@ · 9 unmodified lines
10	10
11	11	> h1, > h2, > h3, > h4, > h5 {
12	12	margin: 0;
13		− font-family: $baseFont;
	13	+ font-family: var(--baseFont);
14	14	}
15	15	}

assets/stylesheets/pages/_sphinx.scss+2−2

@@ -14,7 +14,7 @@ · 13 unmodified lines
14	14
15	15	.versionmodified, span.title, .topic-title {
16	16	display: block;
17		− font-weight: $boldFontWeight;
	17	+ font-weight: var(--boldFontWeight);
18	18	}
19	19
20	20	p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }
@@ -26,7 +26,7 @@ · 5 unmodified lines
26	26	.admonition-title {
27	27	float: left;
28	28	margin: 0 .5em 0 0;
29		− font-weight: $boldFontWeight;
	29	+ font-weight: var(--boldFontWeight);
30	30
31	31	&:after { content: ':'; }
32	32	}

assets/stylesheets/pages/_sphinx_simple.scss+1−1

@@ -6,7 +6,7 @@ · 5 unmodified lines
6	6	.admonition.tip { @extend %note-green; }
7	7	.admonition-title {
8	8	margin: 0 0 .25rem;
9		− font-weight: $boldFontWeight;
	9	+ font-weight: var(--boldFontWeight);
10	10	}
11	11
12	12	code { @extend %label; }

assets/stylesheets/pages/_support_tables.scss+1−1

@@ -24,7 +24,7 @@ · 23 unmodified lines
24	24	}
25	25
26	26	tr.current {
27		− font-weight: $boldFontWeight;
	27	+ font-weight: var(--boldFontWeight);
28	28	font-size: 1rem;
29	29	}
30	30

assets/stylesheets/pages/_yard.scss+1−1

@@ -1,5 +1,5 @@
1	1	._yard {
2	2	@extend %simple;
3	3
4		− .tag_title { font-weight: $boldFontWeight; }
	4	+ .tag_title { font-weight: var(--boldFontWeight); }
5	5	}

assets/stylesheets/pages/_yii.scss+1−1

@@ -3,6 +3,6 @@ · 2 unmodified lines
3	3
4	4	.detail-header-tag, .detailHeaderTag {
5	5	float: right;
6		− color: $textColorLight;
	6	+ color: var(--textColorLight);
7	7	}
8	8	}

lib/app.rb+0−16

@@ -196,7 +196,6 @@ class App < Sinatra::Application · 195 unmodified lines
196	196	@@manifest_asset_urls \|\|= [
197	197	javascript_path('application', asset_host: false),
198	198	stylesheet_path('application'),
199		− stylesheet_path('application-dark'),
200	199	image_path('docs-1.png'),
201	200	image_path('docs-1@2x.png'),
202	201	image_path('docs-2.png'),
@@ -205,21 +204,6 @@ class App < Sinatra::Application · 2 unmodified lines
205	204	]
206	205	end
207	206
208		− def main_stylesheet_path
209		− stylesheet_paths[dark_theme? ? :dark : :default]
210		− end
211		−
212		− def alternate_stylesheet_path
213		− stylesheet_paths[dark_theme? ? :default : :dark]
214		− end
215		−
216		− def stylesheet_paths
217		− @@stylesheet_paths \|\|= {
218		− default: stylesheet_path('application'),
219		− dark: stylesheet_path('application-dark')
220		− }
221		− end
222		−
223	207	def app_size
224	208	@app_size \|\|= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"
225	209	end

views/index.erb+2−2

@@ -1,5 +1,5 @@
1	1	<!DOCTYPE html>
2		−<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting">
	2	+<html<%= ' manifest="/manifest.appcache"' if App.production? %> prefix="og: http://ogp.me/ns#" lang="en" class="_booting _theme-<%= app_theme %>">
3	3	<head>
4	4	<meta charset="utf-8">
5	5	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
@@ -30,7 +30,7 @@ · 24 unmodified lines
30	30	<link rel="apple-touch-icon" sizes="152x152" href="<%= App.cdn_origin %>/images/apple-icon-152.png">
31	31	<link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
32	32	<link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">
33		− <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
	33	+ <%= stylesheet_tag 'application' %>
34	34	</head>
35	35	<body<%= %( class="#{app_layout}") if app_layout %>>
36	36	<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>

views/manifest.erb+1−1

@@ -1,5 +1,5 @@
1	1	CACHE MANIFEST
2		−# <%= app_theme %> <%= app_size %> <%= app_layout %>
	2	+# <%= app_size %> <%= app_layout %>
3	3
4	4	CACHE:
5	5	/

views/other.erb+2−2

@@ -1,5 +1,5 @@
1	1	<!DOCTYPE html>
2		−<html lang="en" class="_booting">
	2	+<html lang="en" class="_booting _theme-<%= app_theme %>">
3	3	<head>
4	4	<meta charset="utf-8">
5	5	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -11,7 +11,7 @@ · 5 unmodified lines
11	11	<link rel="manifest" href="/manifest.json">
12	12	<link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
13	13	<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">
14		− <link rel="stylesheet" href="<%= main_stylesheet_path %>" data-alt="<%= alternate_stylesheet_path %>">
	14	+ <%= stylesheet_tag 'application' %>
15	15	</head>
16	16	<body<%= %( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">
17	17	<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>