welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
2 lines (1 loc) • 5.73 kB
CSS
@layer components{._root_17x8z_2{border-style:solid;background-color:var(--window-body-color-background-default);border-width:var(--window-border-width);border-color:var(--window-color-border-default);border-radius:var(--radius-lg);box-shadow:var(--elevation-10);overflow:hidden}._header_17x8z_11{display:flex;align-items:center;justify-content:space-between;background-color:var(--window-header-color-background);min-height:var(--window-header-size-min-height);border-bottom:var(--window-border-width) solid;border-color:var(--window-color-border-default);padding-inline:var(--window-header-padding-inline-xs);padding-block:var(--window-header-padding-block-xs);gap:var(--window-header-gap-content);border-top-left-radius:var(--window-border-radius);border-top-right-radius:var(--window-border-radius)}._header-title_17x8z_25{display:flex;flex:1;justify-content:center;text-align:center}._header-tabs_17x8z_31{display:flex;gap:var(--spacing-sm)}._header-tab-item_17x8z_35{cursor:pointer;display:flex;align-items:center;justify-content:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;border-radius:var(--radius-md);border-width:var(--window-header-tab-border-width-active);gap:var(--spacing-xs);padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);transition-duration:var(--duration-fast);border-color:var(--windowTabItemBorderColor, transparent);background-color:var(--windowTabItemBackgroundColor, transparent);color:var(--windowTabItemColor, var(--window-header-tab-color-text-default))}._header-tab-item_17x8z_35:hover{--windowTabItemBackgroundColor: var(--window-header-tab-color-background-hover);--windowTabItemColor: var(--window-header-tab-color-text-hover)}._header-tab-item_17x8z_35[aria-selected=true]{--windowTabItemBorderColor: var(--color-border-brand-primary);--windowTabItemBackgroundColor: var(--window-header-tab-color-background-active);--windowTabItemColor: var(--window-header-tab-color-text-active)}._header-tab-item_17x8z_35[aria-disabled=true]{cursor:not-allowed;--windowTabItemColor: var(--button-color-text-secondary-main-disabled);background:repeating-linear-gradient(-45deg,transparent,transparent 2.4px,color-mix(in srgb,var(--color-neutral-50) 12%,transparent) 2.4px,color-mix(in srgb,var(--color-neutral-50) 12%,transparent) 4.3px),var(--button-color-background-secondary-main-disabled)}._header-action-button_17x8z_69{cursor:pointer;display:flex;justify-content:center;align-items:center;transition-property:border-color,background-color,box-shadow;transition-timing-function:ease-in-out;transition-duration:var(--duration-fast);width:var(--window-header-action-size-container);height:var(--window-header-action-size-container);border-radius:var(--window-header-action-border-radius);outline:transparent solid var(--border-width-md);background-color:var(--windowButtonBackgroundColor, var(--window-header-action-color-background-close-default))}._header-action-button_17x8z_69 svg{color:var(--windowButtonIconColor, var(--window-header-action-color-icon-common-default))}._header-action-button_17x8z_69[data-focus-visible],._header-action-button_17x8z_69:focus-visible{outline-width:var(--button-border-width-focused);outline-color:var(--button-color-border-focused)}._header-action-button_17x8z_69:hover{--windowButtonBackgroundColor: var(--window-header-action-color-background-common-hover);--windowButtonIconColor: var(--window-header-action-color-icon-common-hover)}._header-action-button_17x8z_69:active,._header-action-button_17x8z_69[aria-pressed=true]{--windowButtonBackgroundColor: var(--window-header-action-color-background-common-pressed);--windowButtonIconColor: var(--window-header-action-color-icon-common-pressed)}._header-close-button_17x8z_100{border:1px solid var(--windowHeaderCloseButtonBorderColor, var(--window-header-action-color-border-close-default));--windowButtonIconColor: var(--window-header-action-color-icon-close-default)}._header-close-button_17x8z_100:hover{background-color:var(--window-header-action-color-background-close-hover);--windowHeaderCloseButtonBorderColor: var( --window-header-action-color-background-close-hover );--windowButtonIconColor: var(--window-header-action-color-icon-close-hover)}._header-close-button_17x8z_100:active{background-color:var(--window-header-action-color-background-close-pressed);--windowHeaderCloseButtonBorderColor: var( --window-header-action-color-background-close-pressed );--windowButtonIconColor: var(--window-header-action-color-icon-close-pressed)}._header-actions_17x8z_118{display:flex;gap:var(--window-header-gap-content)}._tab-panel_17x8z_122[hidden]{display:none}._media_17x8z_125,._box-text_17x8z_126{margin-block:var(--window-body-padding-block-xs);margin-inline:var(--window-body-padding-inline-xs)}._media_17x8z_125 :first-child{border-radius:var(--window-border-radius);max-width:100%;height:auto}._box-text_17x8z_126{border-radius:var(--window-border-radius);background-color:var(--color-background-warm-primary);padding-block:var(--window-body-padding-block-sm);padding-inline:var(--window-body-padding-inline-sm)}._size-xl_17x8z_141{padding-block:var(--window-body-padding-block-xl);padding-inline:var(--window-body-padding-inline-xl)}._size-lg_17x8z_145{padding-block:var(--window-body-padding-block-lg);padding-inline:var(--window-body-padding-inline-lg)}._size-md_17x8z_149{padding-block:var(--window-body-padding-block-md);padding-inline:var(--window-body-padding-inline-md)}._size-sm_17x8z_153{padding-block:var(--window-body-padding-block-sm);padding-inline:var(--window-body-padding-inline-sm)}._size-xs_17x8z_157{padding-block:var(--window-body-padding-block-xs);padding-inline:var(--window-body-padding-inline-xs)}}