aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/Main.scss233
-rw-r--r--src/client/views/_global_variables.scss24
2 files changed, 131 insertions, 126 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 3e2ab6ff7..af16e055d 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,173 +1,172 @@
@import "global_variables";
@import "nodeModuleOverrides";
-
html,
body {
- width: 100%;
- height: 100%;
- overflow: hidden;
- font-family: $sans-serif;
- margin: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ font-family: $sans-serif;
+ margin: 0;
}
#dash-title {
- position: absolute;
- right: 46.5%;
- letter-spacing: 3px;
- top: 9px;
- font-size: 12px;
- color: $alt-accent;
- z-index: 9999;
+ position: absolute;
+ right: 46.5%;
+ letter-spacing: 3px;
+ top: 9px;
+ font-size: 12px;
+ color: $alt-accent;
+ z-index: 9999;
}
h1 {
- font-size: 50px;
- position: fixed;
- top: 30px;
- left: 50%;
- transform: translateX(-50%);
- color: $dark-color;
- text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
- z-index: 9999;
- font-family: $sans-serif;
- font-weight: 700;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ font-size: 50px;
+ position: fixed;
+ top: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: $dark-color;
+ text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+ z-index: 9999;
+ font-family: $sans-serif;
+ font-weight: 700;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
p {
- margin: 0px;
- padding: 0px;
+ margin: 0px;
+ padding: 0px;
}
::-webkit-scrollbar {
- -webkit-appearance: none;
- height: 5px;
- width: 5px;
+ -webkit-appearance: none;
+ height: 5px;
+ width: 5px;
}
::-webkit-scrollbar-thumb {
- border-radius: 2px;
- background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 2px;
+ background-color: rgba(0, 0, 0, 0.5);
}
// button stuff
button {
- background: $dark-color;
- outline: none;
- border: 0px;
- color: $light-color;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- padding: 10px;
- transition: transform 0.2s;
+ background: $dark-color;
+ outline: none;
+ border: 0px;
+ color: $light-color;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 10px;
+ transition: transform 0.2s;
}
button:hover {
- background: $main-accent;
- transform: scale(1.05);
+ background: $main-accent;
+ transform: scale(1.05);
+ cursor: pointer;
}
.clear-db-button {
- position: absolute;
- right: 45%;
- bottom: 1em;
- font-size: 50%;
+ position: absolute;
+ right: 45%;
+ bottom: 3%;
+ font-size: 50%;
}
.round-button {
- width: 36px;
- height: 36px;
- border-radius: 18px;
- font-size: 15px;
+ width: 36px;
+ height: 36px;
+ border-radius: 18px;
+ font-size: 15px;
}
.round-button:hover {
- transform: scale(1.15);
+ transform: scale(1.15);
}
.add-button {
- position: relative;
- margin-right: 10px;
+ position: relative;
+ margin-right: 10px;
}
.main-undoButtons {
- position: absolute;
- width: 150px;
- right: 0px;
+ position: absolute;
+ width: 150px;
+ right: 0px;
}
//toolbar stuff
#toolbar {
- position: absolute;
- bottom: 62px;
- left: 24px;
-
- .toolbar-button {
- display: block;
- margin-bottom: 10px;
- }
+ position: absolute;
+ bottom: 62px;
+ left: 24px;
+ .toolbar-button {
+ display: block;
+ margin-bottom: 10px;
+ }
}
// add nodes menu. Note that the + button is actually an input label, not an actual button.
#add-nodes-menu {
- position: absolute;
- bottom: 24px;
- left: 24px;
- label {
- background: $dark-color;
- color: $light-color;
- display: inline-block;
- border-radius: 18px;
- font-size: 25px;
- width: 36px;
- height: 36px;
- margin-right: 10px;
- cursor: pointer;
- transition: transform 0.2s;
- }
- label p {
- padding-left: 10.5px;
- padding-top: 3px;
- }
- label:hover {
- background: $main-accent;
- transform: scale(1.15);
- }
- input {
- display: none;
- }
- input:not(:checked) ~ #add-options-content {
- display: none;
- }
- input:checked ~ label {
- transform: rotate(45deg);
- transition: transform 0.5s;
- cursor: pointer;
- }
+ position: absolute;
+ bottom: 24px;
+ left: 24px;
+ label {
+ background: $dark-color;
+ color: $light-color;
+ display: inline-block;
+ border-radius: 18px;
+ font-size: 25px;
+ width: 36px;
+ height: 36px;
+ margin-right: 10px;
+ cursor: pointer;
+ transition: transform 0.2s;
+ }
+ label p {
+ padding-left: 10.5px;
+ padding-top: 3px;
+ }
+ label:hover {
+ background: $main-accent;
+ transform: scale(1.15);
+ }
+ input {
+ display: none;
+ }
+ input:not(:checked)~#add-options-content {
+ display: none;
+ }
+ input:checked~label {
+ transform: rotate(45deg);
+ transition: transform 0.5s;
+ cursor: pointer;
+ }
}
#add-options-content {
- display: table;
- opacity: 1;
- margin: 0;
- padding: 0;
- position: relative;
- float: right;
- bottom: 0.3em;
- margin-bottom: -1.68em;
+ display: table;
+ opacity: 1;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ float: right;
+ bottom: 0.3em;
+ margin-bottom: -1.68em;
}
ul#add-options-list {
- list-style: none;
- padding: 0;
- li {
- display: inline-block;
+ list-style: none;
padding: 0;
- }
-}
+ li {
+ display: inline-block;
+ padding: 0;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss
index 333fb3122..a832d9614 100644
--- a/src/client/views/_global_variables.scss
+++ b/src/client/views/_global_variables.scss
@@ -1,17 +1,23 @@
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,700|Crimson+Text:400,400i,700");
-
// colors
$light-color: #fcfbf7;
-$light-color-secondary: rgb(241, 239, 235);
+$light-color-secondary: rgb(241,
+239,
+235);
$main-accent: #61aaa3;
-$alt-accent: #cdd5ec;
-$lighter-alt-accent: rgb(207, 220, 240);
+// $alt-accent: #cdd5ec;
+// $alt-accent: #cdeceb;
+$alt-accent: #f9e1db;
+$lighter-alt-accent: rgb(207,
+220,
+240);
$intermediate-color: #9c9396;
$dark-color: #121721;
-
// fonts
-$sans-serif: "Roboto Slab", sans-serif;
-$serif: "Crimson Text", serif;
-
+$sans-serif: "Noto Sans",
+sans-serif;
+// $sans-serif: "Roboto Slab", sans-serif;
+$serif: "Crimson Text",
+serif;
// misc values
-$border-radius: 0.3em;
+$border-radius: 0.3em; \ No newline at end of file