@threepipe/plugin-tweakpane/src/tpTheme.css

Tweakpane UI Plugin for ThreePipe

#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;
}