From 25c6cbd29aff90f694d72afe28ab56b0113fb16a Mon Sep 17 00:00:00 2001 From: Guille Cura Date: Thu, 5 Jul 2018 02:37:43 -0300 Subject: Update stylesheets and added darkMode variable and toggle. --- src/styles/layout.scss | 162 ++++++++++++++++++++++--------------------------- 1 file changed, 74 insertions(+), 88 deletions(-) (limited to 'src/styles/layout.scss') diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 964a9fcea..373b29e7d 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -1,16 +1,36 @@ @import './config.scss'; -html { - overflow: hidden; +html { overflow: hidden; } + +.theme__dark .app { + .sidebar { + background: $dark-theme-gray-darker; + box-shadow: 0 0 5px 0 $dark-theme-black; + color: $theme-text-color; + + .sidebar__add-service { + color: $dark-theme-gray-lightest; + background: $dark-theme-gray; + } + + .sidebar__button { + color: $dark-theme-gray-lightest; + font-size: 22px; + + &:hover, + &:active { color: $dark-theme-gray-smoke; } + &.is-muted { color: $dark-theme-gray; } + } + } + + .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } } .app { display: flex; flex-direction: column; - .app__content { - display: flex; - } + .app__content { display: flex; } .app__service { display: flex; @@ -19,134 +39,100 @@ html { } } -.electron-app-title-bar { - z-index: 99999999; -} +.electron-app-title-bar { z-index: 99999999; } .window-draggable { - position: absolute; - width: 100%; - top: 0px; - left: 0px; height: 35px; + left: 0; pointer-events: none; - -webkit-app-region: drag; + position: absolute; + top: 0; + width: 100%; z-index: 9999; + -webkit-app-region: drag; } -.darwin { - .sidebar { - padding-top: 23px; - } -} +.darwin .sidebar { padding-top: 23px; } .sidebar { - display: flex; - flex-direction: column; align-items: center; - width: $theme-sidebar-width; background: $theme-gray-lightest; - box-shadow: 1px 0 10px rgba(0,0,0,0.08); - z-index: 200; - text-align: center; + box-shadow: 1px 0 10px rgba(0, 0, 0, .08); color: $theme-text-color; + display: flex; + flex-direction: column; padding-bottom: 10px; + text-align: center; + width: $theme-sidebar-width; + z-index: 200; .sidebar__add-service { - width: 32px; - height: 32px; + color: $theme-gray-light; background: $theme-gray-lighter; border-radius: $theme-border-radius-small; + height: 32px; margin: 10px auto; - color: $theme-gray-light; + width: 32px; } .sidebar__button { - width: $theme-sidebar-width; - padding: 7px 0; + color: $theme-gray-light; font-size: 24px; + padding: 7px 0; position: relative; - color: $theme-gray-light; - - &:hover { - color: darken($theme-gray-light, 10%); - } - - &:active { - color: lighten($theme-gray-light, 10%); - } - - &.is-muted { - color: $theme-brand-primary; - } + width: $theme-sidebar-width; - &--new-service { - padding-bottom: 6px; - } + &:hover, + &:active { color: lighten($theme-gray-light, 10%); } + &.is-muted { color: $theme-brand-primary; } + &--new-service { padding-bottom: 6px; } } & > div { display: flex; overflow-y: scroll; - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { display: none; } } } -.grid { - .grid__row { - display: flex; - flex-direction: row; - - &>* { - margin-right: 20px; - } +.grid .grid__row { + display: flex; + flex-direction: row; - & :last-child { - margin-right: 0; - } - } + & > * { margin-right: 20px; } + & :last-child { margin-right: 0; } } .app-loader { + align-items: center; display: flex; justify-content: center; - align-items: center; .app-loader__title { color: #FFF; font-size: 40px; } - &>span { - height: auto; - } -} - -.dev-warning { - display: none; + & > span { height: auto; } } -.isDevMode { - .dev-warning { - display: block; - position: fixed; - background: $theme-brand-warning; - width: auto; - height: auto; - top: 5px; - right: 5px; - padding: 4px; - font-size: 10px; - color: #FFF; - z-index: 999999999; - border-radius: 3px; - transition: opacity 0.5s ease; - - &:hover { - opacity: 0; - } - } +.dev-warning { display: none; } + +.isDevMode .dev-warning { + border-radius: 3px; + background: $theme-brand-warning; + color: #FFF; + display: block; + font-size: 10px; + height: auto; + padding: 4px; + position: fixed; + right: 5px; + top: 5px; + transition: opacity .5s ease; + width: auto; + z-index: 999999999; + + &:hover { opacity: 0; } } -- cgit v1.2.3-70-g09d2 From 7a48c07b74a42c03241b1db471fb59c94d6c91c8 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Fri, 16 Nov 2018 20:43:08 +0100 Subject: Polishing & increasing contrast --- src/styles/auth.scss | 4 ++-- src/styles/button.scss | 8 +++++--- src/styles/colors.scss | 5 +++-- src/styles/input.scss | 6 +++--- src/styles/layout.scss | 4 ++-- src/styles/select.scss | 2 +- 6 files changed, 16 insertions(+), 13 deletions(-) (limited to 'src/styles/layout.scss') diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 34bfa1805..4cdf6ccd5 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss @@ -16,11 +16,11 @@ .auth__links { background: $dark-theme-gray-dark; - a { color: $dark-theme-gray-lighter; } + a { color: $dark-theme-text-color; } } .legal { - color: $dark-theme-gray-lighter; + color: $dark-theme-text-color; a { color: $dark-theme-gray-lightest; } } diff --git a/src/styles/button.scss b/src/styles/button.scss index 83ddf3e3e..0053db4d0 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -3,14 +3,14 @@ .theme__dark .franz-form__button { background: $theme-brand-primary; - color: $dark-theme-gray-smoke; + color: $dark-theme-text-color; &:hover { background: darken($theme-brand-primary, 5%); } &:active { background: lighten($theme-brand-primary, 5%); } &.franz-form__button--secondary { background: $dark-theme-gray-lighter; - color: $dark-theme-gray-smoke; + color: $dark-theme-text-color; &:hover { background: darken($dark-theme-gray-lightest, 5%); } &:active { background: lighten($dark-theme-gray-lightest, 5%); } @@ -36,9 +36,11 @@ &:hover { background: darken($theme-brand-primary, 5%); - color: $dark-theme-gray-smoke; + color: $dark-theme-text-color; } } + + &:disabled { opacity: .5; } } .franz-form__button { diff --git a/src/styles/colors.scss b/src/styles/colors.scss index b669c6a88..4411a0e81 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -31,7 +31,8 @@ $dark-theme-gray-dark: #383A3B; $dark-theme-gray: #47494B; $dark-theme-gray-light: #515355; -$dark-theme-gray-lighter: #686A6C; -$dark-theme-gray-lightest: #A0A2A3; +$dark-theme-gray-lighter: #8a8b8b; +$dark-theme-gray-lightest: #FFF; $dark-theme-gray-smoke: #CED0D1; +$dark-theme-text-color: #FFF; diff --git a/src/styles/input.scss b/src/styles/input.scss index f3c713f13..687bcac64 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss @@ -2,7 +2,7 @@ @import './mixins.scss'; .theme__dark .franz-form { - .franz-form__label { color: $dark-theme-gray-lightest; } + .franz-form__label { color: $dark-theme-text-color; } .franz-form__input-wrapper { background: $dark-theme-gray-dark; @@ -10,9 +10,9 @@ } .franz-form__input { - color: $dark-theme-gray-lighter; + color: $dark-theme-gray-lightest; - &::placeholder { color: $dark-theme-gray-light; } + &::placeholder { color: $dark-theme-gray-lighter; } } .franz-form__input-prefix, diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 373b29e7d..ebf468cf0 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -9,12 +9,12 @@ html { overflow: hidden; } color: $theme-text-color; .sidebar__add-service { - color: $dark-theme-gray-lightest; + color: $dark-theme-gray-lighter; background: $dark-theme-gray; } .sidebar__button { - color: $dark-theme-gray-lightest; + color: $dark-theme-gray-lighter; font-size: 22px; &:hover, diff --git a/src/styles/select.scss b/src/styles/select.scss index 36ac963bb..ed0fc0fc2 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss @@ -6,7 +6,7 @@ $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj .theme__dark .franz-form .franz-form__select { background-color: $dark-theme-gray-dark; border: 1px solid $dark-theme-gray-light; - color: $dark-theme-gray-light; + color: $dark-theme-gray-lightest; } .franz-form .franz-form__select { -- cgit v1.2.3-70-g09d2