Editor Tweak for Oxygen Builder – codes

<?php add_action( 'oxygen_enqueue_ui_scripts', 'wpdd_custom_css_oxygen_editor' );
/**
* Load custom CSS in the Oxygen editor.
*/
function wpdd_custom_css_oxygen_editor() {
// if this is not an Oxygen editor page, abort.
if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
return;
}

$css = '

/*ROOT VARIABLES OVERRIDE*/

		:root{
				--oxy-dark: #18191a !important;
				--oxy-mid: #242526 !important;
				--oxy-hover: #7b66ff4f !important;
				--oxy-light-text: #e1e1e1 !important;
				--oxy-ui-font-family: "inter", "system-ui", sans-serif !important;
				--oxy-small-text-size: 11px !important;
				--oxy-medium-text-size: 13px !important;
				--oxy-big-text-size: 15px !important;
			}

/* RIGHT PANEL*/		


		/* panel name */
		
		body .oxygen-sidepanel-header-row {   
		font-size: 1.3rem;
		color: var(--oxy-active);    
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 2px;
		}

		/*top of panel*/	

		body .ct-elements-managers-top {					
			margin: 0;				
			background: var(--oxy-dark);
			width: 100%;
			padding: 16px;
		}

		
		body .oxygen-sidepanel-header-row {   
		background: var(--oxy-dark);			
		}

		body .ct-elements-managers-top-item.ct-button {
		font-size: 10px;			
		text-transform: uppercase;
		letter-spacing: 0.5px;
		}
		
		body .ct-elements-managers-top-item.ct-button img {			
		width: 10px;				
		}

		body .oxygen-close-icon {			
		transition: transform 0.25s;
		}

		body .oxygen-close-icon:hover {
		transform: scale(1.3);
		}

		/* body icon on structure tree*/
		
		body .ct-dom-parent-icon:before {    
		content: "\2770";		
		}

		/*change expanded icon*/

		body .ct-expand-butt.expanded > span.ct-icon:before {
		content: "\21E3" !important;
		width: 20px;
		}

		/* align expand icon */

		body .ct-expand-butt.ng-scope:not(.expanded){
			top: -1.5px;
			left: -15px;		
		}
		
		/*increase clickable area of expand icon*/

		body .ct-expand-butt.ng-scope.expanded span {
			display: inline-grid;
		}

		/*change collapse icon*/

		body .ct-expand-butt span.ct-icon:before {
		content: "\21E2";
		}


		/*element structure*/

		body .dom-tree-node .dom-tree-node-label {
			min-width: 100% !important;
		}

		body .sub-tree:after {
			border-left: 1px solid rgba(255, 255, 255, 0.3);
		}

		body .sub-tree .dom-tree-node:before {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
		}			


		body .sub-tree .dom-tree-node:last-child:after {
		background: var(--oxy-mid);
		}

		body .ct-expand-butt {   
		left: -20px;
	}

		body .sub-tree .ct-expand-butt:after {
			background: transparent;		
		}

		body .oxy-drag-handle:hover, 
		body .oxy-drag-handle 	 {
		opacity: 0;
		}

		/* left and bottom border on element structure*/
		body .dom-tree-node-label {
		background-color: var(--oxy-mid);    
		border-left: solid 1px #7b66ff87 !important;
		border-bottom: solid 1px #7b66ff87 !important;
		}

		/* hover effect on element name */
		body .dom-tree-node-label.ng-scope:hover .title {
		transform: translateX(5px)			
		}

		body .dom-tree-node-label.ng-scope .title {
		transition: transform 0.25s;
		font-family: inter;
		letter-spacing: 0.2px;			
		}

		/* slight tilt when parent element is dragged */
		body .dom-tree-node-dragged .dom-tree-node-label{
		rotate: 5deg;
		transition: rotate 0.4s;        
		}

		/* to make structure panel slide out*/
		body .ct-panel-elements-managers {
		transition: 0.25s !important;
		}

/*TOP BAR*/

		body #oxygen-topbar {   
		border-bottom: 2px solid var(--oxy-mid);		
		}


		body .oxygen-toolbar-menus > div{		
			transition: transform 0.25s !important			
		}

		
		body .oxygen-media-query-panel .tippy-content, body .tippy-content {
		font-size: 10px;
		color: var(--oxy-light-text);
		}

		body .oxygen-media-queries-repeater [data-tippy-root] {
		border-top: none;
		margin-top: -10px !important;
		}

		body .oxygen-media-query-panel .oxy-media-query-tooltip-clear-action {
		display: grid;
		place-items: center;    
		font-size: 14px;    
		padding: 0; 
		line-height: 1;
		padding-bottom: 2px;
		padding-right: 1.5px;
		border-radius: 50%;
		}



/*LEFT PANEL*/

		/* element breadcrumbs */

		body .oxygen-active-element-breadcrumb span {
		color: var(--oxy-light-text);			
		text-transform: uppercase;
		font-size: 8px;
		letter-spacing: 1px;
		}

		body .oxygen-active-element-breadcrumb span:hover {
		color: white;
		}

		
	    /*hover background on flexbox controls*/

		.oxygen-sidebar-control-panel-basic-styles:not(.oxygen-basic-styles-subtub) 
		.oxygen-icon-button-list-option-icon-wrapper:hover {
		background-color: var(--oxy-hover)
			}

		.oxygen-sidebar-control-panel-basic-styles:not(.oxygen-basic-styles-subtub) 
		.oxygen-control-rows-multiple-inset .oxygen-icon-button-list-option-icon-wrapper:hover {			
		background-color: var(--oxy-hover)					
		}

		/*set max-width on flexbox control wrap*/

		.oxygen-icon-button-list-option{
			max-width: 60px;
			}

		/* remove labels on under flex controls */
		body .oxygen-icon-button-list-option-label {    
		display: none;
		}
	
		/* labels font style */
		body .oxygen-control-label {
		font-size: 10px;
		color: #ffffffdb;
		margin-bottom: 6px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		}

		/* spacing between controls */
		body .oxygen-control-row {				
		margin-bottom: 20px;				
		}

		/*add element panel*/	

		body .oxygen-add-button:hover, 
		body .oxygen-save-button:hover {
		background-color: #009688;
		}	

		body .oxygen-add-section-accordion-contents h2 {   
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		font-size: 10px;
		}

		body .oxygen-add-section-accordion {    
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		}

		body .oxygen-add-section-element {
       margin: 0
		}

		body .oxygen-add-section-accordion-contents {
			gap: 12px;
		}

		/* primary and advanced tab */

		body .oxygen-sidebar-tabs-tab {  
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		font-size: 12px;			
		}

		/* advanced settings labels */
		body .oxygen-sidebar-advanced-subtab span {			
		letter-spacing: 1px;
		color: var(--oxy-light-text);
		transition: transform 0.25s;
		}

		/* advanced settings labels icon */
		body .oxygen-sidebar-advanced-subtab img {   
		transition: 0.25s;
		}

		body .oxygen-sidebar-advanced-subtab:hover span{    
		color: white;
		transform: translateX(20%)
		}

		body .oxygen-sidebar-advanced-subtab:hover img{ 			
		transform: translateX(40%);			
		}

		/* repeater query filter select drop down */
		body.ng-scope .select2-container--default .select2-results__group {			
		font-size: 11px;
		font-weight: 500;
		}

		body .oxygen-sidebar-control-panel-basic-styles
		.oxygen-sidebar-advanced-subtab:hover {
			background-color: var(--oxy-hover);
		}

		
/* CENTER VIEWPORT */
		body #ct-viewport-container {  
		display: grid;
		place-items: center;
		background: var(--oxy-dark);
		}

		body .oxygen-hide-sidebar-wrapper {   
		left: 0;
		}

		#ct-artificial-viewport {   
		will-change: width;
		transition: width 0.2s;
		}

		

		
/* INPUTS */

		body .oxygen-has-id-value:not(.oxygen-measure-box) {
		transition-delay: 0.3s;
		}	

		body .oxygen-measure-box,
		body .oxygen-control input {    
		background-color: #3a3b3c !important;
	}



		body .oxygen-toolbar-menus > div:hover {
		opacity: 1;
		}

		body .oxygen-toolbar-menus > div {
		opacity: 0.7;
		transition: opacity 0.3s;
		}

		body .oxygen-media-query-panel .oxygen-media-queries-item img {
		opacity: 0.6;			
		}

		.oxygen-has-id-value + .oxygen-control-label{
		color: #ffd27c !important
		}

		.oxygen-has-id-value ~ .oxygen-control  .oxygen-measure-box-selected-unit {
			color: rgb(138, 194, 255) !important;
			text-shadow: 0px 0px 5px rgb(117 217 255);
		opacity: 1 !important;
		}

		.oxygen-has-id-value.oxygen-has-class-value ~ .oxygen-control  .oxygen-measure-box-selected-unit {
	color: rgb(255 203 55) !important;
				text-shadow: 0px 0px 5px rgb(255 180 64) !important;
	}


	.oxygen-control-wrapper:not(.oxygen-basic-styles-flex-alignment-wrapper):has(.oxygen-has-id-value)  .oxygen-control-label {
		color: rgb(138, 194, 255) !important;
			text-shadow: 0px 0px 5px rgb(117 217 255);
	}


	body .oxygen-control-wrapper:has(.oxygen-has-id-value.oxygen-has-class-value)  .oxygen-control-label {
		color: rgb(255 203 55) !important;
			text-shadow: 0px 0px 5px rgb(255 180 64) !important;
	}

	.oxygen-has-id-value   .oxygen-measure-box-selected-unit {
					color: rgb(138, 194, 255) !important;
					text-shadow: 0px 0px 5px rgb(117 217 255);
				opacity: 1 !important;
	}

	.oxygen-has-id-value.oxygen-has-class-value   .oxygen-measure-box-selected-unit {
   color: rgb(255 203 55) !important;
			text-shadow: 0px 0px 5px rgb(255 180 64) !important;

}

	body input.ng-not-empty + .oxygen-measure-box-unit-selector .oxygen-measure-box-selected-unit,
	input.ng-not-empty + .oxygen-measure-box-unit-selector {
		color: #34ff8e;
		opacity: 1;
		text-shadow: 0px 0px 5px rgb(52 255 142);
	}

	body .oxygen-control-wrapper:has(.oxy-not-empty-color-value)  .oxygen-control-label {
    color: rgb(138 255 204) !important;
    text-shadow: 0px 0px 5px rgb(117 255 156) !important;
	}

	.oxygen-control-wrapper:has(.ng-not-empty)  .oxygen-control-label {
    color: rgb(138 255 204) !important;
       text-shadow: 0px 0px 5px rgb(117 255 156) !important;
}

	input.ng-pristine.ng-untouched.ng-valid.ng-not-empty {
	background: black !important;
	}

	body .oxygen-button-list .oxygen-button-list-button {  
		color: var(--oxy-light-text);  
	}
	

	body .oxygen-measure-box input[placeholder="content..."] {  
	background: var(--oxy-dark);
	}

	

/* CUSTOM SCROLLBAR */

	
		body .oxygen-sidebar-control-panel::-webkit-scrollbar-track,
		body #ct-dom-tree-2::-webkit-scrollbar-track {

		background-color: gray;
		}

		body .oxygen-sidebar-control-panel::-webkit-scrollbar,
		body #ct-dom-tree-2::-webkit-scrollbar {
			width: 5px;
			background-color: #F5F5F5;
		}

		body .oxygen-sidebar-control-panel::-webkit-scrollbar-thumb,
			body #ct-dom-tree-2::-webkit-scrollbar-thumb {			
			background-color: #555;
		}




';

wp_add_inline_style( 'oxygen', $css );
}

<?php add_action( 'oxygen_enqueue_ui_scripts', 'wpdd_custom_css_oxygen_editor' );
/**
* Load custom CSS in the Oxygen editor.
*/
function wpdd_custom_css_oxygen_editor() {
// if this is not an Oxygen editor page, abort.
if ( ! defined( 'SHOW_CT_BUILDER' ) ) {
return;
}

$css = '

/*ROOT VARIABLES OVERRIDE*/

			:root {
					--oxy-dark: #383838 !important;
					--oxy-mid: #4a4a4a !important;
					--oxy-hover: #7b66ff4f !important;
					--oxy-light-text: #ffff !important;
					--oxy-ui-font-family: "inter", "system-ui", sans-serif !important;
					--oxy-small-text-size: 11px !important;
					--oxy-medium-text-size: 13px !important;
					--oxy-big-text-size: 15px !important;
				}

/* RIGHT PANEL*/		


		/* panel name */
		
		body .oxygen-sidepanel-header-row {   
		font-size: 1.3rem;
		color: #858585;    
		font-weight: 400;
		text-transform: uppercase;
		letter-spacing: 2px;
		}

		/*top of panel*/	

		body .ct-elements-managers-top {					
			margin: 0;				
			background: var(--oxy-dark);
			width: 100%;
			padding: 16px;
		}

		
		body .oxygen-sidepanel-header-row {   
		background: var(--oxy-dark);			
		}

		body .ct-elements-managers-top-item.ct-button {
		font-size: 10px;			
		text-transform: uppercase;
		letter-spacing: 0.5px;
		}
		
		body .ct-elements-managers-top-item.ct-button img {			
		width: 10px;				
		}

		body .oxygen-close-icon {			
		transition: transform 0.25s;
		}

		body .oxygen-close-icon:hover {
		transform: scale(1.3);
		}

		/* body icon on structure tree*/
		
		body .ct-dom-parent-icon:before {    
		content: "\2770";		
		}

		/*change expanded icon*/

		body .ct-expand-butt.expanded > span.ct-icon:before {
		content: "\21E3" !important;
		width: 20px;
		}

		/* align expand icon */

		body .ct-expand-butt.ng-scope:not(.expanded){
			top: -1.5px;
			left: -15px;		
		}
		
		/*increase clickable area of expand icon*/

		body .ct-expand-butt.ng-scope.expanded span {
			display: inline-grid;
		}

		/*change collapse icon*/

		body .ct-expand-butt span.ct-icon:before {
		content: "\21E2";
		}


		/*element structure*/

		body .dom-tree-node .dom-tree-node-label {
			min-width: 100% !important;
		}

		body .sub-tree:after {
			border-left: 1px solid rgba(255, 255, 255, 0.3);
		}

		body .sub-tree .dom-tree-node:before {
			border-top: 1px solid rgba(255, 255, 255, 0.3);
		}			


		body .sub-tree .dom-tree-node:last-child:after {
		background: var(--oxy-mid);
		}

		body .ct-expand-butt {   
		left: -20px;
	}

		body .sub-tree .ct-expand-butt:after {
			background: transparent;		
		}

		body .oxy-drag-handle:hover, 
		body .oxy-drag-handle 	 {
		opacity: 0;
		}

		/* left and bottom border on element structure*/

		body .dom-tree-node-label {
	    background-color: var(--oxy-mid);
		border-left: solid 1px #2c2c2c !important;
		border-bottom: solid 1px #2c2c2c !important;
		}

		/* hover effect on element name */
		body .dom-tree-node-label.ng-scope:hover .title {
		transform: translateX(5px)			
		}

		body .dom-tree-node-label.ng-scope .title {
		transition: transform 0.25s;
		font-family: inter;
		letter-spacing: 0.2px;			
		}

		/* slight tilt when parent element is dragged */
		body .dom-tree-node-dragged .dom-tree-node-label{
		rotate: 5deg;
		transition: rotate 0.4s;        
		}

		/* to make structure panel slide out*/
		body .ct-panel-elements-managers {
		transition: 0.25s !important;
		}

/*TOP BAR*/

		body #oxygen-topbar {   
		border-bottom: 2px solid var(--oxy-mid);		
		}
	

		body .oxygen-toolbar-menus > div{		
			transition: transform 0.25s !important			
		}

		
		body .oxygen-media-query-panel .tippy-content, body .tippy-content {
		font-size: 10px;
		color: var(--oxy-light-text);
		}

		body .oxygen-media-queries-repeater [data-tippy-root] {
		border-top: none;
		margin-top: -10px !important;
		}

		body .oxygen-media-query-panel .oxy-media-query-tooltip-clear-action {
		display: grid;
		place-items: center;    
		font-size: 14px;    
		padding: 0; 
		line-height: 1;
		padding-bottom: 2px;
		padding-right: 1.5px;
		border-radius: 50%;
		}



/*LEFT PANEL*/

		/* element breadcrumbs */

		body .oxygen-active-element-breadcrumb span {
		color: var(--oxy-light-text);			
		text-transform: uppercase;
		font-size: 8px;
		letter-spacing: 1px;
		}

		body .oxygen-active-element-breadcrumb span:hover {
		color: white;
		}

		
	    /*hover background on flexbox controls*/

		.oxygen-sidebar-control-panel-basic-styles:not(.oxygen-basic-styles-subtub) 
		.oxygen-icon-button-list-option-icon-wrapper:hover {
		background-color: var(--oxy-hover)
			}

		.oxygen-sidebar-control-panel-basic-styles:not(.oxygen-basic-styles-subtub) 
		.oxygen-control-rows-multiple-inset .oxygen-icon-button-list-option-icon-wrapper:hover {			
		background-color: var(--oxy-hover)					
		}

		/*set max-width on flexbox control wrap*/

		.oxygen-icon-button-list-option{
			max-width: 60px;
			}

		/* remove labels on under flex controls */
		body .oxygen-icon-button-list-option-label {    
		display: none;
		}
	
		/* labels font style */
		body .oxygen-control-label {
		font-size: 10px;
		color: #ffffffdb;
		margin-bottom: 6px;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		}

		/* spacing between controls */
		body .oxygen-control-row {				
		margin-bottom: 20px;				
		}

		/*add element panel*/	

		body .oxygen-add-button:hover, 
		body .oxygen-save-button:hover {
		background-color: #009688;
		}	

		body .oxygen-add-section-accordion-contents h2 {   
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		font-size: 10px;
		}

		body .oxygen-add-section-accordion {    
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		}

		body .oxygen-add-section-element {
       margin: 0
		}

		body .oxygen-add-section-accordion-contents {
			gap: 12px;
		}

		/* primary and advanced tab */

		body .oxygen-sidebar-tabs-tab {  
		text-transform: uppercase;
		letter-spacing: 1px;
		font-weight: 500;
		font-size: 12px;			
		}

		/* advanced settings labels */
		body .oxygen-sidebar-advanced-subtab span {			
		letter-spacing: 1px;
		color: var(--oxy-light-text);
		transition: transform 0.25s;
		}

		/* advanced settings labels icon */
		body .oxygen-sidebar-advanced-subtab img {   
		transition: 0.25s;
		}

		body .oxygen-sidebar-advanced-subtab:hover span{    
		color: white;
		transform: translateX(20%)
		}

		body .oxygen-sidebar-advanced-subtab:hover img{ 			
		transform: translateX(40%);			
		}

		/* repeater query filter select drop down */
		body.ng-scope .select2-container--default .select2-results__group {			
		font-size: 11px;
		font-weight: 500;
		}

		body .oxygen-sidebar-control-panel-basic-styles
		.oxygen-sidebar-advanced-subtab:hover {
			background-color: var(--oxy-hover);
		}

		
/* CENTER VIEWPORT */
		body #ct-viewport-container {  
		display: grid;
		place-items: center;
		background: var(--oxy-dark);
		}

		body .oxygen-hide-sidebar-wrapper {   
		left: 0;
		}

		#ct-artificial-viewport {   
		will-change: width;
		transition: width 0.2s;
		}

		

		
/* INPUTS */

		body .oxygen-has-id-value:not(.oxygen-measure-box) {
		transition-delay: 0.3s;
		}	

		body .oxygen-measure-box {
		background: #2b2b2b;
		}

		body .oxygen-toolbar-menus > div:hover {
		opacity: 1;
		}

		body .oxygen-toolbar-menus > div {
		opacity: 0.7;
		transition: opacity 0.3s;
		}

		body .oxygen-media-query-panel .oxygen-media-queries-item img {
		opacity: 0.6;			
		}

		.oxygen-has-id-value + .oxygen-control-label{
		color: #ffd27c !important
		}

		.oxygen-has-id-value ~ .oxygen-control  .oxygen-measure-box-selected-unit {
			color: rgb(138, 194, 255) !important;
			text-shadow: 0px 0px 5px rgb(117 217 255);
		opacity: 1 !important;
		}

		.oxygen-has-id-value.oxygen-has-class-value ~ .oxygen-control  .oxygen-measure-box-selected-unit {
	color: rgb(255 203 55) !important;
				text-shadow: 0px 0px 5px rgb(255 180 64) !important;
	}


	.oxygen-control-wrapper:not(.oxygen-basic-styles-flex-alignment-wrapper):has(.oxygen-has-id-value)  .oxygen-control-label {
		color: rgb(138, 194, 255) !important;
			text-shadow: 0px 0px 5px rgb(117 217 255);
	}


	body .oxygen-control-wrapper:has(.oxygen-has-id-value.oxygen-has-class-value)  .oxygen-control-label {
		color: rgb(255 203 55) !important;
			text-shadow: 0px 0px 5px rgb(255 180 64) !important;
	}

	.oxygen-has-id-value   .oxygen-measure-box-selected-unit {
					color: rgb(138, 194, 255) !important;
					text-shadow: 0px 0px 5px rgb(117 217 255);
				opacity: 1 !important;
	}

	.oxygen-has-id-value.oxygen-has-class-value   .oxygen-measure-box-selected-unit {
   color: rgb(255 203 55) !important;
			text-shadow: 0px 0px 5px rgb(255 180 64) !important;

}

	body input.ng-not-empty + .oxygen-measure-box-unit-selector .oxygen-measure-box-selected-unit,
	input.ng-not-empty + .oxygen-measure-box-unit-selector {
		color: #34ff8e;
		opacity: 1;
		text-shadow: 0px 0px 5px rgb(52 255 142);
	}

	body .oxygen-control-wrapper:has(.oxy-not-empty-color-value)  .oxygen-control-label {
    color: rgb(138 255 204) !important;
    text-shadow: 0px 0px 5px rgb(117 255 156) !important;
	}

	.oxygen-control-wrapper:has(.ng-not-empty)  .oxygen-control-label {
    color: rgb(138 255 204) !important;
       text-shadow: 0px 0px 5px rgb(117 255 156) !important;
}

	body input.ng-pristine.ng-untouched.ng-valid.ng-not-empty:not(.oxygen-color-picker input) {
    background: #383838 !important;
}

	body .oxygen-button-list .oxygen-button-list-button {  
		color: var(--oxy-light-text);  
	}
	

	body .oxygen-measure-box input[placeholder="content..."] {  
	background: var(--oxy-dark);
	}

	

body .oxygen-sidebar-control-panel-basic-styles:not(.oxygen-basic-styles-subtub) .oxygen-measure-box{
    background: #2b2b2b;;
}


	

/* CUSTOM SCROLLBAR */

	
		body .oxygen-sidebar-control-panel::-webkit-scrollbar-track,
		body #ct-dom-tree-2::-webkit-scrollbar-track {

		background-color: gray;
		}

		body .oxygen-sidebar-control-panel::-webkit-scrollbar,
		body #ct-dom-tree-2::-webkit-scrollbar {
			width: 5px;
			background-color: #F5F5F5;
		}

		body .oxygen-sidebar-control-panel::-webkit-scrollbar-thumb,
			body #ct-dom-tree-2::-webkit-scrollbar-thumb {			
			background-color: #555;
		}




';

wp_add_inline_style( 'oxygen', $css );
}