aboutsummaryrefslogtreecommitdiff
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/_theme.scss33
-rw-r--r--src/styles/global.scss43
2 files changed, 46 insertions, 30 deletions
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%;
}
}
+*/