From e25e884596cf07a5dee77ba2dc841b45b14f2ac5 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Mon, 3 May 2021 11:59:37 +0530 Subject: now adding new themes/colorschemes is easier and cleaner --- src/components/Display/Display.scss | 14 ++-- src/components/Form/Form.scss | 11 +++- src/components/Header/Header.scss | 6 +- src/styles/_theme.scss | 125 +++++++++++++++--------------------- src/styles/global.scss | 12 ++-- 5 files changed, 78 insertions(+), 90 deletions(-) diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss index d86f4e9..bef03dc 100644 --- a/src/components/Display/Display.scss +++ b/src/components/Display/Display.scss @@ -18,7 +18,7 @@ } .ItemsDisplay .legend { - background-color: $altBG; + background-color: $background2; } .ItemsDisplay th { @@ -27,16 +27,16 @@ .ItemsDisplay td { text-align: center; - border-bottom: 1px solid $tableDefBorderColor; + border-bottom: 1px solid $underline1; font-size: 1.5rem; } .ItemsDisplay .disabledBorder { - border-bottom: 1px solid $tableDisabledBorderColor; + border-bottom: 1px solid $underline0; } .ItemsDisplay .warningBorder { - border-bottom: 1px solid $warningBorderColor; + border-bottom: 1px solid $underline3; } .ItemsDisplay .leftAlign { @@ -44,7 +44,7 @@ } .SummaryDisplayTR td { - color: $altFG; + color: $foreground2; font-size: 1.7rem; } @@ -56,7 +56,7 @@ .SummaryDisplay h1 { font-size: 3rem; margin: 0.5rem -1.5rem; - border-bottom: 1px dotted $labelUnderlineColor; + border-bottom: 1px dotted $underline1; } .SummaryDisplay table { @@ -71,5 +71,5 @@ .SummaryDisplay .grandTotal td { font-size: 2rem; - color: $altFG; + color: $foreground2; } diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index c880bea..09dfc16 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -23,18 +23,20 @@ input[type=number] { @mixin formPane { padding: 1.5rem; box-sizing: border-box; - border: 1px solid $formPaneBorderColor; + border: 1px solid $border1; display: flex; flex-direction: column; justify-content: space-around; + + background-color: $background4; } @mixin formWideLabel { display: flex; justify-content: space-between; - border-bottom: 1px dotted $labelUnderlineColor; + border-bottom: 1px dotted $underline1; padding: 0.8rem 0; font-size: 1.5rem; } @@ -120,4 +122,9 @@ input { margin: 1rem; } +/* */ +.MetaInfoForm { + width: 60%; +} + diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 4e5253d..73f0e45 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -19,7 +19,7 @@ padding: none; width: 100%; height: 5rem; - background-color: $altBG; + background-color: $background2; box-shadow: $defBigShadow; } @@ -30,7 +30,7 @@ nav a { text-decoration: none; padding: 0.3rem; - color: $defLink; + color: $link1; } .placeholder { @@ -44,5 +44,5 @@ nav a { p, h1, h2, h3, h4, h5, h6 { - color: $defFG; + color: $foreground1; } diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss index 3011986..b2ca97b 100644 --- a/src/styles/_theme.scss +++ b/src/styles/_theme.scss @@ -2,86 +2,67 @@ $defFont: 'Quicksand', sans-serif; -/* Inspired by Dracula */ -/* -$defBG: #282A36; -$altBG: #383A59; - -$floatingContainerBG: #282C3466; -$floatingBG: #2e323b; - -$formPaneBG: $defBG; - -$defFG: #F2F2F2; -$altFG: #FF79C6; - -$defLink: $defFG; -$altLink: $altFG; - -$paneBorderColor: pink; -$formPaneBorderColor: $paneBorderColor; - -$defBorderColor: lightgreen; -$altBorderColor: pink; - -$underline0: gray; -$underline1: lightblue; -$underline2: #FF79C6; - -$labelUnderlineColor: $underline1; - -$tableDefBorderColor: $underline1; -$tableAltBorderColor: $underline2; -$tableDisabledBorderColor: $underline0; - +/* light colorscheme, use this as template */ +// $disabledColor: gray; +// $warningColor: red; +// $shadowColor: #232627; +// +// $background0: #282C3466; /* background for floating div */ +// $background1: #F7F2DF; +// $background2: #A480CF; +// $background3: #ECF5D9; /* foreground for floating div */ +// $background4: $background1; /* for form pane bg */ +// +// $foreground1: #000000; +// $foreground2: #F83A59; +// +// $link1: $foreground1; +// $link2: $foreground2; +// +// $defFG: $foreground1; +// $altFG: $foreground2; +// +// $border1: #232627; +// $border2: lightgreen; +// +// $underline0: $disabledColor; +// $underline1: #F83A59; +// $underline2: #FF79C6; +// $underline3: $warningColor; +// +// $defBigShadow: 0px 2px 4px $shadowColor; +// $floatingShadow: 6px 6px 6px $shadowColor; +/* template ends here */ + +/* main dark theme inspired by dracula */ +/* my personal favourite */ +/* I name it dorakura (ドラクラー) */ +$disabledColor: gray; $warningColor: red; -$warningBorderColor: $warningColor; - $shadowColor: #232627; -$defBigShadow: 0px 8px 4px $shadowColor; -$floatingShadow: 6px 6px 6px $shadowColor; -*/ - -$background0: #282C3466; -$background1: #ECF5D9; -$background2: #A480CF; -$background3: #F7F2DF; - -$underline0: gray; -$underline1: #F83A59; -$underline2: #FF79C6; - -$defBG: $background1; -/*$altBG: #F83A59;*/ -$altBG: $background2; - -$floatingContainerBG: $background0; -$floatingBG: $background3; - -$formPaneBG: $defBG; -$defFG: #000000; -$altFG: #F83A59; +$background0: #282C3466; /* background for floating div */ +$background1: #282A36; +$background2: #383A59; +$background3: #2E323B; /* foreground for floating div */ +$background4: #00000000; /* for form pane bg */ -$defLink: $defFG; -$altLink: $altFG; +$foreground1: #FFFFFF; +$foreground2: #FF79C6; -$paneBorderColor: #232627; -$formPaneBorderColor: $paneBorderColor; +$link1: $foreground1; +$link2: $foreground2; -$defBorderColor: lightgreen; -$altBorderColor: #232627; +$defFG: $foreground1; +$altFG: $foreground2; +$border1: pink; +$border2: lightgreen; -$labelUnderlineColor: $underline1; - -$tableDefBorderColor: $underline1; -$tableAltBorderColor: $underline2; -$tableDisabledBorderColor: $underline0; - -$warningColor: red; -$warningBorderColor: $warningColor; +$underline0: $disabledColor; +$underline1: lightblue; +$underline2: #FF79C6; +$underline3: $warningColor; -$shadowColor: #232627; $defBigShadow: 0px 2px 4px $shadowColor; $floatingShadow: 6px 6px 6px $shadowColor; diff --git a/src/styles/global.scss b/src/styles/global.scss index 8605e07..9bf0904 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -27,8 +27,8 @@ html, body { } body { - background-color: $defBG; - color: $defFG; + background-color: $background1; + color: $foreground1; margin: 0; } @@ -51,7 +51,7 @@ body { .BillingPageFlex div { box-sizing: border-box; - border: 1px solid $altBorderColor; + border: 1px solid $border1; } .floatingMenuBG { @@ -59,7 +59,7 @@ body { width: 100%; position: fixed; top: 0; left: 0; - background-color: $floatingContainerBG; + background-color: $background0; } .floatingMenu { @@ -73,9 +73,9 @@ body { margin: 0 auto; top: 15vh; - background-color: $floatingBG; + background-color: $background3; box-shadow: $floatingShadow; - border: 1px solid $defBorderColor; + border: 1px solid $border2; padding: 1.5rem; } -- cgit v1.2.3