History

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
  1. assets/javascripts/views/content/settings_page.coffee +3 −5
  2. assets/stylesheets/application-dark.css.scss +0 −108
  3. assets/stylesheets/application.css.scss +3 −1
  4. assets/stylesheets/components/_app.scss +5 −5
  5. assets/stylesheets/components/_content.scss +27 −32
  6. assets/stylesheets/components/_fail.scss +1 −1
  7. assets/stylesheets/components/_header.scss +25 −35
  8. assets/stylesheets/components/_mobile.scss +2 −2
  9. assets/stylesheets/components/_notice.scss +5 −5
  10. assets/stylesheets/components/_notif.scss +12 −12
  11. assets/stylesheets/components/_page.scss +4 −4
  12. assets/stylesheets/components/_path.scss +6 −6
  13. assets/stylesheets/components/_prism.scss +25 −32
  14. assets/stylesheets/components/_settings.scss +12 −12
  15. assets/stylesheets/components/_sidebar.scss +37 −39
  16. assets/stylesheets/global/_base.scss +33 −33
  17. assets/stylesheets/global/_classes.scss +24 −25
  18. assets/stylesheets/global/_icons.scss +2 −2
  19. assets/stylesheets/global/_mixins.scss +6 −0
  20. assets/stylesheets/global/_print.scss +2 −2
  21. assets/stylesheets/global/_variables-dark.scss +53 −71
  22. assets/stylesheets/global/_variables-light.scss +76 −0
  23. assets/stylesheets/global/_variables.scss +24 −87
  24. assets/stylesheets/pages/_angularjs.scss +1 −1
  25. assets/stylesheets/pages/_async.scss +2 −2
  26. assets/stylesheets/pages/_bootstrap.scss +1 −1
  27. assets/stylesheets/pages/_c.scss +2 −2
  28. assets/stylesheets/pages/_clojure.scss +1 −1
  29. assets/stylesheets/pages/_d.scss +3 −3
  30. assets/stylesheets/pages/_dojo.scss +1 −1
  31. assets/stylesheets/pages/_ember.scss +2 −2
  32. assets/stylesheets/pages/_erlang.scss +1 −1
  33. assets/stylesheets/pages/_jquery.scss +2 −2
  34. assets/stylesheets/pages/_love.scss +2 −2
  35. assets/stylesheets/pages/_mdn.scss +3 −3
  36. assets/stylesheets/pages/_meteor.scss +2 −2
  37. assets/stylesheets/pages/_npm.scss +1 −1
  38. assets/stylesheets/pages/_phalcon.scss +1 −1
  39. assets/stylesheets/pages/_php.scss +2 −2
  40. assets/stylesheets/pages/_postgres.scss +1 −1
  41. assets/stylesheets/pages/_rdoc.scss +4 −4
  42. assets/stylesheets/pages/_react_native.scss +1 −1
  43. assets/stylesheets/pages/_redis.scss +2 −2
  44. assets/stylesheets/pages/_rfc.scss +1 −1
  45. assets/stylesheets/pages/_sphinx.scss +2 −2
  46. assets/stylesheets/pages/_sphinx_simple.scss +1 −1
  47. assets/stylesheets/pages/_support_tables.scss +1 −1
  48. assets/stylesheets/pages/_yard.scss +1 −1
  49. assets/stylesheets/pages/_yii.scss +1 −1
  50. lib/app.rb +0 −16
  51. views/index.erb +2 −2
  52. views/manifest.erb +1 −1
  53. 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 'Preferences'24 'Preferences'
25 25
26 toggleDark: (enable) ->26 toggleDark: (enable) ->
27 css = $('link[rel="stylesheet"][data-alt]')27 html = document.documentElement
28 alt = css.getAttribute('data-alt')28 html.classList.toggle('_theme-default')
29 css.setAttribute('data-alt', css.getAttribute('href'))29 html.classList.toggle('_theme-dark')
30 css.setAttribute('href', alt)
31 app.settings.set('dark', !!enable)30 app.settings.set('dark', !!enable)
32 app.appCache?.updateInBackground()
33 return31 return
34 32
35 toggleLayout: (layout, enable) ->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 * http://mozilla.org/MPL/2.0/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 'global/mixins',17 'global/mixins',
16 'global/icons',18 'global/icons',
17 'global/classes',19 'global/classes',
assets/stylesheets/components/_app.scss+5−5
@@ -1,6 +1,6 @@
1html._booting { background: $contentBackground; }1html._booting { background: var(--contentBackground); }
2body._max-width { background: none; }2body._max-width { background: none; }
3html._booting body._max-width { background: $documentBackground; }3html._booting body._max-width { background: var(--documentBackground); }
4 4
5._app {5._app {
6 position: relative;6 position: relative;
@@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; } · 8 unmodified lines
15 15
16 ._max-width & {16 ._max-width & {
17 margin: 0 auto;17 margin: 0 auto;
18 max-width: $maxWidth;18 max-width: var(--maxWidth);
19 background: $contentBackground;19 background: var(--contentBackground);
20 box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;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._container {5._container {
6 position: relative;6 position: relative;
7 z-index: $contentZ;7 z-index: var(--contentZ);
8 height: 100%;8 height: 100%;
9 margin-left: $sidebarWidth;9 margin-left: var(--sidebarWidth);
10 pointer-events: none;10 pointer-events: none;
11 @extend %border-box;11 @extend %border-box;
12 12
13 @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }13 @include mobile { margin-left: var(--sidebarMediumWidth); }
14 14
15 ._sidebar-hidden & { margin-left: 0; }15 ._sidebar-hidden & { margin-left: 0; }
16 body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }16 body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
@@ -30,7 +30,7 @@ · 13 unmodified lines
30 ._sidebar-hidden &:before {30 ._sidebar-hidden &:before {
31 content: '';31 content: '';
32 display: block;32 display: block;
33 margin-top: $headerHeight;33 margin-top: var(--headerHeight);
34 }34 }
35 35
36 ._overlay-scrollbars & { padding-left: .625rem; }36 ._overlay-scrollbars & { padding-left: .625rem; }
@@ -54,7 +54,7 @@ · 17 unmodified lines
54 font-size: 4rem;54 font-size: 4rem;
55 font-weight: 300;55 font-weight: 300;
56 letter-spacing: -.125rem;56 letter-spacing: -.125rem;
57 color: $loadingText;57 color: var(--loadingText);
58 text-align: center;58 text-align: center;
59 cursor: default;59 cursor: default;
60}60}
@@ -68,7 +68,7 @@ · 7 unmodified lines
68//68//
69 69
70._splash-title {70._splash-title {
71 color: $splashText;71 color: var(--splashText);
72 @extend %loading, %user-select-none;72 @extend %loading, %user-select-none;
73}73}
74 74
@@ -88,7 +88,7 @@ · 13 unmodified lines
88 min-height: calc(100vh - 2.375rem);88 min-height: calc(100vh - 2.375rem);
89 89
90 ._sidebar-hidden & {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._error-text {141._error-text {
142 margin: 0 0 1rem;142 margin: 0 0 1rem;
143 color: $textColorLight;143 color: var(--textColorLight);
144}144}
145 145
146._error-links {146._error-links {
147 font-size: 1rem;147 font-size: 1rem;
148 font-weight: $boldFontWeight;148 font-weight: var(--boldFontWeight);
149}149}
150 150
151._error-link { padding: 0 .5rem; }151._error-link { padding: 0 .5rem; }
@@ -167,7 +167,7 @@ · 15 unmodified lines
167 height: 1px;167 height: 1px;
168 margin-top: .25rem;168 margin-top: .25rem;
169 margin-left: 1rem;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._toc-title {197._toc-title {
198 margin: 0 0 .5rem;198 margin: 0 0 .5rem;
199 font-size: inherit;199 font-size: inherit;
200 font-weight: $boldFontWeight;200 font-weight: var(--boldFontWeight);
201}201}
202 202
203._toc-list {203._toc-list {
@@ -252,7 +252,7 @@ · 48 unmodified lines
252._docs-size {252._docs-size {
253 text-align: right;253 text-align: right;
254 254
255 > small { color: $textColorLight; }255 > small { color: var(--textColorLight); }
256}256}
257 257
258._docs-tools {258._docs-tools {
@@ -285,7 +285,7 @@ · 26 unmodified lines
285 padding: 0 .75rem;285 padding: 0 .75rem;
286 }286 }
287 ._btn-link:not(._show) { display: none; }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 position: relative;297 position: relative;
298 padding-left: 10em;298 padding-left: 10em;
299 font-size: .8125rem;299 font-size: .8125rem;
300 color: $textColorLight;300 color: var(--textColorLight);
301 301
302 + ._news-row { margin-top: 1em; }302 + ._news-row { margin-top: 1em; }
303 }303 }
@@ -305,7 +305,7 @@ · 1 unmodified line
305 ._news-title {305 ._news-title {
306 display: block;306 display: block;
307 font-size: .875rem;307 font-size: .875rem;
308 color: $textColor;308 color: var(--textColor);
309 }309 }
310 310
311 ._news-date {311 ._news-date {
@@ -372,12 +372,12 @@ · 60 unmodified lines
372// Utilities372// Utilities
373//373//
374 374
375._bold { font-weight: $boldFontWeight; }375._bold { font-weight: var(--boldFontWeight); }
376._note { @extend %note; }376._note { @extend %note; }
377._note-green { @extend %note-green; }377._note-green { @extend %note-green; }
378._label { @extend %label; }378._label { @extend %label; }
379._code { @extend %code; }379._code { @extend %code; }
380._highlight { background: $highlightBackground !important; }380._highlight { background: var(--highlightBackground) !important; }
381 381
382._table { width: 100%; }382._table { width: 100%; }
383._mobile ._table { overflow-x: auto; }383._mobile ._table { overflow-x: auto; }
@@ -396,12 +396,9 @@ · 12 unmodified lines
396 pre:hover > & { display: block; }396 pre:hover > & { display: block; }
397 &:hover { opacity: 1; }397 &:hover { opacity: 1; }
398 398
399 > svg { @extend %svg-icon; }399 > svg {
400 400 @extend %svg-icon;
401 @if $style == 'dark' {401 fill: var(--absolute);
402 > svg { fill: white; }
403 } @else {
404 > svg { fill: black; }
405 }402 }
406 403
407 &._pre-clip-success > svg,404 &._pre-clip-success > svg,
@@ -419,15 +416,13 @@ · 11 unmodified lines
419 line-height: normal;416 line-height: normal;
420 white-space: nowrap;417 white-space: nowrap;
421 padding: .375rem .675rem;418 padding: .375rem .675rem;
422 background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%));419 background-color: var(--boxBackground);
423 border: 1px solid $boxBorder;420 border: 1px solid var(--boxBorder);
424 border-radius: 3px;421 border-radius: 3px;
425 box-shadow: 0 1px rgba($boxBorder, .08);
426 cursor: pointer;422 cursor: pointer;
427 423
428 &:active {424 &:active {
429 background-color: $boxBackground;425 box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
430 box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder;
431 }426 }
432}427}
433 428
@@ -447,18 +442,18 @@ · 13 unmodified lines
447 442
448._btn-link {443._btn-link {
449 line-height: inherit;444 line-height: inherit;
450 color: $linkColor;445 color: var(--linkColor);
451 text-decoration: $linkTextDecoration;446 text-decoration: var(--linkTextDecoration);
452 447
453 &:hover {448 &:hover {
454 color: $linkColorHover;449 color: var(--linkColorHover);
455 text-decoration: underline;450 text-decoration: underline;
456 }451 }
457}452}
458 453
459._reset-btn,454._reset-btn,
460._reset-btn:hover {455._reset-btn:hover {
461 color: $textColorRed;456 color: var(--textColorRed);
462}457}
463 458
464._github-btn {459._github-btn {
assets/stylesheets/components/_fail.scss+1−1
@@ -23,7 +23,7 @@ · 22 unmodified lines
23._fail-title {23._fail-title {
24 margin: 0 0 1rem;24 margin: 0 0 1rem;
25 font-size: 1rem;25 font-size: 1rem;
26 font-weight: $boldFontWeight;26 font-weight: var(--boldFontWeight);
27}27}
28 28
29._fail-text, ._fail-list {29._fail-text, ._fail-list {
assets/stylesheets/components/_header.scss+25−35
@@ -4,20 +4,20 @@ · 3 unmodified lines
4 4
5._header {5._header {
6 position: absolute;6 position: absolute;
7 z-index: $headerZ;7 z-index: var(--headerZ);
8 top: 0;8 top: 0;
9 left: 0;9 left: 0;
10 display: -ms-flexbox;10 display: -ms-flexbox;
11 display: flex;11 display: flex;
12 width: $sidebarWidth;12 width: var(--sidebarWidth);
13 height: $headerHeight;13 height: var(--headerHeight);
14 background: $headerBackground;14 background: var(--headerBackground);
15 border-bottom: 1px solid $headerBorder;15 border-bottom: 1px solid var(--headerBorder);
16 border-right: 1px solid $headerBorder;16 border-right: 1px solid var(--headerBorder);
17 @extend %border-box;17 @extend %border-box;
18 @extend %user-select-none;18 @extend %user-select-none;
19 19
20 @media #{$mediumScreen} { width: $sidebarMediumWidth; }20 @include mobile { width: var(--sidebarMediumWidth); }
21}21}
22 22
23._header-left {23._header-left {
@@ -35,7 +35,7 @@ · 11 unmodified lines
35 flex: 0 0 auto;35 flex: 0 0 auto;
36 width: 2.25rem;36 width: 2.25rem;
37 height: 100%;37 height: 100%;
38 color: $textColorLight;38 color: var(--textColorLight);
39 text-align: center;39 text-align: center;
40 40
41 &[hidden] { display: none; }41 &[hidden] { display: none; }
@@ -67,8 +67,8 @@ · 25 unmodified lines
67 word-wrap: normal;67 word-wrap: normal;
68 overflow-wrap: normal;68 overflow-wrap: normal;
69 font-size: .875rem;69 font-size: .875rem;
70 background: $contentBackground;70 background: var(--contentBackground);
71 border: 1px solid $headerBorder;71 border: 1px solid var(--headerBorder);
72 border-radius: 3px;72 border-radius: 3px;
73 box-shadow: -1px 1px 1px rgba(black, .05);73 box-shadow: -1px 1px 1px rgba(black, .05);
74 transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;74 transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
@@ -98,10 +98,10 @@ · 23 unmodified lines
98 margin: 0;98 margin: 0;
99 line-height: 1.5rem;99 line-height: 1.5rem;
100 font-size: 1rem;100 font-size: 1rem;
101 font-weight: $boldFontWeight;101 font-weight: var(--boldFontWeight);
102 letter-spacing: -.5px;102 letter-spacing: -.5px;
103 background: $sidebarBackground;103 background: var(--sidebarBackground);
104 border-bottom: 1px solid $sidebarBorder;104 border-bottom: 1px solid var(--sidebarBorder);
105 border-radius: 2px 2px 0 0;105 border-radius: 2px 2px 0 0;
106}106}
107 107
@@ -109,7 +109,7 @@ · 1 unmodified line
109._menu-title-link:hover {109._menu-title-link:hover {
110 display: block;110 display: block;
111 padding: .5rem 1rem;111 padding: .5rem 1rem;
112 color: $focusText;112 color: var(--focusText);
113 text-decoration: none;113 text-decoration: none;
114}114}
115 115
@@ -121,9 +121,9 @@ · 5 unmodified lines
121 text-decoration: none;121 text-decoration: none;
122 122
123 &:hover {123 &:hover {
124 color: $focusText;124 color: var(--focusText);
125 text-decoration: none;125 text-decoration: none;
126 background: $sidebarBackground;126 background: var(--sidebarBackground);
127 }127 }
128 128
129 &:last-child { border-radius: 0 0 2px 2px; }129 &:last-child { border-radius: 0 0 2px 2px; }
@@ -151,11 +151,7 @@ · 21 unmodified lines
151 opacity: .42;151 opacity: .42;
152 @extend %svg-icon;152 @extend %svg-icon;
153 153
154 @if $style == 'dark' {154 fill: var(--absolute);
155 fill: white;
156 } @else {
157 fill: black;
158 }
159 }155 }
160}156}
161 157
@@ -166,21 +162,19 @@ · 4 unmodified lines
166 height: 100%;162 height: 100%;
167 padding: 0 .75rem 1px 1.75rem;163 padding: 0 .75rem 1px 1.75rem;
168 font-size: .875rem;164 font-size: .875rem;
169 background: $contentBackground;165 background: var(--contentBackground);
170 border: 1px solid;166 border: 1px solid;
171 border-color: darken($headerBorder, 2%);167 border-color: var(--searchBorder);
172 border-radius: 3px;168 border-radius: 3px;
173 169
174 &:focus {170 &:focus {
175 outline: 0;171 outline: 0;
176 @if $inputFocusBorder {172 border-color: var(--inputFocusBorder);
177 border-color: $inputFocusBorder;173 box-shadow: 0 0 1px var(--inputFocusBorder);
178 box-shadow: 0 0 1px $inputFocusBorder;
179 }
180 }174 }
181 175
182 &[disabled] {176 &[disabled] {
183 background: $sidebarBackground;177 background: var(--sidebarBackground);
184 cursor: not-allowed;178 cursor: not-allowed;
185 }179 }
186}180}
@@ -202,13 +196,9 @@ · 15 unmodified lines
202 top: .5rem;196 top: .5rem;
203 left: .375rem;197 left: .375rem;
204 @extend %svg-icon;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 ._search-active > & { display: block; }202 ._search-active > & { display: block; }
213}203}
214 204
@@ -222,8 +212,8 @@ · 7 unmodified lines
222 line-height: 1.25rem;212 line-height: 1.25rem;
223 max-width: 50%;213 max-width: 50%;
224 font-size: .8125rem;214 font-size: .8125rem;
225 color: $textColorLight;215 color: var(--textColorLight);
226 background: darken($headerBackground, 5%);216 background: var(--searchTagBackground);
227 border-radius: 2px;217 border-radius: 2px;
228 @extend %truncate-text;218 @extend %truncate-text;
229}219}
assets/stylesheets/components/_mobile.scss+2−2
@@ -4,7 +4,7 @@ · 3 unmodified lines
4 4
5._mobile {5._mobile {
6 font-size: 100%;6 font-size: 100%;
7 background: $contentBackground;7 background: var(--contentBackground);
8 8
9 ._hide-on-mobile { display: none; }9 ._hide-on-mobile { display: none; }
10 10
@@ -18,7 +18,7 @@ · 7 unmodified lines
18 18
19 ._container {19 ._container {
20 margin: 0;20 margin: 0;
21 padding-top: $headerHeight;21 padding-top: var(--headerHeight);
22 }22 }
23 23
24 ._content {24 ._content {
assets/stylesheets/components/_notice.scss+5−5
@@ -1,15 +1,15 @@
1._notice {1._notice {
2 position: absolute;2 position: absolute;
3 z-index: $noticeZ;3 z-index: var(--noticeZ);
4 bottom: 0;4 bottom: 0;
5 left: $sidebarWidth;5 left: var(--sidebarWidth);
6 right: 0;6 right: 0;
7 height: 2.5rem;7 height: 2.5rem;
8 padding: 0 1.25rem;8 padding: 0 1.25rem;
9 background: $noticeBackground;9 background: var(--noticeBackground);
10 box-shadow: inset 0 1px $noticeBorder;10 box-shadow: inset 0 1px var(--noticeBorder);
11 11
12 @media #{$mediumScreen} { left: $sidebarMediumWidth; }12 @include mobile { left: var(--sidebarMediumWidth); }
13 13
14 ._sidebar-hidden & { left: 0; }14 ._sidebar-hidden & { left: 0; }
15 15
assets/stylesheets/components/_notif.scss+12−12
@@ -7,9 +7,9 @@ · 6 unmodified lines
7 max-width: 90%;7 max-width: 90%;
8 padding: .625rem 1rem;8 padding: .625rem 1rem;
9 font-size: .75rem;9 font-size: .75rem;
10 color: $notifColor;10 color: var(--notifColor);
11 background: $notifBackground;11 background: var(--notifBackground);
12 border: $notifBorder;12 border: var(--notifBorder);
13 border-radius: .25rem;13 border-radius: .25rem;
14 transition: opacity .2s;14 transition: opacity .2s;
15 opacity: 0;15 opacity: 0;
@@ -30,7 +30,7 @@ · 14 unmodified lines
30 30
31._notif-info {31._notif-info {
32 float: right;32 float: right;
33 color: $notifColorLight;33 color: var(--notifColorLight);
34}34}
35 35
36._notif-link,36._notif-link,
@@ -69,13 +69,13 @@ · 32 unmodified lines
69 &::-webkit-scrollbar { width: 10px !important; }69 &::-webkit-scrollbar { width: 10px !important; }
70 70
71 &::-webkit-scrollbar-track {71 &::-webkit-scrollbar-track {
72 background: $notifBackground !important;72 background: var(--notifBackground) !important;
73 border: 0 !important;73 border: 0 !important;
74 border-radius: 5px !important;74 border-radius: 5px !important;
75 }75 }
76 76
77 &::-webkit-scrollbar-thumb {77 &::-webkit-scrollbar-thumb {
78 border: 3px solid $notifBackground !important;78 border: 3px solid var(--notifBackground) !important;
79 79
80 &:hover, &:active { border-width: 2px !important; }80 &:hover, &:active { border-width: 2px !important; }
81 }81 }
@@ -90,7 +90,7 @@ · 8 unmodified lines
90 > ._news-row {90 > ._news-row {
91 line-height: 1.125rem;91 line-height: 1.125rem;
92 font-size: .6875rem;92 font-size: .6875rem;
93 color: $notifColorLight;93 color: var(--notifColorLight);
94 margin-bottom: .25rem;94 margin-bottom: .25rem;
95 95
96 + ._news-row { margin-top: .625rem; }96 + ._news-row { margin-top: .625rem; }
@@ -107,7 +107,7 @@ · 10 unmodified lines
107 ._news-date {107 ._news-date {
108 float: right;108 float: right;
109 margin-left: 1rem;109 margin-left: 1rem;
110 font-weight: $boldFontWeight;110 font-weight: var(--boldFontWeight);
111 }111 }
112 112
113 code {113 code {
@@ -128,9 +128,9 @@ · 14 unmodified lines
128}128}
129 129
130._notif-tip {130._notif-tip {
131 color: $textColor;131 color: var(--textColor);
132 background: $tipBackground;132 background: var(--tipBackground);
133 border: $tipBorder;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 max-width: 100%;23 max-width: 100%;
24 margin-bottom: 1em;24 margin-bottom: 1em;
25 padding: 1px;25 padding: 1px;
26 border: 1px dotted $boxBorder;26 border: 1px dotted var(--boxBorder);
27 border-radius: 3px;27 border-radius: 3px;
28 @extend %border-box;28 @extend %border-box;
29 }29 }
@@ -50,7 +50,7 @@ · 20 unmodified lines
50 display: inline-block;50 display: inline-block;
51 vertical-align: top;51 vertical-align: top;
52 padding: 0 .5rem;52 padding: 0 .5rem;
53 background: $contentBackground;53 background: var(--contentBackground);
54 @extend %internal-link;54 @extend %internal-link;
55 55
56 & + & { margin-left: .75rem; }56 & + & { margin-left: .75rem; }
@@ -66,7 +66,7 @@ · 9 unmodified lines
66 clear: both;66 clear: both;
67 margin: 2rem 0 1.5rem;67 margin: 2rem 0 1.5rem;
68 font-size: .75rem;68 font-size: .75rem;
69 color: $textColorLight;69 color: var(--textColorLight);
70 text-align: center;70 text-align: center;
71 -webkit-font-smoothing: subpixel-antialiased;71 -webkit-font-smoothing: subpixel-antialiased;
72 72
@@ -78,7 +78,7 @@ · 5 unmodified lines
78 display: inline-block;78 display: inline-block;
79 margin: 0;79 margin: 0;
80 padding: .25rem .75rem;80 padding: .25rem .75rem;
81 background: $labelBackground;81 background: var(--labelBackground);
82 border-radius: 3px;82 border-radius: 3px;
83}83}
84 84
assets/stylesheets/components/_path.scss+6−6
@@ -1,17 +1,17 @@
1._path {1._path {
2 position: absolute;2 position: absolute;
3 z-index: $noticeZ - 1;3 z-index: var(--headerZ);
4 bottom: 0;4 bottom: 0;
5 left: $sidebarWidth;5 left: var(--sidebarWidth);
6 right: 0;6 right: 0;
7 height: 2rem;7 height: 2rem;
8 line-height: 2rem;8 line-height: 2rem;
9 padding: 0 .375rem;9 padding: 0 .375rem;
10 font-size: .875rem;10 font-size: .875rem;
11 background: $pathBackground;11 background: var(--pathBackground);
12 box-shadow: inset 0 1px $pathBorder;12 box-shadow: inset 0 1px var(--pathBorder);
13 13
14 @media #{$mediumScreen} { left: $sidebarMediumWidth; }14 @include mobile { left: var(--sidebarMediumWidth); }
15 15
16 ._sidebar-hidden & { left: 0; }16 ._sidebar-hidden & { left: 0; }
17 17
@@ -24,7 +24,7 @@ · 6 unmodified lines
24 display: inline-block;24 display: inline-block;
25 vertical-align: top;25 vertical-align: top;
26 padding: 0 .375rem;26 padding: 0 .375rem;
27 color: $textColor;27 color: var(--textColor);
28 text-decoration: none;28 text-decoration: none;
29 29
30 &:first-child:before {30 &:first-child:before {
assets/stylesheets/components/_prism.scss+25−32
@@ -1,9 +1,26 @@
1html {
2 --prismValue: #905;
3 --prismText: #5e8e01;
4 --prismOperator: #a67f59;
5 --prismKeyword: #0070a3;
6 --prismFunction: #dd4a68;
7 --prismVariable: #e90;
8}
9html.dark {
10 --prismValue: #eb8160;
11 --prismText: #ddcf88;
12 --prismOperator: #b1c676;
13 --prismKeyword: #91b3ed;
14 --prismFunction: #c79e6b;
15 --prismVariable: #e9c062;
16}
17
1.token.comment,18.token.comment,
2.token.prolog,19.token.prolog,
3.token.doctype,20.token.doctype,
4.token.cdata,21.token.cdata,
5.token.punctuation {22.token.punctuation {
6 color: $textColorLight;23 color: var(--textColorLight);
7}24}
8 25
9.namespace {26.namespace {
@@ -17,11 +34,7 @@ · 7 unmodified lines
17.token.constant,34.token.constant,
18.token.symbol,35.token.symbol,
19.token.deleted {36.token.deleted {
20 @if $style == 'dark' {37 color: var(--prismValue);
21 color: #eb8160;
22 } @else {
23 color: #905;
24 }
25}38}
26 39
27.token.selector,40.token.selector,
@@ -30,11 +43,7 @@ · 2 unmodified lines
30.token.char,43.token.char,
31.token.builtin,44.token.builtin,
32.token.inserted {45.token.inserted {
33 @if $style == 'dark' {46 color: var(--prismText);
34 color: #ddcf88;
35 } @else {
36 color: #5e8e01;
37 }
38}47}
39 48
40.token.operator,49.token.operator,
@@ -42,44 +51,28 @@ · 1 unmodified line
42.token.url,51.token.url,
43.language-css .token.string,52.language-css .token.string,
44.style .token.string {53.style .token.string {
45 @if $style == 'dark' {54 color: var(--prismOperator);
46 color: #b1c676;
47 } @else {
48 color: #a67f59;
49 }
50}55}
51 56
52.token.atrule,57.token.atrule,
53.token.attr-value,58.token.attr-value,
54.token.keyword {59.token.keyword {
55 @if $style == 'dark' {60 color: var(--prismKeyword);
56 color: #91b3ed;
57 } @else {
58 color: #0070a3;
59 }
60}61}
61 62
62.token.function {63.token.function {
63 @if $style == 'dark' {64 color: var(--prismFunction);
64 color: #c79e6b;
65 } @else {
66 color: #dd4a68;
67 }
68}65}
69 66
70.token.regex,67.token.regex,
71.token.important,68.token.important,
72.token.variable {69.token.variable {
73 @if $style == 'dark' {70 color: var(--prismVariable);
74 color: #e9c062;
75 } @else {
76 color: #e90;
77 }
78}71}
79 72
80.token.important,73.token.important,
81.token.bold {74.token.bold {
82 font-weight: $boldFontWeight;75 font-weight: var(--boldFontWeight);
83}76}
84 77
85.token.italic {78.token.italic {
assets/stylesheets/components/_settings.scss+12−12
@@ -7,15 +7,15 @@ · 6 unmodified lines
7 position: absolute;7 position: absolute;
8 top: 0;8 top: 0;
9 bottom: 0;9 bottom: 0;
10 z-index: $headerZ;10 z-index: var(--headerZ);
11 11
12 &._in { display: block; }12 &._in { display: block; }
13 13
14 > ._header { justify-content: space-between; }14 > ._header { justify-content: space-between; }
15 15
16 &._dirty > ._header {16 &._dirty > ._header {
17 background: $noteGreenBackground;17 background: var(--noteGreenBackground);
18 border-color: $noteGreenBorder;18 border-color: var(--noteGreenBorder);
19 }19 }
20}20}
21 21
@@ -37,7 +37,7 @@ · 15 unmodified lines
37 padding-right: .5rem;37 padding-right: .5rem;
38 line-height: inherit;38 line-height: inherit;
39 font-size: inherit;39 font-size: inherit;
40 font-weight: $boldFontWeight;40 font-weight: var(--boldFontWeight);
41 text-align: right;41 text-align: right;
42 @extend %border-box;42 @extend %border-box;
43}43}
@@ -52,7 +52,7 @@ · 8 unmodified lines
52 52
53 > small {53 > small {
54 display: block;54 display: block;
55 color: $textColorLight;55 color: var(--textColorLight);
56 margin-left: 1.75rem;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 ._setting-max-width { display: none; }66 ._setting-max-width { display: none; }
67}67}
68 68
@@ -80,7 +80,7 @@ · 11 unmodified lines
80 line-height: 1.5rem;80 line-height: 1.5rem;
81 padding: 0 .75rem;81 padding: 0 .75rem;
82 font-size: .875rem;82 font-size: .875rem;
83 font-weight: $boldFontWeight;83 font-weight: var(--boldFontWeight);
84 color: inherit;84 color: inherit;
85 text-align: left;85 text-align: left;
86 cursor: pointer;86 cursor: pointer;
@@ -119,12 +119,12 @@ · 32 unmodified lines
119 position: relative;119 position: relative;
120 vertical-align: top;120 vertical-align: top;
121 padding: 0 .75rem;121 padding: 0 .75rem;
122 line-height: $headerHeight;122 line-height: var(--headerHeight);
123 color: $textColorLight;123 color: var(--textColorLight);
124 124
125 &.active {125 &.active {
126 color: $textColor;126 color: var(--textColor);
127 font-weight: $boldFontWeight;127 font-weight: var(--boldFontWeight);
128 box-shadow: inset 0 -2px $linkColor;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._sidebar {5._sidebar {
6 position: absolute;6 position: absolute;
7 z-index: $sidebarZ;7 z-index: var(--sidebarZ);
8 top: 0;8 top: 0;
9 bottom: 0;9 bottom: 0;
10 left: 0;10 left: 0;
11 overflow-x: hidden;11 overflow-x: hidden;
12 overflow-y: scroll;12 overflow-y: scroll;
13 padding-top: $headerHeight;13 padding-top: var(--headerHeight);
14 background: $sidebarBackground;14 background: var(--sidebarBackground);
15 background-clip: content-box;15 background-clip: content-box;
16 -webkit-overflow-scrolling: touch;16 -webkit-overflow-scrolling: touch;
17 -ms-overflow-style: none; // IE 10 doesn't support pointer-events17 -ms-overflow-style: none; // IE 10 doesn't support pointer-events
@@ -22,13 +22,13 @@ · 4 unmodified lines
22 22
23 ._overlay-scrollbars & {23 ._overlay-scrollbars & {
24 padding-top: 0;24 padding-top: 0;
25 top: $headerHeight;25 top: var(--headerHeight);
26 }26 }
27 27
28 body:not(._native-scrollbars) & {28 body:not(._native-scrollbars) & {
29 &::-webkit-scrollbar { width: 10px; }29 &::-webkit-scrollbar { width: 10px; }
30 &::-webkit-scrollbar-track {30 &::-webkit-scrollbar-track {
31 background: $contentBackground;31 background: var(--contentBackground);
32 border: 0;32 border: 0;
33 }33 }
34 &::-webkit-scrollbar-thumb {34 &::-webkit-scrollbar-thumb {
@@ -52,10 +52,10 @@ · 17 unmodified lines
52 52
53._resizer {53._resizer {
54 position: absolute;54 position: absolute;
55 z-index: $sidebarZ + 1;55 z-index: var(--headerZ);
56 top: $headerHeight;56 top: var(--headerHeight);
57 bottom: $headerHeight;57 bottom: var(--headerHeight);
58 left: $sidebarWidth;58 left: var(--sidebarWidth);
59 margin-left: -2px;59 margin-left: -2px;
60 width: 3px;60 width: 3px;
61 cursor: col-resize;61 cursor: col-resize;
@@ -72,11 +72,11 @@ · 10 unmodified lines
72 margin: 0;72 margin: 0;
73 padding: 0;73 padding: 0;
74 list-style: none;74 list-style: none;
75 width: $sidebarWidth;75 width: var(--sidebarWidth);
76 box-shadow: inset -1px 0 $sidebarBorder;76 box-shadow: inset -1px 0 var(--sidebarBorder);
77 @extend %border-box;77 @extend %border-box;
78 78
79 @media #{$mediumScreen} { width: $sidebarMediumWidth; }79 @include mobile { width: var(--sidebarMediumWidth); }
80 80
81 ._sidebar > & { min-height: 100%; }81 ._sidebar > & { min-height: 100%; }
82 82
@@ -89,7 +89,7 @@ · 6 unmodified lines
89 padding: 0 .75rem 0 2.125rem;89 padding: 0 .75rem 0 2.125rem;
90 line-height: 2rem;90 line-height: 2rem;
91 font-size: .75rem;91 font-size: .75rem;
92 color: $textColorLight;92 color: var(--textColorLight);
93 text-transform: uppercase;93 text-transform: uppercase;
94 cursor: default;94 cursor: default;
95}95}
@@ -110,8 +110,8 @@ · 14 unmodified lines
110 line-height: 1.5rem;110 line-height: 1.5rem;
111 font-size: .875rem;111 font-size: .875rem;
112 cursor: default;112 cursor: default;
113 background: $sidebarBackground;113 background: var(--sidebarBackground);
114 box-shadow: inset -1px 0 $sidebarBorder;114 box-shadow: inset -1px 0 var(--sidebarBorder);
115 @extend %truncate-text;115 @extend %truncate-text;
116 116
117 &, &:hover {117 &, &:hover {
@@ -123,16 +123,16 @@ · 5 unmodified lines
123 &.focus:hover,123 &.focus:hover,
124 &.active,124 &.active,
125 &.active:hover {125 &.active:hover {
126 color: $focusText;126 color: var(--focusText);
127 background: $focusBackground;127 background: var(--focusBackground);
128 box-shadow: inset -1px 0 $focusBorder;128 box-shadow: inset -1px 0 var(--focusBorder);
129 }129 }
130 130
131 &.active,131 &.active,
132 &.active:hover {132 &.active:hover {
133 color: $selectionText;133 color: var(--selectionText);
134 background: $selectionBackground;134 background: var(--selectionBackground);
135 box-shadow: inset -1px 0 $selectionBorder;135 box-shadow: inset -1px 0 var(--selectionBorder);
136 }136 }
137 137
138 &:before {138 &:before {
@@ -160,7 +160,7 @@ · 21 unmodified lines
160}160}
161 161
162._list-count {162._list-count {
163 color: $textColorLighter;163 color: var(--textColorLighter);
164 pointer-events: none;164 pointer-events: none;
165 165
166 ._list-disabled:hover > & { display: none; }166 ._list-disabled:hover > & { display: none; }
@@ -168,7 +168,7 @@ · 1 unmodified line
168 168
169._list-enable {169._list-enable {
170 display: none;170 display: none;
171 color: $linkColor;171 color: var(--linkColor);
172 cursor: pointer;172 cursor: pointer;
173 173
174 &:hover { text-decoration: underline; }174 &:hover { text-decoration: underline; }
@@ -188,7 +188,7 @@ · 13 unmodified lines
188._list-disabled {188._list-disabled {
189 @extend %_list-dir;189 @extend %_list-dir;
190 190
191 &, &:hover { color: $textColorLight; }191 &, &:hover { color: var(--textColorLight); }
192 &:before { opacity: .7; }192 &:before { opacity: .7; }
193}193}
194 194
@@ -200,11 +200,9 @@ · 5 unmodified lines
200 width: 1rem;200 width: 1rem;
201 height: 1rem;201 height: 1rem;
202 cursor: pointer;202 cursor: pointer;
203 fill: black;203 fill: var(--absolute);
204 opacity: .4;204 opacity: .4;
205 205
206 @if $style == 'dark' { fill: white; }
207
208 &:hover { opacity: .65; }206 &:hover { opacity: .65; }
209 207
210 ._list-rdir > & {208 ._list-rdir > & {
@@ -239,11 +237,11 @@ · 28 unmodified lines
239//237//
240 238
241._list-pagelink {239._list-pagelink {
242 color: $linkColor;240 color: var(--linkColor);
243 cursor: pointer;241 cursor: pointer;
244 242
245 &:hover {243 &:hover {
246 color: $linkColorHover;244 color: var(--linkColorHover);
247 text-decoration: underline;245 text-decoration: underline;
248 }246 }
249}247}
@@ -275,9 +273,9 @@ · 25 unmodified lines
275 left: .75rem;273 left: .75rem;
276 width: .75rem;274 width: .75rem;
277 height: 1px;275 height: 1px;
278 background: rgba($selectionText, .9);276 background: var(--transparentSelectionText);
279 box-shadow: 0 -3px rgba($selectionText, .9), // top line277 box-shadow: 0 -3px var(--transparentSelectionText), // top line
280 0 3px rgba($selectionText, .9); // bottom line278 0 3px var(--transparentSelectionText); // bottom line
281 }279 }
282}280}
283 281
@@ -289,7 +287,7 @@ · 5 unmodified lines
289 padding: .5rem .75rem;287 padding: .5rem .75rem;
290 line-height: 1.25rem;288 line-height: 1.25rem;
291 font-size: .8125rem;289 font-size: .8125rem;
292 color: $textColorLight;290 color: var(--textColorLight);
293 291
294 & + & { padding-top: 0; }292 & + & { padding-top: 0; }
295}293}
@@ -303,9 +301,9 @@ · 7 unmodified lines
303._list-hover.clone {301._list-hover.clone {
304 position: fixed;302 position: fixed;
305 overflow: visible;303 overflow: visible;
306 z-index: $hoverZ;304 z-index: var(--hoverZ);
307 left: 0;305 left: 0;
308 min-width: $sidebarWidth;306 min-width: var(--sidebarWidth);
309 padding: .25rem .75rem;307 padding: .25rem .75rem;
310 pointer-events: none;308 pointer-events: none;
311 -webkit-font-smoothing: subpixel-antialiased;309 -webkit-font-smoothing: subpixel-antialiased;
@@ -313,7 +311,7 @@ · 1 unmodified line
313 transform: translate3d(0, 0, 0);311 transform: translate3d(0, 0, 0);
314 @extend %border-box;312 @extend %border-box;
315 313
316 @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }314 @include mobile { min-width: var(--sidebarMediumWidth); }
317 315
318 > ._list-text { display: inline; }316 > ._list-text { display: inline; }
319 317
@@ -346,10 +344,10 @@ · 26 unmodified lines
346 padding: .5rem .75rem .25rem .75rem;344 padding: .5rem .75rem .25rem .75rem;
347 line-height: 1.5rem;345 line-height: 1.5rem;
348 font-size: .75rem;346 font-size: .75rem;
349 font-weight: $bolderFontWeight;347 font-weight: var(--bolderFontWeight);
350 color: $textColorLight;348 color: var(--textColorLight);
351 text-transform: uppercase;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 cursor: default;351 cursor: default;
354}352}
355 353
assets/stylesheets/global/_base.scss+33−33
@@ -1,9 +1,9 @@
1html {1html {
2 height: 100%;2 height: 100%;
3 font-size: 100%;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 @include print { background: none; }8 @include print { background: none; }
9 @import 'global/print';9 @import 'global/print';
@@ -15,12 +15,12 @@ body { · 5 unmodified lines
15 overflow: auto;15 overflow: auto;
16 font-size: 1em;16 font-size: 1em;
17 font-weight: normal;17 font-weight: normal;
18 font-family: $baseFont;18 font-family: var(--baseFont);
19 line-height: 1.7;19 line-height: 1.7;
20 color: $textColor;20 color: var(--textColor);
21 word-wrap: break-word;21 word-wrap: break-word;
22 overflow-wrap: break-word;22 overflow-wrap: break-word;
23 background: $contentBackground;23 background: var(--contentBackground);
24 touch-action: manipulation;24 touch-action: manipulation;
25 -webkit-tap-highlight-color: rgba(black, 0);25 -webkit-tap-highlight-color: rgba(black, 0);
26 -webkit-touch-callout: none;26 -webkit-touch-callout: none;
@@ -29,11 +29,11 @@ body { · 2 unmodified lines
29}29}
30 30
31a {31a {
32 color: $linkColor;32 color: var(--linkColor);
33 text-decoration: $linkTextDecoration;33 text-decoration: var(--linkTextDecoration);
34 34
35 &:hover {35 &:hover {
36 color: $linkColorHover;36 color: var(--linkColorHover);
37 text-decoration: underline;37 text-decoration: underline;
38 }38 }
39}39}
@@ -47,7 +47,7 @@ img { · 7 unmodified lines
47h1, h2, h3, h4, h5, h6 {47h1, h2, h3, h4, h5, h6 {
48 margin: 1.5em 0 1em;48 margin: 1.5em 0 1em;
49 line-height: 1.3;49 line-height: 1.3;
50 font-weight: $bolderFontWeight;50 font-weight: var(--bolderFontWeight);
51}51}
52 52
53h1 { font-size: 1.5em; }53h1 { font-size: 1.5em; }
@@ -59,7 +59,7 @@ h5, h6 { font-size: 1em; } · 5 unmodified lines
59p { margin: 0 0 1em; }59p { margin: 0 0 1em; }
60p:last-child { margin-bottom: 0; }60p:last-child { margin-bottom: 0; }
61 61
62b, strong { font-weight: $boldFontWeight; }62b, strong { font-weight: var(--boldFontWeight); }
63 63
64small { font-size: .9em; }64small { font-size: .9em; }
65 65
@@ -79,7 +79,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; } · 13 unmodified lines
79li > p { margin-bottom: .25em; }79li > p { margin-bottom: .25em; }
80 80
81dl { margin: 1.5em 0; }81dl { margin: 1.5em 0; }
82dt { font-weight: $boldFontWeight; }82dt { font-weight: var(--boldFontWeight); }
83dd {83dd {
84 margin: .375em;84 margin: .375em;
85 padding-left: 1em;85 padding-left: 1em;
@@ -91,15 +91,15 @@ dfn, var { font-style: normal; } · 5 unmodified lines
91 91
92abbr, acronym, dfn {92abbr, acronym, dfn {
93 cursor: help;93 cursor: help;
94 border-bottom: 1px dotted $textColor;94 border-bottom: 1px dotted var(--textColor);
95}95}
96 96
97pre, code, samp, %pre, %code {97pre, code, samp, %pre, %code {
98 font-family: $monoFont;98 font-family: var(--monoFont);
99 font-weight: normal;99 font-weight: normal;
100 font-style: normal;100 font-style: normal;
101 font-size: .9em;101 font-size: .9em;
102 color: $textColor;102 color: var(--textColor);
103 white-space: pre-wrap;103 white-space: pre-wrap;
104 direction: ltr;104 direction: ltr;
105 -moz-tab-size: 2;105 -moz-tab-size: 2;
@@ -121,14 +121,14 @@ a > code { color: inherit; } · 15 unmodified lines
121table {121table {
122 margin: 1.5em 0;122 margin: 1.5em 0;
123 background: none;123 background: none;
124 border: 1px solid $boxBorder;124 border: 1px solid var(--boxBorder);
125 border-collapse: separate;125 border-collapse: separate;
126 border-spacing: 0;126 border-spacing: 0;
127 border-radius: 3px;127 border-radius: 3px;
128}128}
129 129
130caption {130caption {
131 font-weight: $boldFontWeight;131 font-weight: var(--boldFontWeight);
132 padding: 0 .7em .3em;132 padding: 0 .7em .3em;
133}133}
134 134
@@ -142,15 +142,15 @@ th, td { · 7 unmodified lines
142}142}
143 143
144th {144th {
145 font-weight: $boldFontWeight;145 font-weight: var(--boldFontWeight);
146 border: 0;146 border: 0;
147 border-bottom: 1px solid $boxBorder;147 border-bottom: 1px solid var(--boxBorder);
148 border-radius: 0;148 border-radius: 0;
149 @extend %heading-box;149 @extend %heading-box;
150 150
151 &:empty { background: none; }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 tr:first-child > &:first-child { border-top-left-radius: 3px; }155 tr:first-child > &:first-child { border-top-left-radius: 3px; }
156 tr:first-child > &:last-child { border-top-right-radius: 3px; }156 tr:first-child > &:last-child { border-top-right-radius: 3px; }
@@ -161,10 +161,10 @@ th { · 4 unmodified lines
161}161}
162 162
163td {163td {
164 background: $contentBackground;164 background: var(--contentBackground);
165 border-bottom: 1px solid $boxBorderLight;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 tr:last-child > & { border-bottom: 0; }168 tr:last-child > & { border-bottom: 0; }
169 169
170 > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {170 > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child {
@@ -190,7 +190,7 @@ input, button { · 19 unmodified lines
190 margin: 0;190 margin: 0;
191 font-family: inherit;191 font-family: inherit;
192 font-size: 100%;192 font-size: 100%;
193 color: $textColor;193 color: var(--textColor);
194 line-height: normal;194 line-height: normal;
195 @extend %border-box;195 @extend %border-box;
196}196}
@@ -219,7 +219,7 @@ button:focus { · 22 unmodified lines
219}219}
220 220
221img, iframe {221img, iframe {
222 background: $externalsBackground;222 background: var(--externalsBackground);
223}223}
224 224
225input[type="search"]::-webkit-search-cancel-button,225input[type="search"]::-webkit-search-cancel-button,
@@ -234,9 +234,9 @@ input[type="search"]::-webkit-search-decoration { · 8 unmodified lines
234 border: 0 !important;234 border: 0 !important;
235}235}
236 236
237::-webkit-input-placeholder { color: $textColorLighter; }237::-webkit-input-placeholder { color: var(--textColorLighter); }
238::-moz-placeholder { color: $textColorLighter; opacity: 1; }238::-moz-placeholder { color: var(--textColorLighter); opacity: 1; }
239:-ms-input-placeholder { color: $textColorLighter; }239:-ms-input-placeholder { color: var(--textColorLighter); }
240 240
241body:not(._native-scrollbars) {241body:not(._native-scrollbars) {
242 *::-webkit-scrollbar { -webkit-appearance: none; }242 *::-webkit-scrollbar { -webkit-appearance: none; }
@@ -247,12 +247,12 @@ body:not(._native-scrollbars) { · 4 unmodified lines
247 *::-webkit-scrollbar-corner { display: none; }247 *::-webkit-scrollbar-corner { display: none; }
248 248
249 *::-webkit-scrollbar-track {249 *::-webkit-scrollbar-track {
250 background: $contentBackground;250 background: var(--contentBackground);
251 border: 1px solid $contentBackground;251 border: 1px solid var(--contentBackground);
252 252
253 &:hover {253 &:hover {
254 background: $sidebarBackground;254 background: var(--sidebarBackground);
255 border-color: $sidebarBorder;255 border-color: var(--sidebarBorder);
256 }256 }
257 257
258 &:vertical { border-width: 0 0 0 1px; }258 &:vertical { border-width: 0 0 0 1px; }
@@ -270,14 +270,14 @@ body:not(._native-scrollbars) { · 11 unmodified lines
270 270
271 *::-webkit-scrollbar-thumb {271 *::-webkit-scrollbar-thumb {
272 min-height: 2rem;272 min-height: 2rem;
273 background: $scrollbarColor;273 background: var(--scrollbarColor);
274 background-clip: padding-box;274 background-clip: padding-box;
275 border: 5px solid rgba(black, 0);275 border: 5px solid rgba(black, 0);
276 border-radius: 10px;276 border-radius: 10px;
277 277
278 &:hover,278 &:hover,
279 &:active {279 &:active {
280 background-color: $scrollbarColorHover;280 background-color: var(--scrollbarColorHover);
281 border-width: 4px;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%box {38%box {
39 background: $boxBackground;39 background: var(--boxBackground);
40 border: 1px solid $boxBorder;40 border: 1px solid var(--boxBorder);
41 border-radius: 3px;41 border-radius: 3px;
42}42}
43 43
44%heading-box {44%heading-box {
45 color: $boxHeaderColor;45 color: var(--boxHeaderColor);
46 background: $boxHeaderBackground;46 background: var(--boxHeaderBackground);
47 border: 1px solid $boxBorder;47 border: 1px solid var(--boxBorder);
48 border-radius: 3px;48 border-radius: 3px;
49}49}
50 50
@@ -82,15 +82,15 @@ · 31 unmodified lines
82%note {82%note {
83 margin: 1.5rem 0;83 margin: 1.5rem 0;
84 padding: .5rem .875rem;84 padding: .5rem .875rem;
85 background: $noteBackground;85 background: var(--noteBackground);
86 border: 1px solid $noteBorder;86 border: 1px solid var(--noteBorder);
87 border-radius: 3px;87 border-radius: 3px;
88}88}
89 89
90%label {90%label {
91 margin: 0 1px;91 margin: 0 1px;
92 padding: 1px 4px 2px;92 padding: 1px 4px 2px;
93 background: $labelBackground;93 background: var(--labelBackground);
94 border-radius: 3px;94 border-radius: 3px;
95}95}
96 96
@@ -102,35 +102,35 @@ · 5 unmodified lines
102 padding-right: .5em;102 padding-right: .5em;
103 overflow: hidden;103 overflow: hidden;
104 font-size: inherit;104 font-size: inherit;
105 color: $boxHeaderColor;105 color: var(--boxHeaderColor);
106 border: 1px solid $boxBorder;106 border: 1px solid var(--boxBorder);
107 border-radius: 2px;107 border-radius: 2px;
108 @extend %label;108 @extend %label;
109}109}
110 110
111%label-yellow {111%label-yellow {
112 background: $noteBackground;112 background: var(--noteBackground);
113 border-color: $noteBorder;113 border-color: var(--noteBorder);
114}114}
115 115
116%note-green, %label-green {116%note-green, %label-green {
117 background: $noteGreenBackground;117 background: var(--noteGreenBackground);
118 border-color: $noteGreenBorder;118 border-color: var(--noteGreenBorder);
119}119}
120 120
121%note-blue, %label-blue {121%note-blue, %label-blue {
122 background: $noteBlueBackground;122 background: var(--noteBlueBackground);
123 border-color: $noteBlueBorder;123 border-color: var(--noteBlueBorder);
124}124}
125 125
126%note-orange, %label-orange {126%note-orange, %label-orange {
127 background: $noteOrangeBackground;127 background: var(--noteOrangeBackground);
128 border-color: $noteOrangeBorder;128 border-color: var(--noteOrangeBorder);
129}129}
130 130
131%note-red, %label-red {131%note-red, %label-red {
132 background: $noteRedBackground;132 background: var(--noteRedBackground);
133 border-color: $noteRedBorder;133 border-color: var(--noteRedBorder);
134}134}
135 135
136//136//
@@ -149,12 +149,11 @@ · 12 unmodified lines
149 pointer-events: none;149 pointer-events: none;
150 150
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>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' {152 background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
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 }
157 }153 }
158}154}
155html.dark %external-link {
156 background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
157}
159 158
160%internal-link:after { content: none !important; }159%internal-link:after { content: none !important; }
assets/stylesheets/global/_icons.scss+2−2
@@ -23,8 +23,8 @@ · 22 unmodified lines
23 %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }23 %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; }
24}24}
25 25
26%darkIconFix {26html._theme-dark {
27 @if $style == 'dark' {27 %darkIconFix {
28 filter: invert(100%) grayscale(100%);28 filter: invert(100%) grayscale(100%);
29 -webkit-filter: invert(100%) grayscale(100%);29 -webkit-filter: invert(100%) grayscale(100%);
30 }30 }
assets/stylesheets/global/_mixins.scss+6−0
@@ -7,3 +7,9 @@ · 6 unmodified lines
7 @content;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 ._attribution-p {26 ._attribution-p {
27 background: none;27 background: none;
28 border: 2px solid $boxBorder;28 border: 2px solid var(--boxBorder);
29 }29 }
30 30
31 ._attribution:last-child:after {31 ._attribution:last-child:after {
32 content: 'Exported from DevDocs \2014 https://devdocs.io';32 content: 'Exported from DevDocs \2014 https://devdocs.io';
33 display: block;33 display: block;
34 margin-top: 1rem;34 margin-top: 1rem;
35 font-weight: $bolderFontWeight;35 font-weight: var(--bolderFontWeight);
36 }36 }
37 37
38 ._attribution {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;1html._theme-dark {
2$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;2 --absolute: white;
3$boldFontWeight: 500;
4$bolderFontWeight: 600;
5 3
6$style: 'dark';4 --documentBackground: #222;
5 --contentBackground: #33373a;
7 6
8$maxWidth: 80rem;7 --textColor: #cbd0d0;
9$headerHeight: 3rem;8 --textColorLight: #9da5ad;
10$sidebarWidth: 20rem;9 --textColorLighter: #77787a;
11$sidebarMediumWidth: 16rem;
12 10
13$documentBackground: #222;11 --externalsBackground: #fff;
14$contentBackground: #33373a;
15 12
16$externalsBackground: #fff;13 --inputFocusBorder: transparent;
17 14
18$textColor: #cbd0d0;15 --focusBackground: #3f4042;
19$textColorLight: #9da5ad;16 --focusBorder: #000;
20$textColorLighter: #77787a;17 --focusText: #f7f2f2;
21$textColorRed: #f44336;
22 18
23$inputFocusBorder: false;19 --loadingText: #5d6164;
24 20
25$focusBackground: #3f4042;21 --selectionBackground: #007acc;
26$focusBorder: #000;22 --selectionBorder: #000;
27$focusText: #f7f2f2;
28 23
29$loadingText: #5d6164;24 --highlightBackground: #64675f;
30$splashText: $loadingText;
31 25
32$selectionBackground: #007acc;26 --linkColor: var(--textColor);
33$selectionBorder: #000;27 --linkColorHover: white;
34$selectionText: #fff;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;35 --sidebarBackground: #24282a;
39$linkColorHover: white;36 --transparentSidebarBackground: #{rgba(#24282a, 0)};
40$linkTextDecoration: underline;37 --sidebarBorder: #000;
41 38
42$headerBackground: #1c1c1c;39 --scrollbarColor: #6c6c6f;
43$headerBorder: #000;40 --scrollbarColorHover: #949697;
44 41
45$sidebarBackground: #24282a;42 --pathBackground: var(--headerBackground);
46$sidebarBorder: #000;43 --pathBorder: var(--headerBorder);
47 44
48$scrollbarColor: #6c6c6f;45 --noticeBackground: var(--sidebarBackground);
49$scrollbarColorHover: #949697;46 --noticeBorder: var(--sidebarBorder);
50 47
51$pathBackground: $headerBackground;48 --boxBackground: var(--sidebarBackground);
52$pathBorder: $headerBorder;49 --boxBorder: var(--headerBorder);
50 --boxBorderLight: var(--headerBorder);
51 --boxHeaderColor: #dbe4e4;
52 --boxHeaderBackground: var(--sidebarBackground);
53 53
54$noticeBackground: $sidebarBackground;54 --noteBackground: #45474b;
55$noticeBorder: $sidebarBorder;55 --noteBorder: #000;
56 56
57$boxBackground: $sidebarBackground;57 --noteGreenBackground: #284a2a;
58$boxBorder: $headerBorder;58 --noteGreenBorder: #000;
59$boxBorderLight: $headerBorder;
60$boxHeaderColor: #dbe4e4;
61$boxHeaderBackground: $sidebarBackground;
62 59
63$noteBackground: #45474b;60 --noteBlueBackground: #2a4151;
64$noteBorder: #000;61 --noteBlueBorder: #000;
65 62
66$noteGreenBackground: #284a2a;63 --noteOrangeBackground: #563322;
67$noteGreenBorder: #000;64 --noteOrangeBorder: #000;
68 65
69$noteBlueBackground: #2a4151;66 --noteRedBackground: #603033;
70$noteBlueBorder: #000;67 --noteRedBorder: #000;
71 68
72$noteOrangeBackground: #563322;69 --labelBackground: var(--boxBackground);
73$noteOrangeBorder: #000;
74 70
75$noteRedBackground: #603033;71 --notifBackground: #{rgba(#555, .95)};
76$noteRedBorder: #000;72 --notifBorder: 1px solid #000;
77 73
78$labelBackground: $boxBackground;74 --tipBackground: var(--notifBackground);
79 75 --tipBorder: var(--notifBorder);
80$notifBackground: rgba(#555, .95);76}
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;
assets/stylesheets/global/_variables-light.scss+76−0
@@ -0,0 +1,76 @@
1html._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;1html {
2$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;2 --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
3$boldFontWeight: 500;3 --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
4$bolderFontWeight: 600;4 --boldFontWeight: 500;
5 --bolderFontWeight: 600;
5 6
6$style: 'light';7 --textColorRed: #f44336;
7 8
8$maxWidth: 80rem;9 --splashText: var(--loadingText);
9$headerHeight: 3rem;
10$sidebarWidth: 20rem;
11$sidebarMediumWidth: 16rem;
12 10
13$documentBackground: #f3f3f3;11 --selectionText: #fff;
14$contentBackground: #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;17 --maxWidth: 80rem;
19$textColorLight: #666;18 --headerHeight: 3rem;
20$textColorLighter: #888;19 --sidebarWidth: 20rem;
21$textColorRed: #f44336;20 --sidebarMediumWidth: 16rem;
22 21
23$inputFocusBorder: #35b5f4;22 --focusBackground: #e5e5e5;
23 --focusBorder: #d4d4d4;
24 --focusText: #000;
24 25
25$focusBackground: #e5e5e5;26 --contentZ: 1;
26$focusBorder: #d4d4d4;27 --sidebarZ: 2;
27$focusText: #000;28 --headerZ: 3;
28 29 --noticeZ: 4;
29$loadingText: #ccc;30 --hoverZ: 5;
30$splashText: #ccc;31}
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;
assets/stylesheets/pages/_angularjs.scss+1−1
@@ -8,7 +8,7 @@ · 7 unmodified lines
8 .nav-index-section {8 .nav-index-section {
9 margin: 1.5em 0 1em -2em;9 margin: 1.5em 0 1em -2em;
10 list-style: none;10 list-style: none;
11 font-weight: $boldFontWeight;11 font-weight: var(--boldFontWeight);
12 text-transform: capitalize;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 h3 > .type-signature {4 h3 > .type-signature {
5 float: right;5 float: right;
6 color: $textColorLight;6 color: var(--textColorLight);
7 }7 }
8 8
9 h3 > .signature-attributes {9 h3 > .signature-attributes {
10 font-size: .75rem;10 font-size: .75rem;
11 font-weight: normal;11 font-weight: normal;
12 font-style: italic;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 h4 > code, h5 > code, strong > code { @extend %label; }4 h4 > code, h5 > code, strong > code { @extend %label; }
5 5
6 h2 > small {6 h2 > small {
7 color: $textColorLight;7 color: var(--textColorLight);
8 float: right;8 float: right;
9 }9 }
10 10
assets/stylesheets/pages/_c.scss+2−2
@@ -23,7 +23,7 @@ · 22 unmodified lines
23 23
24 .t-spar { // language/switch, language/for, etc.24 .t-spar { // language/switch, language/for, etc.
25 font-style: italic;25 font-style: italic;
26 color: $textColorLight;26 color: var(--textColorLight);
27 }27 }
28 .t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; }28 .t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; }
29 29
@@ -57,7 +57,7 @@ · 27 unmodified lines
57 margin: 1rem 0;57 margin: 1rem 0;
58 padding: .375rem;58 padding: .375rem;
59 font-size: .75rem;59 font-size: .75rem;
60 border: 1px solid $boxBorder;60 border: 1px solid var(--boxBorder);
61 border-radius: 2px;61 border-radius: 2px;
62 }62 }
63 63
assets/stylesheets/pages/_clojure.scss+1−1
@@ -5,6 +5,6 @@ · 4 unmodified lines
5 .type {5 .type {
6 float: right;6 float: right;
7 font-size: .9em;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 h2 { @extend %block-heading; }2 h2 { @extend %block-heading; }
3 h3, .d_decl { @extend %block-label, %label-blue; }3 h3, .d_decl { @extend %block-label, %label-blue; }
4 .d_decl { @extend %code; }4 .d_decl { @extend %code; }
5 .d_decl > small { color: $textColorLight; }5 .d_decl > small { color: var(--textColorLight); }
6 .d_decl > strong { font-weight: $bolderFontWeight; }6 .d_decl > strong { font-weight: var(--bolderFontWeight); }
7 7
8 p > code, li > code, td > code, dd > code { @extend %label; }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._dojo {1._dojo {
2 @extend %simple;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 h3 > .access {6 h3 > .access {
7 float: right;7 float: right;
8 color: $textColorLight;8 color: var(--textColorLight);
9 font-weight: normal;9 font-weight: normal;
10 }10 }
11 11
@@ -15,6 +15,6 @@ · 3 unmodified lines
15 }15 }
16 16
17 p.github-link {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 code.code { @extend %label; }5 code.code { @extend %label; }
6 .note { @extend %note; }6 .note { @extend %note; }
7 .warning { @extend %note, %note-red; }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 .toc-list {33 .toc-list {
34 margin-top: 0;34 margin-top: 0;
35 font-weight: $boldFontWeight;35 font-weight: var(--boldFontWeight);
36 36
37 > li + li { margin-top: 1em; }37 > li + li { margin-top: 1em; }
38 > li > ul { font-weight: normal; }38 > li > ul { font-weight: normal; }
@@ -48,7 +48,7 @@ · 9 unmodified lines
48 .returns,48 .returns,
49 .option-type {49 .option-type {
50 float: right;50 float: right;
51 font-weight: $boldFontWeight;51 font-weight: var(--boldFontWeight);
52 margin-left: 1em;52 margin-left: 1em;
53 }53 }
54 54
assets/stylesheets/pages/_love.scss+2−2
@@ -12,6 +12,6 @@ · 11 unmodified lines
12 .smwtable { width: 100%; }12 .smwtable { width: 100%; }
13 .smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; }13 .smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; }
14 14
15 .cell-green { background: $noteGreenBackground; }15 .cell-green { background: var(--noteGreenBackground); }
16 .cell-red { background: $noteRedBackground; }16 .cell-red { background: var(--noteRedBackground); }
17}17}
assets/stylesheets/pages/_mdn.scss+3−3
@@ -7,7 +7,7 @@ · 6 unmodified lines
7 > span {7 > span {
8 display: block;8 display: block;
9 font-size: 1rem;9 font-size: 1rem;
10 font-weight: $boldFontWeight;10 font-weight: var(--boldFontWeight);
11 }11 }
12 12
13 ul, ol {13 ul, ol {
@@ -42,7 +42,7 @@ · 28 unmodified lines
42 > .note {42 > .note {
43 em {43 em {
44 font-style: normal;44 font-style: normal;
45 font-weight: $boldFontWeight;45 font-weight: var(--boldFontWeight);
46 }46 }
47 47
48 > ul { margin: 1em 0; }48 > ul { margin: 1em 0; }
@@ -93,7 +93,7 @@ · 44 unmodified lines
93 dt > strong > code, // HTML element attribute93 dt > strong > code, // HTML element attribute
94 dl > dt > code { // CSS property value, Javascript function argument94 dl > dt > code { // CSS property value, Javascript function argument
95 font-family: inherit;95 font-family: inherit;
96 font-weight: $boldFontWeight;96 font-weight: var(--boldFontWeight);
97 font-size: inherit;97 font-size: inherit;
98 }98 }
99 99
assets/stylesheets/pages/_meteor.scss+2−2
@@ -9,10 +9,10 @@ · 8 unmodified lines
9 dt > code { @extend %label; }9 dt > code { @extend %label; }
10 10
11 .api-heading { overflow: hidden; }11 .api-heading { overflow: hidden; }
12 .api-heading > code { font-weight: $boldFontWeight; }12 .api-heading > code { font-weight: var(--boldFontWeight); }
13 .locus, .src-code { float: right; }13 .locus, .src-code { float: right; }
14 .locus, .type, .src-code { margin-left: .5em; }14 .locus, .type, .src-code { margin-left: .5em; }
15 h2 .subtext-api { margin-top: .25rem; }15 h2 .subtext-api { margin-top: .25rem; }
16 .locus, .subtext-api, .subtext-api > code { font-size: .75rem; }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 .faint.heading {9 .faint.heading {
10 font-size: .9em;10 font-size: .9em;
11 color: $textColorLight;11 color: var(--textColorLight);
12 }12 }
13 13
14 .youtube-video iframe { width: 420px; height: 315px; }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 h3 > small {4 h3 > small {
5 float: right;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 .verinfo {14 .verinfo {
15 float: right;15 float: right;
16 font-weight: $boldFontWeight;16 font-weight: var(--boldFontWeight);
17 }17 }
18 18
19 .classsynopsis,19 .classsynopsis,
@@ -21,7 +21,7 @@ · 1 unmodified line
21 .description > .methodsynopsis,21 .description > .methodsynopsis,
22 .description > .fieldsynopsis { @extend %note, %note-blue; }22 .description > .fieldsynopsis { @extend %note, %note-blue; }
23 23
24 .classsynopsisinfo_comment { color: $textColorLight; }24 .classsynopsisinfo_comment { color: var(--textColorLight); }
25 25
26 .classsynopsisinfo_comment,26 .classsynopsisinfo_comment,
27 .classsynopsis > .constructorsynopsis,27 .classsynopsis > .constructorsynopsis,
assets/stylesheets/pages/_postgres.scss+1−1
@@ -16,7 +16,7 @@ · 15 unmodified lines
16 }16 }
17 17
18 p > code { @extend %label; }18 p > code { @extend %label; }
19 p.c2 { font-weight: $boldFontWeight; }19 p.c2 { font-weight: var(--boldFontWeight); }
20 20
21 .navfooter > table { width: 100%; }21 .navfooter > table { width: 100%; }
22 td[align=center] { text-align: center; }22 td[align=center] { text-align: center; }
assets/stylesheets/pages/_rdoc.scss+4−4
@@ -6,7 +6,7 @@ · 5 unmodified lines
6 .method-description > h2, h3, h4, h5, h6 { font-size: 1em; }6 .method-description > h2, h3, h4, h5, h6 { font-size: 1em; }
7 7
8 .method-heading {8 .method-heading {
9 font-weight: $boldFontWeight;9 font-weight: var(--boldFontWeight);
10 @extend %block-label, %label-blue;10 @extend %block-label, %label-blue;
11 11
12 + .method-heading { margin-top: -.5em; }12 + .method-heading { margin-top: -.5em; }
@@ -22,7 +22,7 @@ · 9 unmodified lines
22 a.method-click-advice {22 a.method-click-advice {
23 float: right;23 float: right;
24 font-size: .75rem;24 font-size: .75rem;
25 color: $linkColor;25 color: var(--linkColor);
26 cursor: pointer;26 cursor: pointer;
27 @extend %user-select-none;27 @extend %user-select-none;
28 28
@@ -42,8 +42,8 @@ · 13 unmodified lines
42 top: 0;42 top: 0;
43 left: -1em;43 left: -1em;
44 right: 0;44 right: 0;
45 background: rgba($contentBackground, .95);45 background: var(--contentBackground);
46 box-shadow: 0 1em 1em 1em $contentBackground;46 box-shadow: 0 1em 1em 1em var(--contentBackground);
47 47
48 > pre { margin: 0; }48 > pre { margin: 0; }
49 }49 }
assets/stylesheets/pages/_react_native.scss+1−1
@@ -2,7 +2,7 @@ · 1 unmodified line
2 @extend %simple;2 @extend %simple;
3 3
4 .deprecated { @extend %note, %note-orange; }4 .deprecated { @extend %note, %note-orange; }
5 .deprecatedTitle { font-weight: $boldFontWeight; }5 .deprecatedTitle { font-weight: var(--boldFontWeight); }
6 6
7 span.platform { float: right; }7 span.platform { float: right; }
8 span.propType, span.platform { font-weight: normal; }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 .args {15 .args {
16 font-size: .75rem;16 font-size: .75rem;
17 color: $textColorLight;17 color: var(--textColorLight);
18 }18 }
19 19
20 // Others20 // Others
@@ -35,7 +35,7 @@ · 14 unmodified lines
35 > .prompt {35 > .prompt {
36 float: left;36 float: left;
37 margin-right: .5em;37 margin-right: .5em;
38 color: $textColorLight;38 color: var(--textColorLight);
39 }39 }
40 40
41 > code {41 > code {
assets/stylesheets/pages/_rfc.scss+1−1
@@ -10,6 +10,6 @@ · 9 unmodified lines
10 10
11 > h1, > h2, > h3, > h4, > h5 {11 > h1, > h2, > h3, > h4, > h5 {
12 margin: 0;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 .versionmodified, span.title, .topic-title {15 .versionmodified, span.title, .topic-title {
16 display: block;16 display: block;
17 font-weight: $boldFontWeight;17 font-weight: var(--boldFontWeight);
18 }18 }
19 19
20 p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }20 p > code, li > code, dd > code, .docutils > dt > code { @extend %label; }
@@ -26,7 +26,7 @@ · 5 unmodified lines
26 .admonition-title {26 .admonition-title {
27 float: left;27 float: left;
28 margin: 0 .5em 0 0;28 margin: 0 .5em 0 0;
29 font-weight: $boldFontWeight;29 font-weight: var(--boldFontWeight);
30 30
31 &:after { content: ':'; }31 &:after { content: ':'; }
32 }32 }
assets/stylesheets/pages/_sphinx_simple.scss+1−1
@@ -6,7 +6,7 @@ · 5 unmodified lines
6 .admonition.tip { @extend %note-green; }6 .admonition.tip { @extend %note-green; }
7 .admonition-title {7 .admonition-title {
8 margin: 0 0 .25rem;8 margin: 0 0 .25rem;
9 font-weight: $boldFontWeight;9 font-weight: var(--boldFontWeight);
10 }10 }
11 11
12 code { @extend %label; }12 code { @extend %label; }
assets/stylesheets/pages/_support_tables.scss+1−1
@@ -24,7 +24,7 @@ · 23 unmodified lines
24 }24 }
25 25
26 tr.current {26 tr.current {
27 font-weight: $boldFontWeight;27 font-weight: var(--boldFontWeight);
28 font-size: 1rem;28 font-size: 1rem;
29 }29 }
30 30
assets/stylesheets/pages/_yard.scss+1−1
@@ -1,5 +1,5 @@
1._yard {1._yard {
2 @extend %simple;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 .detail-header-tag, .detailHeaderTag {4 .detail-header-tag, .detailHeaderTag {
5 float: right;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 @@manifest_asset_urls ||= [196 @@manifest_asset_urls ||= [
197 javascript_path('application', asset_host: false),197 javascript_path('application', asset_host: false),
198 stylesheet_path('application'),198 stylesheet_path('application'),
199 stylesheet_path('application-dark'),
200 image_path('docs-1.png'),199 image_path('docs-1.png'),
201 image_path('docs-1@2x.png'),200 image_path('docs-1@2x.png'),
202 image_path('docs-2.png'),201 image_path('docs-2.png'),
@@ -205,21 +204,6 @@ class App < Sinatra::Application · 2 unmodified lines
205 ]204 ]
206 end205 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 def app_size207 def app_size
224 @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"208 @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px"
225 end209 end
views/index.erb+2−2
@@ -1,5 +1,5 @@
1<!DOCTYPE html>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<head>3<head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">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 <link rel="apple-touch-icon" sizes="152x152" href="<%= App.cdn_origin %>/images/apple-icon-152.png">30 <link rel="apple-touch-icon" sizes="152x152" href="<%= App.cdn_origin %>/images/apple-icon-152.png">
31 <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">31 <link rel="apple-touch-icon" sizes="160x160" href="<%= App.cdn_origin %>/images/apple-icon-160.png">
32 <link rel="mask-icon" href="<%= App.cdn_origin %>/images/webkit-mask-icon.svg" color="#398df0">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</head>34</head>
35<body<%= %( class="#{app_layout}") if app_layout %>>35<body<%= %( class="#{app_layout}") if app_layout %>>
36<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>36<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>
views/manifest.erb+1−1
@@ -1,5 +1,5 @@
1CACHE MANIFEST1CACHE MANIFEST
2# <%= app_theme %> <%= app_size %> <%= app_layout %>2# <%= app_size %> <%= app_layout %>
3 3
4CACHE:4CACHE:
5/5/
views/other.erb+2−2
@@ -1,5 +1,5 @@
1<!DOCTYPE html>1<!DOCTYPE html>
2<html lang="en" class="_booting">2<html lang="en" class="_booting _theme-<%= app_theme %>">
3<head>3<head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">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 <link rel="manifest" href="/manifest.json">11 <link rel="manifest" href="/manifest.json">
12 <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">12 <link rel="icon" type="image/x-icon" href="<%= App.cdn_origin %>/favicon.ico">
13 <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Search DevDocs">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</head>15</head>
16<body<%= %( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">16<body<%= %( class="#{app_layout}") if app_layout %> data-doc="<%= CGI::escape_html @doc.to_json %>">
17<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>17<noscript class="_fail">DevDocs requires JavaScript to run.</noscript>