BricksBuilder - Dark by poziomapl

Details

Authorpoziomapl
LicenseNo License
Categorybricksbuilder
Created1 year, 2 months ago
Updated4 months, 4 weeks ago
Size27 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Some css fixes for Bricks Builder. IMPORTANT: This theme requires all Builder Tweaks in the Advanced Themer plugin to be enabled for proper display.
Notes

Userstyle doesn't have notes.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         BricksBuilder - Dark
@description  Compact dark mode for bricks builder plus some improvements
@namespace    pozioma.pl
@version      0.1
@author       natandomnik <natan@pozioma.pl> (https://github.com/eight04)
@homepageURL  http://pozioma.cpl/
@supportURL   http://example.pl/kontakt
@license      unlicense
@preprocessor stylus

==/UserStyle== */

  [data-builder-mode=dark] {
    --gray-0: #f5f5f5;
    --gray-100: #ebebeb;
    --gray-200: #e0e0e0;
    --gray-300: #dbdbdb;
    --gray-400: #bdbdbd;
    --gray-500: #a3a3a3;
    --gray-600: #6d6d6d;
    --gray-700: #5e5e5e;
    --gray-750: #4d4d4d;
    --gray-800: #444444;
    --gray-900: #373737;
    --gray-1000: #383838;
    --gray-1100: #2e2e2e;
    --gray-1200: #1e1e1e;
    --gray-1300: #171717;
    --purple-500: #6233a1;
    --purple-700: #3c294f;
    --red-500: #e75471;
    --red-700: #69303c;    
    --red-900: #342125;
    --yellow-900: #3e392a;
    --yellow-700: #564b27;
    --yellow-500: #ffd64f;
 
    
    
    --builder-border: rgba(255, 255, 255, 0.13);
    --builder-select-background: linear-gradient(rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.18) 100%);
    --builder-select-background-hover: linear-gradient(rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.22) 100%);
    --builder-select-background-active: linear-gradient(rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    --builder-select-shadow: rgba(0, 0, 0, 0.8) 0px 0.5px 1px, rgba(255, 255, 255, 0.12) 0px 0.5px 0.5px inset;
    --builder-has-setting: var(--yellow-500);
    --builder-structure-input-height: 24px;
    --builder-canvas-scrollbar-track: var(--gray-900);
    --builder-canvas-scrollbar-thumb: var(--gray-700);
    --builder-canvas-scrollbar-thumb_hover: var(--gray-500);


/*Bricks default Variables*/
    
    --builder-bg: var(--gray-1200);
    --builder-bg-2: var(--gray-1100);
    --builder-bg-3: var(--gray-1000);
    --builder-border-color: var(--builder-border);
    --builder-input-height: 24px;
     --builder-bg-accent: var(--yellow-900);
    --builder-color-accent: var(--yellow-500);
    --builder-color-knob: var(--gray-600);
}




  
/*AT styling*/

#brxcVariableOverlay .brxc-overlay__action-btn.isotope-selector {
    color: white !important;
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper { 
    background-color: var(--gray-1200);
    border-right: 1px solid var(--builder-border);
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active {
        background-color: var(--gray-1100);
}

.brxc-toggle-modal, .brxc-toggle-lorem, .brxc-toggle-ai, .brxc-toggle-root, .brxc-toggle-bem, .brxc-toggle-beautify {
    background: var(--gray-1200);
}

/* .brxc-toggle-modal {
    scale: 0;
    transition: all 75ms ease-out;
}

[data-control=number]:hover .brxc-toggle-modal {
    scale: 1;
} */

#bricks-panel-header .actions li {
     height: 24px;
}

#bricks-panel #bricks-panel-element #bricks-panel-header .actions li {
    background-color: transparent;
}


#bricks-panel #bricks-panel-element #bricks-panel-header .actions {
        gap: 3px;
        grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
}

#bricks-panel-header .actions li.active {
    background-color: var(--gray-700) !important;
}

#bricks-panel-element-classes .active-class.active input {
    background-color: var(--builder-bg-accent);
    color: var(--builder-color-accent);
    width: 100%;
    border: 0px
}

.bricks-panel-controls .control-group-title .brxc-group-icon.active, #brxcClassManagerOverlay .brxc-group-icon.active{
    background-color: var(--gray-800);
}


.bricks-panel-controls .control-group-title .brxc-group-icon, #brxcClassManagerOverlay .brxc-group-icon {
    background-color: var(--gray-900);
}


.bricks-panel-controls .control-group-title .brxc-group-icon:hover, .bricks-panel-controls .control-group-title .brxc-group-icon.active, #brxcClassManagerOverlay .brxc-group-icon.active {
    color: var(--yellow-500);
}

/*AT sidebar shortcut styling*/

body.brxc-has-panel-shortcuts #bricks-panel-element > * {
    height: max-content;
    width: calc(100% - 34px);
    margin-left: 34px;
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper, #bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper {
        width: 34px;
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li {
    padding: 10.5px;
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper i {
    font-size: 16px;
}

#bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper i {
    font-size: 15px;
}

#bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper {
    background-color: var(--gray-1200);
    border-left: 1px solid var(--builder-border-color);
}

#bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper li {
    padding: 10px;
    border-bottom: 1px solid var(--builder-border-color);
}


.brxce-panel-shortcut__container li.has-settings:before {
    left: -7px;
    border-left: 3px solid var(--builder-has-setting);
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active{
        background: var(--gray-800);
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li.active i{
    color: var(--gray-0);
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li:hover {
    background: var(--gray-1100);
}

li.breakpoint[data-styles="true"] {
    box-shadow: inset 0 -4px 0px 0px var(--builder-has-setting);
}

.brxc-overlay__wrapper.sidebar {
    top: 34px;
}

body.brxc-has-panel-shortcuts #bricks-panel-element > .brxce-panel-shortcut__wrapper li {
    padding: 12.5px;
    border-bottom: 1px solid var(--builder-border-color);
}

li.grid-guide {
    border-right: 0px !important;
}


/*Bricks builder Variables*/

input#bricks-panel-search {
    border-bottom: 0px !important;
}

#bricks-builder-context-menu ul li:hover:not(.convert) {
    background-color: var(--gray-700);
    color: #fff;
}

#bricks-builder-context-menu ul li.sep {
    border-bottom: 1px solid var(--builder-border-color);
}


#bricks-toolbar .group-wrapper.left li {
    border-right: 1px solid var(--builder-border-color);
}

.control.control-textarea {
    margin-top: 12px;
    margin-bottom: 12px;
}


.bricks-panel-controls .control-inline>[data-control=number], .bricks-panel-controls .control-inline>div {
    flex-basis: 50% !important;
    max-width: unset;
    width: unset;
    flex-grow: 1;
}


#bricks-panel-header {
    padding: 0px 12px;
    margin-top: 10px;
}

#bricks-panel #bricks-panel-header input {
    height: auto;
    line-height: var(--builder-input-height);
    font-size: 22px;
    letter-spacing: 0px;
    font-weight: 500;
    margin-bottom: 10px;
    transition: all 75ms ease;
    padding: 10px 0px;
    border-bottom: 1px solid var(--builder-border);
}

#bricks-panel #bricks-panel-header input:hover {
    background: var(--gray-1100);
    padding-left: 5px;
}

#bricks-panel #bricks-panel-header input:focus, #bricks-panel #bricks-panel-header input:active {
    background: var(--gray-1300);
    padding-left: 5px;
}

.bricks-panel input.active, .bricks-panel input:active, .bricks-panel input:focus, .bricks-panel select.active, .bricks-panel select:active, .bricks-panel select:focus, .bricks-panel textarea.active, .bricks-panel textarea:active, .bricks-panel textarea:focus {
    background-color: #191919;
    border: 1px solid var(--gray-700);
}

[data-control=text] input {
    border: 1px solid var(--gray-1300);
}

[data-control=number] input, [data-control=text] input, [data-control=textarea] input {
    border: 1px solid var(--gray-900);
}

[data-control=number] input:hover, [data-control=text] input:hover  {
    border: 1px solid var(--gray-800);
}

[data-control=textarea] textarea {
    border: 1px solid var(--gray-900);
}

[data-control=textarea] textarea:hover {
    border: 1px solid var(--gray-800);
}

[data-control=textarea] textarea:active, [data-control=textarea] textarea:focus,  {
    border: 1px solid var(--yellow-500);
}

[data-control=select] .input {
    background: var(--builder-select-background);
    box-shadow: var(--builder-select-shadow);
}

[data-control=select]:hover .input {
    background: var(--builder-select-background-hover);
    box-shadow: var(--builder-select-shadow);
}

[data-control=select].expand .options-wrapper {
    background-color: var(--gray-1000);
}

[data-control=select] li {
    line-height: 12px;
    box-shadow: none;
}

[data-control=select].expand .input {
    background-color: var(--builder-select-background-hover);
}

[data-control=select] li:last-child {
    border-radius: 0px 0px 4px 4px;
}

[data-control=select] li:first-child {
    border-top: 1px solid var(--gray-1100)
}

[data-control=spacing][data-type=spacing] input {
    border: 0;
}

[data-controlkey=_spacingSeparator] {
    margin-top: 8px;
}

[data-controlkey=_padding], [data-controlkey=_aspectRatio], [data-controlkey=_order], [data-controlkey=_breakAfter] {
    margin-bottom: 14px;
}

[data-control=textarea] {
    margin-top: 8px;
}

.bricks-panel .input, .bricks-panel input, .bricks-panel select {
    padding: 0px 6px;
}
.bricks-panel textarea {
    padding: 5px 8px;
}

.brxc-overlay__action-btn {
    padding: 2px 8px !important;
    font-size: 12px;
    border: 0px solid  !important;
}

.brxc-overlay__action-btn:hover {
    background: var(--yellow-500);
  ...
Reviews

No reviews yet.