Something went wrong. Try again.
a pds written in elixir tempest.desertthunder.dev
Something went wrong. Try again.
4.3 kB · 256 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257.app-shell { min-height: 100vh; background-color: var(--win-desktop); background-image: var(--win-desktop-texture); background-position: var(--win-desktop-texture-position); background-size: var(--win-desktop-texture-size);}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); box-shadow: inset 0 -1px 0 var(--win-shadow), inset 0 1px 0 var(--win-light);}
.app-header__brand,.app-header__nav { display: flex; align-items: center; gap: var(--space-2);}
.app-header__brand { color: var(--text); font-weight: 700; text-decoration: none;}
.app-header__nav { flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none;}
.app-main { width: min(var(--measure-text), 100%); margin-inline: auto; padding: var(--space-6) var(--space-4);}
.app-stack > * + * { margin-block-start: var(--space-4);}
.button,.button:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 1.8rem; padding: 0.2rem var(--space-3); border: 0; color: var(--text); background: var(--surface); box-shadow: var(--border-out); font-weight: 700; text-decoration: none;}
.button:hover { color: var(--text); background: var(--surface-raised);}
.button:active { box-shadow: var(--border-in);}
.button--primary { color: white; background: var(--accent);}
.button--primary:hover { color: white; background: var(--win-title-soft);}
.flash-stack { position: fixed; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); z-index: 50; display: grid; gap: var(--space-2); width: min(24rem, calc(100vw - 2rem));}
.flash { padding: var(--space-3); background: var(--surface); box-shadow: var(--border-out), var(--shadow-window);}
.flash--info { border-left: 4px solid var(--info);}
.flash--error { border-left: 4px solid var(--danger);}
.flash__body { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start;}
.flash__title { font-weight: 700;}
.flash__close { border: 0; background: transparent; color: var(--muted); line-height: 1;}
.form-field { display: grid; gap: var(--space-1); margin-block-end: var(--space-3);}
.form-label { font-weight: 700;}
.input,.select,.textarea { width: 100%; border: 0; color: var(--text); background: white; box-shadow: var(--border-in);}
.input,.select { min-height: 2rem; padding-inline: var(--space-2);}
.textarea { min-height: 7rem; padding: var(--space-2); resize: vertical;}
.checkbox-row { display: flex; gap: var(--space-2); align-items: center;}
.checkbox { width: 1rem; height: 1rem; accent-color: var(--accent);}
.input--error,.select--error,.textarea--error { outline: 2px solid var(--danger);}
.form-error { display: flex; gap: var(--space-2); align-items: center; margin-block-start: var(--space-1); color: var(--danger); font-size: var(--step--1);}
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block-end: var(--space-3);}
.section-header__title { font-size: var(--step-1); line-height: var(--leading-tight);}
.section-header__subtitle { color: var(--muted); font-size: var(--step--1);}
.data-table { width: 100%; border-collapse: collapse; background: var(--surface-raised); box-shadow: var(--border-in);}
.data-table th,.data-table td { padding: var(--space-2); border: 1px dotted var(--win-shadow); text-align: left; vertical-align: top;}
.data-table th { background: var(--accent-soft);}
.data-table__actions { display: flex; gap: var(--space-3); white-space: nowrap;}
.data-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none;}
.data-list__item { padding: var(--space-3); background: var(--surface-raised); box-shadow: var(--border-in);}
.data-list__title { font-weight: 700;}
@media (max-width: 720px) { .app-header, .section-header { align-items: stretch; flex-direction: column; }
.app-header__nav { justify-content: flex-start; }}