/* ../../../../var/folders/xk/3z83zd3j7rsb_9ztht_1mk8c0000gn/T/tmp-68410-EWG07XjCeYwz/shoelace/src/styles/dark.css */ .sl-theme-dark { --sl-input-background-color: var(--sl-color-gray-900); --sl-input-background-color-hover: var(--sl-color-gray-900); --sl-input-background-color-focus: var(--sl-color-gray-900); --sl-input-background-color-disabled: var(--sl-color-gray-800); --sl-input-border-color: var(--sl-color-gray-700); --sl-input-border-color-hover: var(--sl-color-gray-600); --sl-input-border-color-focus: var(--sl-color-primary-500); --sl-input-border-color-disabled: var(--sl-color-gray-200); --sl-input-border-color-invalid: var(--sl-color-danger-500); --sl-input-font-family: var(--sl-font-sans); --sl-input-font-weight: var(--sl-font-weight-normal); --sl-input-font-size-small: var(--sl-font-size-small); --sl-input-font-size-medium: var(--sl-font-size-medium); --sl-input-font-size-large: var(--sl-font-size-large); --sl-input-letter-spacing: var(--sl-letter-spacing-normal); --sl-input-border-color: var(--sl-color-gray-700); --sl-input-border-color-hover: var(--sl-color-gray-600); --sl-input-border-color-focus: var(--sl-color-primary-400); --sl-input-border-color-disabled: var(--sl-color-gray-700); --sl-input-border-color-invalid: var(--sl-color-danger-500); --sl-input-color: var(--sl-color-gray-200); --sl-input-color-hover: var(--sl-color-gray-200); --sl-input-color-focus: var(--sl-color-gray-200); --sl-input-color-disabled: var(--sl-color-gray-100); --sl-input-color-invalid: var(--sl-color-danger-600); --sl-input-icon-color: var(--sl-color-gray-500); --sl-input-icon-color-hover: var(--sl-color-gray-300); --sl-input-icon-color-focus: var(--sl-color-gray-300); --sl-input-placeholder-color: var(--sl-color-gray-600); --sl-input-placeholder-color-disabled: var(--sl-color-gray-500); --sl-overlay-background-color: #d1d5db22; --sl-panel-background-color: var(--sl-color-gray-900); --sl-panel-border-color: var(--sl-color-gray-800); --sl-tooltip-background-color: var(--sl-color-gray-200); --sl-tooltip-color: var(--sl-color-black); } .sl-theme-dark sl-alert::part(base) { background-color: var(--sl-color-gray-900); border-left-color: var(--sl-color-gray-800); border-right-color: var(--sl-color-gray-800); border-bottom-color: var(--sl-color-gray-800); color: var(--sl-color-gray-200); } .sl-theme-dark sl-avatar::part(base) { background-color: var(--sl-color-gray-700); color: var(--sl-color-gray-300); } .sl-theme-dark sl-button[type=default]::part(base) { background-color: var(--sl-color-gray-900); border-color: var(--sl-color-gray-700); color: var(--sl-color-gray-400); } .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):hover { background-color: var(--sl-color-primary-950); border-color: var(--sl-color-primary-800); color: var(--sl-color-primary-400); } .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):focus { background-color: var(--sl-color-primary-950); border-color: var(--sl-color-primary-800); color: var(--sl-color-primary-400); box-shadow: 0 0 0 var(--sl-focus-ring-width) hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha)); } .sl-theme-dark sl-button[type=default]:not([disabled])::part(base):active { background-color: var(--sl-color-primary-900); border-color: var(--sl-color-primary-700); color: var(--sl-color-primary-300); } .sl-theme-dark sl-card::part(base) { background-color: var(--sl-color-gray-900); --border-color: var(--sl-color-gray-800); } .sl-theme-dark sl-checkbox::part(control), .sl-theme-dark sl-radio::part(control) { color: var(--sl-color-gray-900); } .sl-theme-dark sl-color-picker::part(format-button) { background-color: var(--sl-color-gray-900); border-color: var(--sl-color-gray-700); color: var(--sl-color-gray-400); } .sl-theme-dark sl-color-picker::part(format-button):hover { background-color: var(--sl-color-primary-950); border-color: var(--sl-color-primary-800); color: var(--sl-color-primary-400); } .sl-theme-dark sl-color-picker::part(format-button):focus { background-color: var(--sl-color-primary-950); border-color: var(--sl-color-primary-800); color: var(--sl-color-primary-400); box-shadow: 0 0 0 var(--sl-focus-ring-width) hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha)); } .sl-theme-dark sl-color-picker::part(format-button):active { background-color: var(--sl-color-primary-900); border-color: var(--sl-color-primary-700); color: var(--sl-color-primary-300); } .sl-theme-dark sl-color-picker::part(panel) { background-color: var(--sl-color-gray-900); border-color: var(--sl-color-gray-800); } .sl-theme-dark sl-color-picker::part(slider-handle) { background-color: var(--sl-color-gray-800); box-shadow: 0 0 0 1px var(--sl-color-gray-600); } .sl-theme-dark sl-color-picker::part(slider-handle):focus { box-shadow: 0 0 0 1px var(--sl-color-primary-500), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary); } .sl-theme-dark sl-color-picker::part(grid-handle) { border-color: var(--sl-color-gray-900); } .sl-theme-dark sl-color-picker::part(preview), .sl-theme-dark sl-color-picker::part(opacity-slider), .sl-theme-dark sl-color-picker::part(trigger) { background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, #333 25%, transparent 25%); } .sl-theme-dark sl-color-picker::part(swatches) { border-top-color: var(--sl-color-gray-800); } .sl-theme-dark sl-details::part(base) { border-color: var(--sl-color-gray-800); } .sl-theme-dark sl-icon-button::part(base) { color: var(--sl-color-gray-400); } .sl-theme-dark sl-icon-button:not([disabled])::part(base):hover, .sl-theme-dark sl-icon-button:not([disabled])::part(base):focus { color: var(--sl-color-primary-500); } .sl-theme-dark sl-icon-button:not([disabled])::part(base):active { color: var(--sl-color-primary-400); } .sl-theme-dark sl-image-comparer::part(divider), .sl-theme-dark sl-image-comparer::part(handle) { background-color: var(--sl-color-gray-900); color: var(--sl-color-gray-400); } .sl-theme-dark sl-menu-item::part(base) { color: var(--sl-color-gray-200); } .sl-theme-dark sl-menu-item::part(base):focus { background-color: var(--sl-color-primary-600); color: var(--sl-color-white); } .sl-theme-dark sl-menu-item[disabled]::part(base) { color: var(--sl-color-gray-600); } .sl-theme-dark sl-menu-label::part(base) { color: var(--sl-color-gray-600); } .sl-theme-dark sl-progress-bar::part(base) { background-color: var(--sl-color-gray-800); } .sl-theme-dark sl-progress-bar::part(indicator) { color: var(--sl-color-gray-900); } .sl-theme-dark sl-progress-ring::part(base) { --track-color: var(--sl-color-gray-800); } .sl-theme-dark sl-range { --track-color: var(--sl-color-gray-800); } .sl-theme-dark sl-rating { --symbol-color: var(--sl-color-gray-700); } .sl-theme-dark sl-select::part(tag) { background-color: var(--sl-color-info-800); border-color: var(--sl-color-info-700); color: var(--sl-color-info-300); } .sl-theme-dark sl-skeleton { --color: var(--sl-color-gray-800); --sheen-color: var(--sl-color-gray-700); } .sl-theme-dark sl-spinner { --track-color: #f9fafb20; } .sl-theme-dark sl-switch::part(thumb) { background-color: var(--sl-color-gray-900); } .sl-theme-dark sl-switch::part(control) { background-color: var(--sl-color-gray-700); border-color: var(--sl-color-gray-700); } .sl-theme-dark sl-switch:not([disabled])::part(control):hover { background-color: var(--sl-color-gray-600); border-color: var(--sl-color-gray-600); } .sl-theme-dark sl-switch[checked]::part(control) { background-color: var(--sl-color-primary-600); border-color: var(--sl-color-primary-600); } .sl-theme-dark sl-switch[checked]::part(control):hover { background-color: var(--sl-color-primary-500); border-color: var(--sl-color-primary-500); } .sl-theme-dark sl-tab-group::part(tabs) { --tabs-border-color: var(--sl-color-gray-800); } .sl-theme-dark sl-tab::part(base) { color: var(--sl-color-gray-400); } .sl-theme-dark sl-tab:not([disabled])::part(base):hover, .sl-theme-dark sl-tab[active]::part(base) { color: var(--sl-color-primary-500); } .sl-theme-dark sl-tag[type=primary]::part(base) { background-color: var(--sl-color-primary-950); border-color: var(--sl-color-primary-900); color: var(--sl-color-primary-300); } .sl-theme-dark sl-tag[type=success]::part(base) { background-color: var(--sl-color-success-950); border-color: var(--sl-color-success-900); color: var(--sl-color-success-300); } .sl-theme-dark sl-tag[type=info]::part(base) { background-color: var(--sl-color-info-800); border-color: var(--sl-color-info-700); color: var(--sl-color-info-300); } .sl-theme-dark sl-tag[type=warning]::part(base) { background-color: var(--sl-color-warning-950); border-color: var(--sl-color-warning-900); color: var(--sl-color-warning-300); } .sl-theme-dark sl-tag[type=danger]::part(base) { background-color: var(--sl-color-danger-950); border-color: var(--sl-color-danger-900); color: var(--sl-color-danger-300); }