#tweakpaneUiContainer { /*padding-right: 0.25rem;*/ height: calc(100% - 6rem); max-height: calc(100% - 6rem); pointer-events: none; } #tweakpaneUiContainer > div{ pointer-events: auto; } :root { --tp-blade-unit-size: 26px; --tp-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; /*--tp-font-family: 'Inter';*/ --tp-element-border-radius: 0.25rem; } :root { --tp-base-background-color: #0e0e0e; /*--tp-base-shadow-color: #00000000;*/ /*--tp-base-background-color: #00000000;*/ --tp-container-background-color: rgba(32, 32, 32, 0.2); --tp-container-background-color-hover: rgba(32, 32, 32, 0.3); --tp-container-background-color-active: rgba(50, 50, 50, 0.8); --tp-container-background-color-focus: rgba(50, 50, 50, 1.0); --tp-container-border-color: rgba(50, 50, 50, 1.0); /*--tp-base-border-radius: 0.4rem;*/ /*--tp-button-background-color: hsla(0, 0%, 70%, 1.00);*/ /*--tp-button-background-color-active: hsla(0, 0%, 85%, 1.00);*/ /*--tp-button-background-color-focus: hsla(0, 0%, 80%, 1.00);*/ /*--tp-button-background-color-hover: hsla(0, 0%, 75%, 1.00);*/ /*--tp-button-foreground-color: hsla(0, 0%, 5%, 1.00);*/ --tp-container-foreground-color: hsla(0, 0%, 90%, 0.90); /*--tp-groove-foreground-color: hsla(0, 0%, 10%, 1.00);*/ /*--tp-input-background-color: hsla(0, 0%, 10%, 1.00);*/ /*--tp-input-background-color-active: hsla(0, 0%, 25%, 1.00);*/ /*--tp-input-background-color-focus: hsla(0, 0%, 20%, 1.00);*/ /*--tp-input-background-color-hover: hsla(0, 0%, 15%, 1.00);*/ /*--tp-input-foreground-color: hsla(0, 0%, 90%, 1.00);*/ --tp-label-foreground-color: hsla(0, 0%, 85%, 0.90); /*--tp-monitor-background-color: hsla(0, 0%, 8%, 1.00);*/ /*--tp-monitor-foreground-color: hsla(0, 0%, 48%, 1.00);*/ } :root .tpTheme-black { /*same as default*/ } :root .tpTheme-blue { --tp-base-background-color: #28223C; /*--tp-base-background-color: hsla(235, 21%, 31%, 0.5);*/ --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2); --tp-button-background-color: hsla(230, 10%, 80%, 1.00); --tp-button-background-color-active: hsla(230, 10%, 95%, 1.00); --tp-button-background-color-focus: hsla(230, 10%, 90%, 1.00); --tp-button-background-color-hover: hsla(230, 10%, 85%, 1.00); --tp-button-foreground-color: hsla(230, 20%, 11%, 1.00); --tp-container-background-color: hsla(230, 25%, 16%, 0.65); --tp-container-background-color-active: hsla(230, 25%, 31%, 0.65); --tp-container-background-color-focus: hsla(230, 25%, 26%, 0.65); --tp-container-background-color-hover: hsla(230, 25%, 21%, 0.65); --tp-container-border-color: hsla(230, 36%, 25%, 1); --tp-container-foreground-color: hsl(240, 10%, 92%); --tp-groove-foreground-color: hsla(230, 20%, 8%, 1.00); --tp-input-background-color: hsla(230, 20%, 8%, 1.00); --tp-input-background-color-active: hsla(230, 28%, 23%, 1.00); --tp-input-background-color-focus: hsla(230, 28%, 18%, 1.00); --tp-input-background-color-hover: hsla(230, 20%, 13%, 1.00); --tp-input-foreground-color: hsla(230, 10%, 80%, 1.00); /*--tp-label-foreground-color: hsl(229, 100%, 97%);*/ --tp-monitor-background-color: hsla(230, 20%, 8%, 1.00); --tp-monitor-foreground-color: hsla(230, 12%, 48%, 1.00); --tp-label-foreground-color: #E4E2ED; } :root .tpTheme-white { --tp-base-background-color: hsla(230, 5%, 90%, 1.00); --tp-base-shadow-color: hsla(0, 0%, 0%, 0.10); --tp-button-background-color: hsla(230, 7%, 85%, 1.00); --tp-button-background-color-active: hsla(230, 7%, 70%, 1.00); --tp-button-background-color-focus: hsla(230, 7%, 75%, 1.00); --tp-button-background-color-hover: hsla(230, 7%, 80%, 1.00); --tp-button-foreground-color: hsla(230, 10%, 30%, 1.00); --tp-container-background-color: hsla(230, 15%, 80%, 0.10); --tp-container-background-color-active: hsla(230, 15%, 70%, 0.32); --tp-container-background-color-focus: hsla(230, 15%, 70%, 0.28); --tp-container-background-color-hover: hsla(230, 15%, 70%, 0.24); --tp-container-border-color: hsla(230, 15%, 70%, 0.6); --tp-container-foreground-color: hsla(230, 10%, 30%, 1.00); --tp-groove-foreground-color: hsla(230, 15%, 20%, 0.10); --tp-input-background-color: hsla(230, 15%, 30%, 0.10); --tp-input-background-color-active: hsla(230, 15%, 50%, 0.22); --tp-input-background-color-focus: hsla(230, 15%, 50%, 0.18); --tp-input-background-color-hover: hsla(230, 15%, 50%, 0.14); --tp-input-foreground-color: hsla(230, 10%, 20%, 1.00); --tp-label-foreground-color: hsla(230, 10%, 10%, 1.00); --tp-monitor-background-color: hsla(230, 15%, 30%, 0.10); --tp-monitor-foreground-color: hsla(230, 10%, 30%, 0.50); } :root .tpTheme-light { --tp-base-background-color: #E7EFF8; --tp-base-shadow-color: rgba(0, 0, 0, 0.1); --tp-button-background-color: #dae1ea; --tp-button-background-color-active: #c3d4e7; --tp-button-background-color-focus: #c3d4e7; --tp-button-background-color-hover: #c3d4e7; --tp-button-foreground-color: #1C2026; --tp-container-background-color: #dae1ea22; --tp-container-background-color-active: #c3d4e766; --tp-container-background-color-focus: #c3d4e766; --tp-container-background-color-hover: #c3d4e766; --tp-container-border-color: #c3d4e799; --tp-container-foreground-color: #1C2026; --tp-groove-foreground-color: #6d7a8c; --tp-input-background-color: #dae1ea; --tp-input-background-color-active: #c3d4e7; --tp-input-background-color-focus: #c3d4e7; --tp-input-background-color-hover: #c3d4e7; --tp-input-foreground-color: #1C2026; --tp-label-foreground-color: #2b313a; --tp-monitor-background-color: #dae1ea; --tp-monitor-foreground-color: #6d7a8c; } :root .tpTheme-dark { --tp-base-background-color: #1C2026; --tp-base-shadow-color: rgba(0, 0, 0, 0.2); --tp-button-background-color: #3e4550; --tp-button-background-color-active: #555e6b; --tp-button-background-color-focus: #555e6b; --tp-button-background-color-hover: #555e6b; --tp-button-foreground-color: #F6F7F9; --tp-container-background-color: #3e455022; --tp-container-background-color-active: #555e6b66; --tp-container-background-color-focus: #555e6b66; --tp-container-background-color-hover: #555e6b66; --tp-container-border-color: #555e6b99; --tp-container-foreground-color: #F6F7F9; --tp-groove-foreground-color: #b6bfcb; --tp-input-background-color: #3e4550; --tp-input-background-color-active: #555e6b; --tp-input-background-color-focus: #555e6b; --tp-input-background-color-hover: #555e6b; --tp-input-foreground-color: #F6F7F9; --tp-label-foreground-color: #d2d3d5; --tp-monitor-background-color: #3e4550; --tp-monitor-foreground-color: #b6bfcb; } .tp-fldv { /*margin-top: 0.25rem;*/ /*margin-bottom: 0.25rem;*/ background-blend-mode: luminosity; position: relative; /*outline: 1px solid var(--tp-input-foreground-color);*/ /*outline-offset: -1px;*/ border: 1px solid var(--tp-container-border-color); /*border: 2px solid #c3d4e799;*/ /*border: 2px solid black;*/ /*border-left: 0px;*/ box-sizing: border-box; } /*.tp-fldv.tp-v-vlst{*/ /*}*/ /*.tp-fldv .tp-fldv {*/ /* margin-top: 0.5rem;*/ /* margin-bottom: 0.5rem;*/ /*}*/ /*.tp-rotv.tp-rotv-expanded .tp-rotv_c, .tp-fldv.tp-fldv-expanded>.tp-fldv_c{*/ /* padding-top: 0;*/ /*}*/ .tp-tabv_c .tp-brkv>.tp-cntv, .tp-fldv_c>.tp-cntv { margin-left: 0; } .tp-fldv .tp-brkv { /*background-color: #ddddddcc;*/ } .tp-fldv .tp-fldv .tp-brkv { /*background-color: #dddddd99;*/ } .tp-fldv-expanded > .tp-fldv_b { /*background-color: #ddddddaa;*/ } .tp-fldv_b { height: calc(var(--bld-us) * 1.5 + 4px) !important; font-size: 0.9rem !important; transition: background-color 0.5s ease; } .tp-fldv_b + .tp-brkv .tp-fldv_b { height: calc(var(--bld-us) * 1.1 + 4px) !important; font-size: 0.7rem !important; } .tp-fldv_b + .tp-brkv .tp-fldv-expanded > .tp-fldv_b { } .tp-lblv_l { font-size: 0.75rem !important; font-weight: 500 !important; flex-grow: 1 !important; flex-basis: 20% !important; } .tp-lblv_v { flex-grow: 1 !important; flex-basis: 50% !important; } .tp-txtv_i { font-size: 0.75rem !important; font-weight: 500 !important; } .tp-fldv_t { font-weight: 500 !important; padding-left: 1.5rem !important; } .tp-fldv_m { right: auto !important; left: 0.75rem; opacity: 1.0 !important; } .pluginOptionsButton{ position: absolute; right: 0; top: 0.75rem; padding-left: 0.5rem; padding-right: 0.5rem; height: min-content; background: transparent; color: var(--tp-container-foreground-color, #eeeeee); font-size: 0.9rem; border: none; } .tp-sldv_k::after{ background-color: var(--tp-input-foreground-color, hsl(230, 7%, 75%)) } .tp-btnv_b{ height: calc(var(--tp-blade-unit-size) * 1.15); } .tp-p2dv_b, .tp-btnv_b, .tp-lstv_s{ font-weight: 500 !important; } .tp-rotv{ font-size: 13px !important; }