From a30fcf9d9a25740df6255da50a728abfd0bcd0c0 Mon Sep 17 00:00:00 2001 From: Jed Fox Date: Sat, 11 Aug 2018 11:17:55 -0400 Subject: [PATCH] Switch from SASS variables to CSS variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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. --- .../views/content/settings_page.coffee | 8 +- assets/stylesheets/application-dark.css.scss | 108 --------------- assets/stylesheets/application.css.scss | 4 +- assets/stylesheets/components/_app.scss | 10 +- assets/stylesheets/components/_content.scss | 59 ++++----- assets/stylesheets/components/_fail.scss | 2 +- assets/stylesheets/components/_header.scss | 60 ++++----- assets/stylesheets/components/_mobile.scss | 4 +- assets/stylesheets/components/_notice.scss | 10 +- assets/stylesheets/components/_notif.scss | 24 ++-- assets/stylesheets/components/_page.scss | 8 +- assets/stylesheets/components/_path.scss | 12 +- assets/stylesheets/components/_prism.scss | 57 ++++---- assets/stylesheets/components/_settings.scss | 24 ++-- assets/stylesheets/components/_sidebar.scss | 76 ++++++----- assets/stylesheets/global/_base.scss | 66 +++++----- assets/stylesheets/global/_classes.scss | 49 ++++--- assets/stylesheets/global/_icons.scss | 4 +- assets/stylesheets/global/_mixins.scss | 6 + assets/stylesheets/global/_print.scss | 4 +- .../stylesheets/global/_variables-dark.scss | 124 ++++++++---------- .../stylesheets/global/_variables-light.scss | 76 +++++++++++ assets/stylesheets/global/_variables.scss | 111 ++++------------ assets/stylesheets/pages/_angularjs.scss | 2 +- assets/stylesheets/pages/_async.scss | 4 +- assets/stylesheets/pages/_bootstrap.scss | 2 +- assets/stylesheets/pages/_c.scss | 4 +- assets/stylesheets/pages/_clojure.scss | 2 +- assets/stylesheets/pages/_d.scss | 6 +- assets/stylesheets/pages/_dojo.scss | 2 +- assets/stylesheets/pages/_ember.scss | 4 +- assets/stylesheets/pages/_erlang.scss | 2 +- assets/stylesheets/pages/_jquery.scss | 4 +- assets/stylesheets/pages/_love.scss | 4 +- assets/stylesheets/pages/_mdn.scss | 6 +- assets/stylesheets/pages/_meteor.scss | 4 +- assets/stylesheets/pages/_npm.scss | 2 +- assets/stylesheets/pages/_phalcon.scss | 2 +- assets/stylesheets/pages/_php.scss | 4 +- assets/stylesheets/pages/_postgres.scss | 2 +- assets/stylesheets/pages/_rdoc.scss | 8 +- assets/stylesheets/pages/_react_native.scss | 2 +- assets/stylesheets/pages/_redis.scss | 4 +- assets/stylesheets/pages/_rfc.scss | 2 +- assets/stylesheets/pages/_sphinx.scss | 4 +- assets/stylesheets/pages/_sphinx_simple.scss | 2 +- assets/stylesheets/pages/_support_tables.scss | 2 +- assets/stylesheets/pages/_yard.scss | 2 +- assets/stylesheets/pages/_yii.scss | 2 +- lib/app.rb | 16 --- views/index.erb | 4 +- views/manifest.erb | 2 +- views/other.erb | 4 +- 53 files changed, 434 insertions(+), 582 deletions(-) delete mode 100644 assets/stylesheets/application-dark.css.scss create mode 100644 assets/stylesheets/global/_variables-light.scss diff --git a/assets/javascripts/views/content/settings_page.coffee b/assets/javascripts/views/content/settings_page.coffee index d72e3eb3..1b4ecc1b 100644 --- a/assets/javascripts/views/content/settings_page.coffee +++ b/assets/javascripts/views/content/settings_page.coffee @@ -24,12 +24,10 @@ class app.views.SettingsPage extends app.View 'Preferences' toggleDark: (enable) -> - css = $('link[rel="stylesheet"][data-alt]') - alt = css.getAttribute('data-alt') - css.setAttribute('data-alt', css.getAttribute('href')) - css.setAttribute('href', alt) + html = document.documentElement + html.classList.toggle('_theme-default') + html.classList.toggle('_theme-dark') app.settings.set('dark', !!enable) - app.appCache?.updateInBackground() return toggleLayout: (layout, enable) -> diff --git a/assets/stylesheets/application-dark.css.scss b/assets/stylesheets/application-dark.css.scss deleted file mode 100644 index 821ebc36..00000000 --- a/assets/stylesheets/application-dark.css.scss +++ /dev/null @@ -1,108 +0,0 @@ -//= depend_on docs-1.png -//= depend_on docs-1@2x.png -//= depend_on docs-2.png -//= depend_on docs-2@2x.png - -/*! - * Copyright 2013-2018 Thibaut Courouble and other contributors - * - * This source code is licensed under the terms of the Mozilla - * Public License, v. 2.0, a copy of which may be obtained at: - * http://mozilla.org/MPL/2.0/ - */ - -@import 'global/variables-dark', - 'global/mixins', - 'global/icons', - 'global/classes', - 'global/base'; - -@import 'components/app', - 'components/header', - 'components/notif', - 'components/sidebar', - 'components/settings', - 'components/content', - 'components/page', - 'components/fail', - 'components/path', - 'components/notice', - 'components/prism', - 'components/mobile'; - -@import 'pages/simple', - 'pages/angular', - 'pages/angularjs', - 'pages/apache', - 'pages/async', - 'pages/bash', - 'pages/bootstrap', - 'pages/c', - 'pages/cakephp', - 'pages/clojure', - 'pages/codeception', - 'pages/coffeescript', - 'pages/cordova', - 'pages/crystal', - 'pages/d', - 'pages/d3', - 'pages/dart', - 'pages/dojo', - 'pages/drupal', - 'pages/elixir', - 'pages/ember', - 'pages/erlang', - 'pages/express', - 'pages/git', - 'pages/github', - 'pages/go', - 'pages/graphite', - 'pages/haskell', - 'pages/jekyll', - 'pages/jquery', - 'pages/julia', - 'pages/knockout', - 'pages/kotlin', - 'pages/laravel', - 'pages/liquid', - 'pages/love', - 'pages/lua', - 'pages/mdn', - 'pages/meteor', - 'pages/modernizr', - 'pages/moment', - 'pages/nginx', - 'pages/node', - 'pages/npm', - 'pages/openjdk', - 'pages/perl', - 'pages/phalcon', - 'pages/phaser', - 'pages/php', - 'pages/phpunit', - 'pages/postgres', - 'pages/pug', - 'pages/python', - 'pages/qt', - 'pages/ramda', - 'pages/rdoc', - 'pages/react_native', - 'pages/redis', - 'pages/rethinkdb', - 'pages/rfc', - 'pages/rubydoc', - 'pages/rust', - 'pages/sinon', - 'pages/socketio', - 'pages/sphinx', - 'pages/sphinx_simple', - 'pages/sqlite', - 'pages/support_tables', - 'pages/tcl_tk', - 'pages/tensorflow', - 'pages/terraform', - 'pages/underscore', - 'pages/vue', - 'pages/webpack', - 'pages/yard', - 'pages/yii'; diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss index 245a8012..fd6ffffd 100644 --- a/assets/stylesheets/application.css.scss +++ b/assets/stylesheets/application.css.scss @@ -11,7 +11,9 @@ * http://mozilla.org/MPL/2.0/ */ -@import 'global/variables', +@import 'global/variables-light', + 'global/variables-dark', + 'global/variables', 'global/mixins', 'global/icons', 'global/classes', diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss index ee76fe2f..96e09938 100644 --- a/assets/stylesheets/components/_app.scss +++ b/assets/stylesheets/components/_app.scss @@ -1,6 +1,6 @@ -html._booting { background: $contentBackground; } +html._booting { background: var(--contentBackground); } body._max-width { background: none; } -html._booting body._max-width { background: $documentBackground; } +html._booting body._max-width { background: var(--documentBackground); } ._app { position: relative; @@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; } ._max-width & { margin: 0 auto; - max-width: $maxWidth; - background: $contentBackground; - box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder; + max-width: var(--maxWidth); + background: var(--contentBackground); + box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder); } } diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss index 18f2e51d..c2387836 100644 --- a/assets/stylesheets/components/_content.scss +++ b/assets/stylesheets/components/_content.scss @@ -4,13 +4,13 @@ ._container { position: relative; - z-index: $contentZ; + z-index: var(--contentZ); height: 100%; - margin-left: $sidebarWidth; + margin-left: var(--sidebarWidth); pointer-events: none; @extend %border-box; - @media #{$mediumScreen} { margin-left: $sidebarMediumWidth; } + @include mobile { margin-left: var(--sidebarMediumWidth); } ._sidebar-hidden & { margin-left: 0; } body:not(._native-scrollbars) & { -webkit-margin-end: -1px; } @@ -30,7 +30,7 @@ ._sidebar-hidden &:before { content: ''; display: block; - margin-top: $headerHeight; + margin-top: var(--headerHeight); } ._overlay-scrollbars & { padding-left: .625rem; } @@ -54,7 +54,7 @@ font-size: 4rem; font-weight: 300; letter-spacing: -.125rem; - color: $loadingText; + color: var(--loadingText); text-align: center; cursor: default; } @@ -68,7 +68,7 @@ // ._splash-title { - color: $splashText; + color: var(--splashText); @extend %loading, %user-select-none; } @@ -88,7 +88,7 @@ min-height: calc(100vh - 2.375rem); ._sidebar-hidden & { - min-height: calc(100vh - 2.375rem - #{$headerHeight}); + min-height: calc(100vh - 2.375rem - var(--headerHeight)); } } @@ -140,12 +140,12 @@ ._error-text { margin: 0 0 1rem; - color: $textColorLight; + color: var(--textColorLight); } ._error-links { font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ._error-link { padding: 0 .5rem; } @@ -167,7 +167,7 @@ height: 1px; margin-top: .25rem; margin-left: 1rem; - background: $boxBorderLight; + background: var(--boxBorderLight); } } @@ -197,7 +197,7 @@ ._toc-title { margin: 0 0 .5rem; font-size: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ._toc-list { @@ -252,7 +252,7 @@ ._docs-size { text-align: right; - > small { color: $textColorLight; } + > small { color: var(--textColorLight); } } ._docs-tools { @@ -285,7 +285,7 @@ padding: 0 .75rem; } ._btn-link:not(._show) { display: none; } - ._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; } + ._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); } } // @@ -297,7 +297,7 @@ position: relative; padding-left: 10em; font-size: .8125rem; - color: $textColorLight; + color: var(--textColorLight); + ._news-row { margin-top: 1em; } } @@ -305,7 +305,7 @@ ._news-title { display: block; font-size: .875rem; - color: $textColor; + color: var(--textColor); } ._news-date { @@ -372,12 +372,12 @@ // Utilities // -._bold { font-weight: $boldFontWeight; } +._bold { font-weight: var(--boldFontWeight); } ._note { @extend %note; } ._note-green { @extend %note-green; } ._label { @extend %label; } ._code { @extend %code; } -._highlight { background: $highlightBackground !important; } +._highlight { background: var(--highlightBackground) !important; } ._table { width: 100%; } ._mobile ._table { overflow-x: auto; } @@ -396,12 +396,9 @@ pre:hover > & { display: block; } &:hover { opacity: 1; } - > svg { @extend %svg-icon; } - - @if $style == 'dark' { - > svg { fill: white; } - } @else { - > svg { fill: black; } + > svg { + @extend %svg-icon; + fill: var(--absolute); } &._pre-clip-success > svg, @@ -419,15 +416,13 @@ line-height: normal; white-space: nowrap; padding: .375rem .675rem; - background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%)); - border: 1px solid $boxBorder; + background-color: var(--boxBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; - box-shadow: 0 1px rgba($boxBorder, .08); cursor: pointer; &:active { - background-color: $boxBackground; - box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder; + box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder); } } @@ -447,18 +442,18 @@ ._btn-link { line-height: inherit; - color: $linkColor; - text-decoration: $linkTextDecoration; + color: var(--linkColor); + text-decoration: var(--linkTextDecoration); &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } ._reset-btn, ._reset-btn:hover { - color: $textColorRed; + color: var(--textColorRed); } ._github-btn { diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss index c1cf4653..7fb8d192 100644 --- a/assets/stylesheets/components/_fail.scss +++ b/assets/stylesheets/components/_fail.scss @@ -23,7 +23,7 @@ ._fail-title { margin: 0 0 1rem; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ._fail-text, ._fail-list { diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss index 37f9268d..5bae8901 100644 --- a/assets/stylesheets/components/_header.scss +++ b/assets/stylesheets/components/_header.scss @@ -4,20 +4,20 @@ ._header { position: absolute; - z-index: $headerZ; + z-index: var(--headerZ); top: 0; left: 0; display: -ms-flexbox; display: flex; - width: $sidebarWidth; - height: $headerHeight; - background: $headerBackground; - border-bottom: 1px solid $headerBorder; - border-right: 1px solid $headerBorder; + width: var(--sidebarWidth); + height: var(--headerHeight); + background: var(--headerBackground); + border-bottom: 1px solid var(--headerBorder); + border-right: 1px solid var(--headerBorder); @extend %border-box; @extend %user-select-none; - @media #{$mediumScreen} { width: $sidebarMediumWidth; } + @include mobile { width: var(--sidebarMediumWidth); } } ._header-left { @@ -35,7 +35,7 @@ flex: 0 0 auto; width: 2.25rem; height: 100%; - color: $textColorLight; + color: var(--textColorLight); text-align: center; &[hidden] { display: none; } @@ -67,8 +67,8 @@ word-wrap: normal; overflow-wrap: normal; font-size: .875rem; - background: $contentBackground; - border: 1px solid $headerBorder; + background: var(--contentBackground); + border: 1px solid var(--headerBorder); border-radius: 3px; box-shadow: -1px 1px 1px rgba(black, .05); transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms; @@ -98,10 +98,10 @@ margin: 0; line-height: 1.5rem; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); letter-spacing: -.5px; - background: $sidebarBackground; - border-bottom: 1px solid $sidebarBorder; + background: var(--sidebarBackground); + border-bottom: 1px solid var(--sidebarBorder); border-radius: 2px 2px 0 0; } @@ -109,7 +109,7 @@ ._menu-title-link:hover { display: block; padding: .5rem 1rem; - color: $focusText; + color: var(--focusText); text-decoration: none; } @@ -121,9 +121,9 @@ text-decoration: none; &:hover { - color: $focusText; + color: var(--focusText); text-decoration: none; - background: $sidebarBackground; + background: var(--sidebarBackground); } &:last-child { border-radius: 0 0 2px 2px; } @@ -151,11 +151,7 @@ opacity: .42; @extend %svg-icon; - @if $style == 'dark' { - fill: white; - } @else { - fill: black; - } + fill: var(--absolute); } } @@ -166,21 +162,19 @@ height: 100%; padding: 0 .75rem 1px 1.75rem; font-size: .875rem; - background: $contentBackground; + background: var(--contentBackground); border: 1px solid; - border-color: darken($headerBorder, 2%); + border-color: var(--searchBorder); border-radius: 3px; &:focus { outline: 0; - @if $inputFocusBorder { - border-color: $inputFocusBorder; - box-shadow: 0 0 1px $inputFocusBorder; - } + border-color: var(--inputFocusBorder); + box-shadow: 0 0 1px var(--inputFocusBorder); } &[disabled] { - background: $sidebarBackground; + background: var(--sidebarBackground); cursor: not-allowed; } } @@ -202,13 +196,9 @@ top: .5rem; left: .375rem; @extend %svg-icon; + fill: var(--absolute); } - @if $style == 'dark' { - > svg { fill: white; } - } @else { - > svg { fill: black; } - } ._search-active > & { display: block; } } @@ -222,8 +212,8 @@ line-height: 1.25rem; max-width: 50%; font-size: .8125rem; - color: $textColorLight; - background: darken($headerBackground, 5%); + color: var(--textColorLight); + background: var(--searchTagBackground); border-radius: 2px; @extend %truncate-text; } diff --git a/assets/stylesheets/components/_mobile.scss b/assets/stylesheets/components/_mobile.scss index 34ad7dbe..bdfe01fd 100644 --- a/assets/stylesheets/components/_mobile.scss +++ b/assets/stylesheets/components/_mobile.scss @@ -4,7 +4,7 @@ ._mobile { font-size: 100%; - background: $contentBackground; + background: var(--contentBackground); ._hide-on-mobile { display: none; } @@ -18,7 +18,7 @@ ._container { margin: 0; - padding-top: $headerHeight; + padding-top: var(--headerHeight); } ._content { diff --git a/assets/stylesheets/components/_notice.scss b/assets/stylesheets/components/_notice.scss index 0dba80ae..1e8cd381 100644 --- a/assets/stylesheets/components/_notice.scss +++ b/assets/stylesheets/components/_notice.scss @@ -1,15 +1,15 @@ ._notice { position: absolute; - z-index: $noticeZ; + z-index: var(--noticeZ); bottom: 0; - left: $sidebarWidth; + left: var(--sidebarWidth); right: 0; height: 2.5rem; padding: 0 1.25rem; - background: $noticeBackground; - box-shadow: inset 0 1px $noticeBorder; + background: var(--noticeBackground); + box-shadow: inset 0 1px var(--noticeBorder); - @media #{$mediumScreen} { left: $sidebarMediumWidth; } + @include mobile { left: var(--sidebarMediumWidth); } ._sidebar-hidden & { left: 0; } diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index a47d396d..dd23c43a 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -7,9 +7,9 @@ max-width: 90%; padding: .625rem 1rem; font-size: .75rem; - color: $notifColor; - background: $notifBackground; - border: $notifBorder; + color: var(--notifColor); + background: var(--notifBackground); + border: var(--notifBorder); border-radius: .25rem; transition: opacity .2s; opacity: 0; @@ -30,7 +30,7 @@ ._notif-info { float: right; - color: $notifColorLight; + color: var(--notifColorLight); } ._notif-link, @@ -69,13 +69,13 @@ &::-webkit-scrollbar { width: 10px !important; } &::-webkit-scrollbar-track { - background: $notifBackground !important; + background: var(--notifBackground) !important; border: 0 !important; border-radius: 5px !important; } &::-webkit-scrollbar-thumb { - border: 3px solid $notifBackground !important; + border: 3px solid var(--notifBackground) !important; &:hover, &:active { border-width: 2px !important; } } @@ -90,7 +90,7 @@ > ._news-row { line-height: 1.125rem; font-size: .6875rem; - color: $notifColorLight; + color: var(--notifColorLight); margin-bottom: .25rem; + ._news-row { margin-top: .625rem; } @@ -107,7 +107,7 @@ ._news-date { float: right; margin-left: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } code { @@ -128,9 +128,9 @@ } ._notif-tip { - color: $textColor; - background: $tipBackground; - border: $tipBorder; + color: var(--textColor); + background: var(--tipBackground); + border: var(--tipBorder); - ._notif-info { color: $textColorLight; } + ._notif-info { color: var(--textColorLight); } } diff --git a/assets/stylesheets/components/_page.scss b/assets/stylesheets/components/_page.scss index 99771443..60a970b9 100644 --- a/assets/stylesheets/components/_page.scss +++ b/assets/stylesheets/components/_page.scss @@ -23,7 +23,7 @@ max-width: 100%; margin-bottom: 1em; padding: 1px; - border: 1px dotted $boxBorder; + border: 1px dotted var(--boxBorder); border-radius: 3px; @extend %border-box; } @@ -50,7 +50,7 @@ display: inline-block; vertical-align: top; padding: 0 .5rem; - background: $contentBackground; + background: var(--contentBackground); @extend %internal-link; & + & { margin-left: .75rem; } @@ -66,7 +66,7 @@ clear: both; margin: 2rem 0 1.5rem; font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); text-align: center; -webkit-font-smoothing: subpixel-antialiased; @@ -78,7 +78,7 @@ display: inline-block; margin: 0; padding: .25rem .75rem; - background: $labelBackground; + background: var(--labelBackground); border-radius: 3px; } diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index 1d68936f..5853fa04 100644 --- a/assets/stylesheets/components/_path.scss +++ b/assets/stylesheets/components/_path.scss @@ -1,17 +1,17 @@ ._path { position: absolute; - z-index: $noticeZ - 1; + z-index: var(--headerZ); bottom: 0; - left: $sidebarWidth; + left: var(--sidebarWidth); right: 0; height: 2rem; line-height: 2rem; padding: 0 .375rem; font-size: .875rem; - background: $pathBackground; - box-shadow: inset 0 1px $pathBorder; + background: var(--pathBackground); + box-shadow: inset 0 1px var(--pathBorder); - @media #{$mediumScreen} { left: $sidebarMediumWidth; } + @include mobile { left: var(--sidebarMediumWidth); } ._sidebar-hidden & { left: 0; } @@ -24,7 +24,7 @@ display: inline-block; vertical-align: top; padding: 0 .375rem; - color: $textColor; + color: var(--textColor); text-decoration: none; &:first-child:before { diff --git a/assets/stylesheets/components/_prism.scss b/assets/stylesheets/components/_prism.scss index 405fd436..9f411c65 100644 --- a/assets/stylesheets/components/_prism.scss +++ b/assets/stylesheets/components/_prism.scss @@ -1,9 +1,26 @@ +html { + --prismValue: #905; + --prismText: #5e8e01; + --prismOperator: #a67f59; + --prismKeyword: #0070a3; + --prismFunction: #dd4a68; + --prismVariable: #e90; +} +html.dark { + --prismValue: #eb8160; + --prismText: #ddcf88; + --prismOperator: #b1c676; + --prismKeyword: #91b3ed; + --prismFunction: #c79e6b; + --prismVariable: #e9c062; +} + .token.comment, .token.prolog, .token.doctype, .token.cdata, .token.punctuation { - color: $textColorLight; + color: var(--textColorLight); } .namespace { @@ -17,11 +34,7 @@ .token.constant, .token.symbol, .token.deleted { - @if $style == 'dark' { - color: #eb8160; - } @else { - color: #905; - } + color: var(--prismValue); } .token.selector, @@ -30,11 +43,7 @@ .token.char, .token.builtin, .token.inserted { - @if $style == 'dark' { - color: #ddcf88; - } @else { - color: #5e8e01; - } + color: var(--prismText); } .token.operator, @@ -42,44 +51,28 @@ .token.url, .language-css .token.string, .style .token.string { - @if $style == 'dark' { - color: #b1c676; - } @else { - color: #a67f59; - } + color: var(--prismOperator); } .token.atrule, .token.attr-value, .token.keyword { - @if $style == 'dark' { - color: #91b3ed; - } @else { - color: #0070a3; - } + color: var(--prismKeyword); } .token.function { - @if $style == 'dark' { - color: #c79e6b; - } @else { - color: #dd4a68; - } + color: var(--prismFunction); } .token.regex, .token.important, .token.variable { - @if $style == 'dark' { - color: #e9c062; - } @else { - color: #e90; - } + color: var(--prismVariable); } .token.important, .token.bold { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } .token.italic { diff --git a/assets/stylesheets/components/_settings.scss b/assets/stylesheets/components/_settings.scss index c1134041..86bbf005 100644 --- a/assets/stylesheets/components/_settings.scss +++ b/assets/stylesheets/components/_settings.scss @@ -7,15 +7,15 @@ position: absolute; top: 0; bottom: 0; - z-index: $headerZ; + z-index: var(--headerZ); &._in { display: block; } > ._header { justify-content: space-between; } &._dirty > ._header { - background: $noteGreenBackground; - border-color: $noteGreenBorder; + background: var(--noteGreenBackground); + border-color: var(--noteGreenBorder); } } @@ -37,7 +37,7 @@ padding-right: .5rem; line-height: inherit; font-size: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); text-align: right; @extend %border-box; } @@ -52,7 +52,7 @@ > small { display: block; - color: $textColorLight; + color: var(--textColorLight); margin-left: 1.75rem; } @@ -62,7 +62,7 @@ } } -@media (max-width: $maxWidth) { +@media (max-width: 80rem) { ._setting-max-width { display: none; } } @@ -80,7 +80,7 @@ line-height: 1.5rem; padding: 0 .75rem; font-size: .875rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); color: inherit; text-align: left; cursor: pointer; @@ -119,12 +119,12 @@ position: relative; vertical-align: top; padding: 0 .75rem; - line-height: $headerHeight; - color: $textColorLight; + line-height: var(--headerHeight); + color: var(--textColorLight); &.active { - color: $textColor; - font-weight: $boldFontWeight; - box-shadow: inset 0 -2px $linkColor; + color: var(--textColor); + font-weight: var(--boldFontWeight); + box-shadow: inset 0 -2px var(--linkColor); } } diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss index e38ed4d2..8813f92d 100644 --- a/assets/stylesheets/components/_sidebar.scss +++ b/assets/stylesheets/components/_sidebar.scss @@ -4,14 +4,14 @@ ._sidebar { position: absolute; - z-index: $sidebarZ; + z-index: var(--sidebarZ); top: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: scroll; - padding-top: $headerHeight; - background: $sidebarBackground; + padding-top: var(--headerHeight); + background: var(--sidebarBackground); background-clip: content-box; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; // IE 10 doesn't support pointer-events @@ -22,13 +22,13 @@ ._overlay-scrollbars & { padding-top: 0; - top: $headerHeight; + top: var(--headerHeight); } body:not(._native-scrollbars) & { &::-webkit-scrollbar { width: 10px; } &::-webkit-scrollbar-track { - background: $contentBackground; + background: var(--contentBackground); border: 0; } &::-webkit-scrollbar-thumb { @@ -52,10 +52,10 @@ ._resizer { position: absolute; - z-index: $sidebarZ + 1; - top: $headerHeight; - bottom: $headerHeight; - left: $sidebarWidth; + z-index: var(--headerZ); + top: var(--headerHeight); + bottom: var(--headerHeight); + left: var(--sidebarWidth); margin-left: -2px; width: 3px; cursor: col-resize; @@ -72,11 +72,11 @@ margin: 0; padding: 0; list-style: none; - width: $sidebarWidth; - box-shadow: inset -1px 0 $sidebarBorder; + width: var(--sidebarWidth); + box-shadow: inset -1px 0 var(--sidebarBorder); @extend %border-box; - @media #{$mediumScreen} { width: $sidebarMediumWidth; } + @include mobile { width: var(--sidebarMediumWidth); } ._sidebar > & { min-height: 100%; } @@ -89,7 +89,7 @@ padding: 0 .75rem 0 2.125rem; line-height: 2rem; font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); text-transform: uppercase; cursor: default; } @@ -110,8 +110,8 @@ line-height: 1.5rem; font-size: .875rem; cursor: default; - background: $sidebarBackground; - box-shadow: inset -1px 0 $sidebarBorder; + background: var(--sidebarBackground); + box-shadow: inset -1px 0 var(--sidebarBorder); @extend %truncate-text; &, &:hover { @@ -123,16 +123,16 @@ &.focus:hover, &.active, &.active:hover { - color: $focusText; - background: $focusBackground; - box-shadow: inset -1px 0 $focusBorder; + color: var(--focusText); + background: var(--focusBackground); + box-shadow: inset -1px 0 var(--focusBorder); } &.active, &.active:hover { - color: $selectionText; - background: $selectionBackground; - box-shadow: inset -1px 0 $selectionBorder; + color: var(--selectionText); + background: var(--selectionBackground); + box-shadow: inset -1px 0 var(--selectionBorder); } &:before { @@ -160,7 +160,7 @@ } ._list-count { - color: $textColorLighter; + color: var(--textColorLighter); pointer-events: none; ._list-disabled:hover > & { display: none; } @@ -168,7 +168,7 @@ ._list-enable { display: none; - color: $linkColor; + color: var(--linkColor); cursor: pointer; &:hover { text-decoration: underline; } @@ -188,7 +188,7 @@ ._list-disabled { @extend %_list-dir; - &, &:hover { color: $textColorLight; } + &, &:hover { color: var(--textColorLight); } &:before { opacity: .7; } } @@ -200,11 +200,9 @@ width: 1rem; height: 1rem; cursor: pointer; - fill: black; + fill: var(--absolute); opacity: .4; - @if $style == 'dark' { fill: white; } - &:hover { opacity: .65; } ._list-rdir > & { @@ -239,11 +237,11 @@ // ._list-pagelink { - color: $linkColor; + color: var(--linkColor); cursor: pointer; &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } @@ -275,9 +273,9 @@ left: .75rem; width: .75rem; height: 1px; - background: rgba($selectionText, .9); - box-shadow: 0 -3px rgba($selectionText, .9), // top line - 0 3px rgba($selectionText, .9); // bottom line + background: var(--transparentSelectionText); + box-shadow: 0 -3px var(--transparentSelectionText), // top line + 0 3px var(--transparentSelectionText); // bottom line } } @@ -289,7 +287,7 @@ padding: .5rem .75rem; line-height: 1.25rem; font-size: .8125rem; - color: $textColorLight; + color: var(--textColorLight); & + & { padding-top: 0; } } @@ -303,9 +301,9 @@ ._list-hover.clone { position: fixed; overflow: visible; - z-index: $hoverZ; + z-index: var(--hoverZ); left: 0; - min-width: $sidebarWidth; + min-width: var(--sidebarWidth); padding: .25rem .75rem; pointer-events: none; -webkit-font-smoothing: subpixel-antialiased; @@ -313,7 +311,7 @@ transform: translate3d(0, 0, 0); @extend %border-box; - @media #{$mediumScreen} { min-width: $sidebarMediumWidth; } + @include mobile { min-width: var(--sidebarMediumWidth); } > ._list-text { display: inline; } @@ -346,10 +344,10 @@ padding: .5rem .75rem .25rem .75rem; line-height: 1.5rem; font-size: .75rem; - font-weight: $bolderFontWeight; - color: $textColorLight; + font-weight: var(--bolderFontWeight); + color: var(--textColorLight); text-transform: uppercase; - background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0)); + background: linear-gradient(to bottom, var(--sidebarBackground), var(--sidebarBackground) 75%, var(--transparentSidebarBackground)); cursor: default; } diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index b4a7bdd7..bcf01467 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -1,9 +1,9 @@ html { height: 100%; font-size: 100%; - background: $documentBackground; + background: var(--documentBackground); - @media #{$mediumScreen} { font-size: 93.75%; } + @include mobile { font-size: 93.75%; } @include print { background: none; } @import 'global/print'; @@ -15,12 +15,12 @@ body { overflow: auto; font-size: 1em; font-weight: normal; - font-family: $baseFont; + font-family: var(--baseFont); line-height: 1.7; - color: $textColor; + color: var(--textColor); word-wrap: break-word; overflow-wrap: break-word; - background: $contentBackground; + background: var(--contentBackground); touch-action: manipulation; -webkit-tap-highlight-color: rgba(black, 0); -webkit-touch-callout: none; @@ -29,11 +29,11 @@ body { } a { - color: $linkColor; - text-decoration: $linkTextDecoration; + color: var(--linkColor); + text-decoration: var(--linkTextDecoration); &:hover { - color: $linkColorHover; + color: var(--linkColorHover); text-decoration: underline; } } @@ -47,7 +47,7 @@ img { h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 1em; line-height: 1.3; - font-weight: $bolderFontWeight; + font-weight: var(--bolderFontWeight); } h1 { font-size: 1.5em; } @@ -59,7 +59,7 @@ h5, h6 { font-size: 1em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } -b, strong { font-weight: $boldFontWeight; } +b, strong { font-weight: var(--boldFontWeight); } small { font-size: .9em; } @@ -79,7 +79,7 @@ li > ul, li > ol, dd > ul, dd > ol { margin: .5em 0; } li > p { margin-bottom: .25em; } dl { margin: 1.5em 0; } -dt { font-weight: $boldFontWeight; } +dt { font-weight: var(--boldFontWeight); } dd { margin: .375em; padding-left: 1em; @@ -91,15 +91,15 @@ dfn, var { font-style: normal; } abbr, acronym, dfn { cursor: help; - border-bottom: 1px dotted $textColor; + border-bottom: 1px dotted var(--textColor); } pre, code, samp, %pre, %code { - font-family: $monoFont; + font-family: var(--monoFont); font-weight: normal; font-style: normal; font-size: .9em; - color: $textColor; + color: var(--textColor); white-space: pre-wrap; direction: ltr; -moz-tab-size: 2; @@ -121,14 +121,14 @@ a > code { color: inherit; } table { margin: 1.5em 0; background: none; - border: 1px solid $boxBorder; + border: 1px solid var(--boxBorder); border-collapse: separate; border-spacing: 0; border-radius: 3px; } caption { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); padding: 0 .7em .3em; } @@ -142,15 +142,15 @@ th, td { } th { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); border: 0; - border-bottom: 1px solid $boxBorder; + border-bottom: 1px solid var(--boxBorder); border-radius: 0; @extend %heading-box; &:empty { background: none; } - + th, + td { border-left: 1px solid $boxBorder; } + + th, + td { border-left: 1px solid var(--boxBorder); } tr:first-child > &:first-child { border-top-left-radius: 3px; } tr:first-child > &:last-child { border-top-right-radius: 3px; } @@ -161,10 +161,10 @@ th { } td { - background: $contentBackground; - border-bottom: 1px solid $boxBorderLight; + background: var(--contentBackground); + border-bottom: 1px solid var(--boxBorderLight); - + td { border-left: 1px solid $boxBorderLight; } + + td { border-left: 1px solid var(--boxBorderLight); } tr:last-child > & { border-bottom: 0; } > pre:only-child, > p:only-child, > ul:only-child, > ol:only-child { @@ -190,7 +190,7 @@ input, button { margin: 0; font-family: inherit; font-size: 100%; - color: $textColor; + color: var(--textColor); line-height: normal; @extend %border-box; } @@ -219,7 +219,7 @@ button:focus { } img, iframe { - background: $externalsBackground; + background: var(--externalsBackground); } input[type="search"]::-webkit-search-cancel-button, @@ -234,9 +234,9 @@ input[type="search"]::-webkit-search-decoration { border: 0 !important; } -::-webkit-input-placeholder { color: $textColorLighter; } -::-moz-placeholder { color: $textColorLighter; opacity: 1; } -:-ms-input-placeholder { color: $textColorLighter; } +::-webkit-input-placeholder { color: var(--textColorLighter); } +::-moz-placeholder { color: var(--textColorLighter); opacity: 1; } +:-ms-input-placeholder { color: var(--textColorLighter); } body:not(._native-scrollbars) { *::-webkit-scrollbar { -webkit-appearance: none; } @@ -247,12 +247,12 @@ body:not(._native-scrollbars) { *::-webkit-scrollbar-corner { display: none; } *::-webkit-scrollbar-track { - background: $contentBackground; - border: 1px solid $contentBackground; + background: var(--contentBackground); + border: 1px solid var(--contentBackground); &:hover { - background: $sidebarBackground; - border-color: $sidebarBorder; + background: var(--sidebarBackground); + border-color: var(--sidebarBorder); } &:vertical { border-width: 0 0 0 1px; } @@ -270,14 +270,14 @@ body:not(._native-scrollbars) { *::-webkit-scrollbar-thumb { min-height: 2rem; - background: $scrollbarColor; + background: var(--scrollbarColor); background-clip: padding-box; border: 5px solid rgba(black, 0); border-radius: 10px; &:hover, &:active { - background-color: $scrollbarColorHover; + background-color: var(--scrollbarColorHover); border-width: 4px; } } diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index f96f617b..79f82adb 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -36,15 +36,15 @@ // %box { - background: $boxBackground; - border: 1px solid $boxBorder; + background: var(--boxBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; } %heading-box { - color: $boxHeaderColor; - background: $boxHeaderBackground; - border: 1px solid $boxBorder; + color: var(--boxHeaderColor); + background: var(--boxHeaderBackground); + border: 1px solid var(--boxBorder); border-radius: 3px; } @@ -82,15 +82,15 @@ %note { margin: 1.5rem 0; padding: .5rem .875rem; - background: $noteBackground; - border: 1px solid $noteBorder; + background: var(--noteBackground); + border: 1px solid var(--noteBorder); border-radius: 3px; } %label { margin: 0 1px; padding: 1px 4px 2px; - background: $labelBackground; + background: var(--labelBackground); border-radius: 3px; } @@ -102,35 +102,35 @@ padding-right: .5em; overflow: hidden; font-size: inherit; - color: $boxHeaderColor; - border: 1px solid $boxBorder; + color: var(--boxHeaderColor); + border: 1px solid var(--boxBorder); border-radius: 2px; @extend %label; } %label-yellow { - background: $noteBackground; - border-color: $noteBorder; + background: var(--noteBackground); + border-color: var(--noteBorder); } %note-green, %label-green { - background: $noteGreenBackground; - border-color: $noteGreenBorder; + background: var(--noteGreenBackground); + border-color: var(--noteGreenBorder); } %note-blue, %label-blue { - background: $noteBlueBackground; - border-color: $noteBlueBorder; + background: var(--noteBlueBackground); + border-color: var(--noteBlueBorder); } %note-orange, %label-orange { - background: $noteOrangeBackground; - border-color: $noteOrangeBorder; + background: var(--noteOrangeBackground); + border-color: var(--noteOrangeBorder); } %note-red, %label-red { - background: $noteRedBackground; - border-color: $noteRedBorder; + background: var(--noteRedBackground); + border-color: var(--noteRedBorder); } // @@ -149,12 +149,11 @@ pointer-events: none; // - @if $style == 'dark' { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); - } @else { - background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); - } + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); } } +html.dark %external-link { + background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+); +} %internal-link:after { content: none !important; } diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss index 87d9e1d2..e7a805f4 100644 --- a/assets/stylesheets/global/_icons.scss +++ b/assets/stylesheets/global/_icons.scss @@ -23,8 +23,8 @@ %doc-icon-2 { background-image: image-url('docs-2@2x.png') !important; } } -%darkIconFix { - @if $style == 'dark' { +html._theme-dark { + %darkIconFix { filter: invert(100%) grayscale(100%); -webkit-filter: invert(100%) grayscale(100%); } diff --git a/assets/stylesheets/global/_mixins.scss b/assets/stylesheets/global/_mixins.scss index 604b9ac7..8fbb04fa 100644 --- a/assets/stylesheets/global/_mixins.scss +++ b/assets/stylesheets/global/_mixins.scss @@ -7,3 +7,9 @@ @content; } } + +@mixin mobile { + @media (max-width: 800px) { + @content; + } +} diff --git a/assets/stylesheets/global/_print.scss b/assets/stylesheets/global/_print.scss index 5044631e..08c14fd1 100644 --- a/assets/stylesheets/global/_print.scss +++ b/assets/stylesheets/global/_print.scss @@ -25,14 +25,14 @@ ._attribution-p { background: none; - border: 2px solid $boxBorder; + border: 2px solid var(--boxBorder); } ._attribution:last-child:after { content: 'Exported from DevDocs \2014 https://devdocs.io'; display: block; margin-top: 1rem; - font-weight: $bolderFontWeight; + font-weight: var(--bolderFontWeight); } ._attribution { diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss index 2f962de4..b9c88491 100644 --- a/assets/stylesheets/global/_variables-dark.scss +++ b/assets/stylesheets/global/_variables-dark.scss @@ -1,94 +1,76 @@ -$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; -$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -$boldFontWeight: 500; -$bolderFontWeight: 600; +html._theme-dark { + --absolute: white; -$style: 'dark'; + --documentBackground: #222; + --contentBackground: #33373a; -$maxWidth: 80rem; -$headerHeight: 3rem; -$sidebarWidth: 20rem; -$sidebarMediumWidth: 16rem; + --textColor: #cbd0d0; + --textColorLight: #9da5ad; + --textColorLighter: #77787a; -$documentBackground: #222; -$contentBackground: #33373a; + --externalsBackground: #fff; -$externalsBackground: #fff; + --inputFocusBorder: transparent; -$textColor: #cbd0d0; -$textColorLight: #9da5ad; -$textColorLighter: #77787a; -$textColorRed: #f44336; + --focusBackground: #3f4042; + --focusBorder: #000; + --focusText: #f7f2f2; -$inputFocusBorder: false; + --loadingText: #5d6164; -$focusBackground: #3f4042; -$focusBorder: #000; -$focusText: #f7f2f2; + --selectionBackground: #007acc; + --selectionBorder: #000; -$loadingText: #5d6164; -$splashText: $loadingText; + --highlightBackground: #64675f; -$selectionBackground: #007acc; -$selectionBorder: #000; -$selectionText: #fff; + --linkColor: var(--textColor); + --linkColorHover: white; + --linkTextDecoration: underline; -$highlightBackground: #64675f; + --headerBackground: #1c1c1c; + --headerBorder: #000; + --searchTagBackground: #{darken(#1c1c1c, 5%)}; + --searchBorder: #{darken(#000, 2%)}; -$linkColor: $textColor; -$linkColorHover: white; -$linkTextDecoration: underline; + --sidebarBackground: #24282a; + --transparentSidebarBackground: #{rgba(#24282a, 0)}; + --sidebarBorder: #000; -$headerBackground: #1c1c1c; -$headerBorder: #000; + --scrollbarColor: #6c6c6f; + --scrollbarColorHover: #949697; -$sidebarBackground: #24282a; -$sidebarBorder: #000; + --pathBackground: var(--headerBackground); + --pathBorder: var(--headerBorder); -$scrollbarColor: #6c6c6f; -$scrollbarColorHover: #949697; + --noticeBackground: var(--sidebarBackground); + --noticeBorder: var(--sidebarBorder); -$pathBackground: $headerBackground; -$pathBorder: $headerBorder; + --boxBackground: var(--sidebarBackground); + --boxBorder: var(--headerBorder); + --boxBorderLight: var(--headerBorder); + --boxHeaderColor: #dbe4e4; + --boxHeaderBackground: var(--sidebarBackground); -$noticeBackground: $sidebarBackground; -$noticeBorder: $sidebarBorder; + --noteBackground: #45474b; + --noteBorder: #000; -$boxBackground: $sidebarBackground; -$boxBorder: $headerBorder; -$boxBorderLight: $headerBorder; -$boxHeaderColor: #dbe4e4; -$boxHeaderBackground: $sidebarBackground; + --noteGreenBackground: #284a2a; + --noteGreenBorder: #000; -$noteBackground: #45474b; -$noteBorder: #000; + --noteBlueBackground: #2a4151; + --noteBlueBorder: #000; -$noteGreenBackground: #284a2a; -$noteGreenBorder: #000; + --noteOrangeBackground: #563322; + --noteOrangeBorder: #000; -$noteBlueBackground: #2a4151; -$noteBlueBorder: #000; + --noteRedBackground: #603033; + --noteRedBorder: #000; -$noteOrangeBackground: #563322; -$noteOrangeBorder: #000; + --labelBackground: var(--boxBackground); -$noteRedBackground: #603033; -$noteRedBorder: #000; + --notifBackground: #{rgba(#555, .95)}; + --notifBorder: 1px solid #000; -$labelBackground: $boxBackground; - -$notifBackground: rgba(#555, .95); -$notifBorder: 1px solid #000; -$notifColor: #fff; -$notifColorLight: #ccc; - -$tipBackground: $notifBackground; -$tipBorder: $notifBorder; - -$mediumScreen: '(max-width: 800px)'; - -$contentZ: 1; -$sidebarZ: 2; -$headerZ: 3; -$noticeZ: 4; -$hoverZ: 5; + --tipBackground: var(--notifBackground); + --tipBorder: var(--notifBorder); +} diff --git a/assets/stylesheets/global/_variables-light.scss b/assets/stylesheets/global/_variables-light.scss new file mode 100644 index 00000000..f2dcb807 --- /dev/null +++ b/assets/stylesheets/global/_variables-light.scss @@ -0,0 +1,76 @@ +html._theme-default { + --absolute: black; + + --documentBackground: #f3f3f3; + --contentBackground: #fff; + + --textColor: #333; + --textColorLight: #666; + --textColorLighter: #888; + + --externalsBackground: #fff; + + --inputFocusBorder: #35b5f4; + + --focusBackground: #e5e5e5; + --focusBorder: #d4d4d4; + --focusText: #000; + + --loadingText: #ccc; + + --selectionBackground: #398df0; + --selectionBorder: #196fc2; + + --highlightBackground: #fffdcd; + + --linkColor: #3377c0; + --linkColorHover: #2f6cb6; + --linkTextDecoration: none; + + --headerBackground: #eee; + --headerBorder: #d7d7d7; + --searchTagBackground: #{darken(#eee, 5%)}; + --searchBorder: #{darken(#d7d7d7, 2%)}; + + --sidebarBackground: #f9f9f9; + --transparentSidebarBackground: #{rgba(#f9f9f9, 0)}; + --sidebarBorder: #e1e1e1; + + --scrollbarColor: #ccc; + --scrollbarColorHover: #999; + + --pathBackground: var(--sidebarBackground); + --pathBorder: var(--sidebarBorder); + + --noticeBackground: #faf9e2; + --noticeBorder: #e2e2c1; + + --boxBackground: #fafafa; + --boxBorder: #d8d8d8; + --boxBorderLight: #e5e5e5; + --boxHeaderColor: var(--textColor); + --boxHeaderBackground: #f5f5f5; + + --noteBackground: #f8f8dd; + --noteBorder: #d3d952; + + --noteGreenBackground: #e7f8e1; + --noteGreenBorder: #89da70; + + --noteBlueBackground: #d4f3fd; + --noteBlueBorder: #94bbeb; + + --noteOrangeBackground: #fbe6d1; + --noteOrangeBorder: #ec8b01; + + --noteRedBackground: #fed5d3; + --noteRedBorder: #dc7874; + + --labelBackground: #f4f4f4; + + --notifBackground: #{rgba(#333, .85)}; + --notifBorder: none; + + --tipBackground: #{rgba(#fffdcd, .95)}; + --tipBorder: 1px solid #e7dca9; +} diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index b3ae528e..a857d1cd 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -1,94 +1,31 @@ -$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; -$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; -$boldFontWeight: 500; -$bolderFontWeight: 600; +html { + --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; + --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; + --boldFontWeight: 500; + --bolderFontWeight: 600; -$style: 'light'; + --textColorRed: #f44336; -$maxWidth: 80rem; -$headerHeight: 3rem; -$sidebarWidth: 20rem; -$sidebarMediumWidth: 16rem; + --splashText: var(--loadingText); -$documentBackground: #f3f3f3; -$contentBackground: #fff; + --selectionText: #fff; + --transparentSelectionText: rgba(255, 255, 255, 0.9); -$externalsBackground: $contentBackground; + --notifColor: #fff; + --notifColorLight: #ccc; -$textColor: #333; -$textColorLight: #666; -$textColorLighter: #888; -$textColorRed: #f44336; + --maxWidth: 80rem; + --headerHeight: 3rem; + --sidebarWidth: 20rem; + --sidebarMediumWidth: 16rem; -$inputFocusBorder: #35b5f4; + --focusBackground: #e5e5e5; + --focusBorder: #d4d4d4; + --focusText: #000; -$focusBackground: #e5e5e5; -$focusBorder: #d4d4d4; -$focusText: #000; - -$loadingText: #ccc; -$splashText: #ccc; - -$selectionBackground: #398df0; -$selectionBorder: #196fc2; -$selectionText: #fff; - -$highlightBackground: #fffdcd; - -$linkColor: #3377c0; -$linkColorHover: #2f6cb6; -$linkTextDecoration: none; - -$headerBackground: #eee; -$headerBorder: #d7d7d7; - -$sidebarBackground: #f9f9f9; -$sidebarBorder: #e1e1e1; - -$scrollbarColor: #ccc; -$scrollbarColorHover: #999; - -$pathBackground: $sidebarBackground; -$pathBorder: $sidebarBorder; - -$noticeBackground: #faf9e2; -$noticeBorder: #e2e2c1; - -$boxBackground: #fafafa; -$boxBorder: #d8d8d8; -$boxBorderLight: #e5e5e5; -$boxHeaderColor: $textColor; -$boxHeaderBackground: #f5f5f5; - -$noteBackground: #f8f8dd; -$noteBorder: #d3d952; - -$noteGreenBackground: #e7f8e1; -$noteGreenBorder: #89da70; - -$noteBlueBackground: #d4f3fd; -$noteBlueBorder: #94bbeb; - -$noteOrangeBackground: #fbe6d1; -$noteOrangeBorder: #ec8b01; - -$noteRedBackground: #fed5d3; -$noteRedBorder: #dc7874; - -$labelBackground: #f4f4f4; - -$notifBackground: rgba(#333, .85); -$notifBorder: none; -$notifColor: #fff; -$notifColorLight: #ccc; - -$tipBackground: rgba(#fffdcd, .95); -$tipBorder: 1px solid #e7dca9; - -$mediumScreen: '(max-width: 800px)'; - -$contentZ: 1; -$sidebarZ: 2; -$headerZ: 3; -$noticeZ: 4; -$hoverZ: 5; + --contentZ: 1; + --sidebarZ: 2; + --headerZ: 3; + --noticeZ: 4; + --hoverZ: 5; +} diff --git a/assets/stylesheets/pages/_angularjs.scss b/assets/stylesheets/pages/_angularjs.scss index 5b6df0bc..13f85796 100644 --- a/assets/stylesheets/pages/_angularjs.scss +++ b/assets/stylesheets/pages/_angularjs.scss @@ -8,7 +8,7 @@ .nav-index-section { margin: 1.5em 0 1em -2em; list-style: none; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); text-transform: capitalize; } diff --git a/assets/stylesheets/pages/_async.scss b/assets/stylesheets/pages/_async.scss index 09d018f5..c8961dfd 100644 --- a/assets/stylesheets/pages/_async.scss +++ b/assets/stylesheets/pages/_async.scss @@ -3,13 +3,13 @@ h3 > .type-signature { float: right; - color: $textColorLight; + color: var(--textColorLight); } h3 > .signature-attributes { font-size: .75rem; font-weight: normal; font-style: italic; - color: $textColorLighter; + color: var(--textColorLighter); } } diff --git a/assets/stylesheets/pages/_bootstrap.scss b/assets/stylesheets/pages/_bootstrap.scss index 0deb79b7..fbd885ea 100644 --- a/assets/stylesheets/pages/_bootstrap.scss +++ b/assets/stylesheets/pages/_bootstrap.scss @@ -4,7 +4,7 @@ h4 > code, h5 > code, strong > code { @extend %label; } h2 > small { - color: $textColorLight; + color: var(--textColorLight); float: right; } diff --git a/assets/stylesheets/pages/_c.scss b/assets/stylesheets/pages/_c.scss index b9c4c25f..9aeafdcb 100644 --- a/assets/stylesheets/pages/_c.scss +++ b/assets/stylesheets/pages/_c.scss @@ -23,7 +23,7 @@ .t-spar { // language/switch, language/for, etc. font-style: italic; - color: $textColorLight; + color: var(--textColorLight); } .t-sdsc-nopad dl, .t-sdsc-nopad dd { margin: 0; } @@ -57,7 +57,7 @@ margin: 1rem 0; padding: .375rem; font-size: .75rem; - border: 1px solid $boxBorder; + border: 1px solid var(--boxBorder); border-radius: 2px; } diff --git a/assets/stylesheets/pages/_clojure.scss b/assets/stylesheets/pages/_clojure.scss index 9f5e5db4..c1b2647c 100644 --- a/assets/stylesheets/pages/_clojure.scss +++ b/assets/stylesheets/pages/_clojure.scss @@ -5,6 +5,6 @@ .type { float: right; font-size: .9em; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_d.scss b/assets/stylesheets/pages/_d.scss index a32e84b0..7e672145 100644 --- a/assets/stylesheets/pages/_d.scss +++ b/assets/stylesheets/pages/_d.scss @@ -2,10 +2,10 @@ h2 { @extend %block-heading; } h3, .d_decl { @extend %block-label, %label-blue; } .d_decl { @extend %code; } - .d_decl > small { color: $textColorLight; } - .d_decl > strong { font-weight: $bolderFontWeight; } + .d_decl > small { color: var(--textColorLight); } + .d_decl > strong { font-weight: var(--bolderFontWeight); } p > code, li > code, td > code, dd > code { @extend %label; } - span.red { color: $textColorRed; } + span.red { color: var(--textColorRed); } } diff --git a/assets/stylesheets/pages/_dojo.scss b/assets/stylesheets/pages/_dojo.scss index bb24b223..d22b1f81 100644 --- a/assets/stylesheets/pages/_dojo.scss +++ b/assets/stylesheets/pages/_dojo.scss @@ -1,5 +1,5 @@ ._dojo { @extend %simple; - .jsdoc-inheritance { color: $textColorLight; } + .jsdoc-inheritance { color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_ember.scss b/assets/stylesheets/pages/_ember.scss index 636b56b6..9b3f4689 100644 --- a/assets/stylesheets/pages/_ember.scss +++ b/assets/stylesheets/pages/_ember.scss @@ -5,7 +5,7 @@ h3 > .access { float: right; - color: $textColorLight; + color: var(--textColorLight); font-weight: normal; } @@ -15,6 +15,6 @@ } p.github-link { - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_erlang.scss b/assets/stylesheets/pages/_erlang.scss index ba221ec7..1b76cf6d 100644 --- a/assets/stylesheets/pages/_erlang.scss +++ b/assets/stylesheets/pages/_erlang.scss @@ -5,5 +5,5 @@ code.code { @extend %label; } .note { @extend %note; } .warning { @extend %note, %note-red; } - .note .label, .warning .label { font-weight: $boldFontWeight; } + .note .label, .warning .label { font-weight: var(--boldFontWeight); } } diff --git a/assets/stylesheets/pages/_jquery.scss b/assets/stylesheets/pages/_jquery.scss index 4858f4ef..d1a62a1c 100644 --- a/assets/stylesheets/pages/_jquery.scss +++ b/assets/stylesheets/pages/_jquery.scss @@ -32,7 +32,7 @@ .toc-list { margin-top: 0; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); > li + li { margin-top: 1em; } > li > ul { font-weight: normal; } @@ -48,7 +48,7 @@ .returns, .option-type { float: right; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); margin-left: 1em; } diff --git a/assets/stylesheets/pages/_love.scss b/assets/stylesheets/pages/_love.scss index a1908523..b037527f 100644 --- a/assets/stylesheets/pages/_love.scss +++ b/assets/stylesheets/pages/_love.scss @@ -12,6 +12,6 @@ .smwtable { width: 100%; } .smwtable td:nth-last-child(2), .smwtable td:last-child { width: 2.5em; } - .cell-green { background: $noteGreenBackground; } - .cell-red { background: $noteRedBackground; } + .cell-green { background: var(--noteGreenBackground); } + .cell-red { background: var(--noteRedBackground); } } diff --git a/assets/stylesheets/pages/_mdn.scss b/assets/stylesheets/pages/_mdn.scss index b1f89f4f..d2b9b643 100644 --- a/assets/stylesheets/pages/_mdn.scss +++ b/assets/stylesheets/pages/_mdn.scss @@ -7,7 +7,7 @@ > span { display: block; font-size: 1rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } ul, ol { @@ -42,7 +42,7 @@ > .note { em { font-style: normal; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } > ul { margin: 1em 0; } @@ -93,7 +93,7 @@ dt > strong > code, // HTML element attribute dl > dt > code { // CSS property value, Javascript function argument font-family: inherit; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); font-size: inherit; } diff --git a/assets/stylesheets/pages/_meteor.scss b/assets/stylesheets/pages/_meteor.scss index adb0121e..5497239f 100644 --- a/assets/stylesheets/pages/_meteor.scss +++ b/assets/stylesheets/pages/_meteor.scss @@ -9,10 +9,10 @@ dt > code { @extend %label; } .api-heading { overflow: hidden; } - .api-heading > code { font-weight: $boldFontWeight; } + .api-heading > code { font-weight: var(--boldFontWeight); } .locus, .src-code { float: right; } .locus, .type, .src-code { margin-left: .5em; } h2 .subtext-api { margin-top: .25rem; } .locus, .subtext-api, .subtext-api > code { font-size: .75rem; } - .locus, .type { color: $textColorLight; } + .locus, .type { color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_npm.scss b/assets/stylesheets/pages/_npm.scss index 9bbcc74c..bdb4482d 100644 --- a/assets/stylesheets/pages/_npm.scss +++ b/assets/stylesheets/pages/_npm.scss @@ -8,7 +8,7 @@ .faint.heading { font-size: .9em; - color: $textColorLight; + color: var(--textColorLight); } .youtube-video iframe { width: 420px; height: 315px; } diff --git a/assets/stylesheets/pages/_phalcon.scss b/assets/stylesheets/pages/_phalcon.scss index 646cf07c..60a32758 100644 --- a/assets/stylesheets/pages/_phalcon.scss +++ b/assets/stylesheets/pages/_phalcon.scss @@ -3,6 +3,6 @@ h3 > small { float: right; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/assets/stylesheets/pages/_php.scss b/assets/stylesheets/pages/_php.scss index 319ac647..c6fd4d6b 100644 --- a/assets/stylesheets/pages/_php.scss +++ b/assets/stylesheets/pages/_php.scss @@ -13,7 +13,7 @@ .verinfo { float: right; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } .classsynopsis, @@ -21,7 +21,7 @@ .description > .methodsynopsis, .description > .fieldsynopsis { @extend %note, %note-blue; } - .classsynopsisinfo_comment { color: $textColorLight; } + .classsynopsisinfo_comment { color: var(--textColorLight); } .classsynopsisinfo_comment, .classsynopsis > .constructorsynopsis, diff --git a/assets/stylesheets/pages/_postgres.scss b/assets/stylesheets/pages/_postgres.scss index 69e202c1..7c42a001 100644 --- a/assets/stylesheets/pages/_postgres.scss +++ b/assets/stylesheets/pages/_postgres.scss @@ -16,7 +16,7 @@ } p > code { @extend %label; } - p.c2 { font-weight: $boldFontWeight; } + p.c2 { font-weight: var(--boldFontWeight); } .navfooter > table { width: 100%; } td[align=center] { text-align: center; } diff --git a/assets/stylesheets/pages/_rdoc.scss b/assets/stylesheets/pages/_rdoc.scss index f1c8b2cb..7873900a 100644 --- a/assets/stylesheets/pages/_rdoc.scss +++ b/assets/stylesheets/pages/_rdoc.scss @@ -6,7 +6,7 @@ .method-description > h2, h3, h4, h5, h6 { font-size: 1em; } .method-heading { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); @extend %block-label, %label-blue; + .method-heading { margin-top: -.5em; } @@ -22,7 +22,7 @@ a.method-click-advice { float: right; font-size: .75rem; - color: $linkColor; + color: var(--linkColor); cursor: pointer; @extend %user-select-none; @@ -42,8 +42,8 @@ top: 0; left: -1em; right: 0; - background: rgba($contentBackground, .95); - box-shadow: 0 1em 1em 1em $contentBackground; + background: var(--contentBackground); + box-shadow: 0 1em 1em 1em var(--contentBackground); > pre { margin: 0; } } diff --git a/assets/stylesheets/pages/_react_native.scss b/assets/stylesheets/pages/_react_native.scss index ee4d1c67..1345a35f 100644 --- a/assets/stylesheets/pages/_react_native.scss +++ b/assets/stylesheets/pages/_react_native.scss @@ -2,7 +2,7 @@ @extend %simple; .deprecated { @extend %note, %note-orange; } - .deprecatedTitle { font-weight: $boldFontWeight; } + .deprecatedTitle { font-weight: var(--boldFontWeight); } span.platform { float: right; } span.propType, span.platform { font-weight: normal; } diff --git a/assets/stylesheets/pages/_redis.scss b/assets/stylesheets/pages/_redis.scss index 3ed1837c..e4541f8b 100644 --- a/assets/stylesheets/pages/_redis.scss +++ b/assets/stylesheets/pages/_redis.scss @@ -14,7 +14,7 @@ .args { font-size: .75rem; - color: $textColorLight; + color: var(--textColorLight); } // Others @@ -35,7 +35,7 @@ > .prompt { float: left; margin-right: .5em; - color: $textColorLight; + color: var(--textColorLight); } > code { diff --git a/assets/stylesheets/pages/_rfc.scss b/assets/stylesheets/pages/_rfc.scss index b522b308..eab55beb 100644 --- a/assets/stylesheets/pages/_rfc.scss +++ b/assets/stylesheets/pages/_rfc.scss @@ -10,6 +10,6 @@ > h1, > h2, > h3, > h4, > h5 { margin: 0; - font-family: $baseFont; + font-family: var(--baseFont); } } diff --git a/assets/stylesheets/pages/_sphinx.scss b/assets/stylesheets/pages/_sphinx.scss index 86744e33..ffd71415 100644 --- a/assets/stylesheets/pages/_sphinx.scss +++ b/assets/stylesheets/pages/_sphinx.scss @@ -14,7 +14,7 @@ .versionmodified, span.title, .topic-title { display: block; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } p > code, li > code, dd > code, .docutils > dt > code { @extend %label; } @@ -26,7 +26,7 @@ .admonition-title { float: left; margin: 0 .5em 0 0; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); &:after { content: ':'; } } diff --git a/assets/stylesheets/pages/_sphinx_simple.scss b/assets/stylesheets/pages/_sphinx_simple.scss index 7cb7e0dc..cbee1ea1 100644 --- a/assets/stylesheets/pages/_sphinx_simple.scss +++ b/assets/stylesheets/pages/_sphinx_simple.scss @@ -6,7 +6,7 @@ .admonition.tip { @extend %note-green; } .admonition-title { margin: 0 0 .25rem; - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); } code { @extend %label; } diff --git a/assets/stylesheets/pages/_support_tables.scss b/assets/stylesheets/pages/_support_tables.scss index 0ef0b3d3..1fc45b75 100644 --- a/assets/stylesheets/pages/_support_tables.scss +++ b/assets/stylesheets/pages/_support_tables.scss @@ -24,7 +24,7 @@ } tr.current { - font-weight: $boldFontWeight; + font-weight: var(--boldFontWeight); font-size: 1rem; } diff --git a/assets/stylesheets/pages/_yard.scss b/assets/stylesheets/pages/_yard.scss index 227dd234..bb2fbc47 100644 --- a/assets/stylesheets/pages/_yard.scss +++ b/assets/stylesheets/pages/_yard.scss @@ -1,5 +1,5 @@ ._yard { @extend %simple; - .tag_title { font-weight: $boldFontWeight; } + .tag_title { font-weight: var(--boldFontWeight); } } diff --git a/assets/stylesheets/pages/_yii.scss b/assets/stylesheets/pages/_yii.scss index d8e4bed9..6cb99978 100644 --- a/assets/stylesheets/pages/_yii.scss +++ b/assets/stylesheets/pages/_yii.scss @@ -3,6 +3,6 @@ .detail-header-tag, .detailHeaderTag { float: right; - color: $textColorLight; + color: var(--textColorLight); } } diff --git a/lib/app.rb b/lib/app.rb index f8ef0454..8715fc93 100644 --- a/lib/app.rb +++ b/lib/app.rb @@ -196,7 +196,6 @@ class App < Sinatra::Application @@manifest_asset_urls ||= [ javascript_path('application', asset_host: false), stylesheet_path('application'), - stylesheet_path('application-dark'), image_path('docs-1.png'), image_path('docs-1@2x.png'), image_path('docs-2.png'), @@ -205,21 +204,6 @@ class App < Sinatra::Application ] end - def main_stylesheet_path - stylesheet_paths[dark_theme? ? :dark : :default] - end - - def alternate_stylesheet_path - stylesheet_paths[dark_theme? ? :default : :dark] - end - - def stylesheet_paths - @@stylesheet_paths ||= { - default: stylesheet_path('application'), - dark: stylesheet_path('application-dark') - } - end - def app_size @app_size ||= memoized_cookies['size'].nil? ? '20rem' : "#{memoized_cookies['size']}px" end diff --git a/views/index.erb b/views/index.erb index ce743671..022e927f 100644 --- a/views/index.erb +++ b/views/index.erb @@ -1,5 +1,5 @@ - prefix="og: http://ogp.me/ns#" lang="en" class="_booting"> + prefix="og: http://ogp.me/ns#" lang="en" class="_booting _theme-<%= app_theme %>"> @@ -30,7 +30,7 @@ - + <%= stylesheet_tag 'application' %> > diff --git a/views/manifest.erb b/views/manifest.erb index 9d2df923..a95096c6 100644 --- a/views/manifest.erb +++ b/views/manifest.erb @@ -1,5 +1,5 @@ CACHE MANIFEST -# <%= app_theme %> <%= app_size %> <%= app_layout %> +# <%= app_size %> <%= app_layout %> CACHE: / diff --git a/views/other.erb b/views/other.erb index f8c9eee6..ee9b8de1 100644 --- a/views/other.erb +++ b/views/other.erb @@ -1,5 +1,5 @@ - + @@ -11,7 +11,7 @@ - + <%= stylesheet_tag 'application' %> data-doc="<%= CGI::escape_html @doc.to_json %>">