You've already forked AstralRinth
forked from didirus/AstralRinth
cd2f2d42a3
* Try CarbonAds * Move location * add border, fix adblock msg * Fix advertisement label look (#636) Ever since changes for Carbon ads were introduced, the label did not match the appearance of the card, leaving the bottom right corner of the card not round. With more recent changes, where border was added, that became even more apparent - now the border covers the label, which does not look good; this effect only becomes worse when zooming. This commit attempts to mitigate these issues with the following: - To fix the border issues, label's absolute position is now calculated from the card wrapper, where the border is applied. This allows label to cover the border for seamless look. That is done by changing position of the card wrapper to relative instead of doing so for the ad contents container. - The label now tries to take over the border, to do so the bottom and right relative positions have been changed to -3px. - To account for the position change, the label is now a bit more padded, to make text content of it to look more or less as before, otherwise it would shift a bit. Not sure if the padding changes are accurate, but it does look close to how it looked before. * Fix message again * Update user ads position * Remove privacy toggles (placebo and didn't do anything) * Remove other code * Link docs page Co-authored-by: Sasha Sorokin <10401817+Brawaru@users.noreply.github.com>
367 lines
9.6 KiB
SCSS
367 lines
9.6 KiB
SCSS
html {
|
|
@extend .light-mode;
|
|
--dark-color-text: #b0bac5;
|
|
--dark-color-text-dark: #ecf9fb;
|
|
}
|
|
|
|
.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-kbd-shadow: rgba(0, 0, 0, 0.25);
|
|
|
|
--color-ad: #d6e6f9;
|
|
--color-ad-raised: #b1c8e4;
|
|
|
|
--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-warning-text: hsl(358, 57%, 20%);
|
|
--color-warning-bg: hsl(358, 57%, 80%);
|
|
|
|
--color-banner-text: hsl(0, 11%, 16%);
|
|
--color-banner-bg: hsl(356, 59%, 77%);
|
|
--color-banner-side: hsl(357, 78%, 40%);
|
|
|
|
--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);
|
|
|
|
--color-card-link-bg: rgba(0, 0, 0, 7%);
|
|
}
|
|
|
|
.dark-mode {
|
|
--color-icon: #96a2b0;
|
|
--color-text: var(--dark-color-text);
|
|
--color-text-inactive: #929aa3;
|
|
--color-text-dark: var(--dark-color-text-dark);
|
|
--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-kbd-shadow: rgba(0, 0, 0, 0.35);
|
|
|
|
--color-ad: #1f324a;
|
|
--color-ad-raised: #2e4057;
|
|
|
|
--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-warning-text: hsl(358, 57%, 85%);
|
|
--color-warning-bg: hsl(358, 57%, 25%);
|
|
|
|
--color-banner-text: hsl(0, 100%, 96%);
|
|
--color-banner-bg: hsl(356, 18%, 18%);
|
|
--color-banner-side: hsl(357, 78%, 40%);
|
|
|
|
--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;
|
|
|
|
--color-card-link-bg: rgb(255, 255, 255, 15%);
|
|
}
|
|
|
|
.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: 3.5rem;
|
|
--size-mobile-navbar-height-expanded: 10rem;
|
|
|
|
--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);
|
|
|
|
@media screen and (min-width: 501px) {
|
|
--size-mobile-navbar-height-expanded: 7rem;
|
|
}
|
|
}
|
|
|
|
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.25rem;
|
|
color: var(--color-text-dark);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
@extend .button;
|
|
}
|
|
|
|
input {
|
|
border-radius: 2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
pre {
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
kbd {
|
|
background-color: var(--color-code-bg);
|
|
color: var(--color-code-text);
|
|
box-shadow: 0 2px 1px var(--color-kbd-shadow);
|
|
padding: 0.2em 0.5em 0.1em;
|
|
border-radius: 3px;
|
|
line-height: 1;
|
|
font-size: 0.85em !important;
|
|
}
|
|
|
|
// @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';
|