Bricksbuilder tweaks

bricks builder css

/* --- Make highlight of the active element in structure more prominent --- */
#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent);
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active>.structure-item input::selection {
  color: #fff;
  background: #1a99e0;
}

#bricks-structure .element.active > .structure-item:hover .actions .action .bricks-svg-wrapper path {
	fill: #111;
}

/* --- Make + button more prominent */

#bricks-toolbar .logo {
	background-color: #818689;
}
#bricks-toolbar .logo:hover {
	background-color: var(--builder-color-accent);
}

#bricks-toolbar li.elements {
	background-color: var(--builder-color-accent);
	opacity: 1;
}
#bricks-toolbar li.elements:hover {
	background-color: #edca5b;
}

#bricks-toolbar li.elements .bricks-svg-wrapper .bricks-svg {
	color: var(--builder-border-color);
}

/* --- Make active STYLE panel more prominent */

.bricks-panel-controls .control-group.open .control-group-title {
	background-color: var(--builder-color-accent);
	color: #000;
	font-weight: 600;
	letter-spacing: 2px;
}

.control-group.open {
	background-color: #161614;
}

/* --- Make controls separators more prominent */

.bricks-panel-controls .control-groups .control-separator {
	background-color: var(--builder-bg-accent);
	margin: 0;
	padding: 10px 20px;
}

.bricks-panel-controls .control-separator label {
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 11px;
	padding: 0;
}

.bricks-panel-controls .control-separator .control-inner {
	gap: 0;
}

.bricks-panel-controls .control {
	margin-bottom: 8px;
}

[data-control=separator]:before {
	display: none;
}
/* --- Make active class prominent */

#bricks-panel-element-classes .active-class.active input {
	background-color: var(--wp--preset--color--light-green-cyan);
	color: #000;
}

/* --- Turn off 0.5 opacity of element states svgs --- */
#bricks-structure .structure-item .element-states svg {
	opacity: 1;
}