Created
January 21, 2026 14:51
-
-
Save KittenCodes/2fa900a8c61c31f088d36f4747c85996 to your computer and use it in GitHub Desktop.
Oxygen Builder 6 Light Mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This isn't perfect yet. If you have any problems, please get in touch via: | |
| https://winusoft.co.uk/contact/ | |
| If you're not sure how to use this CSS, please see the tutorial here: | |
| https://winusoft.co.uk/tutorial/how-to-use-stylus-to-customise-the-oxygen-builder-6-interface/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name WinuSoft Oxygen Builder 6 | |
| @version 20250418.06.40 | |
| @namespace ? | |
| ==/UserStyle== */ | |
| :root.is-oxygen { | |
| --ox-white: #fff; | |
| --ox-black: #000; | |
| --ox-black-60: #0009; | |
| --ox-black-70: #000b3; | |
| --ox-wp-admin-bg: #eee; | |
| --ox-table-row-2n: #f9fafb; | |
| --ox-gray50: #f9fafb; | |
| --ox-gray100: #f3f4f6; | |
| --ox-gray150: #eee; | |
| --ox-gray200: #e5e7eb; | |
| --ox-gray300: #d1d5db; | |
| --ox-gray400: #9ca3af; | |
| --ox-gray500: #6b7280; | |
| --ox-gray600: #4b5563; | |
| --ox-gray700: #374151; | |
| --ox-gray800: #1f2937; | |
| --ox-gray900: #111827; | |
| --ox-light-purple: #eceaf5; | |
| --ox-mid-purple: #c7c1e2; | |
| --ox-oxy-topbar-control-height: 36px; | |
| --icon-24: 24px; | |
| --ox-icon-size: 16px; | |
| --text-sm: 14px; | |
| --text-2xs: 12px; | |
| --oxygenActiveText: var(--ox-black); | |
| --oxygenActive: var(--ox-gray150); | |
| } | |
| /* Panels */ | |
| .is-oxygen .v-application, | |
| .theme--dark .breakdance-iframe-main-wrapper { | |
| background: var(--ox-white) !important; | |
| } | |
| .is-oxygen .breakdance-iframe-main-wrapper { | |
| padding: 8px; | |
| } | |
| .is-oxygen .breakdance-panel { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-iframe-inner-wrapper { | |
| box-shadow: 0 0 12px #0003, 0 0 30px #0000000d !important; | |
| } | |
| /* borders */ | |
| .borderOnRight>div { | |
| border-right: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .oxy-properties-panel-toolbar, | |
| .is-oxygen header.theme--dark.breakdance-topbar, | |
| .breakdance-topbar>.v-toolbar__content { | |
| border-color: var(--ox-gray200) !important; | |
| } | |
| /* header bar background */ | |
| .is-oxygen .theme--dark.breakdance-topbar { | |
| background-color: var(--ox-white) !important; | |
| } | |
| /* menu bar icons */ | |
| .is-oxygen .breakdance-topbar .breakdance-toolbar-icon-button, | |
| .is-oxygen .design-library-header .breakdance-toolbar-icon-button, | |
| .is-oxygen .breakdance-toolbar-icon-button.breakdance-toolbar-icon-button, | |
| .is-oxygen .document-chooser-search__icon-button { | |
| border-radius: 4px; | |
| background-color: var(--ox-gray50) !important; | |
| color: var(--ox-black) !important; | |
| border: 1px solid var(--ox-gray150) !important; | |
| height: var(--ox-oxy-topbar-control-height) !important; | |
| width: var(--ox-oxy-topbar-control-height) !important; | |
| } | |
| html.is-oxygen .topbar-section .breakdance-toolbar-icon-button>div.breakdance-icon { | |
| height: var(--ox-icon-size) !important; | |
| width: var(--ox-icon-size) !important; | |
| } | |
| .is-oxygen .breakdance-topbar .breakdance-toolbar-icon-button.breakdance-toolbar-icon-button-active, .is-oxygen .breakdance-topbar .breakdance-toolbar-icon-button:hover:not(.breakdance-toolbar-icon-button-disabled), .is-oxygen .design-library-header .breakdance-toolbar-icon-button.breakdance-toolbar-icon-button-active, .is-oxygen .design-library-header .breakdance-toolbar-icon-button:hover:not(.breakdance-toolbar-icon-button-disabled), | |
| .is-oxygen .document-chooser:hover, | |
| .is-oxygen .breakpoint-selection-oxygen:hover, | |
| .is-oxygen .oxygen-button-primary:hover, | |
| .is-oxygen .button-oxygen:hover, | |
| .is-oxygen .button-save-oxygen:hover, | |
| .is-oxygen .breakdance-toolbar-icon-button.breakdance-toolbar-icon-button:hover, | |
| .is-oxygen .document-chooser-search__icon-button:hover { | |
| background-color: var(--ox-gray150) !important; | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .document-chooser { | |
| border-radius: 4px; | |
| height: var(--ox-oxy-topbar-control-height) !important; | |
| background-color: var(--ox-gray50); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .document-chooser-type-label, | |
| .is-oxygen .document-chooser-text { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .breakpoint-selection-oxygen, .is-oxygen .oxygen-button-primary, | |
| .is-oxygen .button-oxygen, .is-oxygen .button-save-oxygen { | |
| background-color: var(--ox-gray50); | |
| border: 1px solid var(--ox-gray150); | |
| height: var(--ox-oxy-topbar-control-height); | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .v-autocomplete__content.v-menu__content.theme--dark, .is-oxygen .v-menu__content.theme--dark { | |
| box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f; | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .dropdown-content .v-list.v-sheet { | |
| background-color: var(--ox-white) !important; | |
| color: var(--ox-black); | |
| } | |
| .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) { | |
| color: var(--ox-black); | |
| } | |
| /* preferences menu - make the background purple so we know we're in Oxygen and not Breakdance */ | |
| .is-oxygen .theme--dark.v-list, .is-oxygen .theme--dark.v-sheet { | |
| background-color: var(--ox-light-purple) !important; | |
| border-color: var(--ox-white) !important; | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .preferences-tab-area, .is-oxygen .preferences-content-area>div, | |
| .is-oxygen .breakdance-tabs__tab { | |
| background-color: var(--ox-gray50) !important; | |
| } | |
| .is-oxygen .preferences-panel-topbar { | |
| background-color: var(--ox-white) !important; | |
| } | |
| .is-oxygen .preferences-panel-heading { | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .preferences-panel-content-area, .is-oxygen .preferences-bottom-panel { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .ui-panel-title, .ui-setting .v-label { | |
| color: var(--ox-gray800); | |
| } | |
| .is-oxygen .theme--dark .breakdance-tabs__tab.v-tab--active { | |
| color: var(--ox-black); | |
| } | |
| .theme--dark.v-tabs>.v-tabs-bar .v-tab--disabled, .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon { | |
| color: var(--ox-black-60); | |
| } | |
| .is-oxygen .v-tab:before, .is-oxygen .v-tabs-slider { | |
| background-color: var(--ox-black); | |
| } | |
| .is-oxygen .breakdance-white-gray-outlined-input.theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { | |
| background-color: var(--ox-gray50); | |
| color: var(--ox-black); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .document-chooser-filters .v-text-field .v-input__slot { | |
| background-color: var(--ox-gray50) !important; | |
| border: transparent !important; | |
| } | |
| .is-oxygen .theme--dark.v-input, .is-oxygen .theme--dark.v-input input, .is-oxygen .theme--dark.v-input textarea, | |
| .is-oxygen .theme--dark.v-select .v-select__selections { | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .theme--dark.v-select .v-select__selections input::placeholder { | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .theme--dark.v-text-field--filled:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover, | |
| .is-oxygen .breakdance-white-gray-outlined-input, .breakdance-white-gray-outlined-input .v-input__control>.v-input__slot:hover { | |
| background-color: var(--ox-gray150) !important; | |
| color: var(--ox-black) !important; | |
| } | |
| .is-oxygen .breakdance-button-bar-input .v-btn:not(.v-btn--text):not(.v-btn--outlined).v-btn--active:before, | |
| .is-oxygen .controls-tree .v-btn:not(.v-btn--text):not(.v-btn--outlined).v-btn--active:before { | |
| background-color: var(--ox-gray150); | |
| } | |
| .is-oxygen .breakdance-button-bar-input .v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn, | |
| .is-oxygen .controls-tree .v-btn-toggle:not(.v-btn-toggle--group) .v-btn.v-btn { | |
| border-color: var(--ox-gray300) !important; | |
| } | |
| .is-oxygen .v-btn__content { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .custom-font-family-titlebar { | |
| background-color: var(--ox-grey50); | |
| } | |
| .is-oxygen .custom-font-family { | |
| border: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .custom-font-family-title { | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .custom-font-family-font-face { | |
| border: 1px solid var(--ox-gray200); | |
| background-color: var(--ox-gray50); | |
| } | |
| .is-oxygen .custom-font-family-font-face-titlebar-title { | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .theme--dark.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot fieldset { | |
| color: var(--ox-gray200); | |
| } | |
| .is-oxygen .theme--dark.v-label { | |
| color: var(--ox-black-70); | |
| } | |
| .is-oxygen .custom-font-family-edit { | |
| border-top: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .v-icon__svg { | |
| fill: var(--ox-black); | |
| } | |
| .is-oxygen .theme--dark.v-icon { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen button.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn-outlined) { | |
| background: var(--ox-gray100) !important; | |
| color: inherit !important; | |
| } | |
| .is-oxygen .v-application .blue, .is-oxygen .v-application .blue span { | |
| color: var(--ox-white); | |
| } | |
| .is-oxygen .theme--dark.v-btn { | |
| border: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .theme--dark.v-btn:hover { | |
| color: var(--ox-grey50) !important; | |
| } | |
| .is-oxygen .preferences-empty-state { | |
| border: 3px dashed var(--ox-gray100); | |
| } | |
| .is-oxygen .add-breakpoint-form-content-wrapper, | |
| .is-oxygen .media-query-box-items { | |
| border: 2px solid var(--ox-gray50); | |
| } | |
| .is-oxygen .breakdance-panel-header-close-button.breakdance-toolbar-icon-button, .is-oxygen .breakdance-toolbar-icon-button { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .breakdance-toolbar-icon-button { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-toolbar-icon-button:not(.breakdance-toolbar-icon-button-disabled):not(.breakdance-toolbar-icon-button-active):hover { | |
| background-color: var(--ox-gray100); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .breakdance-nice-button { | |
| border-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .breakdance-nice-button { | |
| color: var(--ox-gray700) !important; | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| min-height: 36px; | |
| } | |
| .is-oxygen .breakdance-nice-button:focus, .is-oxygen .breakdance-nice-button:hover { | |
| background-color: var(--ox-gray200); | |
| border-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .breakdance-dialog-contents, | |
| .is-oxygen .v-card__actions { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .theme--dark.v-card>.v-card__subtitle, .is-oxygen .theme--dark.v-card>.v-card__text { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .theme--dark.v-btn.v-btn--has-bg { | |
| color: var(--ox-gray700) !important; | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .v-btn:before { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .theme--dark.v-btn.v-btn--has-bg:hover, .is-oxygen .v-btn:hover::before{ | |
| background-color: var(--ox-gray200); | |
| border-color: var(--ox-gray300); | |
| } | |
| /* Properties Panel */ | |
| .is-oxygen .properties-panel-accordion { | |
| border-bottom: 1px solid var(--ox-gray200); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .properties-panel-accordion-titlebar { | |
| background-color: var(--ox-gray50); | |
| color: var(--ox-gray800); | |
| } | |
| .is-oxygen .breakdance-add-panel-search { | |
| background-color: var(--ox-white); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .search-input .breakdance-white-gray-outlined-input, .is-oxygen .search-input .v-text-field .v-input__slot { | |
| border-color: var(--ox-gray200); | |
| } | |
| .is-oxygen .breakdance-white-gray-outlined-input, .is-oxygen .breakdance-white-gray-outlined-input .is-oxygen .v-input__control>.v-input__slot:hover { | |
| background-color: var(--ox-white) !important; | |
| } | |
| .is-oxygen .v-application .d-flex { | |
| gap: 8px; | |
| } | |
| .is-oxygen .breakdance-panel-header-title, .is-oxygen .properties-panel-titlebar-title { | |
| font-size: var(--text-sm); | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .breakdance-add-panel-search .breakdance-white-gray-outlined-input { | |
| border: 1px solid var(--ox-gray200) !important; | |
| margin-top: 4px; | |
| margin-bottom: 4px; | |
| } | |
| .is-oxygen .breakdance-add-panel-search.d-flex { | |
| border-bottom: 0; | |
| } | |
| .is-oxygen .properties-panel-accordion-titlebar:hover { | |
| background-color: var(--ox-gray200); | |
| } | |
| .is-oxygen .breakdance-add-panel__element { | |
| background-color: var(--ox-gray50); | |
| color: var(--ox-black); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .breakdance-add-panel__element.breakdance-add-panel__element--selected, .is-oxygen .breakdance-add-panel__element:hover { | |
| background-color: var(--ox-gray150) !important; | |
| color: var(--ox-black) !important; | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .oxy-properties-panel-toolbar, | |
| .is-oxygen .borderOnLeft > div { | |
| border-color: var(--ox-gray200); | |
| } | |
| .is-oxygen .structure-node-action__icon { | |
| color: var(--ox-gray400); | |
| } | |
| .is-oxygen .structure-node-icon { | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .structure-node-title-real-real .element-title-text { | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .structure-node-title-wrapper:hover { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .structure-node.is-opened:hover .structure-node-children:after { | |
| background-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .structure-node-title-real-real .element-title-text { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .breakdance--active-element .breakdance-icon, .is-oxygen .breakdance--active-element .element-title-text { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .structure-node-title-real-real { | |
| background-color: var(--ox-white); | |
| border: unset; | |
| } | |
| .is-oxygen .breakdance--active-element .structure-node-action__icon { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .structure-panel-editing-friendly-name input { | |
| background-color: transparent !important; | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .structure-node-action__icon:hover { | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .breakdance-control-modifier-icon { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .oxy-control.oxy-control--accordion:nth-child(odd) .oxy-accordion-content, | |
| .is-oxygen .oxy-controls.oxy-controls-root .oxy-control.oxy-control--accordion:nth-child(odd) { | |
| background-color: var(--ox-gray50); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .oxy-control.oxy-control--accordion:nth-child(even) .oxy-accordion-content, | |
| .is-oxygen .oxy-controls.oxy-controls-root .oxy-control.oxy-control--accordion:nth-child(even) { | |
| background-color: var(--ox-white); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .oxy-control--accordion { | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| /* Selector Panel */ | |
| .is-oxygen .oxy-class-selector-breakpoint { | |
| color: var(--ox-gray600); | |
| background-color: var(--ox-gray50); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .oxy-class-token { | |
| background-color: var(--ox-gray50); | |
| color: var(--ox-gray600); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .oxy-class-token.oxy-class-token--active { | |
| background-color: var(--ox-gray200); | |
| color: var(--ox-gray600); | |
| } | |
| .is-oxygen .oxy-btn-bar { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .oxy-btn-bar-item { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .oxy-btn-bar-item.oxy-btn-bar-item--active { | |
| color: var(--ox-gray800); | |
| background-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .oxy-btn-bar-item:hover { | |
| background-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .oxy-btn-bar-indicator { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .oxy-align-grid { | |
| border: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .oxy-align-grid-point-dot { | |
| background: var(--oxgray300); | |
| } | |
| .is-oxygen .oxy-control-name, .is-oxygen .oxy-class-token, | |
| .is-oxygen .breakdance-simple-input--text, .is-oxygen .breakdance-simple-text-input { | |
| font-size: var(--text-2xs); | |
| } | |
| .is-oxygen .margin-left-drag-bar, .is-oxygen .margin-right-drag-bar, .is-oxygen .padding-left-drag-bar, .is-oxygen .padding-right-drag-bar { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .margin-padding-input-drag-bar-value--filled { | |
| color: var(--ox-white); | |
| background-color: var(--oxy-control-value-filled-bg); | |
| } | |
| .is-oxygen .oxy-margin-oxy-padding-drag-bars-wrapper, | |
| .is-oxygen .oxy-margin-drag-bars:before { | |
| border-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .margin-padding-input-dropdown { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .margin-padding-input-preset { | |
| background-color: var(--ox-gray100); | |
| color: var(--ox-black); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen input.breakdance-white-gray-outlined-input { | |
| border-color: var(--ox-gray300) !important; | |
| } | |
| .is-oxygen .margin-padding-input-drag-bar--active, .margin-padding-input-drag-bar:hover { | |
| background-color: var(--ox-gray300) !important; | |
| } | |
| .is-oxygen .oxy-padding-drag-bars { | |
| border-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .oxy-padding-drag-bars:before { | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .oxy-control-name { | |
| font-size: var(--text-2xs); | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .is-control-filled > .oxy-control-name, | |
| .is-oxygen .is-control-filled.oxy-control-name{ | |
| color: var(--ox-white); | |
| } | |
| .is-oxygen .dropdown-header { | |
| background-color: var(--ox-white); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .dropdown-drag-icon, .is-oxygen .dropdown-title, .is-oxygen .dropdown-action-icon { | |
| color: var(--ox-gray800) !important; | |
| } | |
| .is-oxygen .breakdance-white-gray-outlined-input, | |
| .is-oxygen .breakdance-white-gray-outlined-input .v-input__control>.v-input__slot:hover { | |
| background-color: var(--ox-white) !important; | |
| } | |
| .is-oxygen .breakdance-white-gray-outlined-input { | |
| border: 1px solid var(--ox-gray300) !important; | |
| } | |
| .is-oxygen .dropdown-action-icon:hover { | |
| color: var(--ox-black) !important; | |
| background-color: var(--ox-gray150); | |
| } | |
| .is-oxygen .v-list--dense .v-list-item .v-list-item__subtitle, | |
| .is-oxygen .v-list--dense .v-list-item .v-list-item__title, | |
| .is-oxygen .v-list-item--dense .v-list-item__subtitle, | |
| .is-oxygen .v-list-item--dense .v-list-item__title { | |
| font-size: var(--text-2xs); | |
| } | |
| .is-oxygen .oxy-control-name:hover { | |
| background-color: var(--ox-gray200); | |
| color: var(--ox-gray600); | |
| } | |
| .is-oxygen .oxy-class-token-actions-list .v-subheader { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .theme--dark.v-divider { | |
| border-color: var(--ox-gray150); | |
| } | |
| .is-oxygen .oxy-tabs-item { | |
| color: var(--ox-gray400); | |
| } | |
| .is-oxygen .oxy-tabs { | |
| box-shadow: 0 -1px inset var(--ox-gray200); | |
| border-top: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .breakdance-repeater--popup.breakdance-repeater--filled .breakdance-repeater-draggable { | |
| border: 1px solid var(--ox-gray200); | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .breakdance-repeater-item-title-text { | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .repeater-item-popup__item:hover { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .repeater-item-popup__item .repeater-item-popup__actions, | |
| .is-oxygen .repeater-item-popup__item .repeater-item-popup__item-drag { | |
| opacity: 1; | |
| display: flex; | |
| } | |
| .breakdance-canvas-right-click-menu { | |
| background-color: #fff; | |
| } | |
| .breakdance-canvas-right-click-menu-item { | |
| color: #000; | |
| } | |
| .breakdance-canvas-right-click-menu-divider { | |
| background-color: #e5e7eb; | |
| } | |
| .breakdance-canvas-right-click-menu-item:hover:not( .breakdance-canvas-right-click-menu-item-disabled ) { | |
| background-color: #eee; | |
| } | |
| .is-oxygen .theme--dark.v-application { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .repeater-item-popup__item--expanded { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .variable-repeater-item__icon { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .breakdance-control-wrapper .breakdance-control-wrapper-control-label { | |
| color: var(--ox-gray800); | |
| } | |
| .is-oxygen .theme--dark .breakdance-color-swatch, .is-oxygen .theme--light .breakdance-color-swatch--light { | |
| border: 1px solid var(--ox-gray300); | |
| } | |
| .is-oxygen .breakdance-color-swatch { | |
| background: var(--ox-gray100) url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity="1"><path d="M200 0h200v200H200zM0 200h200v200H0z"/></svg>'); | |
| } | |
| .is-oxygen .breakdance-color-swatch__color:before { | |
| background-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .theme--dark.v-chip { | |
| border-color: var(--ox-gray300); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .popout-section-open-icon { | |
| color: var(--ox-gray800); | |
| } | |
| .is-oxygen .popout-section-open-icon:hover { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .oxy-tag-chooser .v-select__slot:hover { | |
| background-color: var(--ox-gray100); | |
| } | |
| .is-oxygen .oxy-tag-chooser .v-select__slot { | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .breakdance-button-bar-input .v-btn:not(.v-btn--text):not(.v-btn--outlined):before, | |
| .is-oxygen .controls-tree .v-btn:not(.v-btn--text):not(.v-btn--outlined):before { | |
| background-color: var(--ox-gray300); | |
| } | |
| .is-oxygen .breakdance-button-bar-input .v-btn.v-btn--has-bg, | |
| .is-oxygen .breakdance-control-wrapper .v-btn.v-btn--has-bg, | |
| .is-oxygen .theme--dark.v-btn-toggle:not(.v-btn-toggle--group) { | |
| background-color: var(--ox-white) !important; | |
| } | |
| /* Default – all hover controls visible */ | |
| .is-oxygen .breakdance-control-wrapper > div > * > .breakdance-only-on-hover { | |
| opacity: 1 !important; | |
| } | |
| /* Exception – if disabled dropdown is inside, hide the whole block */ | |
| .is-oxygen .breakdance-control-wrapper > div > * > .breakdance-only-on-hover:has(.dropdown[disabled="disabled"]) { | |
| opacity: 0 !important; | |
| } | |
| .is-oxygen .dynamic-data-fields-header { | |
| background: var(--ox-gray50); | |
| border-top: 1px solid var(--ox-gray200); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .dynamic-data-fields-category__title { | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .dynamic-data-fields-field__title { | |
| border: 1px solid var(--ox-gray300); | |
| font-size: var(--text-2xs); | |
| } | |
| .is-oxygen .dynamic-data-fields-category+.dynamic-data-fields-category { | |
| border-top: 1px solid var(--ox-gray100); | |
| } | |
| .is-oxygen .breakdance-control-modifier-icon:hover { | |
| background-color: var(--ox-gray100); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .dynamic-data-fields-field__title:hover { | |
| background-color: var(--ox-gray200); | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .breakdance-url-input-open-dialog { | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .component-editable-property-settings { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-add-panel__element-name { | |
| font-size: var(--text-2xs); | |
| } | |
| .is-oxygen .breakdance-component-input__icon, .is-oxygen .breakdance-global-block-input__icon { | |
| color: var(--ox-gray600); | |
| } | |
| .is-oxygen .ͼo { | |
| background-color: var(--ox-white); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .theme--dark .code-input.code-input--inline { | |
| border-color: var(--ox-gray200); | |
| } | |
| .is-oxygen .code-input-toggle-fullscreen { | |
| color: var(--ox-black); | |
| opacity: 1; | |
| background-color: var(--ox-gray50); | |
| border: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .ͼo .cm-gutters { | |
| background-color: var(--ox-white); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .code-input-dialog-header { | |
| background-color: var(--ox-gray50); | |
| border-bottom-color: var(--ox-gray150); | |
| } | |
| .is-oxygen .code-input-dialog-title { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .code-input-dialog-close { | |
| background-color: var(--ox-gray50); | |
| } | |
| .is-oxygen .theme--dark.v-subheader { | |
| color: var(--ox-black); | |
| font-weight: 700; | |
| } | |
| /* scrollbar */ | |
| /* Target your element */ | |
| .v-menu__content { | |
| scrollbar-width: thin; /* Firefox */ | |
| scrollbar-color: #888 #f1f1f1; /* thumb color | track color */ | |
| } | |
| /* WebKit-based browsers */ | |
| .v-menu__content::-webkit-scrollbar { | |
| width: 8px; /* vertical scrollbar width */ | |
| height: 8px; /* horizontal scrollbar height */ | |
| } | |
| .v-menu__content::-webkit-scrollbar-track { | |
| background: #f1f1f1; /* track (background) */ | |
| } | |
| .v-menu__content::-webkit-scrollbar-thumb { | |
| background-color: #888; /* draggable part */ | |
| border-radius: 4px; | |
| border: 2px solid #f1f1f1; /* space around thumb */ | |
| } | |
| .v-menu__content::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* grid controls when working on a class */ | |
| .is-oxygen .breakdance-repeater__no-data-message { | |
| border: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .breakdance-repeater-add-icon-button.breakdance-toolbar-icon-button.breakdance-toolbar-icon-button-xs-button { | |
| width: var(--icon-24) !important; | |
| height: var(--icon-24) !important; | |
| } | |
| .is-oxygen .oxy-collection__title { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .variables-chooser-variable { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .repeater-item-accordion-title { | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-multiselect-chip { | |
| background-color: var(--ox-gray50); | |
| border: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .theme--dark.v-list-item:not(.v-list-item--disabled) .v-list-item__action-text, | |
| .is-oxygen .theme--dark.v-list-item:not(.v-list-item--disabled) .v-list-item__subtitle { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .theme--dark .breakpoint-active { | |
| background-color: var(--ox-gray200) !important; | |
| } | |
| /* variable panels */ | |
| .is-oxygen .oxy-collection-header__title:hover { | |
| background-color: var(--ox-gray200); | |
| } | |
| .is-oxygen input.oxy-collection__title { | |
| background-color: var(--ox-gray50) !important; | |
| } | |
| .is-oxygen .oxy-collection-empty-state { | |
| border-color: var(--ox-gray200); | |
| color: var(--ox-gray400); | |
| } | |
| /* Element Studio */ | |
| .is-oxygen .element-studio-top-bar { | |
| background-color: var(--ox-white); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| color: var(--ox-gray900); | |
| } | |
| .is-oxygen .breakdance-element-studio-searchbar { | |
| background: var(--ox-white); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .theme--dark.v-text-field>.v-input__control>.v-input__slot:before { | |
| border-color: var(--ox-gray150); | |
| } | |
| .is-oxygen .theme--dark.v-tabs>.v-tabs-bar { | |
| background-color: #1e1e1e; | |
| } | |
| .is-oxygen .element-studio-tabs { | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .theme--dark.v-tabs>.v-tabs-bar { | |
| background-color: var(--ox-gray50); | |
| } | |
| .is-oxygen .repeater-item-accordion-controls { | |
| border: 1px solid var(--ox-gray300); | |
| } | |
| /* history */ | |
| .is-oxygen .breakdance-tab--active { | |
| background-color: var(--ox-gray50); | |
| color: var(--grayox-700); | |
| border-bottom: 2px solid var(--ox-gray600); | |
| } | |
| .is-oxygen .revisions-item, .is-oxygen .snapshots-item { | |
| color: var(--ox-gray500); | |
| } | |
| .is-oxygen .revisions-item:hover, .is-oxygen .revisions-item:hover:not(.revisions-item--selected), .is-oxygen .revisions-item:nth-child(odd):hover, .is-oxygen .snapshots-item:hover, .is-oxygen .snapshots-item:hover:not(.revisions-item--selected), .is-oxygen .snapshots-item:nth-child(odd):hover { | |
| background-color: var(--ox-gray300); | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .breakdance-tab:hover { | |
| background-color: var(--ox-gray50); | |
| } | |
| /* navigator dropdown */ | |
| .is-oxygen .document-chooser-filters, .is-oxygen .document-chooser-search { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .document-chooser-filters .v-text-field { | |
| border: 1px solid var(--ox-gray200) !important; | |
| background-color: var(--ox-white) !important; | |
| } | |
| /* CARRY ON HERE */ | |
| /* selected text in input field */ | |
| .is-oxygen input::selection, | |
| .is-oxygen textarea::selection { | |
| background: var(--ox-gray50); /* highlight background */ | |
| } | |
| .is-oxygen .v-input__slot { | |
| background-color: var(--ox-white) !important; | |
| border: 1px solid var(--ox-gray150) !important; | |
| } | |
| .is-oxygen .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot { | |
| background: var(--ox-gray150); | |
| } | |
| .is-oxygen input::-moz-selection, | |
| .is-oxygen textarea::-moz-selection { | |
| background: var(--ox-gray50); /* highlight background */ | |
| color: #000; | |
| } | |
| /* NEW */ | |
| .is-oxygen .ͼo .cm-cursor, .ͼo .cm-dropCursor { | |
| border-left-color: var(--ox-black); | |
| } | |
| .is-oxygen input.breakdance-simple-input::selection, | |
| .is-oxygen textarea.breakdance-simple-input::selection, | |
| .is-oxygen input.breakdance-simple-number-input::selection { | |
| background-color: var(--ox-gray150) !important; | |
| } | |
| .is-oxygen .breakdance-icon-input-icon { | |
| background-color: var(--ox-white); | |
| border: 1px solid var(--ox-gray100); | |
| } | |
| .is-oxygen .icon-chooser-toolbar { | |
| background: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-icon-input { | |
| border: 1px solid var(--ox-gray300); | |
| } | |
| .is-oxygen .has-transparency-layer { | |
| background: var(--ox-white) url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1"><path d="M200 0h200v200H200zM0 200h200v200H0z"/></svg>'); | |
| } | |
| .is-oxygen .breakdance-link-input-action { | |
| border: 1px solid var(--ox-gray300); | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-link-input-input { | |
| border: 1px solid var(--ox-gray300); | |
| } | |
| .is-oxygen .breakdance-link-input-input textarea { | |
| border: none !important; | |
| } | |
| .is-oxygen .conditional-control-display-visible .breakdance-control-wrapper > div > * > .breakdance-only-on-hover:has(.dropdown[disabled="disabled"]) { | |
| opacity: 1 !important; | |
| } | |
| .is-oxygen .is-variable > .oxy-control-name, .oxy-control-name.is-variable { | |
| color: var(--ox-white); | |
| } | |
| .is-oxygen .breakdance-dialog .breakdance-dialog-contents p { | |
| color: var(--ox-gray600); | |
| } | |
| /* design library */ | |
| .is-oxygen .design-library-header { | |
| background-color: var(--ox-white); | |
| border-bottom: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .design-library-dialog .design-library-sidebar { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .design-library-sidebar { | |
| border-right: 1px solid var(--ox-gray200); | |
| } | |
| .is-oxygen .design-library-contents, .is-oxygen .design-library-iframe-wrapper { | |
| background-color: var(--ox-gray50); | |
| } | |
| .is-oxygen .design-library-sidebar-header { | |
| border-bottom: 1px solid var(--ox-gray200); | |
| background-color: var(--ox-gray50); | |
| } | |
| .is-oxygen .theme--dark.v-treeview { | |
| color: var(--ox-black); | |
| } | |
| .is-oxygen .design-library-sidebar .v-treeview-node__label { | |
| color: var(--ox-gray700); | |
| } | |
| .is-oxygen .theme--dark .breakpoint-active, | |
| .is-oxygen .theme--dark .document-chooser-item-selected { | |
| background-color: var(--ox-gray150) !important; | |
| } | |
| .is-oxygen .document-chooser-item-selected { | |
| background: var(--ox-gray100); | |
| } | |
| .is-oxygen .preview-content-chooser-dialog-search-form-wrapper { | |
| border-bottom: 1px solid var(--ox-gray150); | |
| } | |
| .is-oxygen .dynamic-data-fields-field--selected { | |
| background: var(--ox-gray200); | |
| } | |
| .is-oxygen .breakdance-notification-error { | |
| background-color: var(--ox-white); | |
| } | |
| .is-oxygen .uniforn-notification-message-action-button { | |
| border: 1px solid var(--ox-gray700); | |
| color: var(--ox-gray700); | |
| } | |
| /* Jan 2026 */ | |
| .is-oxygen .is-filled>.oxy-display-value, .is-oxygen .oxy-display-value.is-filled { | |
| background-color: var(--ox-mid-purple); | |
| } | |
| .ͼs { | |
| color: var(--ox-black); | |
| } | |
| .ͼq { | |
| color: blue; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment