Commit 850bc77231
Verified · cmc
Layout: unified · split
crypto.css +51 −2
| @@ -21,6 +21,9 @@ GitHub: https://github.com/aynik | |||
| 21 | --crypto-danger: #ff3b30; | 21 | --crypto-danger: #ff3b30; |
| 22 | --crypto-highlight: rgba(0, 255, 65, 0.1); | 22 | --crypto-highlight: rgba(0, 255, 65, 0.1); |
| 23 | --crypto-highlight-border: rgba(0, 255, 65, 0.8); | 23 | --crypto-highlight-border: rgba(0, 255, 65, 0.8); |
| 24 | --crypto-self-bg: rgba(215, 215, 215, 0.15); | ||
| 25 | --crypto-self-border: rgba(215, 215, 215, 0.35); | ||
| 26 | --crypto-quote-bg: rgba(159, 214, 169, 0.06); | ||
| 24 | --body-color: var(--crypto-text); | 27 | --body-color: var(--crypto-text); |
| 25 | --body-color-muted: var(--crypto-muted); | 28 | --body-color-muted: var(--crypto-muted); |
| 26 | --body-bg-color: var(--crypto-black); | 29 | --body-bg-color: var(--crypto-black); |
| @@ -222,7 +225,6 @@ button.link:hover { | |||
| 222 | border-left: 1px solid var(--crypto-border); | 225 | border-left: 1px solid var(--crypto-border); |
| 223 | } | 226 | } |
| 224 | 227 | ||
| 225 | #chat .self .content, | ||
| 226 | #chat .unhandled .from, | 228 | #chat .unhandled .from, |
| 227 | #chat .msg[data-type="unhandled"] .from, | 229 | #chat .msg[data-type="unhandled"] .from, |
| 228 | #chat .msg[data-type="condensed"] .content, | 230 | #chat .msg[data-type="condensed"] .content, |
| @@ -240,6 +242,21 @@ button.link:hover { | |||
| 240 | color: var(--crypto-muted); | 242 | color: var(--crypto-muted); |
| 241 | } | 243 | } |
| 242 | 244 | ||
| 245 | #chat .msg.self { | ||
| 246 | background-color: var(--crypto-self-bg); | ||
| 247 | border-left: 5px solid var(--crypto-self-border); | ||
| 248 | } | ||
| 249 | |||
| 250 | #chat .msg.self .time { | ||
| 251 | color: var(--crypto-muted); | ||
| 252 | padding-left: 5px; | ||
| 253 | } | ||
| 254 | |||
| 255 | #chat .msg.self .content { | ||
| 256 | border-left-color: transparent; | ||
| 257 | color: var(--crypto-text); | ||
| 258 | } | ||
| 259 | |||
| 243 | .user, | 260 | .user, |
| 244 | #chat .user, | 261 | #chat .user, |
| 245 | .inline-channel { | 262 | .inline-channel { |
| @@ -330,6 +347,15 @@ button.link:focus-visible { | |||
| 330 | color: var(--crypto-black); | 347 | color: var(--crypto-black); |
| 331 | } | 348 | } |
| 332 | 349 | ||
| 350 | code, | ||
| 351 | .irc-monospace { | ||
| 352 | background: var(--crypto-panel); | ||
| 353 | border: 1px solid var(--crypto-border); | ||
| 354 | border-radius: 2px; | ||
| 355 | color: var(--crypto-text); | ||
| 356 | padding: 2px 4px; | ||
| 357 | } | ||
| 358 | |||
| 333 | #chat .msg[data-type="monospace_block"] .text, | 359 | #chat .msg[data-type="monospace_block"] .text, |
| 334 | #chat pre, | 360 | #chat pre, |
| 335 | #chat code { | 361 | #chat code { |
| @@ -338,6 +364,26 @@ button.link:focus-visible { | |||
| 338 | color: var(--crypto-text); | 364 | color: var(--crypto-text); |
| 339 | } | 365 | } |
| 340 | 366 | ||
| 367 | #chat pre code { | ||
| 368 | background: transparent; | ||
| 369 | border: 0; | ||
| 370 | padding: 0; | ||
| 371 | } | ||
| 372 | |||
| 373 | #chat blockquote, | ||
| 374 | #chat .content blockquote { | ||
| 375 | background: var(--crypto-quote-bg); | ||
| 376 | border-left: 3px solid var(--crypto-border); | ||
| 377 | color: var(--crypto-muted); | ||
| 378 | margin: 4px 0; | ||
| 379 | padding: 4px 10px; | ||
| 380 | } | ||
| 381 | |||
| 382 | #chat blockquote p:last-child, | ||
| 383 | #chat .content blockquote p:last-child { | ||
| 384 | margin-bottom: 0; | ||
| 385 | } | ||
| 386 | |||
| 341 | .input { | 387 | .input { |
| 342 | background: var(--crypto-black); | 388 | background: var(--crypto-black); |
| 343 | border-color: var(--crypto-border); | 389 | border-color: var(--crypto-border); |
| @@ -410,11 +456,14 @@ button.link:focus-visible { | |||
| 410 | border-top: 1px solid var(--crypto-border); | 456 | border-top: 1px solid var(--crypto-border); |
| 411 | } | 457 | } |
| 412 | 458 | ||
| 459 | #form:focus-within { | ||
| 460 | background: var(--crypto-panel); | ||
| 461 | } | ||
| 462 | |||
| 413 | #form #input { | 463 | #form #input { |
| 414 | font-size: 14px; | 464 | font-size: 14px; |
| 415 | } | 465 | } |
| 416 | 466 | ||
| 417 | #form #input:focus, | ||
| 418 | .header .topic-input:focus { | 467 | .header .topic-input:focus { |
| 419 | border-color: var(--crypto-accent); | 468 | border-color: var(--crypto-accent); |
| 420 | box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35); | 469 | box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35); |