From 7811161205e743ba40ce036b1486520f52414c34 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Sun, 2 May 2021 14:59:03 +0530 Subject: organised css and rewrote some css for more consistency --- src/styles/_theme.scss | 33 +++++++++++++++------------------ src/styles/global.scss | 43 +++++++++++++++++++++++++++++++------------ 2 files changed, 46 insertions(+), 30 deletions(-) (limited to 'src/styles') diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss index 357a026..a238d37 100644 --- a/src/styles/_theme.scss +++ b/src/styles/_theme.scss @@ -2,21 +2,7 @@ $defFont: 'Quicksand', sans-serif; -/* Experimental color scheme */ -/* light theme */ -/* -$defBG: #FFFFFF; -$altBG: lightgray; -$defFG: #000000; -$altFG: #232627; -$defLink: brown; -$altLink: brown; - -$defShadow: 0px 0px 4px #232627; -*/ - /* Inspired by Dracula */ - $defBG: #282A36; $altBG: #383A59; @@ -28,14 +14,25 @@ $altFG: #FF79C6; $defLink: $defFG; $altLink: $altFG; + +$paneBorderColor: pink; +$formPaneBorderColor: $paneBorderColor; + $defBorderColor: lightgreen; $altBorderColor: pink; -$tableDefBorderColor: lightblue; -$tableAltBorderColor: #FF79C6; -$tableDisabledBorderColor: gray; +$underline0: gray; +$underline1: lightblue; +$underline2: #FF79C6; + +$labelUnderlineColor: $underline1; + +$tableDefBorderColor: $underline1; +$tableAltBorderColor: $underline2; +$tableDisabledBorderColor: $underline0; + + -$labelUnderlineColor: lightblue; $warningColor: red; $warningBorderColor: $warningColor; diff --git a/src/styles/global.scss b/src/styles/global.scss index 6b1c244..8605e07 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -8,8 +8,22 @@ @import "theme"; +/* + TODO: check if full width elements show properly on other browsers + also style scrollbars +*/ + +/* scrollbar styling */ +::-webkit-scrollbar { + width: 1vw; +} * { - font-family: $defFont + scrollbar-width: 0.1vw; /* Firefox */ +} + +html, body { + height: 100%; + width: 100%; } body { @@ -18,6 +32,10 @@ body { margin: 0; } +* { + font-family: $defFont +} + .root-content { width: 95%; margin: auto; @@ -30,43 +48,44 @@ body { justify-content: space-between; height: 70vh; } + .BillingPageFlex div { box-sizing: border-box; - border: 1px solid pink; + border: 1px solid $altBorderColor; } -.FloatingMenuBG { - height: 100vh; - width: 100vw; +.floatingMenuBG { + height: 100%; + width: 100%; position: fixed; - top: 0; - left: 0; + top: 0; left: 0; background-color: $floatingContainerBG; } -.FloatingMenu { - position: fixed; +.floatingMenu { + position: absolute; width: 95%; height: 70vh; box-sizing: border-box; - left: 0; right: 0; - margin: auto; + margin: 0 auto; top: 15vh; background-color: $floatingBG; box-shadow: $floatingShadow; border: 1px solid $defBorderColor; - padding: 1.5rem; } +/* +idk if im going that way @media only screen and (max-device-width: 480px) { .root-content { width: 95%; } } +*/ -- cgit v1.2.3