use-theme-editor/docs/dist/main.css

Zero configuration CSS variables based theme editor

/*!****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js!./docs/src/style.scss ***!
  \****************************************************************************************************************************************************************************************************************/
html,
body {
  scroll-behavior: auto !important;
}

.theme-editor {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 100vh;
  text-align: start;
  background-color: var(--theme-editor--background-color, grey);
}
.theme-editor button, .theme-editor input {
  margin-right: 2px;
  border: 1px solid black;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 16px;
}
.theme-editor h4 {
  font-size: 18px !important;
  margin-top: 0 !important;
  margin-bottom: 8px;
  white-space: var(--theme-editor--h4--white-space, break-spaces);
}
.theme-editor h5 {
  font-size: 16px !important;
  margin-top: 0 !important;
}

.theme-length-controls {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.theme-length-controls .theme-length-control {
  display: inline-flex;
}
.theme-length-controls .theme-length-control input {
  margin-right: var(--theme-length-controls--theme-length-control--input--margin-right, 5px);
  text-align: var(--theme-length-controls--theme-length-control--input--text-align, right);
  min-width: var(--theme-length-controls--theme-length-control--input--min-width, 40px);
  max-width: var(--theme-length-controls--theme-length-control--input--max-width, 120px);
}
.theme-length-controls .theme-length-control > * {
  display: inline;
  flex-shrink: 2;
}

.scroll-in-view {
  opacity: 0.7;
}
.scroll-in-view:hover {
  opacity: 1;
}

.theme-editor *:not(.font-button):not(.monospace-code), .responsive-size-controls * {
  font-family: Roboto, sans-serif !important;
  color: black;
  line-height: initial !important;
}

.responsive-size-controls input {
  width: 90px;
}

.components-range-control__track {
  color: var(--theme-editor--range--color, #007cba) !important;
}

.simulating-touch-device body::-webkit-scrollbar {
  width: 12px;
}
.simulating-touch-device body::-webkit-scrollbar-track {
  border-radius: 5px;
  background: rgba(140, 140, 140, 0.2);
}
.simulating-touch-device body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(140, 140, 140, 0.6);
}
.simulating-touch-device body::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 140, 140, 0.9);
}
.simulating-touch-device body::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(140, 140, 140, 0.05);
}

.responsive-frame-container {
  transform-origin: 0 0;
}

.responsive-frame-container::-webkit-scrollbar {
  color: transparent;
  background-color: transparent;
}

.responsive-frame-container::-webkit-resizer {
  color: green;
  background-color: green;
}

.responsive-screen-options {
  z-index: 2;
  list-style-type: none;
}

html.hide-wp-admin-bar {
  margin-top: 0 !important;
}
html.hide-wp-admin-bar #wpadminbar {
  display: none;
}
html.hide-wp-admin-bar nav#header, html.hide-wp-admin-bar .top-navigation {
  top: 0;
}

.server-theme-list {
  flex-shrink: 0;
}

.server-theme {
  background: white;
  text-align: center;
  font-size: 14px;
  height: 21px;
  margin-bottom: 4px;
  clear: both;
}
.server-theme button {
  font-size: 14px;
  padding: 2px;
}

.server-theme-current {
  background: var(--server-theme-current--background, rgba(246, 246, 89, 0.63));
}

.theme-editor ul {
  margin-left: 0;
  padding-left: 0;
}

.group-list, .server-theme-list {
  padding: 0;
  overflow-y: scroll;
  margin-bottom: 0;
  min-width: var(--theme-editor--lists--min-width, 320px);
}
@media screen and (min-width: 800px) {
  .group-list, .server-theme-list {
    min-width: var(--screen--and--min-width--800px--theme-editor--lists--min-width, 360px);
  }
}
.group-list li, .server-theme-list li {
  list-style-type: none;
}
.group-list::-webkit-scrollbar, .server-theme-list::-webkit-scrollbar {
  width: 9px;
}
.group-list::-webkit-scrollbar-track, .server-theme-list::-webkit-scrollbar-track {
  border-radius: 5px;
  background: rgba(140, 140, 140, 0.2);
}
.group-list::-webkit-scrollbar-thumb, .server-theme-list::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(140, 140, 140, 0.4);
}
.group-list::-webkit-scrollbar-thumb:hover, .server-theme-list::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 140, 140, 0.5);
}
.group-list::-webkit-scrollbar-thumb:window-inactive, .server-theme-list::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(140, 140, 140, 0.05);
}

.theme-editor-menu {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.theme-editor-highlight {
  outline: 7px solid #efef05 !important;
  outline-offset: 8px !important;
}

.shadow-picker {
  width: 100% !important;
  background: transparent !important;
}

.var-group {
  background: white !important;
  border: 1px solid black !important;
  margin-bottom: 3px !important;
  border-radius: 7px !important;
  padding: 2px 7px 7px !important;
}
.var-group h4, .var-group h5 {
  clear: none;
  margin-bottom: 2px;
}

.var-control {
  clear: both;
  min-height: 57px;
  border: 1px solid black !important;
  margin-bottom: 3px !important;
  border-radius: 7px !important;
  padding: 0 7px 7px !important;
  background-color: var(--var-control--background-color, #e2e2e2);
}
.var-control h5 {
  clear: none;
  margin-bottom: 2px;
}

.var-control-in-theme {
  background-color: var(--var-control-in-theme--background-color, #fcfafa);
}

.var-control-no-match-screen {
  opacity: 0.3;
}
.var-control-no-match-screen:hover {
  opacity: 0.6;
}

.var-control-property {
  color: var(--var-control-property--color, inherit);
  background-color: var(--var-control-property--background-color, transparent);
  padding: var(--var-control-property--padding, 0 2px);
  border-radius: var(--var-control-property--border-radius, 4px);
}

.variable-screen-switcher {
  margin: 0 !important;
  opacity: 0.5;
  list-style-type: none;
  position: absolute;
  top: 21px;
  right: 7px;
}
.var-control:hover .variable-screen-switcher, .var-control:focus-within .variable-screen-switcher {
  opacity: 1;
}
.variable-screen-switcher li {
  display: inline-block;
  margin-left: 4px;
  vertical-align: top;
}
.variable-screen-switcher button {
  background: lightgray;
  border: 1px solid darkgray;
  border-radius: 3px;
  padding: 0;
  width: 45px;
  height: 42px;
  vertical-align: center;
}

.variable-screen-switcher-screen {
  display: block;
  padding: 0;
  margin: 0 auto;
  box-sizing: content-box;
  background: aquamarine;
  border: 1px solid gray;
  border-radius: 1px;
}

.usages-collapsed {
  max-height: 32px;
  max-width: 190px;
  overflow-y: hidden;
  overflow-x: hidden;
}

.usages-open {
  clear: both;
}

div[id^=font-picker] ul {
  position: static !important;
}

.usages-wrapper {
  position: relative;
  max-height: 32px;
  overflow: hidden;
}

.usages-wrapper:hover {
  overflow: visible;
}

.font-weight-control {
  display: flex;
  justify-content: space-between;
}
.font-weight-control .components-base-control {
  display: inline-block;
  width: 48%;
}

.fake-wp-button:hover {
  cursor: pointer;
}

.render-info {
  --bg-opacity: calc(var(--current-renders, 1) / max(var(--max-tracked-renders, 1), 2));
  background-color: rgba(255, 240, 17, var(--bg-opacity));
}

.theme-editor .history-button {
  font-size: 24px;
}

.content {
  min-height: 400px;
}

.area-switcher {
  max-width: 120px;
}

.area {
  z-index: 10000;
  display: flex;
  gap: 8px;
  background: transparent;
  align-items: flex-start;
}
.area > * {
  border: 1px solid dimgray;
  flex-shrink: 0;
}

#area-left, #area-right {
  max-width: 400px;
  scrollbar-gutter: stable;
  overflow-y: auto;
  overflow-x: visible;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
}
@media screen and (min-height: 350px) {
  #area-left, #area-right {
    max-height: calc(100vh - var(--top-area--height, 60px) - var(--bottom-area--height, 60px));
  }
}
#area-left .area-dropzone, #area-right .area-dropzone {
  transition: width, height 0.2s ease-in;
}
#area-left .area-switcher, #area-right .area-switcher {
  top: 0;
  right: 0;
}

#drawer .area-switcher {
  right: 0;
  top: 0;
  position: static !important;
}

#area-top .area-dropzone, #area-bottom .area-dropzone, #area-top-reverse .area-dropzone, #area-bottom-reverse .area-dropzone {
  transition: width, height 0.2s ease-in;
}

#area-bottom, #area-bottom-reverse {
  flex-grow: 1;
}
#area-bottom > .dispatched-element, #area-bottom-reverse > .dispatched-element {
  background: grey;
}

#area-top .area-switcher {
  bottom: 0;
  left: 0;
}

#area-bottom {
  position: fixed !important;
  bottom: 0;
  left: 0;
  z-index: 1000000;
  align-items: flex-end;
}
#area-bottom .area-switcher {
  z-index: 1000001;
  top: 4px;
  right: 0;
}
#area-bottom > * {
  max-height: 50vh;
  max-width: 50vw;
  overflow-y: auto;
}

.dropzone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33, 52, 26, 0.2);
}

.area-dropzone {
  width: 0;
  height: 0;
  align-self: flex-end;
}
.is-dragging .area-dropzone {
  flex-shrink: 1 !important;
  flex-grow: 1 !important;
  transition-timing-function: ease-out;
  width: auto;
  height: auto;
  align-self: stretch;
}
.is-dragging .area-dropzone:only-child {
  flex: 0;
}

.is-dragging #area-top .area-dropzone, .is-dragging #area-bottom .area-dropzone {
  min-width: 20px;
}
.is-dragging #area-top .area-dropzone:only-child, .is-dragging #area-bottom .area-dropzone:only-child {
  height: 30px;
}
.is-dragging #area-top .drag-hovered, .is-dragging #area-bottom .drag-hovered {
  border-left: 4px solid yellow;
  min-width: 120px;
}
.is-dragging #area-top-reverse .area-dropzone, .is-dragging #area-bottom-reverse .area-dropzone {
  min-width: 20px;
}
.is-dragging #area-top-reverse .area-dropzone:only-child, .is-dragging #area-bottom-reverse .area-dropzone:only-child {
  height: 30px;
}
.is-dragging #area-top-reverse .drag-hovered, .is-dragging #area-bottom-reverse .drag-hovered {
  border-right: 4px solid yellow;
  min-width: 120px;
}
.is-dragging #area-left .area-dropzone:only-child, .is-dragging #area-right .area-dropzone:only-child {
  width: 60px;
}
.is-dragging #area-left .drag-hovered, .is-dragging #area-right .drag-hovered {
  border-top: 4px solid yellow !important;
}
.is-dragging #drawer .drag-hovered {
  border-bottom: 4px solid yellow !important;
}

.movable-container {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  z-index: 10000;
  position: absolute;
  width: 100%;
  height: 100%;
}

.is-dragged {
  overflow: hidden;
}
.is-dragged > * {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.dispatched-element {
  min-width: 0;
  min-height: 0;
  transition: min-width, min-height 0.2s ease;
  transition-delay: 0.1s;
}

.is-dragging #area-left, .is-dragging #area-right {
  min-width: 140px;
}
.is-dragging #area-left .dispatched-element:not(.is-dragged), .is-dragging #area-right .dispatched-element:not(.is-dragged) {
  min-height: 20px;
}
.is-dragging #area-top, .is-dragging #area-bottom {
  transition: min-height;
  transition-delay: 0.1s;
}
.is-dragging #area-top .dispatched-element:not(.is-dragged), .is-dragging #area-bottom .dispatched-element:not(.is-dragged) {
  min-width: 20px;
}

#drawer-wrapper {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

#drawer {
  margin-top: 24px;
  position: absolute !important;
  bottom: 40px;
  right: 0;
  display: flex;
  flex-direction: column-reverse;
  transition: min-height 1s ease;
  transition-delay: 0.5s;
  align-self: flex-end;
  max-height: 70vh;
  overflow-y: auto;
}
#drawer[data-open=true] {
  background: grey;
  border: 2px solid black;
  border-radius: 4px;
  padding: 8px;
}

.is-dragging #drawer {
  align-self: stretch;
  border: 1px solid grey;
  min-height: 200px;
  min-width: 200px;
}
.is-dragging #drawer .area-dropzone {
  min-height: 32px;
  min-width: 120px;
}

#drawer-opener {
  min-height: 40px;
  flex-grow: 0 !important;
  font-size: 22px;
  text-align: center;
  background: lightblue;
}

.is-compact {
  overflow: visible !important;
}

.dispatched-element-collapse {
  position: absolute;
  padding-top: 2px;
  width: 24px;
  height: 24px;
  top: 0;
  right: 0;
}
#area-bottom .dispatched-element-collapse, #area-bottom-reverse .dispatched-element-collapse {
  top: auto;
  bottom: 0;
}

.monospace-code {
  display: inline-block;
  white-space: pre-wrap;
  font-family: monospace !important;
  font-size: var(--monospace-code--font-size, 16px);
  background: var(--monospace-code--background, white);
  border: var(--monospace-code--border, 1px solid gray);
  border-radius: var(--monospace-code--border-radius, 4px);
  padding: var(--monospace-code--padding, 2px);
}
.monospace-code .var-control-property {
  margin-left: var(--monospace-code--var-control-property--margin-left, 16px);
  color: var(--monospace-code--var-control-property--color, purple) !important;
}

.var-control:not([data-nesting-level="0"]):before {
  float: left;
  margin-right: 6px;
  margin-left: 3px;
  content: var(--var-control--not--data-nesting-level--0--before--content, "=");
  font-size: var(--var-control--not--data-nesting-level--0--before--font-size, 32px);
}

.var-control .var-control {
  border-radius: 2px !important;
  padding: 0 !important;
  border: none !important;
  padding-bottom: 12px !important;
}

#wpadminbar {
  display: none;
}

.history li {
  list-style-type: none;
}

.historical-actions {
  display: flex;
  flex-direction: column;
}
.historical-actions:not(:hover) button {
  visibility: hidden;
}
.historical-actions ul {
  margin: 0;
}

button {
  width: auto;
}

header.Header {
  position: var(--header--Header--position, static);
}

/*# sourceMappingURL=main.css.map*/