b82efb6e3c
* Improve links and search page controls... I know it looks kinda insane * Fix donation padding Fixes #393 * Improve text field styling * white icon * Improve pagination and disabled button colors * Round tab indicator * Fix rounding of home page points card * I hate browsers * Change verbiage of legacy options
321 lines
8.4 KiB
SCSS
321 lines
8.4 KiB
SCSS
html {
|
|
@extend .light-mode;
|
|
}
|
|
|
|
.light-mode {
|
|
--color-icon: #6b7280;
|
|
--color-text: hsl(221, 39%, 11%);
|
|
--color-text-secondary: var(--color-icon);
|
|
--color-text-inactive: hsl(215, 14%, 34%);
|
|
--color-text-dark: #1a202c;
|
|
--color-heading: #2c313d;
|
|
--color-bg: hsl(220, 13%, 91%);
|
|
--color-raised-bg: #ffffff;
|
|
--color-divider: hsl(220, 13%, 91%);
|
|
--color-divider-dark: #c8cdd3;
|
|
|
|
--color-text-inverted: var(--color-bg);
|
|
--color-bg-inverted: var(--color-text);
|
|
|
|
--color-brand: #30b27b;
|
|
--color-brand-hover: #1e9565;
|
|
--color-brand-active: #177955;
|
|
--color-brand-inverted: #ffffff;
|
|
|
|
--tab-underline-hovered: #e2e8f0;
|
|
|
|
--color-button-bg: #e0e0e5;
|
|
--color-button-text: var(--color-text-dark);
|
|
--color-button-bg-hover: #d9dce0;
|
|
--color-button-text-hover: #1b1e24;
|
|
--color-button-bg-active: #c3c6cb;
|
|
--color-button-text-active: var(--color-button-text-hover);
|
|
--color-button-bg-disabled: #cacdd2;
|
|
--color-button-text-disabled: #9da3ac;
|
|
--color-transparent-button-bg-hover: var(--color-button-bg);
|
|
--color-transparent-button-text-hover: var(--color-text-dark);
|
|
--color-transparent-button-bg-active: var(--color-button-bg-hover);
|
|
--color-transparent-button-text-active: var(--color-text-dark);
|
|
|
|
--color-dropdown-bg: var(--color-button-bg);
|
|
--color-dropdown-text: var(--color-button-text);
|
|
|
|
--color-category-bg: var(--color-bg);
|
|
--color-category-text: var(--color-text-dark);
|
|
|
|
--color-tooltip-bg: var(--color-text);
|
|
--color-tooltip-text: var(--color-bg);
|
|
|
|
--color-code-bg: var(--color-bg);
|
|
--color-code-text: var(--color-text-dark);
|
|
|
|
--color-ad: #d6e6f9;
|
|
|
|
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
|
|
--shadow-dropdown-strong: 3px 3px 10px hsla(0, 0%, 0%, 0.3);
|
|
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
|
|
|
|
--color-grey-link: var(--color-text);
|
|
--color-grey-link-hover: var(--color-heading);
|
|
--color-grey-link-active: var(--color-text-dark);
|
|
--color-link: #2089ff;
|
|
--color-link-hover: #1a76e7;
|
|
--color-link-active: #146fd7;
|
|
|
|
--color-badge-gray-text: #646161;
|
|
--color-badge-gray-bg: #c8c1c1;
|
|
--color-badge-red-text: #6e1931;
|
|
--color-badge-red-bg: #db3162;
|
|
--color-badge-green-text: #184e38;
|
|
--color-badge-green-bg: #24a54e;
|
|
--color-badge-yellow-text: #755920;
|
|
--color-badge-yellow-bg: #f7bb43;
|
|
|
|
--color-block-quote: var(--color-tooltip-bg);
|
|
--color-header-underline: var(--color-tooltip-text);
|
|
--color-hr: var(--color-text);
|
|
|
|
--color-table-border: #dfe2e5;
|
|
--color-table-alternate-row: #f6f8fa;
|
|
|
|
--shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
|
|
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
|
|
--shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
|
|
inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
|
|
}
|
|
|
|
.dark-mode {
|
|
--color-icon: #96a2b0;
|
|
--color-text: #b0bac5;
|
|
--color-text-inactive: #929aa3;
|
|
--color-text-dark: #ecf9fb;
|
|
--color-heading: #c4cfdd;
|
|
--color-bg: #16181c;
|
|
--color-raised-bg: #26292f;
|
|
--color-divider: #474b54;
|
|
--color-divider-dark: #646c75;
|
|
|
|
--color-text-inverted: var(--color-bg);
|
|
--color-bg-inverted: var(--color-text);
|
|
|
|
--color-brand: #1bd96a;
|
|
--color-brand-hover: #2de391;
|
|
--color-brand-active: #55f5ae;
|
|
--color-brand-inverted: #000;
|
|
|
|
--tab-underline-hovered: #414146;
|
|
|
|
--color-button-bg: #3e434b;
|
|
--color-button-text: var(--color-text);
|
|
--color-button-bg-hover: #494f58;
|
|
--color-button-text-hover: #ffffff;
|
|
--color-button-bg-active: #616570;
|
|
--color-button-text-active: var(--color-button-text-hover);
|
|
--color-button-bg-disabled: #3a434d;
|
|
--color-button-text-disabled: #555d65;
|
|
--color-transparent-button-bg-hover: var(--color-button-bg);
|
|
--color-transparent-button-text-hover: var(--color-text-dark);
|
|
--color-transparent-button-bg-active: var(--color-button-bg-hover);
|
|
--color-transparent-button-text-active: var(--color-text-dark);
|
|
|
|
--color-dropdown-bg: var(--color-button-bg);
|
|
--color-dropdown-text: var(--color-button-text);
|
|
|
|
--color-category-bg: var(--color-button-bg);
|
|
--color-category-text: var(--color-text-dark);
|
|
|
|
--color-tooltip-bg: var(--color-text);
|
|
--color-tooltip-text: var(--color-bg);
|
|
|
|
--color-code-bg: var(--color-button-bg);
|
|
--color-code-text: var(--color-text-dark);
|
|
|
|
--color-ad: #2c323a;
|
|
|
|
--shadow-dropdown: 3px 3px 14px hsla(0, 0%, 0%, 0.15);
|
|
--shadow-dropdown-strong: 3px 3px 20px hsla(0, 0%, 0%, 0.15);
|
|
--shadow-tooltip: 0.2rem 0.2rem 10px rgba(0, 0, 0, 0.15);
|
|
|
|
--color-link: #74b6f3;
|
|
--color-link-hover: #92c0f5;
|
|
--color-link-active: #b5d5fd;
|
|
|
|
--color-badge-gray-bg: #646161;
|
|
--color-badge-gray-text: #c8c1c1;
|
|
--color-badge-red-text: #bd1a48;
|
|
--color-badge-red-bg: #db3162;
|
|
--color-badge-green-text: #1ebb7b;
|
|
--color-badge-green-bg: #24a54e;
|
|
--color-badge-yellow-text: #dba22d;
|
|
--color-badge-yellow-bg: #f7bb43;
|
|
|
|
--color-block-quote: var(--color-code-bg);
|
|
--color-header-underline: var(--color-tooltip-text);
|
|
--color-hr: var(--color-text);
|
|
|
|
--color-table-border: #4f5864;
|
|
--color-table-alternate-row: #262a30;
|
|
}
|
|
|
|
.oled-mode {
|
|
@extend .dark-mode;
|
|
--color-bg: #000000;
|
|
--color-raised-bg: #101013;
|
|
|
|
--color-button-bg: #222329;
|
|
--color-button-bg-hover: #2d2d32;
|
|
--color-button-bg-active: #3c3c40;
|
|
}
|
|
|
|
body {
|
|
// Defaults
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
|
|
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
font-family: var(--font-standard);
|
|
font-size: 16px;
|
|
font-weight: var(--font-weight-medium);
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
// Rounding sizes
|
|
--size-rounded-xs: 0.5rem;
|
|
--size-rounded-sm: 0.75rem;
|
|
--size-rounded-md: 1rem;
|
|
--size-rounded-lg: 1.25rem;
|
|
|
|
--size-rounded-max: 999999999px;
|
|
--size-rounded-card: 1rem;
|
|
--size-rounded-icon: 1rem;
|
|
--size-rounded-control: 0.25rem;
|
|
--size-rounded-tooltip: 0.25rem;
|
|
|
|
--size-navbar-height: 3.5rem;
|
|
--size-mobile-navbar-height: 4rem;
|
|
|
|
--spacing-card-lg: 1.5rem;
|
|
--spacing-card-bg: 1rem;
|
|
--spacing-card-md: 0.75rem;
|
|
--spacing-card-sm: 0.5rem;
|
|
|
|
// Font Sizes
|
|
--font-size-xxs: 0.625rem; //10px
|
|
--font-size-xs: 0.75rem; //12px
|
|
--font-size-sm: 0.875rem; //14px
|
|
--font-size-nm: 1rem; //16px
|
|
--font-size-md: 1.125rem; //18px
|
|
--font-size-lg: 1.25rem; //20px
|
|
--font-size-xl: 1.5rem; //24px
|
|
--font-size-2xl: 2rem; //32px
|
|
--font-size-3xl: 3rem; //48px
|
|
|
|
// Font Weights
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extrabold: 800;
|
|
|
|
--font-weight-text: var(--font-weight-medium);
|
|
--font-weight-heading: var(--font-weight-extrabold);
|
|
--font-weight-title: var(--font-weight-extrabold);
|
|
}
|
|
|
|
svg {
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0;
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
@extend .button;
|
|
}
|
|
|
|
input {
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
background: var(--color-button-bg);
|
|
color: var(--color-text);
|
|
padding: 0.5rem 1rem;
|
|
border: 2px solid transparent;
|
|
|
|
&:hover:not([disabled]):not(:focus) {
|
|
background: var(--color-button-bg-hover);
|
|
color: var(--color-button-text-hover);
|
|
border-color: var(--color-divider-dark);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none !important;
|
|
border-color: var(--color-brand);
|
|
color: var(--color-button-text-active);
|
|
}
|
|
|
|
&:disabled,
|
|
&[disabled] {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.ea-content {
|
|
background: var(--color-ad) !important;
|
|
border-radius: var(--size-rounded-card) !important;
|
|
margin: 0 !important;
|
|
box-shadow: var(--shadow-faint) !important;
|
|
}
|
|
|
|
.ea-callout {
|
|
margin: 0.25rem 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
button {
|
|
padding: 0.5rem 0;
|
|
//outline: none; Bad for accessibility
|
|
color: var(--color-button-text);
|
|
background-color: var(--color-button-bg);
|
|
border: none;
|
|
border-radius: var(--size-rounded-control);
|
|
|
|
&:focus-visible,
|
|
&:hover {
|
|
background-color: var(--color-button-bg-hover);
|
|
color: var(--color-button-text-hover);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--color-button-bg-active);
|
|
color: var(--color-button-text-active);
|
|
}
|
|
}
|
|
|
|
// @import "vue-select/src/scss/vue-select.scss";
|
|
|
|
@import '~assets/styles/highlightjs.scss';
|
|
@import '~assets/styles/layout.scss';
|
|
@import '~assets/styles/utils.scss';
|
|
@import '~assets/styles/components.scss';
|
|
@import '~assets/styles/normalize.scss';
|