aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss183
1 files changed, 89 insertions, 94 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 463e69c67..6eb7fa96a 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -9,10 +9,10 @@
position: absolute;
z-index: 1000;
// box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
- // background: whitesmoke;
+ // background: whitesmoke;
// color: black;
border-radius: 3px;
-}
+}
.docCreatorMenu-menu {
display: flex;
@@ -24,7 +24,7 @@
.docCreatorMenu-menu-button {
width: 25px;
height: 25px;
- background: whitesmoke;
+ background: whitesmoke;
background-color: rgb(50, 50, 50);
border-radius: 5px;
padding: 0px;
@@ -53,8 +53,8 @@
position: absolute;
right: 0px;
}
-
- &.right{
+
+ &.right {
margin-left: 0px;
font-size: 12px;
}
@@ -103,12 +103,12 @@
}
}
- &:hover::before{
+ &:hover::before {
border-bottom: 20px solid rgb(82, 82, 82);
}
&::before {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 0;
@@ -120,7 +120,7 @@
}
&::after {
- content: "";
+ content: '';
position: absolute;
top: -1px;
left: -1px;
@@ -143,7 +143,7 @@
color: white;
}
-.docCreatorMenu-menu-hr{
+.docCreatorMenu-menu-hr {
margin-top: 0px;
margin-bottom: 0px;
color: rgb(180, 180, 180);
@@ -173,14 +173,14 @@
align-items: center;
width: 40px;
height: 40px;
- background-color: rgb(99, 148, 238);
+ background-color: rgb(99, 148, 238);
border: 2px solid rgb(80, 107, 152);
border-radius: 5px;
margin-bottom: 20px;
font-size: 25px;
- &:hover{
- background-color: rgb(59, 128, 255);
+ &:hover {
+ background-color: rgb(59, 128, 255);
border: 2px solid rgb(53, 80, 127);
}
}
@@ -188,7 +188,7 @@
.docCreatorMenu-create-docs-button {
width: 40px;
height: 40px;
- background-color: rgb(176, 229, 149);
+ background-color: rgb(176, 229, 149);
border: 2px solid rgb(126, 219, 80);
border-radius: 5px;
padding: 0px;
@@ -199,7 +199,7 @@
&:hover {
background-color: rgb(129, 223, 83);
- border: 2px solid rgb(80, 185, 28);
+ border: 2px solid rgb(80, 185, 28);
}
}
@@ -230,17 +230,22 @@
position: absolute;
background-color: none;
- &.top, &.bottom {
+ &.top,
+ &.bottom {
height: 10px;
cursor: ns-resize;
}
- &.right, &.left {
+ &.right,
+ &.left {
width: 10px;
cursor: ew-resize;
}
- &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
+ &.topRight,
+ &.topLeft,
+ &.bottomRight,
+ &.bottomLeft {
height: 15px;
width: 15px;
background-color: none;
@@ -263,7 +268,7 @@
height: calc(100% - 30px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
scrollbar-width: none;
}
@@ -277,7 +282,7 @@
height: 100%;
flex-grow: 1;
- .top-panel{
+ .top-panel {
width: 100%;
height: 10px;
}
@@ -302,13 +307,14 @@
justify-content: center;
align-items: center;
height: 100%;
+ width: 100%;
aspect-ratio: 1;
color: none;
border: 1px solid rgb(163, 163, 163);
border-radius: 5px;
box-shadow: 5px 5px rgb(29, 29, 31);
- &:hover{
+ &:hover {
background-color: rgb(72, 72, 73);
}
@@ -353,20 +359,18 @@
&:hover .option-button {
display: block;
}
-
}
-.docCreatorMenu-preview-image{
+.docCreatorMenu-preview-image {
background-color: transparent;
height: 100%;
display: block;
object-fit: contain;
border-radius: 5px;
-
}
.docCreatorMenu-variations-tab {
- flex-grow: .5;
+ flex-grow: 0.5;
}
.docCreatorMenu-section {
@@ -400,7 +404,7 @@
display: grid;
justify-content: space-evenly;
row-gap: 2rem;
- grid-template-columns: repeat(auto-fill, minmax(150px, 30%));
+ grid-template-columns: repeat(auto-fill, minmax(150px, 50%));
margin: 5px;
width: calc(100% - 10px);
height: 100%;
@@ -413,7 +417,7 @@
}
}
-.divvv{
+.div {
width: 200;
height: 200;
border: solid 1px white;
@@ -448,7 +452,7 @@
.docCreatorMenu-GPT-generate {
height: 30px;
width: 30px;
- background-color: rgb(176, 229, 149);
+ background-color: rgb(176, 229, 149);
border: 1px solid rgb(126, 219, 80);
border-radius: 5px;
padding: 0px;
@@ -459,7 +463,7 @@
&:hover {
background-color: rgb(129, 223, 83);
- border: 2px solid rgb(80, 185, 28);
+ border: 2px solid rgb(80, 185, 28);
}
}
@@ -477,7 +481,7 @@
// DocCreatorMenu options CSS
//--------------------------------------------------------------------------------------------------------------------------------------------
-.docCreatorMenu-option-container{
+.docCreatorMenu-option-container {
display: flex;
width: 180px;
height: 30px;
@@ -487,16 +491,16 @@
margin-top: 10px;
margin-bottom: 10px;
- &.layout{
+ &.layout {
z-index: 5;
}
}
-.docCreatorMenu-option-title{
+.docCreatorMenu-option-title {
display: flex;
width: 140px;
height: 30px;
- background: whitesmoke;
+ background: whitesmoke;
background-color: rgb(34, 34, 37);
border-radius: 5px;
border: 1px solid rgb(180, 180, 180);
@@ -513,7 +517,7 @@
border-radius: 0px;
width: auto;
text-transform: none;
-
+
&.small {
height: 20px;
transform: translateY(-5px);
@@ -607,38 +611,38 @@
height: calc(100% - 30px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
scrollbar-width: none;
- .docCreatorMenu-option-container{
+ .docCreatorMenu-option-container {
width: 180px;
height: 30px;
.docCreatorMenu-dropdown-hoverable {
width: 140px;
height: 30px;
-
+
&:hover .docCreatorMenu-dropdown-content {
display: block;
}
-
+
&:hover .docCreatorMenu-option-title {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
-
+
.docCreatorMenu-dropdown-content {
display: none;
min-width: 100px;
height: 75px;
overflow-y: scroll;
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
scrollbar-width: none;
border-bottom: 1px solid rgb(180, 180, 180);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-
- .docCreatorMenu-dropdown-option{
+
+ .docCreatorMenu-dropdown-option {
display: flex;
background-color: rgb(42, 42, 46);
border-left: 1px solid rgb(180, 180, 180);
@@ -649,13 +653,13 @@
justify-content: center;
justify-items: center;
padding-top: 3px;
-
+
&:hover {
background-color: rgb(68, 68, 74);
cursor: pointer;
}
}
- }
+ }
}
}
}
@@ -710,7 +714,7 @@
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
background-color: rgb(34, 34, 37);
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
scrollbar-width: none;
&.small {
@@ -742,10 +746,10 @@
z-index: 999;
}
- .docCreatorMenu-zoom-button{
+ .docCreatorMenu-zoom-button {
width: 15px;
height: 15px;
- background: whitesmoke;
+ background: whitesmoke;
background-color: rgb(34, 34, 37);
border-radius: 3px;
border: 1px solid rgb(180, 180, 180);
@@ -759,8 +763,6 @@
}
}
-
-
//------------------------------------------------------------------------------------------------------------------------------------------
// DocCreatorMenu dashboard CSS
//--------------------------------------------------------------------------------------------------------------------------------------------
@@ -778,7 +780,7 @@
height: calc(100% - 30px);
border: 1px solid rgb(180, 180, 180);
border-radius: 5px;
- -ms-overflow-style: none;
+ -ms-overflow-style: none;
scrollbar-width: none;
.panels-container {
@@ -836,8 +838,8 @@
background-color: rgb(72, 72, 72);
cursor: pointer;
}
- }
-
+ }
+
.opts-bar {
display: flex;
flex-direction: row;
@@ -880,11 +882,11 @@
flex-direction: row;
align-items: flex-start;
}
-
+
&:hover .type-display {
display: none;
}
-
+
.bubble {
margin: 3px;
}
@@ -919,7 +921,7 @@
flex-direction: row;
align-items: center;
}
-
+
.bubble {
margin: 3px;
margin-right: 4px;
@@ -942,10 +944,8 @@
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
resize: none;
-
}
}
-
}
.conditionals-section {
@@ -972,7 +972,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
- color: whitesmoke;
+ color: whitesmoke;
width: 100%;
height: fit-content;
margin-bottom: 15px;
@@ -1041,7 +1041,6 @@
overflow-y: scroll;
white-space: nowrap;
}
-
}
.form {
@@ -1057,10 +1056,8 @@
align-items: center;
margin: 3px;
cursor: pointer;
-
}
}
-
}
//------------------------------------------------------------------------------------------------------------------------------------------
@@ -1113,38 +1110,38 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 2rem;
+ gap: 2rem;
padding: 0.5rem 1rem;
background: rgb(50, 50, 50);
color: whitesmoke;
font-family: system-ui, sans-serif;
font-size: 0.9rem;
- flex-wrap: wrap;
- }
-
- .menu‑item {
+ flex-wrap: wrap;
+}
+
+.menu‑item {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
- }
-
- .menu‑item input[type="range"] {
+}
+
+.menu‑item input[type='range'] {
width: 7rem;
- accent-color: whitesmoke;
- }
-
- .value {
+ accent-color: whitesmoke;
+}
+
+.value {
min-width: 2ch;
text-align: right;
- }
-
- .switch {
+}
+
+.switch {
gap: 0.75rem;
margin-bottom: 0px;
- }
-
- .switch .slider {
+}
+
+.switch .slider {
position: relative;
width: 2.2rem;
height: 1.1rem;
@@ -1152,9 +1149,9 @@
border-radius: 1rem;
cursor: pointer;
transition: background 0.2s;
- }
-
- .switch .slider::before {
+}
+
+.switch .slider::before {
content: '';
position: absolute;
top: 0.1rem;
@@ -1164,27 +1161,25 @@
background: rgb(50, 50, 50);
border-radius: 50%;
transition: transform 0.2s;
- }
-
- .switch input {
+}
+
+.switch input {
display: none;
- }
-
- .switch input:checked + .slider {
+}
+
+.switch input:checked + .slider {
background: #78c2f1;
- }
-
- .switch input:checked + .slider::before {
+}
+
+.switch input:checked + .slider::before {
transform: translateX(1.1rem);
- }
+}
.firefly-option-label {
- padding: .2em .6em .3em;
+ padding: 0.2em 0.6em 0.3em;
font-size: 100%;
color: whitesmoke;
text-align: center;
margin-bottom: 0px;
font-weight: 500;
}
-
-