aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/DocumentLinksButton.scss4
-rw-r--r--src/client/views/nodes/DocumentView.scss6
-rw-r--r--src/client/views/nodes/FontIconBox.scss13
-rw-r--r--src/client/views/nodes/KeyValueBox.scss20
-rw-r--r--src/client/views/nodes/KeyValuePair.scss2
-rw-r--r--src/client/views/nodes/PresBox.scss142
-rw-r--r--src/client/views/nodes/RadialMenu.scss4
-rw-r--r--src/client/views/nodes/WebBox.scss2
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss8
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.scss4
-rw-r--r--src/client/views/nodes/formattedText/TooltipTextMenu.scss10
11 files changed, 107 insertions, 108 deletions
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 735aa669f..daffaf9e7 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables.scss";
+@import "../global/globalCssVariables.scss";
.documentLinksButton-cont {
@@ -37,7 +37,7 @@
font-weight: bold;
&:hover {
- background: $main-accent;
+ background: $medium-gray;
transform: scale(1.05);
cursor: pointer;
}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index bdbece621..8f86417d6 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.documentView-effectsWrapper {
border-radius: inherit;
@@ -22,7 +22,7 @@
transition: outline .3s linear;
cursor: grab;
- // background: $light-color; //overflow: hidden;
+ // background: $white; //overflow: hidden;
transform-origin: left top;
&.minimized {
@@ -218,6 +218,6 @@
.documentView-node:first-child {
position: relative;
- background: "#B59B66"; //$light-color;
+ background: "#B59B66"; //$white;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 33ac85a0e..718af2c16 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,7 @@
+@import "../global/globalCssVariables";
+
.fontIconBox-label {
- color: white;
+ color: $white;
margin-right: 4px;
margin-top: 1px;
position: relative;
@@ -22,8 +24,8 @@
position: absolute;
top: -10px;
right: -10px;
- color: white;
- background: #f44b42;
+ color: $white;
+ background: $pink;
font-weight: 300;
border-radius: 100%;
width: 25px;
@@ -37,7 +39,7 @@
.menuButton-circle,
.menuButton-round {
border-radius: 100%;
- background-color: black;
+ background-color: $dark-gray;
padding: 0;
.fontIconBox-label {
@@ -47,13 +49,14 @@
}
&:hover {
- background-color: #aaaaa3;
+ background-color: $light-gray;
}
}
.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
+ background-color: $dark-gray;
.fontIconBox-label {
border-radius: 0px;
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index eb7c2f32b..ffcba4981 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,10 +1,10 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.keyValueBox-cont {
overflow-y: scroll;
width:100%;
height: 100%;
- background-color: $light-color;
- border: 1px solid $intermediate-color;
+ background-color: $white;
+ border: 1px solid $medium-gray;
border-radius: $border-radius;
box-sizing: border-box;
display: inline-block;
@@ -56,8 +56,8 @@ $header-height: 30px;
width:100%;
position: relative;
display: inline-block;
- background: $intermediate-color;
- color: $light-color;
+ background: $medium-gray;
+ color: $white;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
@@ -66,7 +66,7 @@ $header-height: 30px;
th {
font-weight: normal;
&:first-child {
- border-right: 1px solid $light-color;
+ border-right: 1px solid $white;
}
}
}
@@ -76,9 +76,9 @@ $header-height: 30px;
display: flex;
width:100%;
height:$header-height;
- background: $light-color;
+ background: $white;
.formattedTextBox-cont {
- background: $light-color;
+ background: $white;
}
}
.keyValueBox-cont {
@@ -116,8 +116,8 @@ $header-height: 30px;
display: flex;
width:100%;
height:30px;
- background: $light-color-secondary;
+ background: $light-gray;
.formattedTextBox-cont {
- background: $light-color-secondary;
+ background: $light-gray;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index f78767234..5b660e582 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.keyValuePair-td-key {
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 1ba86232b..5d1c5f4eb 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,7 +1,4 @@
-$light-blue: #AEDDF8;
-$dark-blue: #5B9FDD;
-$light-background: #ececec;
-$dark-grey: #656565;
+@import "../global/globalCssVariables";
.presBox-cont {
cursor: auto;
@@ -10,7 +7,6 @@ $dark-grey: #656565;
pointer-events: inherit;
z-index: 2;
font-family: Roboto;
- box-shadow: #AAAAAA .2vw .2vw .4vw;
width: 100%;
min-width: 20px;
height: 100%;
@@ -47,8 +43,8 @@ $dark-grey: #656565;
align-items: center;
height: 30px;
width: 100%;
- color: white;
- background-color: #323232;
+ color: $white;
+ background-color: $dark-gray;
.toolbar-button {
cursor: pointer;
@@ -110,7 +106,7 @@ $dark-grey: #656565;
}
.toolbar-divider {
- border-left: solid #ffffff70 0.5px;
+ border-left: solid $medium-gray 0.5px;
height: 20px;
}
}
@@ -118,7 +114,7 @@ $dark-grey: #656565;
.dropdown {
font-size: 10;
margin-left: 5px;
- color: darkgrey;
+ color: $medium-gray;
transition: 0.5s ease;
}
@@ -174,7 +170,7 @@ $dark-grey: #656565;
.ribbon-colorBox {
cursor: pointer;
- border: solid 1px black;
+ border: solid 1px $black;
display: flex;
margin-left: 5px;
margin-top: 5px;
@@ -191,9 +187,9 @@ $dark-grey: #656565;
font-size: 11;
font-weight: 200;
height: 20;
- background-color: #ececec;
- color: black;
- border: solid 1px black;
+ background-color: $white;
+ color: $black;
+ border: solid 1px $black;
display: flex;
margin-left: 5px;
margin-top: 5px;
@@ -220,11 +216,11 @@ $dark-grey: #656565;
align-items: center;
height: 100%;
width: 100%;
- background: black;
+ background: $black;
}
.ribbon-propertyUpDownItem:hover {
- background: darkgrey;
+ background: $medium-gray;
transform: scale(1.05);
}
}
@@ -239,7 +235,7 @@ $dark-grey: #656565;
.multiThumb-slider {
display: grid;
- background-color: $light-background;
+ background-color: $white;
height: 10px;
border-radius: 10px;
overflow: hidden;
@@ -257,8 +253,8 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
- box-shadow: -100vw 0 0 100vw $light-background;
+ background: $medium-blue;
+ box-shadow: -100vw 0 0 100vw $white;
}
.toolbar-slider.end::-webkit-slider-thumb {
@@ -267,7 +263,7 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
+ background: $medium-blue;
box-shadow: -100vw 0 0 100vw $light-blue;
}
}
@@ -282,7 +278,7 @@ $dark-grey: #656565;
height: 10px;
border-radius: 10px;
-webkit-appearance: none;
- background-color: $light-background;
+ background-color: $white;
}
.toolbar-slider:focus {
@@ -301,7 +297,7 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
+ background: $medium-blue;
box-shadow: -100vw 0 0 100vw $light-blue;
}
@@ -318,7 +314,7 @@ $dark-grey: #656565;
width: 15px;
min-width: 15px;
cursor: pointer;
- background: $light-background;
+ background: $white;
}
.presBox-checkbox:focus {
@@ -326,7 +322,7 @@ $dark-grey: #656565;
}
.presBox-checkbox:hover {
- background: #c0c0c0;
+ background: $light-gray;
}
.presBox-checkbox:checked {
@@ -381,9 +377,9 @@ $dark-grey: #656565;
text-align: center;
font-size: 16;
width: 90%;
- color: black;
+ color: $black;
transform: translate(5%, 0px);
- border-bottom: solid 2px darkgrey;
+ border-bottom: solid 2px $medium-gray;
}
@@ -396,8 +392,8 @@ $dark-grey: #656565;
justify-self: left;
margin-top: 5px;
padding-left: 10px;
- background-color: $light-background;
- border: solid 1px black;
+ background-color: $white;
+ border: solid 1px $black;
min-width: 80px;
max-width: 200px;
width: 100%;
@@ -416,7 +412,7 @@ $dark-grey: #656565;
}
.ribbon-frameSelector {
- border: black solid 1px;
+ border: $black solid 1px;
width: 60px;
height: 20px;
margin-top: 5px;
@@ -433,12 +429,12 @@ $dark-grey: #656565;
cursor: pointer;
position: relative;
height: 100%;
- background: $light-background;
+ background: $white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
- color: black;
+ color: $black;
}
.numKeyframe {
@@ -446,7 +442,7 @@ $dark-grey: #656565;
font-size: 10;
font-weight: 600;
position: relative;
- color: black;
+ color: $black;
display: flex;
width: 100%;
height: 100%;
@@ -489,7 +485,7 @@ $dark-grey: #656565;
padding-left: 10;
padding-right: 10;
border-radius: 10px;
- background-color: #979797;
+ background-color: $medium-gray;
}
.ribbon-final-button:hover {
@@ -508,13 +504,13 @@ $dark-grey: #656565;
align-items: center;
margin-bottom: 5px;
height: 25px;
- color: lightgrey;
+ color: $light-gray;
width: 100%;
max-width: 120;
padding-left: 10;
padding-right: 10;
border-radius: 10px;
- background-color: black;
+ background-color: $black;
}
.ribbon-final-button-hidden:hover {
@@ -525,15 +521,15 @@ $dark-grey: #656565;
.ribbon-frameList {
width: calc(100% - 5px);
height: 50px;
- background-color: #ececec;
- border: 1px solid #9f9f9f;
+ background-color: $white;
+ border: 1px solid $medium-gray;
grid-template-rows: max-content;
.frameList-header {
display: grid;
width: 100%;
height: 20px;
- background-color: #9f9f9f;
+ background-color: $medium-gray;
.frameList-headerButtons {
display: flex;
@@ -588,7 +584,7 @@ $dark-grey: #656565;
font-size: 10.5;
font-weight: 300;
height: 20;
- background-color: #979797;
+ background-color: $medium-gray;
color: white;
display: flex;
margin-top: 5px;
@@ -607,8 +603,8 @@ $dark-grey: #656565;
transition: all 0.4s;
font-weight: 400;
opacity: 1;
- color: white;
- background-color: black;
+ color: $white;
+ background-color: $black;
}
.ribbon-toggle {
@@ -616,10 +612,10 @@ $dark-grey: #656565;
font-size: 10.5;
font-weight: 200;
height: 20;
- background-color: $light-background;
+ background-color: $white;
border: solid 1px rgba(0, 0, 0, 0.5);
display: flex;
- color: black;
+ color: $black;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
@@ -660,13 +656,13 @@ $dark-grey: #656565;
position: relative;
font-size: 13;
padding-bottom: 10px;
- border-bottom: solid 1px $dark-grey;
+ border-bottom: solid 1px $dark-gray;
.presBox-dropdown:hover {
- border: solid 1px $dark-blue;
+ border: solid 1px $medium-blue;
.presBox-dropdownIcon {
- color: $dark-blue;
+ color: $medium-blue;
}
}
@@ -675,12 +671,12 @@ $dark-grey: #656565;
display: grid;
grid-template-columns: auto 20%;
position: relative;
- border: solid 1px black;
- background-color: $light-background;
+ border: solid 1px $black;
+ background-color: $light-gray;
border-radius: 5px;
font-size: 10;
height: 25;
- color: black;
+ color: $black;
padding-left: 5px;
align-items: center;
margin-top: 5px;
@@ -744,7 +740,7 @@ $dark-grey: #656565;
height: 100px;
padding-top: 5px;
padding-bottom: 5px;
- border: solid 1px black;
+ border: solid 1px $black;
// overflow: auto;
::-webkit-scrollbar {
@@ -794,7 +790,7 @@ $dark-grey: #656565;
cursor: pointer;
position: relative;
text-align: center;
- border-left: solid 1px darkgrey;
+ border-left: solid 1px $medium-gray;
width: 20%;
height: 100%;
display: flex;
@@ -825,7 +821,7 @@ $dark-grey: #656565;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
z-index: 200;
background-color: white;
- color: black;
+ color: $black;
position: absolute;
overflow: hidden;
}
@@ -841,12 +837,12 @@ $dark-grey: #656565;
align-items: center;
justify-content: center;
transform: translate(0px, -1px);
- background-color: $light-background;
+ background-color: $white;
width: 40px;
height: 15px;
align-self: center;
justify-self: center;
- border: solid 1px black;
+ border: solid 1px $black;
border-top: 0px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
@@ -855,15 +851,15 @@ $dark-grey: #656565;
.layout-container {
padding: 5px;
display: grid;
- background-color: $light-background;
+ background-color: $white;
grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
width: 100%;
- border: solid 1px black;
+ border: solid 1px $black;
min-width: 100px;
overflow: hidden;
.layout:hover {
- border: solid 2px #5c9edd;
+ border: solid 2px $medium-blue;
}
.layout {
@@ -878,7 +874,7 @@ $dark-grey: #656565;
width: 90px;
overflow: hidden;
background-color: white;
- border: solid darkgrey 1px;
+ border: solid $medium-gray 1px;
display: grid;
grid-template-rows: auto;
align-items: center;
@@ -893,7 +889,7 @@ $dark-grey: #656565;
height: 13;
font-size: 12;
display: flex;
- background-color: #f1efec;
+ background-color: #white;
}
.subtitle {
@@ -906,7 +902,7 @@ $dark-grey: #656565;
height: 13;
font-size: 9;
display: flex;
- background-color: #f1efec;
+ background-color: $white;
}
.content {
@@ -919,7 +915,7 @@ $dark-grey: #656565;
height: 13;
font-size: 10;
display: flex;
- background-color: #f1efec;
+ background-color: $white;
height: 33;
text-align: left;
font-size: 8px;
@@ -960,8 +956,8 @@ $dark-grey: #656565;
select {
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-button {
@@ -975,8 +971,8 @@ $dark-grey: #656565;
text-align: center;
letter-spacing: normal;
width: inherit;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-button.active {
@@ -984,7 +980,7 @@ $dark-grey: #656565;
}
.presBox-button.active:hover {
- background-color: #233163;
+ background-color: $medium-blue;
}
.presBox-button.edit {
@@ -1053,8 +1049,8 @@ $dark-grey: #656565;
font-size: 100;
display: flex;
align-items: center;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-viewPicker {
@@ -1086,7 +1082,7 @@ $dark-grey: #656565;
top: 10;
opacity: 0.1;
transition: all 0.4s;
- color: white;
+ color: $white;
}
.miniPres:hover {
@@ -1094,8 +1090,8 @@ $dark-grey: #656565;
}
.presPanelOverlay {
- background-color: #323232;
- color: white;
+ background-color: $dark-gray;
+ color: $white;
border-radius: 5px;
grid-template-rows: 100%;
height: 25;
@@ -1129,7 +1125,7 @@ $dark-grey: #656565;
.presPanel-divider {
width: 0.5px;
height: 80%;
- border-right: solid 1px #5a5a5a;
+ border-right: solid 1px $medium-gray;
}
.presPanel-button-frame {
@@ -1161,12 +1157,12 @@ $dark-grey: #656565;
}
.presPanel-button:hover {
- background-color: #5a5a5a;
+ background-color: $medium-gray;
transform: scale(1.2);
}
.presPanel-button-text:hover {
- background-color: #5a5a5a;
+ background-color: $medium-gray;
}
diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss
index daa620d12..312b51013 100644
--- a/src/client/views/nodes/RadialMenu.scss
+++ b/src/client/views/nodes/RadialMenu.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.radialMenu-cont {
position: absolute;
@@ -53,7 +53,7 @@ s
transition: all .1s;
border-width: .11px;
border-style: none;
- border-color: $intermediate-color; // rgb(187, 186, 186);
+ border-color: $medium-gray; // rgb(187, 186, 186);
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 13px;
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index aae9cd37f..19b69ff5a 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables.scss";
+@import "../global/globalCssVariables.scss";
.webBox {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 53aceb533..3cedab1a4 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
.ProseMirror {
width: 100%;
@@ -31,7 +31,7 @@ audiotag:hover {
padding: 0;
border-width: 0px;
border-radius: inherit;
- border-color: $intermediate-color;
+ border-color: $medium-gray;
box-sizing: border-box;
background-color: inherit;
border-style: solid;
@@ -363,7 +363,7 @@ footnote::after {
@media only screen and (max-width: 1000px) {
- @import "../../globalCssVariables";
+ @import "../../global/globalCssVariables";
.ProseMirror {
width: 100%;
@@ -381,7 +381,7 @@ footnote::after {
padding: 0;
border-width: 0px;
border-radius: inherit;
- border-color: $intermediate-color;
+ border-color: $medium-gray;
box-sizing: border-box;
background-color: inherit;
border-style: solid;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss
index 1d24d6833..c94e93541 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.scss
+++ b/src/client/views/nodes/formattedText/RichTextMenu.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
.button-dropdown-wrapper {
position: relative;
@@ -24,7 +24,7 @@
top: 35px;
left: 0;
background-color: #323232;
- color: $light-color-secondary;
+ color: $light-gray;
border: 1px solid #4d4d4d;
border-radius: 0 6px 6px 6px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss
index 0e4b752ac..8c4d77da9 100644
--- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss
+++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss
@@ -1,4 +1,4 @@
-@import "../views/globalCssVariables";
+@import "../views/global/globalCssVariables";
.ProseMirror-menu-dropdown-wrap {
display: inline-block;
position: relative;
@@ -50,7 +50,7 @@
padding: 3px;
&:hover {
- background-color: $light-color-secondary;
+ background-color: $light-gray;
}
}
}
@@ -294,9 +294,9 @@
top: 31px;
background-color: #323232;
border: 1px solid #4d4d4d;
- color: $light-color-secondary;
+ color: $light-gray;
// border: none;
- // border: 1px solid $light-color-secondary;
+ // border: 1px solid $light-gray;
border-radius: 0 6px 6px 6px;
padding: 3px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
@@ -323,7 +323,7 @@
}
.separated-button {
- border-top: 1px solid $light-color-secondary;
+ border-top: 1px solid $light-gray;
padding-top: 6px;
}