Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/hearthspace-ui-experiments. crutchcorn.github.io/hearthspace-ui-experiments
Something went wrong. Try again.
8.6 kB · 487 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488.eyebrow { color: var(--muted); font-size: 10px; line-height: 1.4;}
.notes { display: flex; min-height: 230px; height: 100%; flex-direction: column; padding: 23px 24px 0; background: var(--surface-subtle);}
.documentHeader { padding-bottom: 17px;}
.documentHeader h2 { margin: 6px 0 0; font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: -0.7px;}
.notes textarea { display: block; width: 100%; min-height: 100px; flex: 1; padding: 11px 0 18px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.8; touch-action: auto;}
.notes textarea:focus-visible { box-shadow: inset 0 -1px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 22px -16px var(--accent);}
.footer { display: flex; min-height: 34px; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; line-height: 1.4;}
.files { container-type: inline-size; display: flex; min-height: 100%; flex-direction: column; padding: 20px 22px 0; background: var(--surface-subtle);}
.fileHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;}
.fileHeader h2 { margin: 5px 0 0; font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: -0.7px;}
.fileCount { color: var(--muted); font-size: 10px;}
.fileGrid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 9px; margin-bottom: 15px;}
.fileTile { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--chrome-border); border-radius: var(--radius-tile); background: var(--surface-control); box-shadow: var(--glass-edge);}
.fileTile > svg { flex-shrink: 0; color: color-mix(in srgb, var(--accent-strong) 45%, var(--muted));}
.fileTile > div { min-width: 0;}
.fileTile strong,.fileTile span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.fileTile strong { margin-bottom: 4px; font-size: 11px; font-weight: 500;}
.fileTile span { color: var(--muted); font-size: 9px;}
.terminal { display: flex; min-height: 100%; flex-direction: column; padding: 23px 23px 0; background: var(--surface-subtle); color: var(--ink);}
.terminalSession { margin-bottom: 22px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 10px;}
.console { flex: 1; padding-bottom: 18px; font-family: var(--mono); font-size: 11px; line-height: 1.8;}
.console p { margin: 0 0 8px;}
.console p > span:first-child { color: var(--accent-strong);}
.consoleOutput { color: var(--muted);}
.directoryList { display: flex; flex-wrap: wrap; gap: 5px 15px; color: var(--muted);}
.cursor { display: inline-block; width: 7px; height: 13px; border-radius: 0; background: var(--accent-bright); vertical-align: -2px;}
.terminal .footer { border-color: var(--line); color: var(--muted);}
.browser { min-height: 100%; padding: 13px 15px 0; background: var(--surface-subtle);}
.addressBar { display: flex; min-height: 32px; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--chrome-border); border-radius: var(--radius-control); background: var(--surface-control); box-shadow: var(--glass-edge); color: var(--muted); font-size: 10px;}
.addressBar svg { flex-shrink: 0;}
.previewLabel { margin-left: auto; font-size: 9px;}
.bookmarks { padding: 19px 9px 10px;}
.bookmarks h2 { margin: 6px 0 19px; font-size: 26px; font-weight: 400; line-height: 1; letter-spacing: -0.7px;}
.bookmark { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line);}
.bookmark > svg { flex-shrink: 0; margin-left: auto; color: color-mix(in srgb, var(--accent-strong) 45%, var(--muted));}
.bookmark strong,.bookmark div span { display: block;}
.bookmark strong { margin-bottom: 4px; font-size: 12px; font-weight: 500;}
.bookmark div span { color: var(--muted); font-size: 10px;}
.appPreview { min-height: 100%; padding: 26px 25px; background: var(--surface-subtle);}
.previewHeading { display: flex; align-items: center; gap: 15px; margin-bottom: 24px;}
.previewHeading > span { flex-shrink: 0; color: color-mix(in srgb, var(--accent-strong) 45%, var(--muted));}
.previewHeading h2 { margin: 0 0 5px; font-size: 25px; font-weight: 400; letter-spacing: -0.7px;}
.previewHeading p { margin: 0; color: var(--muted); font-size: 11px;}
.metadata { margin: 0; font-size: 11px;}
.metadata > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line);}
.metadata dt { color: var(--muted);}
.metadata dd { margin: 0;}
.previewRule { display: block; width: 24px; height: 3px; margin-top: 20px; border-radius: var(--radius-round); background: var(--accent);}
:global([data-presentation='realistic']) .notes { height: calc(100% - 29px); min-height: 180px; padding: 10px 12px 0; background: #fffef9;}
:global([data-presentation='realistic']) .documentHeader { padding-bottom: 7px; border-bottom: 1px solid #d6d6d3;}
:global([data-presentation='realistic']) .documentHeader h2 { display: none;}
:global([data-presentation='realistic']) .notes textarea { font-family: var(--mono); font-size: 12px; line-height: 1.6;}
:global([data-presentation='realistic']) .files { padding: 14px 16px 0; background: #fafafa;}
:global([data-presentation='realistic']) .fileHeader h2 { font-size: 17px; font-weight: 600; letter-spacing: 0;}
:global([data-presentation='realistic']) .fileTile { min-height: 68px; border-color: #e2e2e2; border-radius: 5px; background: #fff; box-shadow: none;}
:global([data-presentation='realistic']) .fileTile > svg { color: #4281be; fill: #dbebf7;}
:global([data-presentation='realistic']) .terminal { padding: 12px 14px 0; background: #17191d; color: #e0e1e3;}
:global([data-presentation='realistic']) .terminalSession { margin-bottom: 14px; padding-bottom: 9px; border-color: #393b42; color: #969da8;}
:global([data-presentation='realistic']) .console p > span:first-child { color: #91c886;}
:global([data-presentation='realistic']) .consoleOutput,:global([data-presentation='realistic']) .directoryList { color: #a8b8cf;}
:global([data-presentation='realistic']) .cursor { background: #c6d2c3;}
:global([data-presentation='realistic']) .terminal .footer { border-color: #393b42; color: #969da8;}
:global([data-presentation='realistic']) .browser { padding: 0; background: #fff;}
:global([data-presentation='realistic']) .addressBar { min-height: 40px; padding: 10px 14px; border: 0; border-bottom: 1px solid #d5d5de; border-radius: 0; background: #eeeef3; box-shadow: none; color: #5a5c67;}
:global([data-presentation='realistic']) .bookmarks { padding: 20px;}
:global([data-presentation='realistic']) .bookmark > svg { color: #6465ab;}
:global([data-presentation='realistic']) .previewRule { background: currentcolor;}
:global([data-color-mode='dark'][data-presentation='realistic']) .notes { background: #232420;}
:global([data-color-mode='dark'][data-presentation='realistic']) .documentHeader { border-color: #45463f;}
:global([data-color-mode='dark'][data-presentation='realistic']) .files { background: #242629;}
:global([data-color-mode='dark'][data-presentation='realistic']) .fileTile { border-color: #41454b; background: #2e3135;}
:global([data-color-mode='dark'][data-presentation='realistic']) .fileTile > svg { color: #79ade0; fill: #263e54;}
:global([data-color-mode='dark'][data-presentation='realistic']) .browser { background: #25242b;}
:global([data-color-mode='dark'][data-presentation='realistic']) .addressBar { border-color: #484651; background: #302f39; color: #c2bfce;}
:global([data-color-mode='dark'][data-presentation='realistic']) .bookmark > svg { color: #a3a0e0;}
@container (width < 330px) { .fileTile { align-items: flex-start; flex-direction: column; gap: 10px; }}