Commit 0473efa7 authored by Emma's avatar Emma 🦉

rework CSS

- use CSS variables for almost every colour
- make colours more consistent
- fix default colourscheme not being very friendly for colourblind people
- split CSS entrypoints into core & colourschemes
parent 89885a7f
Pipeline #50664069 passed with stages
in 7 minutes and 6 seconds
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
@import (reference) '_variables';
/*
* 1. Hide label in comment form.
......@@ -9,8 +9,8 @@
}
.comment-user.submitter {
background: @comment-submitter-background-color;
background: var(--primary);
border-radius: 2px;
color: @comment-submitter-color;
color: var(--primary-fg);
padding: 0 0.25rem;
}
@import (reference) 'mixins';
@import (reference) '_mixins';
.content-wrapper {
display: flex;
......@@ -55,13 +55,13 @@
.user-flag::after { content: ']'; }
.user-flag-admin {
color: @user-flag-admin-color;
color: var(--fg-red);
}
.user-flag-moderator {
color: @user-flag-moderator-color;
color: var(--fg-green);
}
.forum-group-heading a {
color: @page-color;
color: var(--text);
}
@import (reference) '../settings';
.alert {
border-radius: 0.5rem;
display: flex;
......@@ -12,11 +10,11 @@
}
&--notice {
background: @alert-notice-color;
background: var(--bg-blue);
}
&--success {
background: @alert-success-color;
background: var(--bg-green);
}
}
......
@import (reference) '../mixins';
@import (reference) '../settings';
@import (reference) '../_mixins';
.button {
.unbuttonize();
background-color: @button-background-color;
border-radius: 4px;
color: @button-text-color;
cursor: pointer;
display: inline-block;
font-size: 120%;
......@@ -13,36 +10,28 @@
text-align: center;
white-space: nowrap;
&:hover {
background-color: @button-hover-background-color;
text-decoration: none;
}
&:active {
color: @button-active-text-color;
}
&--inline {
font-size: 100%;
display: inline;
padding: 0.25rem 0.5rem;
}
// inverted button
&--secondary {
background: transparent;
color: @button-background-color;
border: solid 1px @button-background-color;
padding: ~'calc(0.5rem - 1px) calc(1rem - 1px)';
&:not(&--secondary) {
background-color: var(--primary);
color: var(--primary-fg);
&.button--inline {
padding: ~'calc(0.25rem - 1px) calc(0.5rem - 1px)';
&:hover {
background-color: var(--primary-alt);
text-decoration: none;
}
}
&--secondary {
background: var(--accent);
color: var(--accent-fg);
&:hover {
background: transparent;
color: @button-hover-background-color;
border-color: @button-hover-background-color;
background: var(--accent-alt);
}
}
}
@import (reference) '../mixins';
@import (reference) '../settings';
@import (reference) '../_mixins';
/*
* <article class="comment">
......@@ -23,8 +22,8 @@
* </article>
*/
.comment {
background: @page-background-color;
border: solid 1px @comment-border-color;
background: var(--bg-page);
border: solid 1px var(--border);
display: flex;
flex-direction: column;
margin-bottom: 1rem;
......@@ -35,13 +34,13 @@
& > .comment {
&__row {
border: solid @comment-border-color;
border: solid var(--border);
border-width: 1px 1px 0;
}
&__replies {
border: solid @comment-border-color;
border-width: 0 1px 0px 1px;
border: solid var(--border);
border-width: 0 1px 0 1px;
}
}
}
......@@ -85,21 +84,5 @@
&--nested {
margin-bottom: 0.5rem;
}
&:target {
border-bottom: dotted 1px;
& > .comment__row {
background: @comment-highlight-background;
border: dotted 1px;
border-width: 1px 1px 0;
}
& > .comment__replies {
background: @comment-highlight-background;
border: dotted 1px;
border-width: 0 1px;
}
}
}
@import '../settings';
@import '../_variables';
.diff-table {
border-collapse: collapse;
......@@ -6,11 +6,11 @@
width: 100%;
&__line-group {
border-bottom: solid 0.5rem @diff-table-line-group-border-color;
border-bottom: solid 0.5rem var(--border);
}
&__line-no {
background: @diff-table-line-no-background-color;
background: var(--bg-grey);
padding: 0.25rem 0.5rem;
text-align: right;
vertical-align: top;
......@@ -24,15 +24,15 @@
width: 45%;
&--changed {
background: @diff-table-changed-background-color;
background: var(--bg-blue);
}
&--removed {
background: @diff-table-removed-background-color;
background: var(--bg-red);
}
&--added {
background: @diff-table-added-background-color;
background: var(--bg-green);
}
}
}
@import (reference) '../settings';
.dimmed {
color: contrast(@page-color, lighten(@page-color, 50%), darken(@page-color, 50%));
color: var(--fg-grey);
// <small> is the correct
small& {
......
@import (reference) '../mixins';
@import (reference) '../settings';
@import (reference) '../_mixins';
//
// Standard, vertical, non-weird forms
......@@ -14,21 +13,21 @@
}
.text-inputs({
background-color: @form-text-input-background-color;
border: solid 1px @form-text-input-border-color;
background-color: var(--bg-page);
border: solid 1px var(--border);
border-radius: 2px;
line-height: 1.35;
color: @form-text-input-color;
color: var(--text);
padding: 0.5rem;
&:focus {
border: solid 1px @form-text-input-focus-border-color;
border: solid 1px var(--primary);
outline: none;
}
&[disabled] {
background-color: @form-text-input-disabled-background-color;
color: @form-text-input-disabled-color;
background-color: var(--bg-grey);
color: var(--fg-grey);
}
});
......@@ -38,7 +37,7 @@
}
&__error {
color: @form-error-color;
color: var(--fg-red);
font-weight: bold;
list-style-position: inside;
margin: 0;
......@@ -59,13 +58,13 @@
}
&__group {
border: solid 1px @form-text-input-border-color;
border: solid 1px var(--border);
margin-bottom: 1rem;
padding: 0 1rem;
}
&__help {
color: @form-help-text-color;
color: var(--text-muted);
font-size: 0.80rem;
}
......
@import (reference) '../settings';
@import (reference) '../_variables';
.markdown-input {
&__preview {
background: @markdown-preview-background-color;
background: var(--bg-red);
border-radius: 4px;
display: flex;
flex-direction: column;
......
@import (reference) '../settings';
.sidebar {
display: flex;
flex-direction: column;
......@@ -15,7 +13,7 @@
}
&__section {
background: @sidebar-background-color;
background: var(--sidebar-card);
padding: 1rem 1rem 0;
margin-bottom: 1rem;
}
......
@import (reference) '../settings';
@import (reference) '../_variables';
@media screen and (min-width: @desktop-min-width) {
.site-nav {
background-color: @nav-background-color;
background-color: var(--primary);
display: flex;
margin-bottom: 1rem;
padding: 0 1rem;
......@@ -13,7 +13,7 @@
&__logo,
&__link {
color: @nav-link-color;
color: var(--primary-fg);
display: block;
font-size: @nav-font-size;
padding: 1rem;
......@@ -40,14 +40,14 @@
display: block;
&--has-notifications {
background: @nav-notifications-background-color;
background: var(--fg-orange); // todo
}
// todo: BEM
&.dropdown-container {
&.expanded,
&:not(.js):hover {
background: @nav-active-background-color;
background: var(--primary-alt);
}
}
}
......@@ -58,7 +58,7 @@
@media screen and (max-width: (@desktop-min-width - 1px)) {
.site-nav {
background-color: @nav-background-color;
background-color: var(--primary);
margin-bottom: 1rem;
&__logo {
......@@ -68,14 +68,14 @@
&__logo,
&__mobile-toggle,
&__link {
color: @nav-link-color;
color: var(--primary-fg);
font-size: @nav-font-size;
padding: 1rem;
}
&__mobile-toggle {
&--has-notifications {
background: @nav-notifications-background-color;
background: var(--fg-orange); // todo
}
}
......@@ -91,13 +91,13 @@
&__item {
&--has-notifications {
background: @nav-notifications-background-color;
background: var(--fg-orange); // todo
}
&.dropdown-container {
&.expanded,
&:not(.js):hover {
background: @nav-active-background-color;
background: var(--primary-alt);
}
}
}
......@@ -107,7 +107,7 @@
}
&__inner {
background-color: @nav-inner-background-color;
background-color: var(--primary-alt);
display: none;
&--mobile-visible {
......
@import (reference) '../mixins';
@import (reference) '../settings';
@import (reference) '../_mixins';
.subscribe-button {
.unbuttonize;
......@@ -13,8 +12,8 @@
&__label,
&__subscriber-count {
background-color: @button-background-color;
color: @button-text-color;
background-color: var(--primary);
color: var(--primary-fg);
padding: 0.5rem 1rem;
}
......@@ -29,13 +28,13 @@
&:active {
.subscribe-button__label {
color: @button-active-text-color;
color: var(--fg-grey);
}
}
&:hover {
.subscribe-button__label {
background-color: @button-hover-background-color;
background-color: var(--primary-alt);
}
}
......
@import (reference) '../settings';
@import (reference) '../_variables';
// No real need to use BEM for the table structure since HTML places strict
// restrictions on how tables are structured. Just make sure nested tables don't
......@@ -13,7 +13,7 @@
}
& > thead {
border-bottom: solid 2px @table-header-separator-color;
border-bottom: solid 2px var(--border);
}
& > thead,
......@@ -39,7 +39,7 @@
& > tbody > tr:nth-child(even) {
& > th,
& > td {
background-color: @table-alternate-row-background-color;
border-top: solid 1px var(--bg-grey);
}
}
}
@import '../settings';
@import '../_variables';
.tabs {
display: flex;
......@@ -6,24 +6,24 @@
margin-right: -1rem;
&__bar {
background: @tab-background-color;
background: var(--accent);
display: flex;
margin: 0 1rem 1rem 0;
padding: 0;
}
&__tab {
border-bottom: solid 1px @tab-inactive-border-color;
border-bottom: solid 1px var(--border);
display: block;
padding: 0;
&--active {
border-bottom: solid 3px @tab-active-border-color;
border-bottom: solid 3px var(--primary);
}
}
&__link {
color: unset;
color: var(--accent-fg);
display: block;
padding: 0.4rem 0.7rem 0.2rem 0.7rem;
}
......
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
@import (reference) '_variables';
.grouped-forum-listing {
.columns(@counter) when (@counter <= 5) {
@media screen and (min-width: (160px + 192px * @counter)) {
columns: @counter;
column-rule: solid 1px @grouped-forum-listing-border-color;
column-rule: solid 1px var(--border);
}
.columns(@counter + 1);
......
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
@import (reference) '_variables';
html {
background: @page-background-color;
background: var(--bg-page);
box-sizing: border-box;
color: @page-color;
font-family: @page-font-family;
font-size: @page-font-size;
color: var(--text);
font-family: var(--font-family);
font-size: var(--font-size);
height: 100%;
line-height: @page-line-height;
line-height: var(--line-height);
}
*, *::before, *::after {
......@@ -23,7 +23,7 @@ body {
}
a {
color: @page-link-color;
color: var(--link);
text-decoration: none;
}
......@@ -41,19 +41,17 @@ h1, h2, h3, h4, h5, h6, p, dl, ol, ul, blockquote {
// opinionated blockquote styling - should be safe?
blockquote {
background-color: @blockquote-background-color;
border-left: 1px inset @blockquote-border-color;
margin: 0 0 0 0.5rem;
background-color: var(--bg-grey);
border-left: 1px solid var(--border);
margin: 0;
padding: 0 0.5rem;
& > * {
@day-color: lighten(@page-color, 25%);
@night-color: darken(@page-color, 25%);
color: contrast(@page-color, @day-color, @night-color);
color: var(--text-muted);
}
a {
color: @page-color;
color: var(--text);
}
}
......@@ -73,6 +71,11 @@ textarea {
font: inherit;
}
pre, code, kbd {
font-family: var(--mono-font-family, monospace);
font-size: var(--mono-font-size, 1em);
}
pre {
overflow-x: auto;
}
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
.message-thread-inner,
.message-reply {
border: solid 1px @message-border-color;
border: solid 1px var(--border);
margin-bottom: 1rem;
padding: 1rem 1rem 0;
}
......
@import (reference) 'settings';
@import (reference) '_variables';
/*
* Make certain things boring and grey.
......@@ -6,7 +6,7 @@
* This should be applied to paragraphs or navs only, never entire containers.
*/
.meta() {
color: @meta-color;
color: var(--text-muted);
font-size: 0.85rem;
padding: 0.075rem 0;
......
@import (reference) 'components/button';
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_components/button';
@import (reference) '_mixins';
.dropdown-container {
position: relative;
......@@ -31,10 +30,10 @@
}
.dropdown-menu {
background: @dropdown-menu-background-color;
border: solid 1px @dropdown-menu-border-color;
background: var(--bg-page); // todo
border: solid 1px var(--border);
border-top: none;
box-shadow: 0 0 1px @dropdown-menu-border-color;
box-shadow: 0 0 1px var(--border);
display: none;
margin-top: -1px;
min-width: 12rem;
......@@ -55,16 +54,13 @@
}
& > li > a {
color: var(--text);
display: block;
padding: 0.5rem 1rem;
&:not(:hover) > .icon {
color: @page-color;
}
&:hover {
background: @page-link-color;
color: @page-background-color;
background: var(--accent);
color: var(--accent-fg);
text-decoration: none;
}
}
......
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
@import (reference) '_variables';
.submission {
margin-bottom: 1rem;
......@@ -33,12 +33,16 @@
}
}
.submission-link:visited {
color: @submission-link-color-visited;
}
.submission-link {
color: var(--submission-link);
&:visited {
color: var(--submission-link-visited);
}
.submission-sticky .submission-link {
color: @submission-sticky-link-color;
.submission-sticky & {
color: var(--submission-link-sticky);
}
}
.submission-info {
......
@desktop-min-width: 768px;
@nav-font-size: 16px;
@import (reference) 'mixins';
@import (reference) 'settings';
@import (reference) '_mixins';
.vote {
padding: 0.5rem 1.5rem;
......@@ -16,16 +15,16 @@
.vote-button {
.unbuttonize();
color: @vote-arrow-color;
color: var(--fg-grey);
line-height: 1.15;
white-space: nowrap;
cursor: pointer;
}
.vote-user-upvoted .vote-up {
color: @vote-arrow-color-upvoted;
color: var(--fg-orange)
}
.vote-user-downvoted .vote-down {
color: @vote-arrow-color-downvoted;
color: var(--fg-blue);
}
@import (less) '~normalize.css';
/*! https://postmill.xyz/ */
// global element styles (must be first)
@import '_global';
// components
@import '_components/alert';
@import '_components/button';
@import '_components/clear-notification-button';
@import '_components/comment';
@import '_components/diff-table';
@import '_components/dimmed';
@import '_components/form';
@import '_components/icon';
@import '_components/markdown-input';
@import '_components/site-nav';
@import '_components/sidebar';
@import '_components/source-code';
@import '_components/subscribe-button';
@import '_components/table';
@import '_components/tabs';
@import '_components/user-bio';
// legacy, non-BEM
@import '_comments';
@import '_common';
@import '_forums';
@import '_messages';
@import '_navigation';
@import '_submissions';
@import '_votes';
@import 'main';
@import 'settings-night';
.select2-container {
// Fix for select2 being bad on dark pages.
// It doesn't matter that the select box is bright, since regular select boxes
// wouldn't have their colours overridden anyway.
color: #000;
}
@import (less) '~normalize.css';
/*! https://postmill.xyz/ */
// global element styles (must be first)
@import 'global';
// components
@import 'components/alert';
@import 'components/button';
@import 'components/clear-notification-button';
@import 'components/comment';