global.css (6821B)
1 /* web/src/global.css - the whole application's styling */ 2 3 :root { 4 color-scheme: light dark; 5 --bg: #f6f7f9; 6 --panel: #ffffff; 7 --fg: #1c1f23; 8 --muted: #6b7280; 9 --line: #d6dae0; 10 --accent: #2f6feb; 11 --ok: #1a7f37; 12 --bad: #b42318; 13 --warn: #9a6700; 14 --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 15 } 16 17 @media (prefers-color-scheme: dark) { 18 :root { 19 --bg: #16181c; 20 --panel: #1e2126; 21 --fg: #e7e9ea; 22 --muted: #9198a1; 23 --line: #333940; 24 --accent: #4d8bf5; 25 --ok: #3fb950; 26 --bad: #f97066; 27 --warn: #d29922; 28 } 29 } 30 31 * { box-sizing: border-box; } 32 33 body { 34 margin: 0; 35 background: var(--bg); 36 color: var(--fg); 37 font: 15px/1.5 system-ui, sans-serif; 38 } 39 40 header { 41 display: flex; 42 align-items: center; 43 justify-content: space-between; 44 gap: 1rem; 45 padding: 0 1.5rem; 46 background: var(--panel); 47 border-bottom: 1px solid var(--line); 48 } 49 50 nav { display: flex; align-items: center; gap: 1.25rem; } 51 52 .brand { font-weight: 700; letter-spacing: 0.02em; padding-right: 0.5rem; } 53 54 nav a { 55 display: block; 56 padding: 0.9rem 0; 57 color: var(--muted); 58 text-decoration: none; 59 border-bottom: 2px solid transparent; 60 } 61 62 nav a:hover { color: var(--fg); } 63 nav a.active { color: var(--fg); border-bottom-color: var(--accent); } 64 65 .who { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); } 66 67 main { max-width: 68rem; margin: 0 auto; padding: 1.5rem; } 68 69 h1 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: 1.35rem; } 70 h2 { margin: 1.75rem 0 0.75rem; font-size: 1.05rem; } 71 72 a { color: var(--accent); } 73 74 table { width: 100%; border-collapse: collapse; } 75 76 th { 77 text-align: left; 78 font-size: 0.8rem; 79 text-transform: uppercase; 80 letter-spacing: 0.04em; 81 color: var(--muted); 82 font-weight: 600; 83 } 84 85 th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); } 86 tbody tr:hover { background: var(--panel); } 87 tr.disabled { opacity: 0.55; } 88 89 .mono { font-family: var(--mono); font-size: 0.9em; } 90 .muted { color: var(--muted); } 91 .ref { font-family: var(--mono); font-size: 0.9em; color: var(--muted); } 92 .ellipsis { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 93 94 .badge { 95 display: inline-block; 96 padding: 0.1rem 0.5rem; 97 border-radius: 999px; 98 font-size: 0.75rem; 99 font-weight: 600; 100 text-transform: lowercase; 101 border: 1px solid var(--line); 102 color: var(--muted); 103 } 104 105 .badge.s-success { color: var(--ok); border-color: var(--ok); } 106 .badge.s-failed, .badge.s-timeout { color: var(--bad); border-color: var(--bad); } 107 .badge.s-running { color: var(--accent); border-color: var(--accent); } 108 .badge.s-cancelled, .badge.s-skipped { color: var(--muted); } 109 .badge.s-queued, .badge.s-pending { color: var(--warn); border-color: var(--warn); } 110 111 .facts { 112 display: grid; 113 grid-template-columns: max-content 1fr; 114 gap: 0.35rem 1rem; 115 margin: 0 0 1rem; 116 } 117 118 .facts dt { color: var(--muted); } 119 .facts dd { margin: 0; } 120 121 .panel { 122 padding: 1rem 1.25rem; 123 margin-bottom: 1.25rem; 124 background: var(--panel); 125 border: 1px solid var(--line); 126 border-radius: 8px; 127 } 128 129 .panel h2 { margin-top: 0; } 130 131 label { display: block; margin-bottom: 0.75rem; } 132 label > span { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.9rem; } 133 label.check { display: flex; align-items: center; gap: 0.5rem; } 134 label.check > span { margin: 0; } 135 136 input, select { 137 width: 100%; 138 max-width: 28rem; 139 padding: 0.45rem 0.6rem; 140 background: var(--bg); 141 color: inherit; 142 border: 1px solid var(--line); 143 border-radius: 6px; 144 font: inherit; 145 } 146 147 input[type="checkbox"] { width: auto; } 148 149 button { 150 padding: 0.45rem 0.9rem; 151 background: var(--accent); 152 color: #fff; 153 border: 0; 154 border-radius: 6px; 155 font: inherit; 156 cursor: pointer; 157 } 158 159 button:disabled { opacity: 0.5; cursor: default; } 160 161 button.link { 162 padding: 0; 163 background: none; 164 color: var(--accent); 165 text-decoration: underline; 166 } 167 168 button.quiet { 169 padding: 0.3rem 0.7rem; 170 background: none; 171 color: var(--fg); 172 border: 1px solid var(--line); 173 } 174 175 button.quiet:hover { border-color: var(--accent); color: var(--accent); } 176 177 .rowactions { display: flex; flex-wrap: wrap; gap: 0.4rem; } 178 179 .actions { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; } 180 181 .pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--muted); } 182 183 .error { 184 padding: 0.75rem 1rem; 185 margin-bottom: 1rem; 186 border: 1px solid var(--bad); 187 border-radius: 6px; 188 color: var(--bad); 189 } 190 191 .error p { margin: 0.35rem 0 0; } 192 193 .reveal { 194 padding: 0.75rem 1rem; 195 margin-bottom: 1rem; 196 border: 1px solid var(--warn); 197 border-radius: 6px; 198 } 199 200 .reveal code { 201 display: block; 202 margin: 0.5rem 0; 203 padding: 0.5rem; 204 background: var(--bg); 205 border-radius: 4px; 206 word-break: break-all; 207 } 208 209 .stage { margin-bottom: 1rem; } 210 .stage h2 { font-size: 0.8rem; text-transform: uppercase; color: var(--muted); margin: 0 0 0.5rem; } 211 212 .tasks { display: flex; flex-wrap: wrap; gap: 0.5rem; } 213 214 .task { 215 display: flex; 216 align-items: center; 217 gap: 0.5rem; 218 padding: 0.5rem 0.75rem; 219 background: var(--panel); 220 border: 1px solid var(--line); 221 border-left-width: 3px; 222 border-radius: 6px; 223 text-decoration: none; 224 color: inherit; 225 } 226 227 .task .name { font-family: var(--mono); font-size: 0.9em; } 228 .task.s-success { border-left-color: var(--ok); } 229 .task.s-failed, .task.s-timeout { border-left-color: var(--bad); } 230 .task.s-running { border-left-color: var(--accent); } 231 .task.s-queued { border-left-color: var(--warn); } 232 233 .log { 234 max-height: 32rem; 235 overflow: auto; 236 padding: 0.75rem 1rem; 237 background: #0d1117; 238 color: #d0d7de; 239 border-radius: 8px; 240 font-family: var(--mono); 241 font-size: 0.85rem; 242 line-height: 1.45; 243 white-space: pre-wrap; 244 word-break: break-word; 245 } 246 247 .log .bold { font-weight: 700; } 248 .log .faint { opacity: 0.6; } 249 .log .italic { font-style: italic; } 250 .log .underline { text-decoration: underline; } 251 252 .log .fg-black { color: #6e7681; } 253 .log .fg-red { color: #ff7b72; } 254 .log .fg-green { color: #3fb950; } 255 .log .fg-yellow { color: #d29922; } 256 .log .fg-blue { color: #58a6ff; } 257 .log .fg-magenta { color: #bc8cff; } 258 .log .fg-cyan { color: #39c5cf; } 259 .log .fg-white { color: #b1bac4; } 260 261 .log .fg-bright-black { color: #8b949e; } 262 .log .fg-bright-red { color: #ffa198; } 263 .log .fg-bright-green { color: #56d364; } 264 .log .fg-bright-yellow { color: #e3b341; } 265 .log .fg-bright-blue { color: #79c0ff; } 266 .log .fg-bright-magenta { color: #d2a8ff; } 267 .log .fg-bright-cyan { color: #56d4dd; } 268 .log .fg-bright-white { color: #f0f6fc; } 269 270 .log .bg-red { background: #490202; } 271 .log .bg-green { background: #033a16; } 272 .log .bg-yellow { background: #341a00; } 273 .log .bg-blue { background: #0c2d6b; } 274 .log .bg-magenta { background: #2f0c60; } 275 .log .bg-cyan { background: #043440; } 276 .log .bg-white { background: #30363d; }