aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/Main.scss
diff options
context:
space:
mode:
authorJude <julie_wang1@brown.edu>2019-03-09 11:28:34 -0500
committerJude <julie_wang1@brown.edu>2019-03-09 11:28:34 -0500
commitf858a4fc74476c5720cc215c70f12733d757d085 (patch)
tree3a984187eec283ae056448bbf3d1aa429161aaad /src/client/views/Main.scss
parent2d9c1fd55c4d2c9bf275aeaf6a83703cebba374f (diff)
improved text node and reduced selection border thickness
Diffstat (limited to 'src/client/views/Main.scss')
-rw-r--r--src/client/views/Main.scss213
1 files changed, 106 insertions, 107 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index e8b522cbb..1c1e08b2f 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,162 +1,161 @@
@import "global_variables";
-@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,700');
html,
body {
- width: 100%;
- height: 100%;
- overflow: hidden;
- font-family: 'Work Sans', sans-serif;
- margin: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ font-family: $sans-serif;
+ margin: 0;
}
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: 'Work Sans', 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, .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: $dark-accent;
- transform: scale(1.05);
+ background: $main-accent;
+ transform: scale(1.05);
}
.clear-db-button {
- position: absolute;
- left: 47%;
- bottom: 1em;
- font-size: 50%;
+ position: absolute;
+ left: 47%;
+ bottom: 1em;
+ font-size: 50%;
}
.add-button {
- position: relative;
- width: 2em;
- height: 2em;
- border-radius: 1em;
- font-size: 24px;
- margin-right: 0.4em;
+ position: relative;
+ width: 2em;
+ height: 2em;
+ border-radius: 1em;
+ font-size: 24px;
+ margin-right: 0.4em;
}
.add-button:hover {
- transform: scale(1.15);
+ transform: scale(1.15);
}
.main-undoButtons {
- position: absolute;
- width: 150px;
- right: 0px;
+ position: absolute;
+ width: 150px;
+ right: 0px;
}
// add nodes menu
#add-nodes-menu {
- position: absolute;
- left: 1em;
- bottom: 1em;
- label {
- background: $dark-color;
- color: $light-color;
- padding: 10px;
- display: inline-block;
- border-radius: 1em;
- font-size: 24px;
- width: 1.09em;
- margin-right: 0.4em;
- text-align: center;
- cursor: pointer;
- transition: transform 0.5s;
- }
- label:hover {
- background: $dark-accent;
- }
- 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;
+ left: 1em;
+ bottom: 1em;
+ label {
+ background: $dark-color;
+ color: $light-color;
+ padding: 10px;
+ display: inline-block;
+ border-radius: 1em;
+ font-size: 24px;
+ width: 1.09em;
+ margin-right: 0.4em;
+ text-align: center;
+ cursor: pointer;
+ transition: transform 0.5s;
+ }
+ label:hover {
+ background: $main-accent;
+ }
+ 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;
+ list-style: none;
+ padding: 0;
+ li {
+ display: inline-block;
padding: 0;
- li {
- display: inline-block;
- padding: 0;
- }
+ }
}
// goldenlayout stuff
div .lm_header {
- background: $dark-color;
- min-height: 2em;
+ background: $dark-color;
+ min-height: 2em;
}
.lm_tab {
- margin-top: 0.7em !important;
- padding-top: 0.5em !important;
- min-height: 1.4em;
- padding-bottom: 0px;
- border-radius: 5px;
- font-family: 'Work Sans', sans-serif !important;
+ margin-top: 0.7em !important;
+ padding-top: 0.5em !important;
+ min-height: 1.4em;
+ padding-bottom: 0px;
+ border-radius: 5px;
+ font-family: $sans-serif !important;
}
.lm_header .lm_controls {
- right: 1em !important;
-} \ No newline at end of file
+ right: 1em !important;
+}