Fancy UI for Breakdance

Warning

This snippet is just a little experiment I have made for myself, so use it at your own risk.
The main purpose was to make the UI a little bit more readable, especially the structure panel. Both mode (dark and light) are supported.

Special thx to Noahj Champion for the PHP code.

A sexier structure panel

The structure panel was way too small, which makes it hard to read, especially when you have many sections.

This new version is a bit more convenient, each section are well separated and the font is a bit bigger.

fancy-ui-structure-before
fancy-ui-structure-after-dark
fancy-ui-structure-after-light

A fancier property panel

  • The breakpoints and hover icons are now always visible. No need to move the mouse around a property to see if we can set different value for each breakpoint, or if the hover effect is available.

  • The Scrollbar looks nicer than the horrible default scrollbar on Windows (work with Chrome. Not sure how it looks like on other browsers and OS).

  • The Unit where moved a little, to make the input field a tad more visible. It doesn't change much but in some case it can be useful, as you can see with the transition duration field:

fancy-ui-properties-before
fancy-ui-properties-after-light
fancy-ui-properties-after-dark

The magic snippet

Copy and paste the following snippet in your fav snippet manager:

<?php

// @version->1.2
// https://gist.github.com/theperfectwill/ca18a3dc88aaa97669054deee7ef3b0d
// Load custom styles for the Breakdance editing screen

add_action('breakdance_loaded', function() {
$thisBuilderQuery = $_GET['breakdance'] ?? false;
$thisBrowseQuery = $_GET['mode'] ?? false;
$thisPostIdQuery = $_GET['id'] ?? false;
if (!is_admin() and ($thisBuilderQuery === 'builder')) {
if ($thisBrowseQuery === 'browse' or $thisPostIdQuery != '') {
echo "<style id='fancystyle' type='text/css'>"; ?>

.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:.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:.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{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{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}
.v-application .v-dialog__content{height:auto;top:50px;bottom:50px}.v-application .v-dialog:not(.v-dialog--fullscreen){max-height:unset}
.v-application .breakdance-add-panel__item-wrapper { height:auto }
.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 }

<?php echo "</style>";
}
}
}, PHP_INT_MAX);

The ugly error!

If you get some PHP warnings or some other weird stuff, you might need to add these lines in your wp-config.php file:

ini_set('display_errors','Off');
ini_set('error_reporting', E_ALL );
define('WP_DEBUG', false);
define('WP_DEBUG_DISPLAY', false);