From 71491c53c4a9d3616102c034205dc41aff53ec9c Mon Sep 17 00:00:00 2001 From: Thibaut Courouble Date: Mon, 1 Aug 2016 12:13:45 -0400 Subject: [PATCH] Tweak dark theme --- assets/stylesheets/components/_notif.scss | 5 +- assets/stylesheets/components/_path.scss | 1 + assets/stylesheets/global/_base.scss | 2 +- assets/stylesheets/global/_classes.scss | 2 + assets/stylesheets/global/_variables.scss | 7 +- assets/stylesheets/global/variables-dark.scss | 75 ++++++++++--------- 6 files changed, 51 insertions(+), 41 deletions(-) diff --git a/assets/stylesheets/components/_notif.scss b/assets/stylesheets/components/_notif.scss index 52a9340c..972e677d 100644 --- a/assets/stylesheets/components/_notif.scss +++ b/assets/stylesheets/components/_notif.scss @@ -9,6 +9,7 @@ font-size: .75rem; color: $notifColor; background: $notifBackground; + border: $notifBorder; border-radius: .25rem; transition: opacity .2s; opacity: 0; @@ -127,8 +128,8 @@ ._notif-tip { color: $textColor; - background: rgba($tipBackground, .95); - border: 1px solid $tipBorder; + background: $tipBackground; + border: $tipBorder; ._notif-info { color: $textColorLight; } } diff --git a/assets/stylesheets/components/_path.scss b/assets/stylesheets/components/_path.scss index 8fa7a8ee..5de429c3 100644 --- a/assets/stylesheets/components/_path.scss +++ b/assets/stylesheets/components/_path.scss @@ -26,6 +26,7 @@ margin: 0 1rem 0 0; padding: 0 .375rem; color: $textColor; + text-decoration: none; &:first-child:before { content: ''; diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss index 990f95a3..6ac71a49 100644 --- a/assets/stylesheets/global/_base.scss +++ b/assets/stylesheets/global/_base.scss @@ -22,7 +22,7 @@ body { a { color: $linkColor; - text-decoration: none; + text-decoration: $linkTextDecoration; &:hover { color: $linkColorHover; diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss index db71ca9e..d928e464 100644 --- a/assets/stylesheets/global/_classes.scss +++ b/assets/stylesheets/global/_classes.scss @@ -32,6 +32,7 @@ } %heading-box { + color: $boxHeaderColor; background: $boxHeaderBackground; border: 1px solid $boxBorder; border-radius: 3px; @@ -72,6 +73,7 @@ padding-left: .5em; padding-right: .5em; font-size: inherit; + color: $boxHeaderColor; border: 1px solid $boxBorder; border-radius: 2px; @extend %label; diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss index 0a8c9991..72e150d7 100644 --- a/assets/stylesheets/global/_variables.scss +++ b/assets/stylesheets/global/_variables.scss @@ -33,6 +33,7 @@ $highlightBackground: #fffdcd; $linkColor: #3377c0; $linkColorHover: #2f6cb6; +$linkTextDecoration: none; $headerBackground: #f0f0f0; $headerBorder: #d9d9d9; @@ -52,6 +53,7 @@ $noticeBorder: #e2e2c1; $boxBackground: #fafafa; $boxBorder: #d8d8d8; $boxBorderLight: #e5e5e5; +$boxHeaderColor: $textColor; $boxHeaderBackground: #f5f5f5; $noteBackground: #f8f8dd; @@ -72,11 +74,12 @@ $noteRedBorder: #dc7874; $labelBackground: #f4f4f4; $notifBackground: rgba(#333, .85); +$notifBorder: none; $notifColor: #fff; $notifColorLight: #ccc; -$tipBackground: #fffdcd; -$tipBorder: #e7dca9; +$tipBackground: rgba(#fffdcd, .95); +$tipBorder: 1px solid #e7dca9; $mediumScreen: '(max-width: 800px)'; diff --git a/assets/stylesheets/global/variables-dark.scss b/assets/stylesheets/global/variables-dark.scss index 3ae98d8a..93392877 100644 --- a/assets/stylesheets/global/variables-dark.scss +++ b/assets/stylesheets/global/variables-dark.scss @@ -9,74 +9,77 @@ $sidebarWidth: 18rem; $sidebarMediumWidth: 16rem; $sidebarHiddenWidth: 9px; -$contentBackground: #303030; -$documentBackground: #404040; +$contentBackground: #33373a; +$documentBackground: $contentBackground; -$textColor: #c9c9c9; -$textColorLight: #858585; -$textColorLighter: #706f6f; +$textColor: #cbd0d0; +$textColorLight: #9da5ad; +$textColorLighter: #77787a; -$inputFocusBorder: #444; +$inputFocusBorder: false; -$focusBackground: #3d3d3e; -$focusBorder: #3d3d3e; +$focusBackground: #3f4042; +$focusBorder: #000; $focusText: #f7f2f2; -$loadingText: #666; -$splashText: #666; +$loadingText: #5d6164; +$splashText: $loadingText; -$selectionBackground: #346fce; -$selectionBorder: #346fce; +$selectionBackground: #007acc; +$selectionBorder: #000; $selectionText: #fff; -$highlightBackground: #3d4449; +$highlightBackground: #64675f; -$linkColor: #fff; -$linkColorHover: #fff; +$linkColor: $textColor; +$linkColorHover: white; +$linkTextDecoration: underline; -$headerBackground: #1c1c1c; -$headerBorder: #1c1c1c; +$headerBackground: #1e1e1e; +$headerBorder: #000; -$sidebarBackground: #262626; -$sidebarBorder: #262626; +$sidebarBackground: #24282a; +$sidebarBorder: #000; -$scrollbarColor: #515151; -$scrollbarColorHover: #888; +$scrollbarColor: #6c6c6f; +$scrollbarColorHover: #949697; $pathBackground: $headerBackground; $pathBorder: $headerBorder; -$noticeBackground: #1c1c1c; -$noticeBorder: #1c1c1c; +$noticeBackground: $sidebarBackground; +$noticeBorder: $sidebarBorder; -$boxBackground: #262626; -$boxBorder: #000; -$boxBorderLight: #000; -$boxHeaderBackground: #262626; +$boxBackground: $sidebarBackground; +$boxBorder: $headerBorder; +$boxBorderLight: $headerBorder; +$boxHeaderColor: #dbe4e4; +$boxHeaderBackground: $sidebarBackground; -$noteBackground: #3a4031; +$noteBackground: #45474b; $noteBorder: #000; -$noteGreenBackground: #223e23; +$noteGreenBackground: #284a2a; $noteGreenBorder: #000; -$noteBlueBackground: #223546; +$noteBlueBackground: #2a4151; $noteBlueBorder: #000; -$noteOrangeBackground: #523121; +$noteOrangeBackground: #563322; $noteOrangeBorder: #000; -$noteRedBackground: #5b1f22; +$noteRedBackground: #603033; $noteRedBorder: #000; -$labelBackground: #3c3c3e; +$labelBackground: $boxBackground; -$notifBackground: rgba(#000, .85); +$notifBackground: rgba(#555, .95); +$notifBorder: 1px solid #000; $notifColor: #fff; $notifColorLight: #ccc; -$tipBackground: #3d4449; -$tipBorder: #566166; +$tipBackground: $notifBackground; +$tipBorder: $notifBorder; $mediumScreen: '(max-width: 800px)';