Packages

A collection of components and design tokens for building Lustre apps.

Current section

Files

Jump to
lustre_ui priv styles.css
Raw

priv/styles.css

*,:after,:before{border:0 solid;box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}.lustre-ui-aside{--align:start;--gap:var(--space-md);--dir:row;--wrap:wrap;--min:60%;align-items:var(--align);display:flex;flex-direction:var(--dir);flex-wrap:var(--wrap);gap:var(--gap)}.lustre-ui-aside.content-first{--dir:row;--wrap:wrap}.lustre-ui-aside.content-last{--dir:row-reverse;--wrap:wrap-reverse}.lustre-ui-aside.align-start{--align:start}.lustre-ui-aside.align-center,.lustre-ui-aside.align-centre{--align:center}.lustre-ui-aside.align-end{--align:end}.lustre-ui-aside.stretch{--align:stretch}.lustre-ui-aside.packed{--gap:0}.lustre-ui-aside.tight{--gap:var(--space-xs)}.lustre-ui-aside.relaxed{--gap:var(--space-md)}.lustre-ui-aside.loose{--gap:var(--space-lg)}.lustre-ui-aside>:first-child{flex-basis:0;flex-grow:999;min-inline-size:var(--min)}.lustre-ui-aside>:last-child{flex-grow:1;max-height:-moz-max-content;max-height:max-content}.lustre-ui-box{--gap:var(--space-sm);padding:var(--gap)}.lustre-ui-box.packed{--gap:0}.lustre-ui-box.tight{--gap:var(--space-xs)}.lustre-ui-box.relaxed{--gap:var(--space-md)}.lustre-ui-box.loose{--gap:var(--space-lg)}.lustre-ui-button{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast);background-color:var(--bg);border:1px solid var(--border,var(--bg),var(--element-border-subtle));border-radius:var(--border-radius);color:var(--text);padding:var(--space-xs) var(--space-sm)}.lustre-ui-button:focus-within,.lustre-ui-button:hover{background-color:var(--bg-hover)}.lustre-ui-button:focus-within:active,.lustre-ui-button:hover:active{background-color:var(--bg-active);border-color:var(--border-active)}.lustre-ui-button.solid{--bg-active:var(--solid-background-hover);--bg-hover:var(--solid-background-hover);--bg:var(--solid-background);--border-active:var(--solid-background-hover);--border:var(--solid-background);--text:#fff}.lustre-ui-button.solid:focus-within:active,.lustre-ui-button.solid:hover:active{--bg-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000);--border-active:color-mix(in srgb,var(--solid-background-hover) 90%,#000)}.lustre-ui-button.soft{--bg-active:var(--element-background-strong);--bg-hover:var(--element-background-hover);--bg:var(--element-background);--border-active:var(--bg-active);--border:var(--bg);--text:var(--text-high-contrast)}.lustre-ui-button.outline{--bg:unset;--border:var(--element-border-subtle)}.lustre-ui-cluster{--gap:var(--space-md);--dir:flex-start;align-items:center;display:flex;flex-wrap:wrap;gap:var(--gap);justify-content:var(--dir)}.lustre-ui-cluster.packed{--gap:0}.lustre-ui-cluster.tight{--gap:var(--space-xs)}.lustre-ui-cluster.relaxed{--gap:var(--space-md)}.lustre-ui-cluster.loose{--gap:var(--space-lg)}.lustre-ui-cluster.from-start{--dir:flex-start}.lustre-ui-cluster.from-end{--dir:flex-end}.lustre-ui-icon{--size:1em;height:var(--size);width:var(--size)}.lustre-ui-icon.xs{--size:var(--text-xs)}.lustre-ui-icon.sm{--size:var(--text-sm)}.lustre-ui-icon.md{--size:var(--text-md)}.lustre-ui-icon.lg{--size:var(--text-lg)}.lustre-ui-icon.xl{--size:var(--text-xl)}.lustre-ui-sequence{--gap:var(--space-md);--break:30rem;display:flex;flex-wrap:wrap;gap:var(--gap)}.lustre-ui-sequence.packed{--gap:0}.lustre-ui-sequence.tight{--gap:var(--space-xs)}.lustre-ui-sequence.relaxed{--gap:var(--space-md)}.lustre-ui-sequence.loose{--gap:var(--space-lg)}.lustre-ui-sequence[data-split-at="10"]>:nth-last-child(n+10),.lustre-ui-sequence[data-split-at="10"]>:nth-last-child(n+10)~*,.lustre-ui-sequence[data-split-at="3"]>:nth-last-child(n+3),.lustre-ui-sequence[data-split-at="3"]>:nth-last-child(n+3)~*,.lustre-ui-sequence[data-split-at="4"]>:nth-last-child(n+4),.lustre-ui-sequence[data-split-at="4"]>:nth-last-child(n+4)~*,.lustre-ui-sequence[data-split-at="5"]>:nth-last-child(n+5),.lustre-ui-sequence[data-split-at="5"]>:nth-last-child(n+5)~*,.lustre-ui-sequence[data-split-at="6"]>:nth-last-child(n+6),.lustre-ui-sequence[data-split-at="6"]>:nth-last-child(n+6)~*,.lustre-ui-sequence[data-split-at="7"]>:nth-last-child(n+7),.lustre-ui-sequence[data-split-at="7"]>:nth-last-child(n+7)~*,.lustre-ui-sequence[data-split-at="8"]>:nth-last-child(n+8),.lustre-ui-sequence[data-split-at="8"]>:nth-last-child(n+8)~*,.lustre-ui-sequence[data-split-at="9"]>:nth-last-child(n+9),.lustre-ui-sequence[data-split-at="9"]>:nth-last-child(n+9)~*{flex-basis:100%}.lustre-ui-sequence>*{flex-basis:calc((var(--break) - 100%)*999);flex-grow:1}.lustre-ui-stack{--gap:var(--space-md);display:flex;flex-direction:column;gap:var(--gap);justify-content:flex-start}.lustre-ui-stack.packed{--gap:0}.lustre-ui-stack.tight{--gap:var(--space-xs)}.lustre-ui-stack.relaxed{--gap:var(--space-md)}.lustre-ui-stack.loose{--gap:var(--space-lg)}