mirror of https://github.com/freeCodeCamp/devdocs
* 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.pull/885/merge
Jed Fox
7 years ago
committed by
Thibaut Courouble
parent
2ad46626de
commit
a30fcf9d9a
@ -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';
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
._dojo {
|
||||
@extend %simple;
|
||||
|
||||
.jsdoc-inheritance { color: $textColorLight; }
|
||||
.jsdoc-inheritance { color: var(--textColorLight); }
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
._yard {
|
||||
@extend %simple;
|
||||
|
||||
.tag_title { font-weight: $boldFontWeight; }
|
||||
.tag_title { font-weight: var(--boldFontWeight); }
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue