Commit f7689f2981
Verified · cmc
Layout: unified · split
README.md +1 −1
| @@ -11,7 +11,7 @@ | |||
| 11 | </h1> | 11 | </h1> |
| 12 | 12 | ||
| 13 | <h3 align="center"> | 13 | <h3 align="center"> |
| 14 | Retro & high-contrast theme | 14 | Minimal black terminal theme |
| 15 | </h3> | 15 | </h3> |
| 16 | 16 | ||
| 17 | <p align="center"> | 17 | <p align="center"> |
crypto.css +439 −42
| @@ -9,100 +9,497 @@ GitHub: https://github.com/aynik | |||
| 9 | */ | 9 | */ |
| 10 | 10 | ||
| 11 | :root { | 11 | :root { |
| 12 | --link-color: #00ff0e; | 12 | --crypto-black: #000; |
| 13 | --crypto-panel: #050805; | ||
| 14 | --crypto-panel-soft: #0a0f0a; | ||
| 15 | --crypto-border: #263426; | ||
| 16 | --crypto-text: #d7d7d7; | ||
| 17 | --crypto-muted: #777; | ||
| 18 | --crypto-dim: #6f7d6f; | ||
| 19 | --crypto-nick: #9fd6a9; | ||
| 20 | --crypto-accent: #00ff41; | ||
| 21 | --crypto-danger: #ff3b30; | ||
| 22 | --crypto-highlight: rgba(0, 255, 65, 0.1); | ||
| 23 | --crypto-highlight-border: rgba(0, 255, 65, 0.8); | ||
| 24 | --body-color: var(--crypto-text); | ||
| 25 | --body-color-muted: var(--crypto-muted); | ||
| 26 | --body-bg-color: var(--crypto-black); | ||
| 27 | --button-color: var(--crypto-accent); | ||
| 28 | --button-text-color-hover: var(--crypto-black); | ||
| 29 | --link-color: var(--crypto-accent); | ||
| 30 | --window-bg-color: var(--crypto-black); | ||
| 31 | --window-heading-color: var(--crypto-muted); | ||
| 32 | --date-marker-color: rgba(0, 255, 65, 0.35); | ||
| 33 | --unread-marker-color: rgba(255, 59, 48, 0.6); | ||
| 34 | --highlight-bg-color: var(--crypto-highlight); | ||
| 35 | --highlight-border-color: var(--crypto-highlight-border); | ||
| 36 | --upload-progressbar-color: var(--crypto-accent); | ||
| 37 | } | ||
| 38 | |||
| 39 | ::placeholder { | ||
| 40 | color: var(--crypto-dim); | ||
| 13 | } | 41 | } |
| 14 | 42 | ||
| 15 | body { | 43 | body { |
| 16 | background: #000; | 44 | background: var(--crypto-black); |
| 17 | font: 16px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace; | 45 | color: var(--crypto-text); |
| 46 | font: 15px Menlo, Consolas, Monaco, "Adwaita Mono", "Liberation Mono", "Lucida Console", monospace; | ||
| 47 | } | ||
| 48 | |||
| 49 | a, | ||
| 50 | .link, | ||
| 51 | button.link { | ||
| 52 | color: var(--crypto-accent); | ||
| 53 | } | ||
| 54 | |||
| 55 | a:hover, | ||
| 56 | .link:hover, | ||
| 57 | button.link:hover { | ||
| 58 | color: #8cff9f; | ||
| 59 | } | ||
| 60 | |||
| 61 | .irc-fg2 { | ||
| 62 | color: #7ab7ff; | ||
| 18 | } | 63 | } |
| 19 | 64 | ||
| 65 | .window, | ||
| 66 | #chat .chat, | ||
| 67 | #chat .chat-content, | ||
| 68 | #chat .messages, | ||
| 69 | #chat .userlist, | ||
| 70 | .header, | ||
| 71 | #form, | ||
| 72 | #sidebar, | ||
| 73 | #footer, | ||
| 74 | #context-menu, | ||
| 75 | .context-menu, | ||
| 76 | .textcomplete-menu { | ||
| 77 | background: var(--crypto-black); | ||
| 78 | color: var(--crypto-text); | ||
| 79 | } | ||
| 80 | |||
| 81 | #windows .window h1, | ||
| 20 | #windows .window h2, | 82 | #windows .window h2, |
| 21 | #windows .window h3 { | 83 | #windows .window h3 { |
| 22 | color: #666; | 84 | color: var(--crypto-muted); |
| 85 | letter-spacing: 0; | ||
| 23 | } | 86 | } |
| 24 | 87 | ||
| 25 | #windows .window h2 { | 88 | #windows .window h2 { |
| 26 | border-bottom: none; | 89 | border-bottom: 1px solid var(--crypto-border); |
| 27 | } | 90 | } |
| 28 | 91 | ||
| 29 | .container { | 92 | .container { |
| 30 | margin: 40px auto; | 93 | margin: 40px auto; |
| 31 | } | 94 | } |
| 32 | 95 | ||
| 33 | #sign-in label { | 96 | .header, |
| 34 | color: #666; | 97 | #chat .header, |
| 98 | #form, | ||
| 99 | #chat .userlist, | ||
| 100 | #chat .content, | ||
| 101 | .userlist-open .chat-view[data-type="channel"] .scroll-down { | ||
| 102 | border-color: var(--crypto-border); | ||
| 35 | } | 103 | } |
| 36 | 104 | ||
| 37 | #sign-in label input { | 105 | .header .title { |
| 38 | margin-top: 10px !important; | 106 | color: var(--crypto-text); |
| 39 | font-size: 14px; | ||
| 40 | } | 107 | } |
| 41 | 108 | ||
| 42 | .btn { | 109 | .header .topic, |
| 43 | border-color: #00ff0e; | 110 | #windows .header .topic { |
| 44 | color: #00ff0e; | 111 | color: var(--crypto-muted); |
| 112 | line-height: 1.5; | ||
| 45 | } | 113 | } |
| 46 | 114 | ||
| 47 | .btn:disabled, | 115 | .header button:focus-visible { |
| 48 | .btn:hover { | 116 | box-shadow: inset 0 0 0 1px var(--crypto-accent); |
| 49 | background: #00ff0e; | 117 | outline: 1px solid var(--crypto-accent); |
| 118 | outline-offset: -1px; | ||
| 50 | } | 119 | } |
| 51 | 120 | ||
| 52 | #connection-error { | 121 | #chat button.close, |
| 53 | background: #f00; | 122 | #chat button.mentions, |
| 123 | #chat button.menu, | ||
| 124 | #chat button.search, | ||
| 125 | #viewport .lt, | ||
| 126 | #viewport .rt { | ||
| 127 | color: var(--crypto-muted); | ||
| 54 | } | 128 | } |
| 55 | 129 | ||
| 56 | #settings .opt { | 130 | #chat button.close:hover, |
| 57 | line-height: 20px; | 131 | #chat button.mentions:hover, |
| 58 | font-size: 12px; | 132 | #chat button.menu:hover, |
| 133 | #chat button.search:hover, | ||
| 134 | #viewport .lt:hover, | ||
| 135 | #viewport .rt:hover { | ||
| 136 | color: var(--crypto-accent); | ||
| 137 | } | ||
| 138 | |||
| 139 | #context-menu { | ||
| 140 | border: 1px solid var(--crypto-border); | ||
| 141 | box-shadow: none; | ||
| 142 | } | ||
| 143 | |||
| 144 | #context-menu .context-menu-item { | ||
| 145 | color: var(--crypto-text); | ||
| 146 | } | ||
| 147 | |||
| 148 | #context-menu .context-menu-item:hover, | ||
| 149 | #context-menu .context-menu-item:focus { | ||
| 150 | background: var(--crypto-panel-soft); | ||
| 151 | color: var(--crypto-accent); | ||
| 152 | } | ||
| 153 | |||
| 154 | #context-menu .context-menu-divider { | ||
| 155 | background: var(--crypto-border); | ||
| 156 | } | ||
| 157 | |||
| 158 | #sidebar .logo-inverted { | ||
| 159 | display: none; | ||
| 59 | } | 160 | } |
| 60 | 161 | ||
| 61 | #sidebar .chan.lobby { | 162 | #sidebar .logo { |
| 62 | color: #00ff0e; | 163 | display: inline; |
| 63 | } | 164 | } |
| 64 | 165 | ||
| 65 | #sidebar button, | 166 | #sidebar button, |
| 66 | #sidebar .chan, | 167 | #sidebar .chan, |
| 67 | #chat .time, | 168 | #sidebar .empty, |
| 68 | #chat .count::before, | 169 | .channel-list-item, |
| 69 | #sidebar .empty { | 170 | #footer button { |
| 70 | color: #666; | 171 | color: var(--crypto-muted); |
| 172 | } | ||
| 173 | |||
| 174 | #sidebar .chan.lobby, | ||
| 175 | .channel-list-item[data-type="lobby"] { | ||
| 176 | color: var(--crypto-accent); | ||
| 177 | } | ||
| 178 | |||
| 179 | #sidebar .active, | ||
| 180 | #sidebar button:hover, | ||
| 181 | #sidebar .chan:hover, | ||
| 182 | .channel-list-item:hover, | ||
| 183 | .channel-list-item.active, | ||
| 184 | #footer button:hover, | ||
| 185 | #footer button.active { | ||
| 186 | background: var(--crypto-panel-soft); | ||
| 187 | color: var(--crypto-text); | ||
| 188 | } | ||
| 189 | |||
| 190 | .channel-list-item .badge, | ||
| 191 | #chat .count::before { | ||
| 192 | background: var(--crypto-panel-soft); | ||
| 193 | color: var(--crypto-muted); | ||
| 194 | } | ||
| 195 | |||
| 196 | #chat .userlist .count { | ||
| 197 | background: var(--crypto-panel-soft); | ||
| 198 | } | ||
| 199 | |||
| 200 | .channel-list-item .badge.highlight { | ||
| 201 | background: var(--crypto-accent); | ||
| 202 | color: var(--crypto-black); | ||
| 203 | } | ||
| 204 | |||
| 205 | .channel-list-item:focus-visible, | ||
| 206 | #sidebar button:focus-visible, | ||
| 207 | #footer button:focus-visible { | ||
| 208 | box-shadow: inset 0 0 0 1px var(--crypto-accent); | ||
| 209 | outline: 1px solid var(--crypto-accent); | ||
| 210 | outline-offset: -1px; | ||
| 211 | } | ||
| 212 | |||
| 213 | #chat .time { | ||
| 214 | color: var(--crypto-dim); | ||
| 215 | } | ||
| 216 | |||
| 217 | #chat .from { | ||
| 218 | color: var(--crypto-text); | ||
| 219 | } | ||
| 220 | |||
| 221 | #chat .content { | ||
| 222 | border-left: 1px solid var(--crypto-border); | ||
| 223 | } | ||
| 224 | |||
| 225 | #chat .self .content, | ||
| 226 | #chat .unhandled .from, | ||
| 227 | #chat .msg[data-type="unhandled"] .from, | ||
| 228 | #chat .msg[data-type="condensed"] .content, | ||
| 229 | #chat .msg[data-type="away"] .content, | ||
| 230 | #chat .msg[data-type="back"] .content, | ||
| 231 | #chat .msg[data-type="join"] .content, | ||
| 232 | #chat .msg[data-type="kick"] .content, | ||
| 233 | #chat .msg[data-type="mode"] .content, | ||
| 234 | #chat .msg[data-type="nick"] .content, | ||
| 235 | #chat .msg[data-type="chghost"] .content, | ||
| 236 | #chat .msg[data-type="part"] .content, | ||
| 237 | #chat .msg[data-type="quit"] .content, | ||
| 238 | #chat .msg[data-type="topic"] .content, | ||
| 239 | #chat .msg[data-type="topic_set_by"] .content { | ||
| 240 | color: var(--crypto-muted); | ||
| 241 | } | ||
| 242 | |||
| 243 | .user, | ||
| 244 | #chat .user, | ||
| 245 | .inline-channel { | ||
| 246 | color: var(--crypto-nick); | ||
| 247 | font-weight: 700; | ||
| 248 | } | ||
| 249 | |||
| 250 | a:focus-visible, | ||
| 251 | button.link:focus-visible { | ||
| 252 | box-shadow: inset 0 0 0 1px var(--crypto-accent); | ||
| 253 | outline: 1px solid var(--crypto-accent); | ||
| 254 | outline-offset: -1px; | ||
| 255 | } | ||
| 256 | |||
| 257 | .header .topic a, | ||
| 258 | .header .topic .link, | ||
| 259 | #chat .content a, | ||
| 260 | #chat .content .link { | ||
| 261 | color: var(--crypto-accent); | ||
| 262 | font-weight: 700; | ||
| 263 | } | ||
| 264 | |||
| 265 | #chat .userlist .user { | ||
| 266 | color: var(--crypto-muted); | ||
| 267 | font-weight: 600; | ||
| 268 | } | ||
| 269 | |||
| 270 | #chat .userlist .user:hover, | ||
| 271 | #chat .userlist .user.active { | ||
| 272 | color: var(--crypto-accent); | ||
| 273 | } | ||
| 274 | |||
| 275 | #chat .msg[data-type="action"] .from, | ||
| 276 | #chat .msg[data-type="action"] .content, | ||
| 277 | #chat .msg[data-type="action"] .user, | ||
| 278 | #chat .msg[data-type="notice"] .time, | ||
| 279 | #chat .msg[data-type="wallops"] .time, | ||
| 280 | #chat .msg[data-type="notice"] .content, | ||
| 281 | #chat .msg[data-type="wallops"] .content, | ||
| 282 | #chat .msg[data-type="notice"] .user, | ||
| 283 | #chat .msg[data-type="wallops"] .user { | ||
| 284 | color: #8cff9f; | ||
| 285 | } | ||
| 286 | |||
| 287 | #chat .msg[data-type="error"], | ||
| 288 | #chat .msg[data-type="error"] .from, | ||
| 289 | #connection-error, | ||
| 290 | #user-visible-error, | ||
| 291 | #settings .error { | ||
| 292 | color: var(--crypto-danger); | ||
| 293 | } | ||
| 294 | |||
| 295 | #connection-error, | ||
| 296 | #user-visible-error { | ||
| 297 | background: var(--crypto-black); | ||
| 298 | border-top: 1px solid var(--crypto-danger); | ||
| 299 | border-bottom: 1px solid var(--crypto-danger); | ||
| 300 | } | ||
| 301 | |||
| 302 | #chat .chat-view[data-type="channel"] .msg.highlight { | ||
| 303 | background-color: var(--crypto-highlight); | ||
| 304 | border-left: 5px solid var(--crypto-highlight-border); | ||
| 71 | } | 305 | } |
| 72 | 306 | ||
| 73 | #chat .unhandled .from { | 307 | #chat .chat-view[data-type="channel"] .msg.highlight .time { |
| 74 | color: #ddd; | 308 | color: #8cff9f; |
| 309 | padding-left: 5px; | ||
| 75 | } | 310 | } |
| 76 | 311 | ||
| 77 | #sidebar .active { | 312 | #chat .chat-view[data-type="channel"] .msg.highlight .content { |
| 78 | color: #fff; | 313 | border-left-color: transparent; |
| 79 | } | 314 | } |
| 80 | 315 | ||
| 81 | #windows .header .topic, | 316 | #chat .date-marker-text::before, |
| 82 | .messages .msg, | 317 | #chat .unread-marker-text::before { |
| 83 | .userlist { | 318 | background: var(--crypto-black); |
| 84 | line-height: 1.8; | ||
| 85 | } | 319 | } |
| 86 | 320 | ||
| 87 | #chat .user { | 321 | #chat .scroll-down-arrow { |
| 88 | color: black; | 322 | background: var(--crypto-black); |
| 89 | font-weight: bold; | 323 | border-color: var(--crypto-accent); |
| 324 | box-shadow: none; | ||
| 325 | color: var(--crypto-accent); | ||
| 90 | } | 326 | } |
| 91 | 327 | ||
| 92 | #windows #form .input { | 328 | #chat .scroll-down:hover .scroll-down-arrow { |
| 329 | background: var(--crypto-accent); | ||
| 330 | color: var(--crypto-black); | ||
| 331 | } | ||
| 332 | |||
| 333 | #chat .msg[data-type="monospace_block"] .text, | ||
| 334 | #chat pre, | ||
| 335 | #chat code { | ||
| 336 | background: var(--crypto-panel); | ||
| 337 | border: 1px solid var(--crypto-border); | ||
| 338 | color: var(--crypto-text); | ||
| 339 | } | ||
| 340 | |||
| 341 | .input { | ||
| 342 | background: var(--crypto-black); | ||
| 343 | border-color: var(--crypto-border); | ||
| 344 | color: var(--crypto-text); | ||
| 345 | font-family: inherit; | ||
| 346 | font-size: 14px; | ||
| 347 | } | ||
| 348 | |||
| 349 | .input:disabled { | ||
| 350 | background: var(--crypto-panel); | ||
| 351 | color: var(--crypto-dim); | ||
| 352 | } | ||
| 353 | |||
| 354 | .input:not(:disabled):hover, | ||
| 355 | .input:not(:disabled):focus { | ||
| 356 | border-color: var(--crypto-accent); | ||
| 357 | box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35); | ||
| 358 | outline: none; | ||
| 359 | } | ||
| 360 | |||
| 361 | .header .topic-input, | ||
| 362 | #form #nick, | ||
| 363 | #form #input, | ||
| 364 | #windows #form .input, | ||
| 365 | #windows select.input { | ||
| 366 | background: var(--crypto-black); | ||
| 367 | border-color: var(--crypto-border); | ||
| 368 | color: var(--crypto-text); | ||
| 93 | font-family: inherit; | 369 | font-family: inherit; |
| 94 | font-size: 12px; | ||
| 95 | } | 370 | } |
| 96 | 371 | ||
| 97 | #windows select.input { | 372 | #windows select.input { |
| 98 | height: 38px; | 373 | height: 38px; |
| 99 | } | 374 | } |
| 100 | 375 | ||
| 376 | .btn { | ||
| 377 | background: var(--crypto-black); | ||
| 378 | border-color: var(--crypto-accent); | ||
| 379 | color: var(--crypto-accent); | ||
| 380 | } | ||
| 381 | |||
| 382 | .btn:focus-visible { | ||
| 383 | box-shadow: inset 0 0 0 1px var(--crypto-accent); | ||
| 384 | outline: 1px solid var(--crypto-accent); | ||
| 385 | outline-offset: -1px; | ||
| 386 | } | ||
| 387 | |||
| 388 | .btn:disabled { | ||
| 389 | background: var(--crypto-black); | ||
| 390 | color: var(--crypto-dim); | ||
| 391 | } | ||
| 392 | |||
| 393 | .btn:not(:disabled):hover, | ||
| 394 | .btn:not(:disabled):focus { | ||
| 395 | background: var(--crypto-accent); | ||
| 396 | color: var(--crypto-black); | ||
| 397 | } | ||
| 398 | |||
| 399 | #form button:focus-visible { | ||
| 400 | box-shadow: inset 0 0 0 1px var(--crypto-accent); | ||
| 401 | outline: 1px solid var(--crypto-accent); | ||
| 402 | outline-offset: -1px; | ||
| 403 | } | ||
| 404 | |||
| 405 | #chat .show-more .btn { | ||
| 406 | background: var(--crypto-black); | ||
| 407 | } | ||
| 408 | |||
| 409 | #form { | ||
| 410 | border-top: 1px solid var(--crypto-border); | ||
| 411 | } | ||
| 412 | |||
| 413 | #form #input { | ||
| 414 | font-size: 14px; | ||
| 415 | } | ||
| 416 | |||
| 417 | #form #input:focus, | ||
| 418 | .header .topic-input:focus { | ||
| 419 | border-color: var(--crypto-accent); | ||
| 420 | box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35); | ||
| 421 | outline: none; | ||
| 422 | } | ||
| 423 | |||
| 424 | #form #nick { | ||
| 425 | background: var(--crypto-panel); | ||
| 426 | color: var(--crypto-muted); | ||
| 427 | } | ||
| 428 | |||
| 429 | #form #upload, | ||
| 430 | #form #submit, | ||
| 101 | #footer .icon { | 431 | #footer .icon { |
| 102 | color: #666; | 432 | color: var(--crypto-muted); |
| 433 | } | ||
| 434 | |||
| 435 | #form #upload:hover, | ||
| 436 | #form #submit:hover, | ||
| 437 | #footer button:hover .icon, | ||
| 438 | #footer button.active .icon { | ||
| 439 | color: var(--crypto-accent); | ||
| 440 | } | ||
| 441 | |||
| 442 | #sign-in label, | ||
| 443 | #settings .settings-menu, | ||
| 444 | #settings label, | ||
| 445 | #settings .opt { | ||
| 446 | color: var(--crypto-muted); | ||
| 447 | } | ||
| 448 | |||
| 449 | #sign-in label input { | ||
| 450 | margin-top: 10px !important; | ||
| 451 | font-size: 14px; | ||
| 103 | } | 452 | } |
| 104 | 453 | ||
| 105 | /* Previews */ | 454 | #settings .opt { |
| 455 | display: block; | ||
| 456 | font-size: 14px; | ||
| 457 | line-height: 1.45; | ||
| 458 | padding: 6px 0; | ||
| 459 | } | ||
| 460 | |||
| 461 | #settings .settings-menu .active, | ||
| 462 | #settings .settings-menu .active .icon, | ||
| 463 | #settings label:hover, | ||
| 464 | #settings .opt:hover { | ||
| 465 | color: var(--crypto-text); | ||
| 466 | } | ||
| 467 | |||
| 468 | #settings .opt input { | ||
| 469 | margin-right: 8px; | ||
| 470 | } | ||
| 471 | |||
| 472 | #settings .settings-sync-panel { | ||
| 473 | background: var(--crypto-panel); | ||
| 474 | border: 1px solid var(--crypto-border); | ||
| 475 | color: var(--crypto-muted); | ||
| 476 | } | ||
| 477 | |||
| 478 | #settings .settings-sync-panel .btn { | ||
| 479 | border-color: var(--crypto-accent); | ||
| 480 | color: var(--crypto-accent); | ||
| 481 | } | ||
| 482 | |||
| 483 | #settings #play, | ||
| 484 | #settings .extra-help, | ||
| 485 | #settings h2 .extra-help { | ||
| 486 | color: var(--crypto-muted); | ||
| 487 | } | ||
| 488 | |||
| 489 | #settings #play:hover, | ||
| 490 | #settings .extra-help:hover { | ||
| 491 | color: var(--crypto-accent); | ||
| 492 | } | ||
| 493 | |||
| 494 | #chat table.channel-list th, | ||
| 495 | #chat table.ban-list th, | ||
| 496 | #chat table.invite-list th, | ||
| 497 | #chat table.ignore-list th, | ||
| 498 | #chat table.channel-list td, | ||
| 499 | #chat table.ban-list td, | ||
| 500 | #chat table.invite-list td { | ||
| 501 | border-bottom-color: var(--crypto-border); | ||
| 502 | } | ||
| 106 | 503 | ||
| 107 | #chat .toggle-text { | 504 | #chat .toggle-text { |
| 108 | line-height: 1.4; | 505 | line-height: 1.4; |
package.json +2 −2
| @@ -1,7 +1,7 @@ | |||
| 1 | { | 1 | { |
| 2 | "name": "thelounge-theme-crypto", | 2 | "name": "thelounge-theme-crypto", |
| 3 | "version": "1.0.0", | 3 | "version": "1.1.0", |
| 4 | "description": "Retro & high-contrast theme for The Lounge", | 4 | "description": "Minimal black terminal theme for The Lounge", |
| 5 | "main": "package.json", | 5 | "main": "package.json", |
| 6 | "thelounge": { | 6 | "thelounge": { |
| 7 | "name": "Crypto", | 7 | "name": "Crypto", |
screenshot.png
Binary file not shown.