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.scss1044
1 files changed, 1044 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
new file mode 100644
index 000000000..4f5397cdb
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -0,0 +1,1044 @@
+.no-margin {
+ margin-top: 0px !important;
+ margin-bottom: 0px !important;
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+}
+
+.docCreatorMenu-cont {
+ position: absolute;
+ z-index: 1000;
+ // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%);
+ // background: whitesmoke;
+ // color: black;
+ border-radius: 3px;
+}
+
+.docCreatorMenu-menu {
+ display: flex;
+ flex-direction: row;
+ height: 25px;
+ align-items: flex-end;
+}
+
+.docCreatorMenu-menu-button {
+ width: 25px;
+ height: 25px;
+ background: whitesmoke;
+ background-color: rgb(50, 50, 50);
+ border-radius: 5px;
+ border: 1px solid rgb(180, 180, 180);
+ padding: 0px;
+ font-size: 13px;
+ //box-shadow: 3px 3px rgb(29, 29, 31);
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ &.right{
+ margin-left: 0px;
+ font-size: 12px;
+ }
+
+ &.close-menu {
+ font-size: 12px;
+ width: 18px;
+ height: 18px;
+ border-radius: 2px;
+ font-size: 12px;
+ margin-left: auto;
+ }
+
+ &.options {
+ margin-left: 0px;
+ }
+
+ &:hover {
+ background-color: rgb(60, 60, 65);
+ }
+
+ &.top-bar {
+ border-bottom: 25px solid #555;
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ // border-top-left-radius: 5px;
+ // border-top-right-radius: 5px;
+ border-radius: 0px;
+ height: 0;
+ width: 50px;
+ }
+
+ &.preview-toggle {
+ margin: 0px;
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ border-left: 0px;
+ }
+}
+
+.docCreatorMenu-top-buttons-container {
+ position: relative;
+ margin-top: 5px;
+ margin-left: 7px;
+ display: flex;
+ flex-direction: row;
+ align-items: flex-end;
+ width: 150px;
+ height: auto;
+}
+
+.top-button-container {
+ position: relative;
+ width: 52px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.left {
+ z-index: 3;
+ }
+
+ &.middle {
+ position: absolute;
+ left: 40px;
+ z-index: 2;
+
+ &.selected {
+ z-index: 4;
+ }
+ }
+
+ &.right {
+ position: absolute;
+ left: 80px;
+ z-index: 1;
+
+ &.selected {
+ z-index: 4;
+ }
+ }
+
+ &:hover::before{
+ border-bottom: 20px solid rgb(82, 82, 82);
+ }
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-bottom: 20px solid rgb(50, 50, 50);
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ height: 0;
+ width: 50px;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ border-bottom: 22px solid rgb(180, 180, 180);
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ height: 0;
+ width: 52px;
+ z-index: -1;
+ }
+
+ &.selected::before {
+ border-bottom-color: rgb(67, 119, 214);
+ }
+}
+
+.top-button-content {
+ position: relative;
+ z-index: 1;
+ color: white;
+}
+
+.docCreatorMenu-menu-hr{
+ margin-top: 0px;
+ margin-bottom: 0px;
+ color: rgb(180, 180, 180);
+}
+
+.docCreatorMenu-placement-indicator {
+ position: absolute;
+ z-index: 100000;
+ border-left: solid 3px #9fd7fb;
+ border-top: solid 3px #9fd7fb;
+ width: 25px;
+ height: 25px;
+}
+
+.docCreatorMenu-general-options-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0px;
+ padding: 0px;
+ gap: 5px;
+}
+
+.docCreatorMenu-save-layout-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ 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);
+ border: 2px solid rgb(53, 80, 127);
+ }
+}
+
+.docCreatorMenu-create-docs-button {
+ width: 40px;
+ height: 40px;
+ background-color: rgb(176, 229, 149);
+ border: 2px solid rgb(126, 219, 80);
+ border-radius: 5px;
+ padding: 0px;
+ font-size: 25px;
+ color: white;
+ flex: 0 0 auto;
+ margin-bottom: 20px; //remove later !!!
+
+ &:hover {
+ background-color: rgb(129, 223, 83);
+ border: 2px solid rgb(80, 185, 28);
+ }
+}
+
+.docCreatorMenu-option-divider {
+ border-top: 1px solid rgb(180, 180, 180);
+ width: 95%;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ &.full {
+ width: 100%;
+ }
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// Resizers CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-resizer {
+ position: absolute;
+ background-color: none;
+
+ &.top, &.bottom {
+ height: 10px;
+ cursor: ns-resize;
+ }
+
+ &.right, &.left {
+ width: 10px;
+ cursor: ew-resize;
+ }
+
+ &.topRight, &.topLeft, &.bottomRight, &.bottomLeft {
+ height: 15px;
+ width: 15px;
+ background-color: none;
+ }
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// DocCreatorMenu templates preview CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-templates-view {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ overflow-y: scroll;
+ //align-items: flex-start;
+ margin: 5px;
+ margin-top: 0px;
+ width: calc(100% - 10px);
+ height: calc(100% - 30px);
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+}
+
+.docCreatorMenu-preview-container {
+ display: grid;
+ grid-template-columns: repeat(2, 140px);
+ grid-template-rows: 140px;
+ grid-auto-rows: 141px;
+ overflow-y: scroll;
+ margin: 0px;
+ margin-top: 0px;
+ width: 100%;
+ height: 100%;
+}
+
+.docCreatorMenu-expanded-template-preview {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ position: relative;
+ width: 100%;
+ height: 100%;
+
+ .top-panel{
+ width: 100%;
+ height: 10px;
+ }
+
+ .right-buttons-panel {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ height: 100%;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ width: 40px;
+ padding: 5px;
+ gap: 2px;
+ }
+}
+
+.docCreatorMenu-preview-window {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 113px;
+ height: 113px;
+ margin-top: 10px;
+ margin-left: 10px;
+ border: 1px solid rgb(163, 163, 163);
+ border-radius: 5px;
+ box-shadow: 5px 5px rgb(29, 29, 31);
+ flex: 0 0 auto;
+
+ &:hover{
+ background-color: rgb(72, 72, 73);
+ }
+
+ &.empty {
+ font-size: 35px;
+
+ &.GPT {
+ margin-top: 0px;
+ }
+ }
+
+ .option-button {
+ display: none;
+ height: 25px;
+ width: 25px;
+ margin: 0px;
+ background: none;
+ border: 0px;
+ padding: 0px;
+ font-size: 15px;
+
+ &.right {
+ position: absolute;
+ bottom: 0px;
+ right: 0px;
+ }
+
+ &.left {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ }
+
+ &.top-left {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ }
+ }
+
+ &:hover .option-button {
+ display: block;
+ }
+
+}
+
+.docCreatorMenu-preview-image{
+ background-color: transparent;
+ height: 100px;
+ width: 100px;
+ display: block;
+ object-fit: contain;
+ border-radius: 5px;
+
+ &.expanded {
+ height: 100%;
+ width: 100%;
+ }
+}
+
+.docCreatorMenu-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ margin: 0px;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ width: 100%;
+ height: 200;
+ flex: 0 0 auto;
+}
+
+.docCreatorMenu-GPT-options-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: auto;
+ margin: 0px;
+ margin-top: 5px;
+ padding: 0px;
+}
+
+.docCreatorMenu-templates-preview-window {
+ display: flex;
+ flex-direction: row;
+ //justify-content: center;
+ align-items: center;
+ overflow-y: scroll;
+ position: relative;
+ height: 125px;
+ width: calc(100% - 10px);
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ .loading-spinner {
+ justify-self: center;
+ }
+}
+
+.divvv{
+ width: 200;
+ height: 200;
+ border: solid 1px white;
+}
+
+.docCreatorMenu-section-topbar {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+}
+
+.section-reveal-options {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ margin-right: 0px;
+ margin-left: auto;
+ border: 0px;
+ background: none;
+
+ &.float-right {
+ float: right;
+ }
+}
+
+.docCreatorMenu-section-title {
+ border: 1px solid rgb(163, 163, 163);
+ border-top: 0px;
+ border-left: 0px;
+ border-bottom-right-radius: 5px;
+ font-size: 12px;
+ padding: 2px;
+ padding-left: 3px;
+ padding-right: 3px;
+ margin-bottom: 3px;
+}
+
+.docCreatorMenu-GPT-generate {
+ height: 30px;
+ width: 30px;
+ background-color: rgb(176, 229, 149);
+ border: 1px solid rgb(126, 219, 80);
+ border-radius: 5px;
+ padding: 0px;
+ font-size: 14px;
+ color: white;
+ letter-spacing: 1px;
+ flex: 0 0 auto;
+
+ &:hover {
+ background-color: rgb(129, 223, 83);
+ border: 2px solid rgb(80, 185, 28);
+ }
+}
+
+.docCreatorMenu-GPT-prompt-input {
+ width: 140px;
+ height: 25px;
+ overflow-y: scroll;
+ border: 1px solid rgb(180, 180, 180);
+ background-color: rgb(35, 35, 35);
+ border-radius: 3px;
+ padding-left: 4px;
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// DocCreatorMenu options CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-option-container{
+ display: flex;
+ width: 180px;
+ height: 30px;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ &.layout{
+ z-index: 5;
+ }
+}
+
+.docCreatorMenu-option-title{
+ display: flex;
+ width: 140px;
+ height: 30px;
+ background: whitesmoke;
+ background-color: rgb(34, 34, 37);
+ border-radius: 5px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ border: 1px solid rgb(180, 180, 180);
+ padding: 0px;
+ font-size: 12px;
+ align-items: center;
+ justify-content: center;
+ text-transform: uppercase;
+ cursor: pointer;
+
+ &.spacer {
+ border-left: none;
+ border-right: none;
+ border-radius: 0px;
+ width: auto;
+ text-transform: none;
+
+ &.small {
+ height: 20px;
+ transform: translateY(-5px);
+ }
+ }
+
+ &.config {
+ border-radius: 4px;
+ border-top-right-radius: 0px;
+ border-bottom-right-radius: 0px;
+ width: 30px;
+ border-right: 0px;
+ gap: 3px;
+
+ &.layout-config {
+ height: 20px;
+ transform: translateY(-5px);
+ text-transform: none;
+ padding-left: 2px;
+ }
+
+ &.dimensions {
+ text-transform: none;
+ height: 20px;
+ transform: translateY(-5px);
+ width: 70px;
+ }
+ }
+}
+
+.docCreatorMenu-input {
+ display: flex;
+ height: 30px;
+ background-color: rgb(34, 34, 37);
+ border: 1px solid rgb(180, 180, 180);
+ align-items: center;
+ justify-content: center;
+
+ &.config {
+ border-radius: 4px;
+ margin: 0px;
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ border-left: 0px;
+ width: 25px;
+
+ &.layout-config {
+ height: 20px;
+ transform: translateY(-5px);
+ }
+
+ &.dimensions {
+ height: 20px;
+ width: 30px;
+ transform: translateY(-5px);
+
+ &.right {
+ border-top-left-radius: 0px;
+ border-bottom-left-radius: 0px;
+ }
+
+ &.left {
+ border-radius: 0px;
+ border-right: 0px;
+ }
+ }
+ }
+}
+
+.docCreatorMenu-configuration-bar {
+ width: 200;
+ gap: 5px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ &.no-gap {
+ gap: 0px;
+ }
+}
+
+.docCreatorMenu-menu-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow-y: scroll;
+ margin: 5px;
+ margin-top: 0px;
+ width: calc(100% - 10px);
+ height: calc(100% - 30px);
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+
+ .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;
+ scrollbar-width: none;
+ border-bottom: 1px solid rgb(180, 180, 180);
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+
+ .docCreatorMenu-dropdown-option{
+ display: flex;
+ background-color: rgb(42, 42, 46);
+ border-left: 1px solid rgb(180, 180, 180);
+ border-right: 1px solid rgb(180, 180, 180);
+ border-bottom: 1px solid rgb(180, 180, 180);
+ width: 140px;
+ height: 25px;
+ justify-content: center;
+ justify-items: center;
+ padding-top: 3px;
+
+ &:hover {
+ background-color: rgb(68, 68, 74);
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+}
+
+.docCreatorMenu-layout-preview-window-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 85%;
+ height: auto;
+ position: relative;
+ padding: 0px;
+
+ &:hover .docCreatorMenu-zoom-button-container {
+ display: block;
+ }
+
+ .docCreatorMenu-layout-preview-window {
+ padding: 5px;
+ flex: 0 0 auto;
+ overflow: scroll;
+ display: grid;
+ width: 100%;
+ aspect-ratio: 1;
+ //height: auto;
+ // max-width: 240;
+ // max-height: 240;
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ background-color: rgb(34, 34, 37);
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ &.small {
+ max-width: 100;
+ max-height: 100;
+ }
+
+ .docCreatorMenu-layout-preview-item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 3px;
+ border: solid 1px lightblue;
+
+ &:hover {
+ border: solid 2px rgb(68, 153, 233);
+ z-index: 2;
+ }
+ }
+ }
+
+ .docCreatorMenu-zoom-button-container {
+ position: absolute;
+ top: 0px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ display: none;
+ z-index: 999;
+ }
+
+ .docCreatorMenu-zoom-button{
+ width: 15px;
+ height: 15px;
+ background: whitesmoke;
+ background-color: rgb(34, 34, 37);
+ border-radius: 3px;
+ border: 1px solid rgb(180, 180, 180);
+ padding: 0px;
+ font-size: 10px;
+ z-index: 6;
+ margin-left: 0px;
+ margin-top: 0px;
+ margin-right: 0px; //225px
+ margin-bottom: 0px;
+ }
+}
+
+//------------------------------------------------------------------------------------------------------------------------------------------
+// DocCreatorMenu dashboard CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-dashboard-view {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ overflow-y: hidden;
+ //align-items: flex-start;
+ margin: 5px;
+ margin-top: 0px;
+ width: calc(100% - 10px);
+ height: calc(100% - 30px);
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ .panels-container {
+ height: 100%;
+ width: 100%;
+ flex-direction: column;
+ justify-content: flex-start;
+ overflow-y: scroll;
+ }
+
+ .topbar {
+ height: 30px;
+ width: 100%;
+ background-color: rgb(50, 50, 50);
+ }
+
+// .field-panel {
+// position: relative;
+// display: flex;
+// // align-items: flex-start;
+// flex-direction: column;
+// gap: 5px;
+// padding: 5px;
+// height: 100px;
+// //width: 100%;
+// border: 1px solid rgb(180, 180, 180);
+// margin: 5px;
+// margin-top: 0px;
+// border-radius: 3px;
+// flex: 0 0 auto;
+
+// .properties-wrapper {
+// display: flex;
+// flex-direction: row;
+// align-items: flex-start;
+// gap: 5px;
+
+// .field-property-container {
+// background-color: rgb(40, 40, 40);
+// border: 1px solid rgb(100, 100, 100);
+// border-radius: 3px;
+// width: 30%;
+// height: 25px;
+// padding-left: 3px;
+// align-items: center;
+// color: whitesmoke;
+// }
+
+// .field-type-selection-container {
+// display: flex;
+// flex-direction: row;
+// align-items: center;
+// background-color: rgb(40, 40, 40);
+// border: 1px solid rgb(100, 100, 100);
+// border-radius: 3px;
+// width: 31%;
+// height: 25px;
+// padding-left: 3px;
+// color: whitesmoke;
+
+// .placeholder {
+// color: gray;
+// }
+
+// &:hover .placeholder {
+// display: none;
+// }
+
+// .bubbles {
+// display: none;
+// }
+
+// .text {
+// margin-top: 5px;
+// margin-bottom: 5px;
+// }
+
+// &:hover .bubbles {
+// display: flex;
+// flex-direction: row;
+// align-items: flex-start;
+// }
+
+// &:hover .type-display {
+// display: none;
+// }
+
+// .bubble {
+// margin: 5px;
+// }
+
+// &:hover .bubble {
+// margin-top: 7px;
+// }
+// }
+// }
+
+// .field-description-container {
+// background-color: rgb(40, 40, 40);
+// border: 1px solid rgb(100, 100, 100);
+// border-radius: 3px;
+// width: 100%;
+// height: 100%;
+// resize: none;
+
+// ::-webkit-scrollbar-track {
+// background: none;
+// }
+// }
+
+// .top-right {
+// position: absolute;
+// top: 0px;
+// right: 0px;
+// }
+// }
+// }
+
+ .field-panel {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ height: 285px;
+ width: calc(100% - 10px);
+ border: 1px solid rgb(180, 180, 180);
+ margin: 5px;
+ margin-top: 0px;
+ margin-bottom: 10px;
+ border-radius: 3px;
+ flex: 0 0 auto;
+ gap: 25px;
+ background-color: rgb(60, 60, 60);
+
+ .top-bar {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ border-bottom: 1px solid rgb(180, 180, 180);
+ border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ width: 100%;
+ height: 20px;
+ background-color: rgb(50, 50, 50);
+ color: rgb(168, 167, 167);
+
+ .field-title {
+ color: whitesmoke;
+ }
+ }
+
+ .opts-bar {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+
+ .opt-box {
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ width: 40%;
+ height: 50px;
+ margin-right: 4%;
+ margin-left: 4%;
+ box-shadow: 5px 5px rgb(29, 29, 31);
+ }
+
+ .content {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: calc(100% - 20px);
+ width: 100%;
+ background-color: rgb(50, 50, 50);
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ resize: none;
+
+ .bubbles {
+ display: none;
+ }
+
+ .text {
+ margin-right: 5px;
+ }
+
+ &:hover .bubbles {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ }
+
+ &:hover .type-display {
+ display: none;
+ }
+
+ .bubble {
+ margin: 3px;
+ }
+ }
+ }
+
+ .sizes-box {
+ width: 88%;
+ height: 60px;
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ background-color: rgb(50, 50, 50);
+ box-shadow: 5px 5px rgb(29, 29, 31);
+
+ .content {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: calc(100% - 20px);
+ width: 100%;
+ background-color: rgb(50, 50, 50);
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+
+ .text {
+ margin-right: 9px;
+ }
+
+ .bubbles {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ .bubble {
+ margin: 3px;
+ margin-right: 4px;
+ }
+ }
+ }
+
+ .desc-box {
+ width: 88%;
+ height: 50px;
+ border: 1px solid rgb(180, 180, 180);
+ border-radius: 5px;
+ background-color: rgb(50, 50, 50);
+ box-shadow: 5px 5px rgb(29, 29, 31);
+
+ .content {
+ height: calc(100% - 20px);
+ width: 100%;
+ background-color: rgb(50, 50, 50);
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ resize: none;
+
+ }
+ }
+
+ }
+
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 10:59:31 +0000