forked from didirus/AstralRinth
be0e18d4b0
* Add table color variables (+ prettier fixes) * Add details and table styling to .markdown-body
296 lines
7.6 KiB
SCSS
296 lines
7.6 KiB
SCSS
.light-mode {
|
|
--color-icon: #718096;
|
|
--color-text: #4a5568;
|
|
--color-text-medium: #2a303d;
|
|
--color-text-dark: #1a202c;
|
|
--color-heading: #2c313d;
|
|
--color-heading-light: #777e8d;
|
|
--color-bg: #edf2f7;
|
|
--color-raised-bg: #ffffff;
|
|
--color-divider: #eaecef;
|
|
--color-divider-dark: #c8cdd3;
|
|
|
|
--color-text-inverted: var(--color-bg);
|
|
--color-bg-inverted: var(--color-text);
|
|
|
|
--color-brand: #5da545;
|
|
--color-brand-hover: #53923e;
|
|
--color-brand-active: #4b8138;
|
|
--color-brand-light: #6bac57;
|
|
--color-brand-inverted: #ffffff;
|
|
--color-brand-2: #5fa33b;
|
|
--color-brand-3: #c5ddb7;
|
|
--color-brand-disabled: #e2e8f0;
|
|
|
|
--color-button-bg: var(--color-bg);
|
|
--color-button-text: var(--color-text-dark);
|
|
--color-button-bg-hover: #e0e7ee;
|
|
--color-button-text-hover: #1b1e24;
|
|
--color-button-bg-active: #d0d7df;
|
|
--color-button-text-active: var(--color-button-text-hover);
|
|
--color-button-bg-disabled: #eceef0;
|
|
--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-link: #2089ff;
|
|
|
|
--color-badge-gray-text: #646161;
|
|
--color-badge-gray-bg: #c8c1c1;
|
|
--color-badge-red-text: #9b2c2c;
|
|
--color-badge-red-bg: #fed7d7;
|
|
--color-badge-green-text: #276749;
|
|
--color-badge-green-bg: #c6f6d5;
|
|
--color-badge-yellow-text: #675027;
|
|
--color-badge-yellow-bg: #f6e8c6;
|
|
|
|
--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;
|
|
}
|
|
|
|
.dark-mode {
|
|
--color-icon: #acacac;
|
|
--color-text: #cecece;
|
|
--color-text-medium: #e4e4e4;
|
|
--color-text-dark: #fbf8ec;
|
|
--color-heading: #fbf8ec;
|
|
--color-heading-light: #8a8a8a;
|
|
--color-bg: #171719;
|
|
--color-raised-bg: #222224;
|
|
--color-divider: #49494d;
|
|
--color-divider-dark: #646468;
|
|
|
|
--color-text-inverted: var(--color-bg);
|
|
--color-bg-inverted: var(--color-text);
|
|
|
|
--color-brand: #5da545;
|
|
--color-brand-hover: #6bac57;
|
|
--color-brand-active: #7fc46a;
|
|
--color-brand-light: #6bac57;
|
|
--color-brand-inverted: #ffffff;
|
|
--color-brand-2: #438121;
|
|
--color-brand-3: #344d26;
|
|
--color-brand-disabled: #414146;
|
|
|
|
--color-button-bg: #343438;
|
|
--color-button-text: var(--color-text);
|
|
--color-button-bg-hover: #3a3a3f;
|
|
--color-button-text-hover: #ffffff;
|
|
--color-button-bg-active: #49494e;
|
|
--color-button-text-active: var(--color-button-text-hover);
|
|
--color-button-text-disabled: #444444;
|
|
--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: #4793d9;
|
|
|
|
--color-badge-gray-bg: #646161;
|
|
--color-badge-gray-text: #c8c1c1;
|
|
--color-badge-red-bg: #9b2c2c;
|
|
--color-badge-red-text: #fed7d7;
|
|
--color-badge-green-bg: #276749;
|
|
--color-badge-green-text: #c6f6d5;
|
|
--color-badge-yellow-bg: #675027;
|
|
--color-badge-yellow-text: #f6e8c6;
|
|
|
|
--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;
|
|
}
|
|
|
|
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;
|
|
overflow-y: overlay;
|
|
|
|
// 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: 0.5rem;
|
|
--size-rounded-icon: 0.5rem;
|
|
--size-rounded-control: 0.25rem;
|
|
--size-rounded-tooltip: 0.25rem;
|
|
|
|
--size-navbar-height: 4rem;
|
|
|
|
--spacing-card-lg: 1.5rem;
|
|
--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,
|
|
textarea {
|
|
background: var(--color-button-bg);
|
|
border-radius: var(--size-rounded-control);
|
|
color: var(--color-text);
|
|
padding: 0.5rem 1rem;
|
|
border: 2px solid transparent;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background: var(--color-button-bg-hover);
|
|
color: var(--color-text);
|
|
outline: none;
|
|
|
|
&::placeholder {
|
|
color: var(--color-text);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--color-raised-bg);
|
|
border-color: var(--color-divider-dark);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-color-text);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
color: var(--color-button-text);
|
|
background-color: var(--color-button-bg);
|
|
border: none;
|
|
border-radius: var(--size-rounded-control);
|
|
|
|
&:focus,
|
|
&: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';
|