| 1 | /* Palette: paper and ink with forest accents. The dark variant follows the |
| 2 | system preference or the footer toggle, which sets data-theme on html. */ |
| 3 | :root{--paper:#fbfaf7;--ink:#1d1c1a;--muted:#6f6a60;--rail:#f4f2ec;--line:#e5e1d7;--accent:#2f6b3a;--soft:#e4efdf;--hover:#f0ede5;--add:#e4f0dd;--del:#f6e6df;--alert:#a63a2b;--g0:#edece7;--g1:#cfe3c4;--g2:#9cc48a;--g3:#5f9a4e;--g4:#2f6b3a;--bark:#8a5a1f;--w1:#7a4f1d;--w2:#5f9a4e;--w3:#2f6b3a;--w4:#b5643c;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",sans-serif} |
| 4 | html[data-theme=dark]{--paper:#171614;--ink:#d9d6cf;--muted:#8d887c;--rail:#1e1d1a;--line:#2c2a26;--accent:#8fc27a;--soft:#22301f;--hover:#242320;--add:#223521;--del:#3a2a24;--alert:#e08a7a;--g0:#26251f;--g1:#2a3d24;--g2:#3b5a2f;--g3:#4f7d3d;--g4:#8fc27a;--bark:#d3a15c;--w1:#d3a15c;--w2:#9cc48a;--w3:#6ea55a;--w4:#d98a5c} |
| 5 | @media(prefers-color-scheme:dark){html:not([data-theme=light]){--paper:#171614;--ink:#d9d6cf;--muted:#8d887c;--rail:#1e1d1a;--line:#2c2a26;--accent:#8fc27a;--soft:#22301f;--hover:#242320;--add:#223521;--del:#3a2a24;--alert:#e08a7a;--g0:#26251f;--g1:#2a3d24;--g2:#3b5a2f;--g3:#4f7d3d;--g4:#8fc27a;--bark:#d3a15c;--w1:#d3a15c;--w2:#9cc48a;--w3:#6ea55a;--w4:#d98a5c}} |
| 6 | |
| 7 | html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}@media(prefers-color-scheme:dark){html:not([data-theme=light]){color-scheme:dark}} |
| 8 | html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none} |
| 9 | body{font:14px/1.45 var(--sans);color:var(--ink);background:var(--paper)} |
| 10 | a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline} |
| 11 | code,kbd,samp,pre{font-family:var(--mono);font-size:13px} |
| 12 | h1{font-size:24px;margin:0 0 12px}h2{font-size:17px;margin:22px 0 8px}h3{font-size:14px;margin:18px 0 6px} |
| 13 | p{margin:0 0 10px} |
| 14 | small{color:var(--muted)} |
| 15 | [role=alert]{color:var(--alert)} |
| 16 | [role=status]{color:var(--muted)} |
| 17 | input,select,textarea,button{font:inherit;color:inherit;background:var(--paper);border:1px solid var(--line);padding:4px 8px;box-sizing:border-box;max-width:100%} |
| 18 | button{cursor:pointer;background:var(--rail)}button:hover{background:var(--hover)}button:disabled{cursor:default;color:var(--muted)} |
| 19 | textarea{width:100%;min-height:5em;font-family:var(--mono);font-size:13px} |
| 20 | pre{white-space:pre-wrap;overflow-wrap:anywhere} |
| 21 | img{max-width:100%} |
| 22 | |
| 23 | /* Selection: chrome is not selectable, content and values are. */ |
| 24 | #rail,#footer,#topbar,#panel h4,#panel label,#panel th,#rows th,#grid,#gridhead,#tree header small,#tree li>span,#preview header,button,summary,rpc-form label,signed-form label,publish-list label,nostr-compose label,wiki-compose label,file-tools label,file-upload label,nostr-event>header,approval-item>header,wiki-article>header,diff-view caption small{user-select:none;-webkit-user-select:none} |
| 25 | |
| 26 | /* Shell: a table with three columns; each column scrolls on its own. */ |
| 27 | #topbar,#mobile-actions{display:none} |
| 28 | #layout{border-collapse:collapse;table-layout:fixed;width:100%;height:calc(100vh - 28px - env(safe-area-inset-bottom,0px))} |
| 29 | #layout>tbody>tr>td{vertical-align:top;padding:0;position:relative;height:100%} |
| 30 | #railbox,#content,#panel{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto;overscroll-behavior:contain} |
| 31 | #rail{width:240px;background:var(--rail);border-right:1px solid var(--line)} |
| 32 | #aside{width:280px;border-left:1px solid var(--line)} |
| 33 | #content>section{padding:14px 22px 30px} |
| 34 | #footer{position:fixed;left:0;right:0;bottom:0;height:calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--rail);font:13px var(--mono);padding:0 calc(2ch + env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) calc(2.5ch + env(safe-area-inset-left,0px));box-sizing:border-box} |
| 35 | #footer table{width:100%;border-collapse:collapse;height:27px}#footer td{border:0;padding:0;vertical-align:middle} |
| 36 | #footer td:last-child{text-align:right} |
| 37 | #prompt{color:var(--muted)}#prompt b{color:var(--ink);font-weight:500} |
| 38 | #who{color:var(--muted)}#who b,#who nostr-key,#who nostr-name{color:var(--ink)} |
| 39 | #who button{border:0;background:none;padding:0;color:var(--accent);font:inherit}#who button:hover{text-decoration:underline} |
| 40 | #railbox{box-sizing:border-box;padding-bottom:44px} |
| 41 | #rail nav+nav{margin-top:14px} |
| 42 | #rail-tools{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 2ch 10px 2.5ch;font:12px var(--mono)}#rail-tools a{float:left;color:var(--muted)}#rail-tools a:hover{color:var(--ink)}#rail-tools button{float:right} |
| 43 | /* The install hint sits on the footer's centre line so it never moves the prompt or the session. */ |
| 44 | #install{position:absolute;left:50%;top:0;transform:translateX(-50%);border:0;background:none;padding:0;color:var(--muted);font:12px var(--mono);line-height:27px;cursor:pointer}#install:hover{color:var(--ink);text-decoration:underline}#install[hidden]{display:none} |
| 45 | share-link{display:inline-block}share-link:empty{display:none} |
| 46 | #theme{border:0;background:none;padding:0;color:var(--muted);font:inherit}#theme:hover{color:var(--ink);text-decoration:underline} |
| 47 | |
| 48 | /* Rail */ |
| 49 | #rail header{height:60px;box-sizing:border-box;border-bottom:1px solid var(--line);font:13px var(--mono);display:table;width:100%} |
| 50 | #rail header>span{display:table-cell;vertical-align:middle;line-height:1.3;padding:0 2ch 0 2.5ch;overflow-wrap:break-word} |
| 51 | #rail header a{color:var(--muted)}#rail header b{font-weight:500} |
| 52 | #mark{display:inline-block;font:800 26px/1 var(--sans);letter-spacing:-.04em;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:5px} |
| 53 | #rail header a#mark{color:var(--ink)}#mark:hover{text-decoration-color:var(--ink)} |
| 54 | #mark i{font-style:normal}#mark i:nth-child(1){color:var(--w1)}#mark i:nth-child(2){color:var(--w4)}#mark i:nth-child(3){color:var(--w3)}#mark i:nth-child(4){color:var(--w2)} |
| 55 | #rail nav a{display:block;box-sizing:border-box;height:36px;padding:0 2ch 0 2.5ch;border-bottom:1px solid var(--line);font:13px/35px var(--mono);color:var(--ink)} |
| 56 | #rail nav a:hover{background:var(--hover);text-decoration:none} |
| 57 | #rail nav a[aria-current=page]{background:var(--soft)} |
| 58 | #rail p{padding:10px 2ch 10px 2.5ch;margin:0;font:12px var(--mono);color:var(--muted)} |
| 59 | |
| 60 | /* Panel */ |
| 61 | #panel section{padding:10px 14px;border-bottom:1px solid var(--line);font:12px var(--mono)} |
| 62 | #content:focus{outline:0}#content:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} |
| 63 | #navigation-status{color:var(--muted);font-size:11px} |
| 64 | #panel h4{margin:0 0 6px;font:12px var(--mono);color:var(--muted)} |
| 65 | #panel p{margin:0 0 6px;font:13px/1.4 var(--sans);color:var(--muted)}#panel p small{font-size:inherit} |
| 66 | #panel table{width:100%;border-collapse:collapse;margin:0} |
| 67 | #panel th{text-align:left;font-weight:normal;color:var(--muted);padding:2px 1ch 2px 0;border:0;white-space:nowrap;vertical-align:top} |
| 68 | #panel td{text-align:right;padding:2px 0;border:0;overflow-wrap:anywhere} |
| 69 | #panel ul{list-style:none;margin:0;padding:0}#panel li{line-height:24px;overflow-wrap:anywhere} |
| 70 | #panel li small{float:right} |
| 71 | #panel label{display:block;color:var(--muted);margin:8px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.04em} |
| 72 | #panel input,#panel select{width:100%;font:12px var(--mono)} |
| 73 | #panel form button{margin-top:8px} |
| 74 | #panel json-view{margin-top:4px} |
| 75 | |
| 76 | /* Rows: the list rhythm used by repositories, files, history, and activity. */ |
| 77 | #rows{width:100%;border-collapse:collapse} |
| 78 | #rows td{height:36px;border-bottom:1px solid var(--line);padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle} |
| 79 | #rows td:first-child{width:120px;font:13px var(--mono);color:var(--accent)} |
| 80 | #rows td:last-child{width:170px;text-align:right;font:12px var(--mono);color:var(--muted)} |
| 81 | #rows tr:hover td{background:var(--hover)} |
| 82 | #rows th{text-align:left;font:12px var(--mono);color:var(--muted);font-weight:normal;padding:0 10px;height:28px;border-bottom:1px solid var(--line)} |
| 83 | #rows th:last-child{text-align:right} |
| 84 | #rows td a{color:inherit}#rows td:first-child a{color:var(--accent)} |
| 85 | #file-views{border-bottom:1px solid var(--line);margin:0 0 14px} |
| 86 | #file-views a{display:inline-block;padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent} |
| 87 | #file-views a:first-child{padding-left:0}#file-views a[aria-current=page]{color:var(--accent);border-color:var(--accent)} |
| 88 | #file-context,#file-empty{color:var(--muted)}#file-breadcrumbs{margin:16px 0;font:13px var(--mono);overflow-wrap:anywhere} |
| 89 | #file-library #rows{table-layout:fixed}#file-library #rows td{height:auto;padding:12px 10px;white-space:normal;overflow-wrap:anywhere} |
| 90 | #file-library #rows td:first-child{width:auto;font:14px var(--sans)}#file-library #rows th:nth-child(2){width:24%}#file-library #rows th:last-child{width:170px} |
| 91 | #file-library #rows td:first-child>a{display:table;width:100%}#file-library #rows td:first-child>a>span:last-child{display:table-cell;vertical-align:middle;width:100%;padding-left:12px} |
| 92 | #file-library #rows img,#file-library [data-file-icon]{display:block;width:40px;height:40px;border-radius:5px;object-fit:cover;background:var(--rail)} |
| 93 | #file-library [data-file-icon]{text-align:center;font:28px/40px var(--sans);color:var(--muted)}#file-library tr[data-kind=folder] [data-file-icon],#file-library tr[data-kind=site] [data-file-icon],#file-library tr[data-kind=room] [data-file-icon]{color:var(--accent);background:var(--soft)} |
| 94 | #file-library #rows small{display:block;margin-top:3px;color:var(--muted);font:12px var(--mono)} |
| 95 | @media(max-width:700px){#file-library #rows thead,#file-library #rows td:last-child{display:none}#file-library #rows,#file-library #rows tbody,#file-library #rows tr{display:block;width:auto}#file-library #rows tr{padding:12px 0;border-bottom:1px solid var(--line)}#file-library #rows td{display:block;width:auto;padding:0;border:0}#file-library #rows td:first-child{width:auto}#file-library #rows td:nth-child(2){padding:3px 0 0 40px;color:var(--muted);font-size:12px}#file-library #rows td:nth-child(2) small{display:inline;margin-left:8px;overflow-wrap:anywhere}#file-library #rows img,#file-library [data-file-icon]{width:32px;height:32px;line-height:32px}#file-library #rows td:first-child>a>span:last-child{padding-left:8px}#file-views a{padding:10px}#file-search label{max-width:100%}#file-search input{max-width:100%;box-sizing:border-box}} |
| 96 | #pages{font:12px var(--mono)} |
| 97 | #collaboration-filter,#file-search,#wiki-search{margin:0 0 14px;padding:0 0 8px;border-bottom:1px solid var(--line)} |
| 98 | #collaboration-body{max-width:720px} |
| 99 | #file-actions{max-width:720px;margin:0 0 18px} |
| 100 | #events li>details{margin:0 0 10px;font:12px var(--mono)}#events li>details>summary{cursor:pointer;color:var(--muted)} |
| 101 | |
| 102 | /* Data tables inside content, including json-view results. */ |
| 103 | scroll-box{display:block;overflow-x:auto;max-width:100%} |
| 104 | scroll-box table,json-view table{width:100%;border-collapse:collapse;margin:.5rem 0} |
| 105 | scroll-box th,scroll-box td,json-view th,json-view td{padding:.35rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:normal}scroll-box th,json-view th,scroll-box td code,scroll-box td nostr-key,scroll-box td time,json-view td code,json-view td nostr-key,json-view td time,scroll-box td nostr-name,json-view td nostr-name{white-space:nowrap} |
| 106 | dl{margin:.5rem 0}dt{font-weight:600}dd{margin:0 0 .35rem 1rem} |
| 107 | #facts{border-collapse:collapse;font:13px var(--mono);width:auto} |
| 108 | #facts th{text-align:left;font-weight:normal;color:var(--muted);width:9em;padding:3px 0;border:0}#facts td{padding:3px 0;border:0} |
| 109 | #facts td{overflow-wrap:anywhere} |
| 110 | |
| 111 | /* Identity: the relay entry page. */ |
| 112 | #identity{max-width:720px}#identity>header{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px} |
| 113 | #identity>header img{width:56px;height:56px;border-radius:6px;vertical-align:middle;margin-right:12px;background:var(--soft);border:1px solid var(--line);object-fit:cover} |
| 114 | #identity>header h1{display:inline-block;vertical-align:middle;margin:0} |
| 115 | #identity>header small{display:block;margin-top:4px;font-family:var(--mono)} |
| 116 | #identity>header small code{font-size:12px} |
| 117 | #tags a{display:inline-block;font:12px var(--mono);margin-right:8px} |
| 118 | |
| 119 | #media img,#media video{max-width:100%;max-height:70vh;border:1px solid var(--line);background:var(--rail)} |
| 120 | |
| 121 | /* README and other rendered markdown. */ |
| 122 | #readme{max-width:720px}#readme h1{font-size:24px;border-bottom:1px solid var(--line);padding-bottom:8px}#readme h2{font-size:17px} |
| 123 | #readme pre{background:var(--rail);border:1px solid var(--line);padding:10px 12px;overflow:auto;font-size:12.5px;line-height:1.5;white-space:pre} |
| 124 | #readme code{font-size:12.5px}#readme ul,#readme ol{padding-left:20px} |
| 125 | [data-markdown-table]{max-width:100%;margin:10px 0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:8px} |
| 126 | [data-markdown-table]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} |
| 127 | [data-markdown-table]>table{width:100%;border-collapse:collapse;font:inherit;text-align:left} |
| 128 | [data-markdown-table] th,[data-markdown-table] td{min-width:8em;padding:10px 12px;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line);overflow-wrap:anywhere;line-height:1.5} |
| 129 | [data-markdown-table] th{background:var(--rail);font-weight:600;color:var(--ink)} |
| 130 | [data-markdown-table] th:last-child,[data-markdown-table] td:last-child{border-right:0} |
| 131 | [data-markdown-table] tbody tr:last-child td{border-bottom:0} |
| 132 | [data-markdown-table] [data-align=left]{text-align:left}[data-markdown-table] [data-align=center]{text-align:center}[data-markdown-table] [data-align=right]{text-align:right} |
| 133 | |
| 134 | /* rpc-form, signed-form, publish-list: one signed call each. */ |
| 135 | rpc-form,signed-form,publish-list,nostr-compose,file-tools,file-upload,file-workspace-root:not([hidden]){display:block;border-bottom:1px solid var(--line);padding:10px 0} |
| 136 | nostr-compose,file-tools,file-upload,file-workspace-root{max-width:720px} |
| 137 | file-tools h3,file-upload h3{margin:0 0 4px}file-tools p,file-upload p{margin:6px 0} |
| 138 | rpc-form label,signed-form label,publish-list label,nostr-compose label,file-tools label,file-upload label,#collaboration-filter label,#file-search label,#wiki-search label{display:inline-block;margin:0 10px 6px 0;vertical-align:top;font:13px var(--sans);color:var(--muted)} |
| 139 | rpc-form label input,rpc-form label select,signed-form label input,nostr-compose label input,nostr-compose label select,file-tools label input,file-tools label select,file-upload label input,#collaboration-filter label input,#collaboration-filter label select,#file-search label input,#wiki-search label input{display:block;margin-top:2px;font:13px var(--mono);min-width:200px} |
| 140 | file-upload label[data-share]{display:block}file-upload input[data-share-url]{width:100%} |
| 141 | file-upload form>label,file-upload [data-share] label{display:block;max-width:100%;margin-right:0} |
| 142 | file-upload select,file-upload progress{display:block;width:100%;max-width:100%;margin:6px 0 10px} |
| 143 | file-upload progress{height:8px;accent-color:var(--accent)} |
| 144 | file-upload input[type=file],file-upload input[data-share-url]{min-width:0;max-width:100%;box-sizing:border-box} |
| 145 | file-workspace-root video,file-workspace-root img,file-tools video,file-tools img{display:block;width:auto;max-width:100%;max-height:70vh;margin:12px 0} |
| 146 | file-workspace-root video,file-tools video{width:100%;background:#000} |
| 147 | file-workspace-root audio,file-tools audio{display:block;max-width:100%;margin:12px 0} |
| 148 | file-upload label:has([type=checkbox]),#panel file-upload label:has([type=checkbox]){display:inline-block;margin:8px 14px 8px 0}file-upload label:has([type=checkbox]) input,#panel file-upload label:has([type=checkbox]) input{display:inline-block;width:auto;min-width:0;margin:0 4px 0 0;vertical-align:middle} |
| 149 | #panel file-upload [hidden],file-upload [hidden],file-tools [hidden],#panel push-toggle [hidden]{display:none} |
| 150 | #panel push-toggle label{display:inline-block;margin:6px 12px 0 0}#panel push-toggle label input{display:inline-block;width:auto;min-width:0;margin:0 4px 0 0;vertical-align:middle}#panel push-toggle form{margin-top:4px} |
| 151 | file-upload p[data-drop]{margin:6px 0;color:var(--muted);font-size:12px}file-upload[data-over]{outline:1px dashed var(--accent);outline-offset:4px} |
| 152 | #panel file-upload,#panel file-mirror{border:0;padding:0;max-width:none}#panel details{margin-top:8px}#panel details>summary{cursor:pointer;color:var(--muted);font-size:12px} |
| 153 | rpc-form label:has(textarea),publish-list label:has(textarea),nostr-compose label:has(textarea){display:block} |
| 154 | rpc-form output,signed-form output,publish-list output,nostr-compose output,file-tools output,file-upload output,file-workspace-root output,private-services output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px;overflow-wrap:anywhere} |
| 155 | rpc-form output[data-error],file-tools output[data-error],file-upload output[data-error]{color:var(--alert)} |
| 156 | file-workspace-root ul{list-style:none;margin:8px 0 0;padding:0 0 0 16px;border-left:1px solid var(--line)}file-workspace-root li{padding:3px 0} |
| 157 | file-workspace-root button{background:transparent;border:0;padding:0;color:var(--accent);font:inherit;text-align:left} |
| 158 | #content>section>h3{border-bottom:0;margin-top:22px;font-size:15px} |
| 159 | |
| 160 | connect-list{display:block}connect-list #rows td{height:auto;padding:8px 10px;white-space:normal;vertical-align:middle}connect-list #rows td:first-child{width:150px}connect-list #rows td:nth-child(2){color:var(--muted)}connect-list #rows td:nth-child(2) b{color:var(--ink);font-weight:normal}connect-list #rows td:nth-child(3){width:110px}connect-list #rows td:last-child{width:190px;white-space:nowrap}connect-list button,connect-list select{font-size:12px}connect-list output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px}connect-list output[data-error]{color:var(--alert)} |
| 161 | relay-lists{display:block}relay-lists #rows td{height:auto;padding:8px 10px;white-space:normal;vertical-align:middle}relay-lists #rows td:last-child{width:230px;text-align:left;color:var(--ink);white-space:nowrap}relay-lists #rows td:first-child{width:170px;color:var(--ink);font-family:var(--sans)}relay-lists output{display:block;font:12px var(--mono);color:var(--muted);white-space:normal}relay-lists button{font-size:12px} |
| 162 | |
| 163 | /* agent-card: one grant's facts and controls. agent-grant signs a new one. */ |
| 164 | agent-card{display:block;border-bottom:1px solid var(--line);padding:10px 0;max-width:720px} |
| 165 | agent-card h3{margin:0 0 4px;border:0;font-size:15px}agent-card h3 small{font:12px var(--mono);color:var(--muted)} |
| 166 | agent-card table{border-collapse:collapse;font:13px var(--mono);width:auto;margin:0} |
| 167 | agent-card th{text-align:left;font-weight:normal;color:var(--muted);width:9em;padding:3px 0;border:0;vertical-align:top}agent-card td{padding:3px 0;border:0;overflow-wrap:anywhere} |
| 168 | agent-card td code{color:var(--muted)} |
| 169 | agent-card p{margin:8px 0 0}agent-card rpc-form{display:inline-block;border:0;padding:0;margin:0 8px 0 0;vertical-align:top}agent-card rpc-form output:empty{display:none} |
| 170 | agent-card p>a{display:inline-block;font:12px var(--mono);line-height:29px;vertical-align:top} |
| 171 | /* #requests: access requests waiting for a decision, with their controls. #decided lists the last answered ones. */ |
| 172 | #requests{border-collapse:collapse;width:100%;max-width:720px;font:13px var(--mono)} |
| 173 | #requests th{text-align:left;font:12px var(--mono);color:var(--muted);font-weight:normal;padding:0 6px;height:28px;border-bottom:1px solid var(--line)} |
| 174 | #requests td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;line-height:1.35} |
| 175 | #requests td:nth-child(2){font-family:var(--sans)}#requests td:nth-child(3){white-space:nowrap;color:var(--muted);font-size:12px}#requests td:last-child{white-space:nowrap;width:150px} |
| 176 | #requests rpc-form{display:inline-block;border:0;padding:0;margin:0 6px 0 0;vertical-align:middle}#requests rpc-form output:empty{display:none}#requests button{font-size:12px;padding:1px 6px} |
| 177 | #decided{list-style:none;margin:8px 0 0;padding:0;max-width:720px}#decided li{padding:3px 0;font:13px var(--mono)}#decided li small{color:var(--muted)} |
| 178 | #decided li[data-state=approved] small{color:var(--accent)}#decided li[data-state=denied] small{color:var(--alert)} |
| 179 | |
| 180 | /* #custom-views: the owner's custom views with their controls. view-form adds one and shows its secret once. */ |
| 181 | #custom-views{border-collapse:collapse;width:100%;max-width:960px;font:13px var(--mono)} |
| 182 | #custom-views th{text-align:left;font:12px var(--mono);color:var(--muted);font-weight:normal;padding:0 6px;height:28px;border-bottom:1px solid var(--line)} |
| 183 | #custom-views td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;line-height:1.35} |
| 184 | #custom-views td:nth-child(7){white-space:nowrap;color:var(--muted);font-size:12px}#custom-views td:last-child{white-space:nowrap;width:210px} |
| 185 | #custom-views rpc-form{display:inline-block;border:0;padding:0;margin:0 6px 0 0;vertical-align:middle}#custom-views rpc-form output:empty{display:none}#custom-views button{font-size:12px;padding:1px 6px} |
| 186 | #custom-views-empty{color:var(--muted);font:13px var(--sans)} |
| 187 | view-form{display:block;border-bottom:1px solid var(--line);padding:10px 0;max-width:720px} |
| 188 | view-form label{display:inline-block;margin:0 10px 6px 0;vertical-align:top;font:13px var(--sans);color:var(--muted)} |
| 189 | view-form label input,view-form label select{display:block;margin-top:2px;font:13px var(--mono);min-width:200px} |
| 190 | view-form [role=alert]{color:var(--alert);font:13px var(--sans);margin:8px 0 4px}view-form label[data-secret] input{min-width:320px} |
| 191 | /* figure[data-view]: a transparent artifact with a native source disclosure. */ |
| 192 | figure[data-view]{margin:12px 0}view-artifact{display:block}view-artifact img{display:block;max-width:100%;height:auto;background:transparent}view-artifact img[hidden]{display:none}view-artifact details{margin-top:6px}view-artifact details>summary{cursor:pointer;color:var(--muted);font:12px var(--mono)}view-artifact pre{margin:6px 0 0} |
| 193 | /* agent-callback: one registered callback on an agent card, with its controls. */ |
| 194 | agent-callback{display:block;margin:0 0 4px}agent-callback code{color:inherit} |
| 195 | agent-callback rpc-form{display:inline-block;border:0;padding:0;margin:0 0 0 6px;vertical-align:middle}agent-callback rpc-form output:empty{display:none}agent-callback button{font-size:12px;padding:1px 6px} |
| 196 | #rows:has(td[data-state]){table-layout:fixed}#rows:has(td[data-state]) td:nth-child(3){width:110px}#rows:has(td[data-state]) td:last-child{width:150px} |
| 197 | [data-state=active],#rows td[data-state=active]{color:var(--accent)}[data-state=paused],#rows td[data-state=paused]{color:var(--bark)}[data-state=revoked],#rows td[data-state=revoked]{color:var(--alert)} |
| 198 | agent-grant,profile-form{display:block;border-bottom:1px solid var(--line);padding:10px 0;max-width:720px} |
| 199 | agent-grant label,profile-form label{display:inline-block;margin:0 10px 6px 0;vertical-align:top;font:13px var(--sans);color:var(--muted)} |
| 200 | agent-grant label input,agent-grant label select,profile-form label input{display:block;margin-top:2px;font:13px var(--mono);min-width:200px}profile-form label:has(textarea){display:block}profile-form textarea{display:block;width:100%;max-width:520px;min-height:3em;font:13px var(--mono)}profile-form output{white-space:pre-wrap} |
| 201 | agent-grant label:has(textarea),agent-grant label[data-secret]{display:block}agent-grant label[data-secret] input{width:100%}agent-grant label[hidden]{display:none} |
| 202 | agent-grant output,profile-form output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px;overflow-wrap:anywhere}agent-grant output[data-error],profile-form output[data-error]{color:var(--alert)} |
| 203 | #panel rpc-form{border:0;padding:4px 0}#panel rpc-form output:empty{display:none} |
| 204 | connect-card{display:block;border-bottom:1px solid var(--line);padding:10px 0;max-width:720px}connect-card h3{margin:0 0 4px;border:0;font-size:15px}connect-card h3 small{font:12px var(--mono);color:var(--muted)}connect-card p{margin:0 0 6px;color:var(--muted)}connect-card label{display:inline-block;font:13px var(--sans);color:var(--muted);margin:0 10px 6px 0}connect-card label input{display:block;font:13px var(--mono);min-width:200px}connect-card a,connect-card button{margin-right:10px;font-size:13px}connect-card output{display:block;font:12px var(--mono);color:var(--muted);overflow-wrap:anywhere}connect-card details img{display:block;margin:6px 0;background:#fff;padding:6px;border:1px solid var(--line)} |
| 205 | |
| 206 | /* json-view: structured rendering of any JSON payload. */ |
| 207 | json-view{display:block;font:12px var(--mono)} |
| 208 | json-view>details>summary{cursor:pointer;color:var(--muted)} |
| 209 | json-view>details>pre{margin:.3rem 0;padding:.5rem;border:1px solid var(--line);background:var(--rail);font-size:12px} |
| 210 | json-view table{font-size:12px}json-view td pre{margin:0;white-space:pre;max-width:40em;overflow:auto} |
| 211 | json-view dl dl{margin:.2rem 0 .2rem 1rem}json-view ul{margin:.2rem 0;padding-left:1.2rem}json-view code{overflow-wrap:anywhere} |
| 212 | |
| 213 | /* nostr-event: one event in feeds, activity, and detail pages. */ |
| 214 | #events{list-style:none;margin:0;padding:0} |
| 215 | nostr-event{display:block;border-bottom:1px solid var(--line);padding:10px 0} |
| 216 | nostr-event>header{font:12px var(--mono);color:var(--muted);margin-bottom:4px} |
| 217 | nostr-event>header small{float:right} |
| 218 | nostr-event>pre{margin:0;white-space:pre-wrap;font:14px/1.45 var(--sans)} |
| 219 | nostr-event>details{margin-top:6px;font:12px var(--mono)}nostr-event>details>summary{cursor:pointer;color:var(--muted)} |
| 220 | nostr-key{font-family:var(--mono);cursor:copy}page-link{cursor:copy}page-link[data-copied]::after{content:" copied" ;color:var(--accent)}nostr-name{font-family:var(--mono)} |
| 221 | |
| 222 | /* approval-item: one request that waits for a decision, in the open rhythm of nostr-event. */ |
| 223 | approval-item{display:block;border-bottom:1px solid var(--line);padding:10px 0;max-width:720px} |
| 224 | approval-item>header{font:12px var(--mono);color:var(--muted)}approval-item>header nostr-key,approval-item>header nostr-name{color:var(--ink);font-weight:500} |
| 225 | approval-item>p{margin:4px 0 6px} |
| 226 | approval-item>pre{background:var(--rail);border:1px solid var(--line);padding:8px 10px;font-size:12px;margin:6px 0} |
| 227 | approval-item>footer{font:12px var(--mono);color:var(--muted)}approval-item>footer button{margin-right:6px;font-size:13px} |
| 228 | approval-item>footer details{display:inline-block;vertical-align:top;margin-right:6px}approval-item>footer details>summary{cursor:pointer;color:var(--accent);font-size:13px} |
| 229 | approval-item>footer details[open]{display:block;margin:6px 0}approval-item>footer nostr-compose{border-bottom:0;padding:6px 0 0} |
| 230 | approval-item[data-focus]{background:var(--soft);padding-left:10px;padding-right:10px;border:1px solid var(--line)} |
| 231 | nostr-react{display:inline-block;vertical-align:top}nostr-react form{display:inline}nostr-react output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px}nostr-react output[data-error]{color:var(--alert)} |
| 232 | nostr-react output button{margin:0 6px 0 0;font-size:12px} |
| 233 | #rows tr[data-state=expired] td:last-child{color:var(--bark)} |
| 234 | #panel p i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g3);margin-right:6px} |
| 235 | |
| 236 | /* Repository: tree with a preview pane. */ |
| 237 | #split{width:100%;border-collapse:collapse;table-layout:fixed;margin:0} |
| 238 | #split>tbody>tr>td{vertical-align:top;padding:0;border:0} |
| 239 | #tree{width:300px;overflow:auto;border-right:1px solid var(--line);font:13px/24px var(--mono);padding:8px 0 20px} |
| 240 | #tree header{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#tree header small{float:right} |
| 241 | #tree ul{list-style:none;margin:0 0 0 16px;padding:0 0 0 14px;border-left:1px solid var(--muted)} |
| 242 | #tree li{white-space:nowrap;position:relative} |
| 243 | #tree li>a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top} |
| 244 | #tree li::before{content:"";position:absolute;left:-14px;top:12px;width:10px;border-top:1px solid var(--muted)} |
| 245 | #tree li:last-child::after{content:"";position:absolute;left:-15px;top:12px;bottom:0;width:1px;background:var(--rail)} |
| 246 | #tree li>span{color:var(--muted)} |
| 247 | #tree a{color:var(--ink)}#tree a[aria-current=page]{background:var(--soft);padding:0 4px} |
| 248 | #preview{padding:0;overflow:hidden} |
| 249 | #preview header{padding:0 12px;height:36px;line-height:36px;border-bottom:1px solid var(--line);font:13px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} |
| 250 | #preview header a{float:right} |
| 251 | #preview p{color:var(--muted);padding:24px 12px;font:13px var(--mono)} |
| 252 | #preview>section{padding:12px} |
| 253 | |
| 254 | /* source-view and diff-view wrap the tables emitted by the source renderer. */ |
| 255 | source-view,diff-view{display:block;overflow:auto} |
| 256 | diff-view{border:1px solid var(--line);margin:0 0 14px} |
| 257 | source-view table,diff-view table{border-collapse:collapse;width:100%;margin:0;font:13px/20px var(--mono)} |
| 258 | source-view td,diff-view td{padding:0 12px;border:0;white-space:pre;vertical-align:top;tab-size:4;overflow-wrap:normal;word-break:normal} |
| 259 | source-view td:first-child,diff-view td:first-child{color:var(--muted);text-align:right;user-select:none;width:1%;padding-right:8px} |
| 260 | source-view td:first-child a,diff-view td:first-child a{text-decoration:none;color:var(--muted)} |
| 261 | source-view td:last-child,diff-view td:last-child{width:100%} |
| 262 | source-view tr:target,diff-view tr:target{background:var(--soft)} |
| 263 | source-view code,diff-view code{font:inherit} |
| 264 | source-view b{font-weight:600}source-view i{font-style:normal;color:var(--muted)}source-view q{quotes:none;color:var(--g4)}source-view q::before,source-view q::after{content:none}source-view var{font-style:normal;color:var(--bark)} |
| 265 | source-view tfoot td,diff-view tfoot td{white-space:normal;color:var(--muted);font-family:var(--sans)} |
| 266 | diff-view ins,diff-view del{text-decoration:none}diff-view tr:has(ins){background:var(--add)}diff-view tr:has(del){background:var(--del)}diff-view b{color:var(--muted);font-weight:600} |
| 267 | diff-view caption{text-align:left;font:13px var(--mono);padding:8px 12px;border-bottom:1px solid var(--line);caption-side:top} |
| 268 | /* Review comments: the link that starts one on a diff line, and the comments placed under that line. */ |
| 269 | diff-view td>small{margin-left:12px;font:11px var(--sans)}diff-view td>small a{color:var(--muted);text-decoration:none}diff-view tr:hover td>small a,diff-view td>small a:focus{color:var(--fg);text-decoration:underline} |
| 270 | diff-view td>nostr-event{white-space:normal;max-width:720px;border:0;padding:6px 0 4px}diff-view td>details{white-space:normal;font:12px var(--mono);margin:0 0 8px}diff-view td>details>summary{cursor:pointer;color:var(--muted)}diff-view td>details nostr-compose{border-bottom:0;padding:6px 0 0} |
| 271 | #reply-anchor{font:13px var(--sans);color:var(--muted)}#events li>p{margin:-6px 0 8px;font:12px var(--mono);color:var(--muted)} |
| 272 | |
| 273 | /* Wiki: the page list, one article, the merge request bar and the editor. */ |
| 274 | #wiki-list #rows th{white-space:nowrap}#wiki-list #rows td:first-child{width:auto;font:14px var(--sans)}#wiki-list #rows td:nth-child(2){font:13px var(--mono)}#wiki-list #rows td:nth-child(3),#wiki-list #rows td:nth-child(4){width:110px;font:12px var(--mono);color:var(--muted)} |
| 275 | wiki-article{display:block;max-width:720px;overflow-wrap:anywhere}wiki-article>header{font:12px var(--mono);color:var(--muted);margin-bottom:8px}wiki-article>header nostr-key,wiki-article>header nostr-name{color:var(--ink)} |
| 276 | wiki-article h1{font-size:20px;margin:18px 0 8px}wiki-article h2{font-size:17px}wiki-article h3{font-size:15px}wiki-article p{margin:0 0 10px}wiki-article table{border-collapse:collapse;margin:0 0 12px;font:13px var(--sans);width:auto}wiki-article th,wiki-article td{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top;height:auto;white-space:normal}wiki-article th{font-weight:600;background:var(--rail)} |
| 277 | wiki-article pre{background:var(--rail);border:1px solid var(--line);padding:10px 12px;overflow:auto;font-size:12.5px;line-height:1.5;white-space:pre}wiki-article ul,wiki-article ol{padding-left:20px;margin:0 0 10px} |
| 278 | merge-request,wiki-proposal,collaboration-proposal{display:block;border:1px solid var(--line);background:var(--soft);padding:8px 10px;margin:0 0 14px;max-width:720px;font:13px var(--sans)}merge-request nostr-key,merge-request nostr-name,wiki-proposal nostr-key,wiki-proposal nostr-name,collaboration-proposal nostr-key,collaboration-proposal nostr-name{color:var(--ink);font-weight:500}merge-request>a,merge-request button,wiki-proposal button,collaboration-proposal button{margin-left:6px;font-size:12px} |
| 279 | merge-request nostr-react,merge-request nostr-react form,wiki-proposal nostr-react,wiki-proposal nostr-react form,collaboration-proposal nostr-react,collaboration-proposal nostr-react form{display:inline}merge-request nostr-react output,wiki-proposal nostr-react output,collaboration-proposal nostr-react output{display:inline-block;margin-left:6px;font:12px var(--mono);color:var(--muted)}merge-request nostr-react output[data-error],wiki-proposal nostr-react output[data-error],collaboration-proposal nostr-react output[data-error]{color:var(--alert)} |
| 280 | wiki-proposal[data-state=pending],collaboration-proposal[data-state=pending]{border-color:var(--bark)}wiki-proposal[data-state=rejected],collaboration-proposal[data-state=rejected]{border-color:var(--alert)}#wiki-list #rows td:first-child small,#panel li[data-state]{font:12px var(--mono)}#wiki-list #rows td:first-child small{margin-left:6px}#wiki-list #rows tr[data-state=pending] small,#panel li[data-state=pending]{color:var(--bark)}#wiki-list #rows tr[data-state=approved] small,#panel li[data-state=approved]{color:var(--accent)}#wiki-list #rows tr[data-state=rejected] small,#panel li[data-state=rejected]{color:var(--alert)} |
| 281 | #events li>collaboration-proposal,diff-view td>collaboration-proposal{margin:6px 0 8px;max-width:none}#collaboration-list #rows tr[data-state] td:nth-child(2)>small:first-of-type{font:12px var(--mono)}#collaboration-list #rows tr[data-state=pending] td:nth-child(2)>small:first-of-type{color:var(--bark)}#collaboration-list #rows tr[data-state=approved] td:nth-child(2)>small:first-of-type{color:var(--accent)}#collaboration-list #rows tr[data-state=rejected] td:nth-child(2)>small:first-of-type{color:var(--alert)} |
| 282 | #merge-status{font:12px var(--mono);color:var(--muted)}#wiki-compare h2{margin-top:18px}#wiki-redirects,#wiki-revision-note{font:12px var(--mono);color:var(--muted)}#wiki-revision-note{margin:0 0 10px}wiki-proposal>small{display:block;margin-top:4px;font:12px var(--mono);color:var(--muted)}#wiki-page #rows td small{font:12px var(--mono);color:var(--muted)} |
| 283 | wiki-compose{display:block;max-width:720px;border-bottom:1px solid var(--line);padding:10px 0} |
| 284 | wiki-compose label{display:inline-block;margin:0 10px 6px 0;vertical-align:top;font:13px var(--sans);color:var(--muted)}wiki-compose label input{display:block;margin-top:2px;font:13px var(--mono);min-width:200px} |
| 285 | wiki-compose label:has(textarea){display:block}wiki-compose textarea{min-height:14em}wiki-compose button{margin-right:6px} |
| 286 | wiki-compose output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px;overflow-wrap:anywhere}wiki-compose output[data-error]{color:var(--alert)} |
| 287 | |
| 288 | /* Activity grid. */ |
| 289 | #grid{border-collapse:separate;border-spacing:2px;margin:0 0 8px;width:auto} |
| 290 | #grid td{width:10px;height:10px;padding:0;border:0;background:var(--g0)} |
| 291 | #grid td[data-l="1"]{background:var(--g1)}#grid td[data-l="2"]{background:var(--g2)}#grid td[data-l="3"]{background:var(--g3)}#grid td[data-l="4"]{background:var(--g4)} |
| 292 | #grid th{font:11px var(--mono);color:var(--muted);font-weight:normal;text-align:left;padding:0;border:0} |
| 293 | #gridhead{font:12px var(--mono);color:var(--muted);margin:0 0 6px} |
| 294 | |
| 295 | /* Sign in. */ |
| 296 | #signin{max-width:720px} |
| 297 | #signer-qr:not([hidden]){display:block;box-sizing:border-box;width:min(240px,100%);height:auto;aspect-ratio:1;margin:8px 0;background:#fff;padding:8px;border:1px solid var(--line)} |
| 298 | |
| 299 | /* Rooms: the rail lists rooms, messages read oldest first, and the compose bar stays at the bottom of the column. */ |
| 300 | #rail h4{margin:16px 0 4px;padding:0 2ch 0 2.5ch;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em} |
| 301 | #room-list a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#room-list a small{float:right;color:var(--muted);font-size:11px} |
| 302 | #room-list room-avatar{display:inline-block;vertical-align:middle;width:24px;height:24px;margin-right:7px} |
| 303 | #room-list room-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover} |
| 304 | #rooms #rows room-avatar,#chat #rows room-avatar{display:inline-block;vertical-align:middle;width:32px;height:32px;margin-right:8px} |
| 305 | #rooms #rows room-avatar img,#chat #rows room-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover} |
| 306 | #rooms #rows td:first-child{width:220px}#rooms #rows td:nth-child(3){text-align:right;width:80px;font:12px var(--mono)} |
| 307 | #content>section#room,#content>section#thread{padding-bottom:0} |
| 308 | #room h1 small,#thread h1 small{font:12px var(--mono);color:var(--muted)} |
| 309 | #room h1 room-avatar{display:inline-block;vertical-align:middle;width:40px;height:40px;margin-right:10px} |
| 310 | #room h1 room-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover} |
| 311 | #thread #crumbs room-avatar{display:inline-block;vertical-align:middle;width:28px;height:28px;margin-right:7px} |
| 312 | #thread #crumbs room-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover} |
| 313 | #crumbs,#newest,#empty{font:12px var(--mono);color:var(--muted)} |
| 314 | /* Rooms read as a centered conversation column; the compose bar spans the |
| 315 | content column but its controls sit in the same 720px lane. */ |
| 316 | #room>*:not(room-compose),#thread>*:not(room-compose),room-compose>*{max-width:720px;margin-left:auto;margin-right:auto} |
| 317 | room-message{display:block;position:relative;min-width:0;margin:10px 0;padding:12px 0 14px 44px;border-bottom:1px solid var(--line)} |
| 318 | room-message>nostr-avatar{position:absolute;top:12px;left:0} |
| 319 | nostr-avatar,room-avatar{display:inline-block;box-sizing:border-box;width:32px;height:32px;overflow:hidden;border:1px solid var(--line);border-radius:50%;background:var(--rail);color:var(--muted);text-align:center;font:11px/30px var(--mono);user-select:none;-webkit-user-select:none} |
| 320 | nostr-avatar img,room-avatar img{display:block;width:100%;height:100%;object-fit:cover} |
| 321 | room-message>header{font:12px/1.5 var(--mono);color:var(--muted);margin-bottom:6px;overflow-wrap:anywhere;user-select:none;-webkit-user-select:none} |
| 322 | room-message>header b{color:var(--ink);font-weight:500}room-message>header b nostr-key{cursor:copy} |
| 323 | room-message>header small{float:right;margin-left:8px;white-space:nowrap} |
| 324 | room-message[data-own]{margin-left:24px;padding:12px 14px 14px 56px;background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px} |
| 325 | room-message[data-own]>nostr-avatar{left:12px} |
| 326 | room-message [data-own-label]{margin-left:6px;color:var(--accent);font-size:11px} |
| 327 | room-message>p,room-message>div{min-width:0;margin:0;font:14px/1.55 var(--sans);overflow-wrap:anywhere}room-message>p{white-space:pre-wrap} |
| 328 | room-message>[data-quote]{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--accent);background:var(--rail);font:12px/1.4 var(--mono);overflow-wrap:anywhere} |
| 329 | room-message>p a,room-message>div a{color:var(--accent)} |
| 330 | room-message>div p{margin:0 0 6px}room-message>div>:last-child{margin-bottom:0}room-message>div ul,room-message>div ol{margin:0 0 6px 20px;padding:0} |
| 331 | room-message>div pre{margin:0 0 6px;padding:6px 8px;background:var(--rail);border:1px solid var(--line);overflow:auto;font:12px/1.4 var(--mono);white-space:pre}room-message>div code{font:12px var(--mono)}room-message>div h1,room-message>div h2,room-message>div h3,room-message>div h4{margin:4px 0 6px;font-size:14px;border:0} |
| 332 | room-message>[data-room-attachments]{margin-top:8px}room-message>[data-room-attachments] figure{display:inline-block;vertical-align:top;margin:0 12px 12px 0;max-width:100%;min-width:0}room-message>[data-room-attachments] img{display:block;width:auto;max-width:100%;max-height:360px;border:1px solid var(--line);object-fit:contain}room-message>[data-room-attachments] video{display:block;width:420px;max-width:100%;max-height:360px}room-message>[data-room-attachments] audio{display:block;width:360px;max-width:100%}room-message>[data-room-attachments] figcaption{margin-top:4px;font:12px var(--mono);overflow-wrap:anywhere}room-message>[data-room-attachments] a[data-download]{color:var(--accent)}room-message>[data-room-attachments] small{color:var(--muted);font:11px var(--mono)} |
| 333 | room-message>footer{font:12px var(--mono);color:var(--muted);margin-top:4px} |
| 334 | room-message>footer>*+*::before{content:" | " } |
| 335 | room-message[data-notice]>p{color:var(--muted);font-size:13px} |
| 336 | room-live{display:block;font:11px var(--mono);color:var(--muted);text-align:right}room-live:empty{display:none} |
| 337 | room-compose{display:block;position:sticky;bottom:0;margin:8px -22px 0;padding:10px 22px 8px;background:var(--paper);border-top:1px solid var(--line)} |
| 338 | room-compose-bar{display:block;position:relative;padding:4px 52px 4px 8px;border:1px solid var(--line);border-radius:16px;background:var(--rail)} |
| 339 | room-compose-bar:has([data-attach]){padding-left:48px} |
| 340 | room-compose-bar:focus-within{border-color:var(--muted)} |
| 341 | room-compose textarea{display:block;width:100%;height:44px;min-height:44px;max-height:144px;max-height:min(144px,30dvh);padding:11px 4px;border:0;outline:none;resize:none;background:transparent;font:16px/22px var(--sans)} |
| 342 | room-compose textarea::placeholder{color:var(--muted);opacity:1} |
| 343 | room-compose-bar>button{position:absolute;bottom:4px;width:44px;height:44px;padding:11px;border:0;border-radius:12px;line-height:0} |
| 344 | room-compose-bar>button[data-attach]{left:4px;background:transparent;color:var(--muted)} |
| 345 | room-compose-bar>button[type=submit]{right:4px;background:var(--accent);color:var(--paper)} |
| 346 | room-compose-bar>button:hover{filter:brightness(.9)} |
| 347 | room-compose-bar>button:disabled{opacity:.55;filter:none} |
| 348 | room-compose button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} |
| 349 | room-compose [hidden]{display:none} |
| 350 | room-compose[data-over] room-compose-bar{outline:2px dashed var(--accent);outline-offset:2px;background:var(--soft)} |
| 351 | room-files{display:block;overflow-x:auto;overscroll-behavior-x:contain} |
| 352 | room-files:empty{display:none} |
| 353 | room-files ul{list-style:none;white-space:nowrap;margin:0;padding:0 0 8px} |
| 354 | room-files li{display:inline-block;position:relative;vertical-align:top;box-sizing:border-box;width:232px;max-width:100%;height:64px;margin-right:8px;padding:10px 40px 10px 62px;border:1px solid var(--line);border-radius:12px;background:var(--rail);font:13px/21px var(--sans)} |
| 355 | room-files li:last-child{margin-right:0} |
| 356 | room-files img,room-files li>span[data-preview]{position:absolute;left:8px;top:8px;box-sizing:border-box;width:46px;height:46px;border-radius:6px;object-fit:cover;background:var(--soft)} |
| 357 | room-files li>span[data-preview]{text-align:center;color:var(--accent);font:10px/46px var(--mono);text-transform:uppercase} |
| 358 | room-files li>span:not([data-preview]),room-files small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| 359 | room-files small{color:var(--muted);font-size:11px} |
| 360 | room-files button{position:absolute;right:0;top:0;width:44px;height:44px;padding:0;border:0;border-radius:0 12px;background:transparent;color:var(--muted);font:22px var(--sans)} |
| 361 | room-compose output,room-create output,room-action output{display:block;font:12px var(--mono);color:var(--muted);margin-top:4px;overflow-wrap:anywhere} |
| 362 | room-compose output:empty{display:none} |
| 363 | room-compose output[data-error],room-create output[data-error],room-action output[data-error]{color:var(--alert)} |
| 364 | room-create{display:block;max-width:720px;border-bottom:1px solid var(--line);padding:10px 0} |
| 365 | room-create label{display:inline-block;margin:0 10px 6px 0;vertical-align:top;font:13px var(--sans);color:var(--muted)} |
| 366 | room-create label input,room-create label select{display:block;margin-top:2px;font:13px var(--mono);min-width:200px}room-create label:has(textarea){display:block} |
| 367 | room-action{display:block}#panel room-action label{margin-top:6px}#panel room-action button{margin-top:8px} |
| 368 | #members li[data-agent] small{color:var(--bark)} |
| 369 | #panel #members li{font:12px var(--mono);line-height:22px} |
| 370 | |
| 371 | /* Phones keep conversation identity and navigation in a safe-area-aware header. |
| 372 | Native details controls expose the rail and contextual panel without scripts. */ |
| 373 | @media(max-width:720px){ |
| 374 | :root{--mobile-header-height:calc(64px + env(safe-area-inset-top,0px));--mobile-drawer-width:min(320px,100vw);--mobile-drawer-duration:.15s} |
| 375 | html:has(signer-connection:not([hidden])){--mobile-header-height:calc(108px + env(safe-area-inset-top,0px))} |
| 376 | html,body{overflow:auto;scroll-padding-top:var(--mobile-header-height)} |
| 377 | #topbar{display:block;position:fixed;top:0;left:0;right:0;height:var(--mobile-header-height);background:var(--rail);border-bottom:1px solid var(--line);color:var(--ink);z-index:5;box-sizing:border-box} |
| 378 | signer-connection{display:block;position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:0;right:0;height:44px;padding:0 12px;box-sizing:border-box;border-top:1px solid var(--line);background:var(--soft);font:12px/44px var(--sans);color:var(--ink)} |
| 379 | signer-connection[hidden]{display:none} |
| 380 | signer-connection>span{display:block;padding-right:92px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} |
| 381 | signer-connection>button{position:absolute;right:8px;top:0;min-width:88px;height:44px;border:0;background:transparent;color:var(--accent);font:600 12px var(--sans)} |
| 382 | body:has(signer-connection:not([hidden])) #session-status{display:none} |
| 383 | #mobile-back,#menu{display:block;box-sizing:border-box;width:44px;height:44px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--ink);line-height:0;cursor:pointer;text-align:center} |
| 384 | #mobile-back{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:calc(6px + env(safe-area-inset-left,0px))} |
| 385 | #mobile-back:hover,#menu:hover,#context-toggle:hover{background:var(--hover);text-decoration:none} |
| 386 | #nav-menu{position:absolute;right:calc(8px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));margin:0} |
| 387 | #menu,#context-toggle{list-style:none} |
| 388 | #menu::-webkit-details-marker,#context-toggle::-webkit-details-marker{display:none} |
| 389 | #menu [data-close-icon],#nav-menu[open] [data-menu-icon]{display:none} |
| 390 | #nav-menu[open] [data-close-icon]{display:inline} |
| 391 | #context-menu{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));right:calc(62px + env(safe-area-inset-right,0px));top:calc(4px + env(safe-area-inset-top,0px));min-width:0} |
| 392 | #topbar:has(#mobile-back) #context-menu{left:calc(54px + env(safe-area-inset-left,0px))} |
| 393 | #context-toggle{position:relative;display:block;box-sizing:border-box;height:56px;padding:9px 20px 9px 0;border-radius:8px;cursor:pointer;min-width:0} |
| 394 | #context-toggle:has(room-avatar),#context-toggle:has(nostr-avatar){padding-left:44px} |
| 395 | #context-toggle>room-avatar,#context-toggle>nostr-avatar{position:absolute;left:0;top:10px;width:36px;height:36px} |
| 396 | #mobile-heading,#mobile-title,#mobile-context{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} |
| 397 | #mobile-title{font:600 16px/21px var(--sans);color:var(--ink)} |
| 398 | #mobile-context{font:12px/17px var(--sans);color:var(--muted)} |
| 399 | #context-toggle>[data-chevron]{position:absolute;right:0;top:20px;color:var(--muted)} |
| 400 | #context-menu[open] #context-toggle>[data-chevron]{transform:rotate(180deg)} |
| 401 | #topbar a:focus-visible,#topbar summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} |
| 402 | #layout,#layout>tbody,#layout>tbody>tr,#layout>tbody>tr>td{display:block;width:auto;height:auto} |
| 403 | #layout{padding:var(--mobile-header-height) 0 env(safe-area-inset-bottom,0px)} |
| 404 | #railbox,#content,#panel{position:static;overflow:visible} |
| 405 | #layout>tbody>tr>td#rail{position:fixed;top:var(--mobile-header-height);bottom:calc(96px + env(safe-area-inset-bottom,0px));left:0;width:var(--mobile-drawer-width);height:auto;box-sizing:border-box;border-right:1px solid var(--line);z-index:4;overflow:hidden auto} |
| 406 | #layout>tbody>tr>td#rail,#footer{transform:translateX(-102%);visibility:hidden;transition:transform var(--mobile-drawer-duration) ease,visibility 0s linear var(--mobile-drawer-duration)} |
| 407 | #railbox{position:relative;min-height:100%} |
| 408 | body:has(#nav-menu[open]) #main::after{content:"";position:fixed;top:var(--mobile-header-height);bottom:0;left:0;right:0;background:rgba(0,0,0,.25);z-index:3} |
| 409 | body:has(#nav-menu[open]) #layout>tbody>tr>td#rail,body:has(#nav-menu[open]) #footer{transform:none;visibility:visible;transition-delay:0s} |
| 410 | body:has(#nav-menu[open]) #layout>tbody>tr>td#rail{box-shadow:8px 0 24px rgba(0,0,0,.15)} |
| 411 | #layout>tbody>tr>td#aside{display:none;width:auto;border-left:0;border-top:0} |
| 412 | body:has(#context-menu[open]) #layout>tbody>tr>td#aside{display:block;position:fixed;top:var(--mobile-header-height);bottom:0;left:0;right:0;height:auto;overflow:auto;z-index:4;background:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)} |
| 413 | #content>section{padding:14px 2.5ch 20px} |
| 414 | #room>h1,#thread>#crumbs,#direct-chat>header>h1{display:none} |
| 415 | #thread>h1{font-size:0;margin-bottom:8px}#thread>h1 small{font-size:12px} |
| 416 | #mobile-actions{display:block;padding:12px 20px;border-top:1px solid var(--line)} |
| 417 | #personal-nav{display:none} |
| 418 | #mobile-actions>a,#mobile-actions button{display:block;box-sizing:border-box;width:100%;min-height:44px;padding:12px 0;font:13px/20px var(--sans);text-align:left;background:none;border:0;color:var(--accent)} |
| 419 | #mobile-actions page-link{display:block} |
| 420 | html[data-js=no] #mobile-actions page-link{display:none} |
| 421 | #prompt{display:none} |
| 422 | #footer{width:var(--mobile-drawer-width);height:calc(96px + env(safe-area-inset-bottom,0px));padding:0 12px env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);border-right:1px solid var(--line);background:var(--rail);z-index:4} |
| 423 | #footer>table{display:table;height:56px;table-layout:fixed} |
| 424 | #footer td:first-child{display:none}#footer td:last-child{text-align:left;white-space:nowrap;overflow:hidden} |
| 425 | #who{font-size:11px}#who>a{display:inline-block;max-width:100px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#who button{min-height:44px} |
| 426 | #install:not([hidden]){display:block;position:static;transform:none;width:100%;height:40px;text-align:left} |
| 427 | #navigation-status:not(:empty),#session-status:not(:empty){position:fixed;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;padding:6px 12px;background:var(--rail);border-top:1px solid var(--line);white-space:normal} |
| 428 | #split,#split>tbody,#split>tbody>tr,#split>tbody>tr>td{display:block;width:auto} |
| 429 | #tree{border-right:0;border-bottom:1px solid var(--line)} |
| 430 | #rows{table-layout:fixed}#rows td{white-space:normal;overflow-wrap:anywhere;height:auto;padding:8px 6px;line-height:1.35}#rows td:first-child{width:90px}#rows td:last-child{width:80px}#rows:has(td[data-state]) td:nth-child(3),#rows:has(td[data-state]) th:nth-child(3){display:none}#rows:has(td[data-state]) td:last-child{width:80px}connect-list #rows td:nth-child(2),connect-list #rows th:nth-child(2){display:none}connect-list #rows td:nth-child(3),connect-list #rows td:last-child{width:auto}connect-list #rows td:last-child{white-space:normal}connect-list #rows td:last-child button{margin:2px 0} |
| 431 | #grid,#gridhead,h2:has(+#gridhead){display:none} |
| 432 | #signin #bunker label{display:block} |
| 433 | #signin #bunker-url{display:block;width:100%;min-width:0;margin-top:2px} |
| 434 | #signin #bunker button{display:block;margin-top:8px} |
| 435 | #signin #remember-signer{width:auto;min-width:0} |
| 436 | #signin p{max-width:60ch} |
| 437 | #signin #signer-qr:not([hidden]){width:min(200px,100%)} |
| 438 | /* Relay lists are compact action cards on phones. The desktop column widths |
| 439 | otherwise force the fixed table wider than the content lane and let the |
| 440 | browser distribute the excess height into each row. */ |
| 441 | relay-lists #rows{table-layout:auto;width:100%} |
| 442 | relay-lists #rows,relay-lists #rows tbody,relay-lists #rows tr{display:block;width:auto} |
| 443 | relay-lists #rows tr{padding:10px 0;border-bottom:1px solid var(--line)} |
| 444 | relay-lists #rows td{display:block;width:auto;padding:0 0 5px;border:0;overflow-wrap:anywhere} |
| 445 | relay-lists #rows td:first-child,relay-lists #rows td:last-child{width:auto} |
| 446 | relay-lists #rows td:last-child{padding-top:3px;white-space:normal} |
| 447 | relay-lists #rows td:last-child button{margin:2px 6px 2px 0} |
| 448 | room-message[data-own]{margin-left:12px;padding-right:10px} |
| 449 | /* Phones: each wiki row reads as a title line and one muted line of facts. */ |
| 450 | #wiki-list #rows thead{display:none}#wiki-list #rows,#wiki-list #rows tbody,#wiki-list #rows tr{display:block;width:auto}#wiki-list #rows tr{padding:8px 0;border-bottom:1px solid var(--line)}#wiki-list #rows td{display:inline;padding:0;border:0;width:auto;height:auto;line-height:1.4;font:12px var(--mono);color:var(--muted)}#wiki-list #rows td:first-child{display:block;font:14px var(--sans);color:var(--ink);margin:0 0 2px}#wiki-list #rows td:first-child small{display:block;margin:2px 0 0}#wiki-list #rows td:nth-child(3){display:none}#wiki-list #rows td:nth-child(2)::after,#wiki-list #rows td:nth-child(4)::after{content:" | "} |
| 451 | room-compose{bottom:0;margin:8px -2.5ch 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));z-index:1} |
| 452 | } |
| 453 | @media(max-width:720px) and (prefers-reduced-motion:reduce){:root{--mobile-drawer-duration:0s}} |
| 454 | |
| 455 | /* Social: a calm reading stream that keeps short notes quick and gives |
| 456 | long-form posts a clear title, image and reading measure. */ |
| 457 | #social,#social-thread{max-width:760px} |
| 458 | #social-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:0} |
| 459 | #social-head h1{margin-bottom:4px}#social-head p{color:var(--muted);margin:0;max-width:60ch} |
| 460 | #social-views{border-bottom:1px solid var(--line);margin:0 0 4px;padding:0} |
| 461 | #social-views a{display:inline-block;padding:10px 14px 8px;color:var(--muted);border-bottom:2px solid transparent;font:12px var(--mono)} |
| 462 | #social-views a:first-child{padding-left:0}#social-views a[aria-current=page]{color:var(--accent);border-color:var(--accent)} |
| 463 | #social-feed{list-style:none;margin:0;padding:0} |
| 464 | #social-feed>li{border-bottom:1px solid var(--line);padding:16px 0 18px;max-width:720px} |
| 465 | #social-feed>li[data-kind=article]{padding-top:20px} |
| 466 | [data-social-byline]{display:table;width:100%;margin-bottom:9px;font:12px/1.35 var(--mono);color:var(--muted)} |
| 467 | [data-social-byline]>span{display:table-cell;vertical-align:middle}[data-social-byline]>span:last-child{width:auto;padding-left:9px} |
| 468 | [data-social-byline] b{color:var(--ink);font-weight:600;font-family:var(--sans)}[data-social-byline] time{margin-left:5px;color:var(--muted)}[data-social-byline] small{margin-left:7px;color:var(--bark)} |
| 469 | [data-social-avatar]{width:34px;height:34px;display:table-cell;box-sizing:border-box;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--accent);text-align:center;vertical-align:middle;font:14px/32px var(--mono);overflow:hidden} |
| 470 | [data-social-avatar] img{display:block;width:100%;height:100%;object-fit:cover} |
| 471 | [data-post-body]{font:15px/1.58 var(--sans);overflow-wrap:anywhere}[data-post-body] p{margin:0 0 10px}[data-post-body]>:last-child{margin-bottom:0}[data-post-body] h1,[data-post-body] h2,[data-post-body] h3{margin:8px 0;font-size:16px}[data-post-body] ul,[data-post-body] ol{margin:0 0 10px;padding-left:22px}[data-post-body] pre{margin:8px 0;padding:9px;background:var(--rail);border:1px solid var(--line);overflow:auto;font:12px/1.45 var(--mono)}[data-post-body] code{font:12px var(--mono)} |
| 472 | [data-post-body=article]{font-size:16px;line-height:1.65;max-width:680px} |
| 473 | [data-post-body=article] h1,[data-post-body=article] h2,[data-post-body=article] h3{font-size:18px} |
| 474 | [data-post-body] a{overflow-wrap:anywhere} |
| 475 | [data-post-body] [data-markdown-table]{font-size:13px} |
| 476 | [data-post-body=article]~[data-social-actions]{margin-top:12px} |
| 477 | [data-post-summary]{font-size:15px;color:var(--muted);margin:0 0 10px;max-width:65ch} |
| 478 | [data-post-media]{display:block;margin:12px 0;border:1px solid var(--line);background:var(--rail)}[data-post-media] img{display:block;width:100%;max-height:380px;object-fit:cover} |
| 479 | [data-read-time]{display:block;margin-top:8px;color:var(--muted);font:12px var(--mono)} |
| 480 | [data-post-embed]{margin:12px 0 0}[data-post-embed] img,[data-post-embed] video{display:block;max-width:100%;max-height:480px;border:1px solid var(--line);background:#000}[data-post-embed] audio{display:block;max-width:100%}[data-post-embed] figcaption{margin-top:4px;color:var(--muted);font:12px var(--mono);overflow-wrap:anywhere} |
| 481 | [data-social-actions]{margin-top:10px;color:var(--muted);font:12px var(--mono)}[data-social-actions]>*{margin-right:12px}[data-social-actions] button{padding:2px 6px;font:12px var(--mono);border-radius:12px}[data-social-actions] button[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:var(--soft)} |
| 482 | #social-pages{font:12px var(--mono);padding:14px 0}#social-empty{padding:24px 0;color:var(--muted)} |
| 483 | social-compose{display:block;border-bottom:1px solid var(--line);padding:12px 0}social-compose form{max-width:720px}social-compose label{display:block;color:var(--muted);font:13px var(--sans)}social-compose textarea{display:block;margin:5px 0 8px;font:15px/1.5 var(--sans);min-height:5em;resize:vertical}social-compose select{margin:0 8px 0 4px;font:12px var(--mono)}social-compose output{display:block;color:var(--muted);font:12px var(--mono);margin-top:5px}social-reaction{display:inline-block;margin-right:8px} |
| 484 | #social-thread-post{list-style:none;margin:0;padding:0}#social-thread-post> [data-social-post]{display:block;border-bottom:0;max-width:720px;padding-bottom:12px}#social-thread-post> [data-social-post]>[data-post-body=article]{font-size:17px;line-height:1.75}#social-comments{border-top:1px solid var(--line);margin-top:22px;padding-top:8px;max-width:720px}#social-comments h2{margin:0 0 8px;font-size:17px}#social-comments ol{list-style:none;margin:0;padding:0}#social-comments li{border-bottom:1px solid var(--line);padding:14px 0}#social-comments [data-comment-body]{font:14px/1.55 var(--sans);overflow-wrap:anywhere}#social-comments [data-comment-body] p{margin:0 0 8px}#social-comments [data-comment-body]>:last-child{margin-bottom:0} |
| 485 | @media(max-width:720px){#social-feed>li{padding:14px 0 16px}[data-post-body=article]{font-size:15px;line-height:1.6}[data-post-media] img{max-height:260px}#social-views a{padding-right:11px}#social-comments{margin-top:16px}} |
| 486 | #social,#social-thread{margin:0 auto;width:100%;box-sizing:border-box} |
| 487 | #social-head{padding-bottom:18px}#social-head h1{font-size:28px;letter-spacing:-.6px} |
| 488 | #social-write{padding:14px 0 0;font-size:13px}#social-write a{display:inline-block;padding:6px 12px;border-radius:16px;color:var(--muted)}#social-write a[aria-current=page]{color:var(--accent);background:var(--soft)} |
| 489 | #social-feed>li{padding:23px 0}#social-feed>li[data-kind="30023"] h2{font:600 26px/1.22 Georgia,serif;letter-spacing:-.25px}#social-feed>li[data-kind="30023"] h2 a{color:var(--ink)} |
| 490 | [data-social-avatar]{width:36px;height:36px;border:0;background:none;line-height:36px}[data-social-avatar] img,[data-social-avatar]>span{display:block;width:36px;height:36px;border-radius:50%;background:var(--soft);object-fit:cover} |
| 491 | [data-social-byline]>span:last-child{padding-left:11px}[data-social-byline] b{font-size:14px}[data-social-byline] small{display:inline-block;font-size:11px} |
| 492 | [data-social-media] img,[data-social-media] video,[data-social-media] audio,[data-post-body] img,[data-comment-body] img{max-width:100%;height:auto;border-radius:8px}[data-social-media]{display:block;margin:14px 0}[data-social-media] video{display:block;max-height:520px;background:#000}[data-social-media] audio{width:100%} |
| 493 | [data-social-actions]{line-height:2.4}[data-social-actions]>a{color:var(--muted)}[data-social-actions] button{min-height:32px;padding:2px 9px}details[data-social-react]{display:inline-block;position:relative;margin:0}details[data-social-react]>summary{display:inline-block;cursor:pointer;padding:0 6px}details[data-social-react][open]{background:var(--rail);padding:0 8px;border-radius:10px} |
| 494 | [data-social-welcome]{margin:16px 0;color:var(--muted)}#social-empty h2{font-size:19px;font-weight:500;max-width:30ch}#social-empty p{max-width:48ch} |
| 495 | social-compose input:not([type=file]),social-compose textarea{width:100%;box-sizing:border-box}social-compose textarea{border-radius:8px;padding:12px;min-height:80px}social-compose input[type=file]{max-width:100%;font-size:12px}social-compose[mode=article]>form>label:first-child input{font:24px/1.2 Georgia,serif;padding:10px}social-compose[mode=article] textarea{min-height:300px} |
| 496 | [data-post-options]{margin:9px 0;font-size:12px;color:var(--muted)}[data-post-options] summary{cursor:pointer}[data-post-options][open]{padding:10px;background:var(--rail);border:1px solid var(--line);border-radius:8px}[data-compose-actions]{margin:12px 0 2px}[data-compose-actions]>button{border-radius:16px;padding:7px 14px}[data-compose-actions]>button[type=submit]{background:var(--accent);color:var(--paper);border-color:var(--accent)}[data-compose-actions]>small{display:inline-block;color:var(--muted);font-size:11px;margin-left:6px}[data-preview-output]{padding:16px;margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere} |
| 497 | [data-social-back]{margin-bottom:18px;font-size:12px}#social-thread-post>li>[data-post-body=article]{font:19px/1.75 Georgia,serif;max-width:680px}#social-thread-post [data-post-body=article]>h1{font:600 38px/1.15 Georgia,serif;letter-spacing:-.8px;margin:18px 0 14px}#social-thread-post [data-post-summary]{font:18px/1.5 var(--sans);margin-bottom:20px}#social-thread-post [data-article-content]{margin-top:24px}#social-thread-post [data-article-content] h2{font:600 28px/1.2 Georgia,serif;margin:28px 0 12px}#social-thread-post [data-article-content] h3{font:600 23px/1.3 Georgia,serif;margin:24px 0 12px}#social-thread-post [data-article-content] p{margin-bottom:18px} |
| 498 | @media(max-width:720px){#social-head h1{font-size:24px}#social-head p{font-size:13px}#social-feed>li{padding:19px 0}#social-feed>li[data-kind="30023"] h2{font-size:23px}[data-social-byline] time{font-size:10px}#social-thread-post [data-post-body=article]>h1{font-size:30px}#social-thread-post>li>[data-post-body=article]{font-size:17px}[data-compose-actions]>small{display:block;margin:7px 0 0}[data-social-actions]>*{margin-right:7px}} |
| 499 | |
| 500 | [data-social-parent]{display:block;margin-top:3px}[data-social-parent] a{color:var(--muted)}[data-thread-context]{font-size:12px}[data-thread-context] a{margin-right:18px}#social-comments li[data-nested-reply]{padding-left:20px;border-left:2px solid var(--line);margin-left:16px} |
| 501 | |
| 502 | [data-social-avatar]{min-width:36px}[data-social-avatar]>nostr-avatar{display:block;width:36px;height:36px}#social-comments h2 small{margin-left:5px;font-weight:400;color:var(--muted)} |
| 503 | |
| 504 | [data-reaction-emoji]{display:inline-block;width:20px;height:20px;object-fit:contain;vertical-align:middle} |
| 505 | [data-post-body=note]>img,[data-comment-body]>img{display:block;width:auto;max-height:560px;margin:12px 0} |
| 506 | |
| 507 | /* Direct conversations share the room palette and keep their plaintext in the browser. */ |
| 508 | #chat,#direct-chat{max-width:860px;margin:0 auto;box-sizing:border-box} |
| 509 | #chat>p,#direct-chat>header>p{color:var(--muted)} |
| 510 | #direct-chat>header{padding-bottom:14px;border-bottom:1px solid var(--line)} |
| 511 | #direct-chat h1{font-size:23px;overflow-wrap:anywhere} |
| 512 | direct-start,direct-chats,direct-thread,direct-compose,direct-settings{display:block;min-width:0} |
| 513 | direct-start{margin:12px 0 18px;padding:14px;background:var(--rail);border:1px solid var(--line);border-radius:10px} |
| 514 | direct-start label{display:block;color:var(--muted);font-size:12px} |
| 515 | direct-start input{display:block;width:100%;margin:6px 0 10px;min-height:42px;font-size:16px} |
| 516 | direct-start button,direct-compose button{min-height:40px;padding:8px 16px;background:var(--accent);color:var(--paper);border:0;border-radius:7px} |
| 517 | direct-chats{margin:8px 0 24px} |
| 518 | direct-chats>a{display:block;position:relative;padding:14px 12px 14px 56px;border-bottom:1px solid var(--line);color:var(--ink);min-height:34px;overflow-wrap:anywhere} |
| 519 | direct-chats>a:hover{background:var(--rail);text-decoration:none} |
| 520 | direct-chats>a [data-author]{font-weight:600} |
| 521 | direct-chats>a nostr-avatar{position:absolute;left:10px;top:15px;width:32px;height:32px} |
| 522 | direct-chats>a time{display:block;color:var(--muted);font:11px/1.5 var(--mono);margin-top:4px} |
| 523 | direct-chats>a p{margin:4px 0 0;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} |
| 524 | direct-chats>p{color:var(--muted);padding:10px 0} |
| 525 | #rail direct-chats{margin:0 0 10px;font-size:12px} |
| 526 | #rail direct-chats>a{padding:10px 16px 10px 50px;border:0} |
| 527 | #rail direct-chats>a nostr-avatar{left:20px;top:10px;width:24px;height:24px} |
| 528 | #rail direct-chats time,#rail direct-chats>a p{display:none} |
| 529 | #rail direct-chats>p{padding:0 20px;font-size:11px} |
| 530 | #rail direct-chats>a[aria-current=page]{background:var(--soft);color:var(--accent)} |
| 531 | direct-thread{min-height:160px;max-height:calc(100dvh - 340px);overflow:auto;overscroll-behavior:contain;padding:12px 0} |
| 532 | direct-thread>article{position:relative;margin:0 18px 14px 0;padding:12px 14px 12px 54px;border-bottom:1px solid var(--line);overflow-wrap:anywhere} |
| 533 | direct-thread>article[data-own="" ]{margin:0 0 14px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--soft)} |
| 534 | direct-thread article nostr-avatar{position:absolute;left:12px;top:12px;width:30px;height:30px} |
| 535 | direct-thread article header{font:12px/1.4 var(--mono);color:var(--muted);margin:0 0 7px} |
| 536 | direct-thread article header [data-author]{color:var(--ink)} |
| 537 | direct-thread article time{display:block;margin-top:3px;font-size:10px} |
| 538 | direct-thread article>p{margin:0;font:15px/1.55 var(--sans);white-space:pre-wrap} |
| 539 | direct-thread article img,direct-thread article video{display:block;max-width:100%;max-height:360px} |
| 540 | direct-thread article audio{max-width:100%} |
| 541 | direct-compose{position:sticky;bottom:0;background:var(--paper);padding:12px 0 6px;border-top:1px solid var(--line)} |
| 542 | direct-compose label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px} |
| 543 | direct-compose textarea{display:block;resize:vertical;min-height:76px;max-height:180px;margin-bottom:8px;border-radius:8px;font:16px/1.5 var(--sans)} |
| 544 | direct-compose output,direct-start output{display:block;margin-top:6px;font-size:12px;overflow-wrap:anywhere} |
| 545 | direct-compose output[data-error],direct-start output[data-error]{color:var(--alert)} |
| 546 | direct-settings button{width:100%;min-height:40px;white-space:normal;font-size:12px} |
| 547 | @media(max-width:720px){ |
| 548 | #chat #rows,#chat #rows tbody,#chat #rows tr{display:block;width:auto} |
| 549 | #chat #rows thead{display:none} |
| 550 | #chat #rows tr{padding:10px 0;border-bottom:1px solid var(--line)} |
| 551 | #chat #rows td{display:block;width:auto;padding:2px 0;border:0;height:auto} |
| 552 | #chat #rows td:nth-child(3){display:none} |
| 553 | #chat #rows td:last-child{width:auto;color:var(--muted);font-size:11px} |
| 554 | direct-thread{max-height:calc(100dvh - 340px);min-height:160px} |
| 555 | direct-thread>article{margin-right:0;padding-left:48px} |
| 556 | direct-thread>article[data-own="" ]{margin-left:10px} |
| 557 | direct-compose{bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))} |
| 558 | } |
| 559 | direct-thread article>blockquote{margin:4px 0 9px;padding:6px 10px;border-left:2px solid var(--muted);color:var(--muted);font:12px/1.5 var(--sans);white-space:pre-wrap} |
| 560 | direct-thread article>footer{margin-top:8px;font:12px var(--mono);color:var(--muted)} |
| 561 | direct-thread article>footer button{padding:3px 8px;margin-right:6px;border:0;border-radius:5px;font:12px var(--sans)} |
| 562 | direct-thread article>footer output{display:block;margin-top:5px;color:var(--alert)} |
| 563 | direct-chats>output,direct-thread>output{display:block;margin:8px 0;font-size:12px;color:var(--alert)} |
| 564 | direct-file{display:block;margin-top:8px;overflow-wrap:anywhere} |
| 565 | direct-file article{padding:0;margin:0;border:0} |
| 566 | direct-file button{display:block;margin:8px 0;padding:8px 12px;min-height:40px} |
| 567 | direct-file output,direct-settings output{display:block;font-size:12px;color:var(--muted);margin-top:6px} |
| 568 | direct-file pre{max-height:360px;overflow:auto;padding:10px;background:var(--rail);font:13px/1.5 var(--mono)} |
| 569 | |
| 570 | /* Chat activity stays compact; details and decisions share the room width. */ |
| 571 | chat-activity,chat-presence{display:block;min-width:0} |
| 572 | chat-activity:empty{display:none} |
| 573 | chat-activity>article{display:block;margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--rail);overflow-wrap:anywhere} |
| 574 | chat-activity header,chat-activity summary{font:13px/1.6 var(--sans)} |
| 575 | chat-activity header small,chat-activity summary small{font:11px var(--mono);color:var(--muted);margin-left:8px} |
| 576 | chat-activity p{margin:6px 0;font:13px/1.5 var(--sans)} |
| 577 | chat-activity details>div{font:13px/1.5 var(--sans)} |
| 578 | chat-activity details>div pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:8px;background:var(--paper)} |
| 579 | chat-activity [data-status=processing],chat-activity [data-status=partial]{color:var(--bark)} |
| 580 | chat-activity [data-status=success]{color:var(--accent)} |
| 581 | chat-activity [data-status=error]{color:var(--alert)} |
| 582 | chat-decision{display:block;margin-top:10px}chat-decision button{margin-right:8px;min-height:36px} |
| 583 | chat-decision textarea{display:block;width:100%;min-width:0;max-width:100%;margin:6px 0} |
| 584 | chat-decision output{display:block;font:12px var(--mono);margin-top:6px;color:var(--muted)} |
| 585 | chat-decision output[data-error]{color:var(--alert)} |
| 586 | chat-presence{padding:4px 0;color:var(--muted);font:11px/1.6 var(--mono)} |
| 587 | chat-presence output{display:block;min-height:18px;overflow-wrap:anywhere} |
| 588 | |
| 589 | chat-activity blockquote{margin:8px 0;padding:6px 10px;border-left:2px solid var(--accent);font:13px/1.5 var(--sans);white-space:pre-wrap} |
| 590 | |
| 591 | chat-presence output>span+span::before{content:" | " } |
| 592 | |
| 593 | chat-preferences{display:block;margin:12px 0} |
| 594 | chat-preferences label{display:block;text-transform:none;letter-spacing:0} |
| 595 | chat-preferences output{display:block;color:var(--muted);font:12px var(--mono);margin:6px 0} |
| 596 | |
| 597 | agent-grant-request { display: block; min-width: 0; } |
| 598 | agent-grant-request table { display: table; table-layout: fixed; width: 100%; margin: 1rem 0; } |
| 599 | agent-grant-request th, agent-grant-request td { white-space: normal; overflow-wrap: anywhere; text-align: left; vertical-align: top; padding: .5rem .4rem; } |
| 600 | agent-grant-request th:first-child { width: 24%; } |
| 601 | agent-grant-request output { display: block; margin-top: .5rem; } |
