Breakdance Builder Fancy UI by mikeingz

/* ==UserStyle==
@name         Breakdance Builder Fancy UI
@version      20231107.13.10
@namespace    ?
==/UserStyle== */

@-moz-document regexp("https?:\\/\\/.*\\?breakdance=builder&id=.*") {
.theme--dark.v-application {
    --bd-newaccent: #f16e6e;
}
.theme--light.v-application {
    --bd-newaccent: #fd9393;
}
.v-application .breakdance-control-wrapper > div > * > .breakdance-only-on-hover {
    opacity: 0.5;
}
.v-application .indicator-light-light {
    width: 4px;
    height: 4px;
    background-color: var(--bd-newaccent);
}
.v-application .properties-panel-accordion-title {
    font-size: var(--text-sm2);
}
.v-application .breakdance-unit-input-unit {
    width: auto;
    top: 5px;
    right: -10px;
    height: calc(100% - 10px);
    background: var(--bd-newaccent);
    padding: 4px;
    max-width: none;
}
.theme--dark.v-application .breakdance-unit-input-unit {
    color: black;
}
.theme--light.v-application .breakdance-unit-input-unit {
    color: black;
}
.v-application .breakdance-unit-input .breakdance-simple-input {
    padding-right: 0px;
}
.v-application .structure-node {
    height: auto;
}
.v-application .breakdance-control-modifier-icon-value-present {
    outline: 1px dotted;
}
.v-application .structure-node-title-real-real {
    height: 40px;
    border: 2px solid var(--gray50);
    border-radius: 8px;
}
.v-application .breakdance--active-element > .structure-node-title-real > .structure-node-title-real-real {
    background: var(--bd-newaccent);
}
.v-application .structure-node-title-real-real .element-title-text {
    font-size: 11px;
    letter-spacing: 0.5px;
}
.v-application .breakdance--active-element > .structure-node-title-real > .structure-node-title-real-real .element-title-text {
    color: black;
}
.v-application .breakdance--active-element > .structure-node-title-real > .structure-node-title-real-real {
    outline: 1px dashed rgba(255, 255, 255, 0.5);
    outline-offset: -4px;
}
.v-application .structure-node-toggle-wrapper {
    top: 15px;
}
.theme--dark.v-application
    .structure-panel-content-wrapper
    > .structure-node
    > .structure-node-children
    > .structure-node
    > .structure-node-title-wrapper
    .structure-node-title:not(.breakdance--active-element)
    .structure-node-title-real-real {
    background-color: black;
}
.theme--light.v-application
    .structure-panel-content-wrapper
    > .structure-node
    > .structure-node-children
    > .structure-node
    > .structure-node-title-wrapper
    .structure-node-title:not(.breakdance--active-element)
    .structure-node-title-real-real {
    background-color: #e5e5e5;
}
.theme--light.v-application {
    --scrollbarBG: rgb(237, 235, 235);
}
.theme--dark.v-application {
    --scrollbarBG: rgb(45, 45, 45);
}
.vscroll-scroll::-webkit-scrollbar,
.v-menu__content::-webkit-scrollbar,
.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar,
.v-dialog::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.vscroll-scroll::-webkit-scrollbar-thumb,
.v-menu__content::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.v-dialog::-webkit-scrollbar-thumb {
    background-color: var(--bd-newaccent);
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
}
.v-application .code-input,
.element-studio .code-input {
    font-size: 14px !important;
}

.theme--dark.v-application .properties-panel-search-text-input .breakdance-text-input-wrapper > input {
    background-color: black !important;
}
.v-application .breakdance-tabs-row {
    order: 2;
}
.v-application .vscroll-scroll {
    order: 3;
}
.v-application .properties-panel-search-box-wrap {
    order: 1;
}
}