diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 183 |
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; } - - |
