@vuestic/compiler/dist/devtools/client/style.css

Combination of bundling tools focusing on improving development experience when working with Vuestic UI

@import "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap";@import "https://fonts.googleapis.com/icon?family=Material+Icons";
.va-devtools-outline[data-v-e435855f] {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.va-devtools-overlay[data-v-1a4b2b08] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.color-option__color[data-v-32b4dcc4] {
  margin-right: 8px;
}
.color-option__option[data-v-32b4dcc4] {
  display: flex;
  align-items: center;
}.checkbox-option__box {
  height: 36px;
  display: flex;
  align-items: center;
}.number-option[data-v-f94fa3ea] {
  width: 100%;
  display: flex;
  gap: 0.25rem;
  align-items: start;
}
.number-option__input[data-v-f94fa3ea] {
  width: 100%;
  flex: 1 !important;
}
.number-option__reset-button[data-v-f94fa3ea] {
  margin-top: 1.1rem;
}.not-avaliable-option {
  opacity: 0.5;
}
.not-avaliable-option__box {
  height: 36px;
  display: flex;
  align-items: center;
}.component-props {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.component-props .va-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  letter-spacing: 0.6px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  min-height: 1rem;
  display: block;
  color: var(--va-primary);
}.component-slots[data-v-406ffc41] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}.code-preview-wrapper {
  display: flex;
  flex-direction: column;
}
.code-preview-wrapper__actions {
  display: flex;
  margin-top: 8px;
}
.code-preview {
  position: relative;
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  min-width: max-content;
  --padding: 16px;
}
.code-preview__view {
  height: 100%;
  width: 100%;
  flex: 1;
  background: var(--va-background-element);
  padding: var(--padding);
  border-radius: 4px;
}
.code-preview__view pre, .code-preview__view code {
  height: 100%;
}
.code-preview__view .shiki {
  background: transparent !important;
}
.code-preview .code-preview__textarea {
  padding: var(--padding);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent;
  border: none;
  resize: none;
  box-sizing: border-box;
  overflow: hidden;
}
.code-preview__view code, .code-preview__view pre, .code-preview__textarea {
  line-height: 1.3em;
  font-size: var(--mono-font-size);
  font-family: var(--mono-font);
  border: var(--border);
}
.code-preview__textarea {
  color: transparent;
  z-index: 2;
  caret-color: var(--va-primary);
}.va-devtools-source-code[data-v-b5b804cb] {
  --border-radius: 4px;
}
.va-devtools-source-code__toolbar[data-v-b5b804cb] {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  background: var(--va-background-border);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.va-devtools-source-code__file-name[data-v-b5b804cb] {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding: 0 0.5rem;
}
.va-devtools-source-code__code[data-v-b5b804cb] {
  overflow: auto;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}.va-devtools-flex-editor[data-v-87ddd91c] {
  display: flex;
  gap: 8px;
}.va-devtools-layout-editor--no-flex-container[data-v-dbda30fa] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}.c-component-view[data-v-68d86a66] {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2rem);
}
.c-component-view__tabs[data-v-68d86a66] {
  width: 100%;
}
.c-component-view__tabs-content[data-v-68d86a66] {
  padding-top: 1rem;
  flex: 1;
}
.c-component-view__content[data-v-68d86a66] {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  max-width: 100%;
}
.c-component-view__toolbar[data-v-68d86a66] {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  gap: 0.5rem;
  background: var(--va-background-element);
}
.c-component-view__toolbar h1[data-v-68d86a66] {
  font-size: 18px;
}.draggable-window {
  position: fixed;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: visible;
  z-index: 1;
}
.draggable-window__header {
  display: flex;
  justify-content: center;
  cursor: move;
  user-select: none;
}.app-tree-item__children[data-v-81da84db] {
  padding: 0 0 0 1rem;
  border-left: 1px dashed var(--va-background-border);
}
.app-tree-item__button[data-v-81da84db] {
  margin-left: -1rem;
}.va-devtools-app-tree[data-v-c3d9e271] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.va-devtools-app-tree__items[data-v-c3d9e271] {
  flex: 1;
  padding: 0.5rem 1rem;
  overflow: auto;
}.va-devtools-component-select-item[data-v-e5e09e9d] {
  cursor: pointer;
}.div[data-v-00ae6796] {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
}.va-devtools-component-select[data-v-52a5d047] {
  width: max-content;
}
.va-devtools-component-select__components[data-v-52a5d047] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-height: 50vh;
  overflow-y: auto;
  padding: 1rem;
}
.va-devtools-component-select__components-list[data-v-52a5d047] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}.va-devtools-toolbar {
  width: max-content !important;
  display: flex;
}
.va-devtools-toolbar .va-divider {
  margin: 0;
}.va-open-devtools-button[data-v-6c2af2b4] {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  top: 90%;
  right: 0px;
  background-color: var(--va-background-secondary);
  color: var(--va-on-primary);
  padding: 0.75rem 0.75rem;
  white-space: nowrap;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
}
.va-open-devtools-button__close[data-v-6c2af2b4] {
  transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out;
  height: 0;
  overflow: hidden;
}
.va-open-devtools-button:hover .va-open-devtools-button__close[data-v-6c2af2b4] {
  height: 1rem;
  margin-top: 1rem;
}body {
  position: relative;
}
.vuestic-devtools__right-sidebar {
  width: 400px;
  box-sizing: border-box;
  height: calc(100vh - 1rem);
}
.vuestic-devtools__left-sidebar {
  width: 300px;
  box-sizing: border-box;
  height: calc(100vh - 45px - 1rem);
}
.vuestic-devtools .va-card {
  background: none !important;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
}
.vuestic-devtools .va-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--va-background-secondary);
  pointer-events: none;
  opacity: 0.5;
}
.vuestic-devtools__dropdown_content {
  background: none !important;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(5px);
}
.vuestic-devtools__dropdown_content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--va-background-secondary);
  pointer-events: none;
  opacity: 0.5;
}body{background-color:var(--va-background-primary);color:var(--va-on-background-primary);transition:var(--va-transition)}:root,:host{--va-border: 0;--va-font-family: "Source Sans Pro", sans-serif;--va-letter-spacing: .0375rem;--va-block-border-radius: .375rem;--va-block-border: thin solid var(--va-background-element);--va-block-box-shadow: 0 2px 3px 0 rgba(52, 56, 85, .25);--va-control-box-shadow: none;--va-control-border: 0;--va-transition: .2s cubic-bezier(.4, 0, .6, 1);--va-swing-transition: .3s cubic-bezier(.25, .8, .5, 1);--va-outline-border-width: .125rem;--va-outline-box-shadow: none;--va-square-border-radius: .25rem;--va-form-padding: 1.25rem;--va-form-border-radius: .125rem;--va-text-selected: #b3d4fc;--va-text-highlighted: #ffc5274e;--va-link-color: var(--va-primary);--va-link-color-secondary: var(--va-secondary);--va-link-color-hover: var(--va-primary-lighten, --va-primary);--va-link-color-active: var(--va-primary);--va-link-color-visited: var(--va-primary-darken, --va-primary);--va-muted: #7f828b;--va-li-background: var(--va-primary);--va-text-block: var(--va-background-element);--va-stripe-border-size: .25rem;--va-box-shadow: 0 .25rem .5rem 0 var(--va-shadow);--va-z-index-teleport-overlay: 1000;--va-form-element-min-width: 50px;--va-form-element-default-width: 250px;--va-form-element-default-width-small: 120px;--va-form-element-border-width: 1px;--va-form-element-border-radius: .25rem;--va-gap-small: .25rem;--va-gap-medium: .375rem;--va-gap-large: .75rem}.va-background-watcher{transition:.01s background-color linear}