120 lines
3.4 KiB
CSS
120 lines
3.4 KiB
CSS
/*
|
|
Media queries cannot have variables, so here are media queries you can copy-paste as necessary:
|
|
|
|
$breakpoint-not-small: screen and (min-width: 35em)
|
|
$breakpoint-medium: screen and (min-width: 35em) and (max-width: 60em)
|
|
$breakpoint-large: screen and (min-width: 60em)
|
|
*/
|
|
|
|
@import "tachyons-vars.css";
|
|
|
|
/*
|
|
* COLOR GUIDE:
|
|
*
|
|
* Generally speaking, all text and backgrounds use the same palette of
|
|
* colors, which are various shades of gray. These are --c1 through --c5.
|
|
*
|
|
* --c1: Alternate page background color. Use when you need a different
|
|
* background color for variety.
|
|
* --c2: Primary page background color.
|
|
* --c3: Background color for content boxes. Works on both --c1 and --c2.
|
|
* --c4: Color of borders and lines.
|
|
* --c5: Color of disabled inputs.
|
|
*/
|
|
|
|
:root {
|
|
/* TODO(redesign): Probably not the right color for Soft Gray. Check with Jes. */
|
|
--c1: #fafafa;
|
|
--c2: #f3f3f3;
|
|
--c3: #dbdbdb;
|
|
--c4: #c1c1c1;
|
|
/* TODO(redesign): Need a --c5. */
|
|
|
|
--c-transparent-background: #fffffff3;
|
|
|
|
--red: #c61d24;
|
|
|
|
--color: #000;
|
|
--link-color: #d12991;
|
|
|
|
--timeline-media-background: #b4b4b466;
|
|
|
|
--unread-color: #9498ff;
|
|
|
|
--border-color: var(--c4);
|
|
--border-color-focused: #4e55ff;
|
|
--border-color-error: #ff3a3a;
|
|
|
|
--button-color: var(--c3);
|
|
--button-color-primary: #ee84ff;
|
|
|
|
/* TODO(redesign): Audit these colors. */
|
|
--notice-hiatus-color: #aa7d30;
|
|
--notice-dead-color: #b42222;
|
|
--notice-lts-color: #43a52f;
|
|
--notice-success-color: #43a52f;
|
|
--notice-warn-color: #aa7d30;
|
|
--notice-failure-color: #b42222;
|
|
|
|
--site-width: 58rem;
|
|
--site-width-narrow: 44rem;
|
|
|
|
--avatar-size-small: 1.5rem;
|
|
--avatar-size-normal: 2.5rem;
|
|
|
|
/* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
|
|
--theme-color: #b1b1b1;
|
|
--theme-color-dim: #c0c0c0;
|
|
--theme-color-dimmer: #dddddd;
|
|
--theme-color-dimmest: #f0f0f0;
|
|
|
|
--theme-color-dark: #666;
|
|
--theme-color-light: #666;
|
|
|
|
--main-background-color: #f8f8f8;
|
|
--main-background-color-transparent: rgba(#f8f8f8, 0);
|
|
|
|
--forum-thread-read-color: #555;
|
|
--forum-thread-read-link-color: #888;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--color: #fff;
|
|
--link-color: #ff5dc2;
|
|
--color-error: #ff6666;
|
|
|
|
--c1: #1f1f1f;
|
|
--c2: #2f2f2f;
|
|
--c3: #494949;
|
|
--c4: #595959;
|
|
--c5: #cbcbcb;
|
|
|
|
--c-transparent-background: #242424da;
|
|
|
|
--button-color-primary: #c900ea;
|
|
|
|
/* TODO(redesign): Audit these colors. */
|
|
--notice-hiatus-color: #876327;
|
|
--notice-dead-color: #7a2020;
|
|
--notice-lts-color: #2a681d;
|
|
--notice-success-color: #2a681d;
|
|
--notice-warn-color: #876327;
|
|
--notice-failure-color: #7a2020;
|
|
|
|
/* TODO(redesign): Compatibility colors; do not use in new designs. Remove when redesign is done. */
|
|
--theme-color: #666;
|
|
--theme-color-dim: #444;
|
|
--theme-color-dimmer: #383838;
|
|
--theme-color-dimmest: #333;
|
|
|
|
--theme-color-dark: #666;
|
|
--theme-color-light: #666;
|
|
|
|
--main-background-color: #202020;
|
|
--main-background-color-transparent: rgba(#202020, 0);
|
|
|
|
--forum-thread-read-color: #777;
|
|
--forum-thread-read-link-color: #999;
|
|
}
|
|
} |