mirror of
https://github.com/mastodon/mastodon.git
synced 2025-11-29 02:50:46 +00:00
Bring back old theme to run alongside the new
This commit is contained in:
diondiondion
parent
81dc6dd1f9
commit
7ebd349c8f
|
|
@ -68,6 +68,7 @@ docker-compose.override.yml
|
|||
|
||||
# Ignore vendored CSS reset
|
||||
app/javascript/styles/mastodon/reset.scss
|
||||
app/javascript/styles_new/mastodon/reset.scss
|
||||
|
||||
# Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
|
||||
*.js
|
||||
|
|
|
|||
|
|
@ -1,7 +1,27 @@
|
|||
@use 'mastodon/css_variables';
|
||||
@use 'mastodon/functions';
|
||||
@use 'mastodon/mixins';
|
||||
@use 'mastodon/variables';
|
||||
@use 'common';
|
||||
@use 'mastodon/css_variables';
|
||||
@use 'fonts/roboto';
|
||||
@use 'fonts/roboto-mono';
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@use 'mastodon/reset';
|
||||
@use 'mastodon/basics';
|
||||
@use 'mastodon/branding';
|
||||
@use 'mastodon/containers';
|
||||
@use 'mastodon/lists';
|
||||
@use 'mastodon/widgets';
|
||||
@use 'mastodon/forms';
|
||||
@use 'mastodon/accounts';
|
||||
@use 'mastodon/components';
|
||||
@use 'mastodon/polls';
|
||||
@use 'mastodon/modal';
|
||||
@use 'mastodon/emoji_picker';
|
||||
@use 'mastodon/annual_reports';
|
||||
@use 'mastodon/about';
|
||||
@use 'mastodon/tables';
|
||||
@use 'mastodon/admin';
|
||||
@use 'mastodon/dashboard';
|
||||
@use 'mastodon/rtl';
|
||||
@use 'mastodon/accessibility';
|
||||
@use 'mastodon/rich_text';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
@use 'mastodon/css_variables';
|
||||
@use 'mastodon/variables';
|
||||
@use 'common';
|
||||
@use 'contrast/variables';
|
||||
@use 'application';
|
||||
@use 'contrast/diff';
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,4 @@
|
|||
:root {
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-50);
|
||||
--clr-text-secondary: var(--clr-grey-300);
|
||||
--clr-text-tertiary: var(--clr-grey-400);
|
||||
--clr-text-accent: var(--clr-indigo-300);
|
||||
--clr-text-status-links: var(--clr-text-accent);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-strength: 18%;
|
||||
}
|
||||
@use '../mastodon/variables' as *;
|
||||
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
|
|
@ -43,6 +31,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
.edit-indicator__content a {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.report-dialog-modal__textarea::placeholder {
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
|
||||
.link-button:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
|
|
|
|||
25
app/javascript/styles/contrast/variables.scss
Normal file
25
app/javascript/styles/contrast/variables.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@use '../mastodon/functions' as *;
|
||||
|
||||
// Dependent colors
|
||||
$black: #000;
|
||||
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: hsl(240deg, 100%, 69%);
|
||||
|
||||
$ui-base-color: $classic-base-color !default;
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
@use '../mastodon/variables' with (
|
||||
$darker-text-color: lighten($ui-primary-color, 20%),
|
||||
$dark-text-color: lighten($ui-primary-color, 12%),
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%),
|
||||
$highlight-text-color: lighten($ui-highlight-color, 10%),
|
||||
$action-button-color: lighten($ui-base-color, 50%),
|
||||
$inverted-text-color: $black,
|
||||
$lighter-text-color: darken($ui-base-color, 6%),
|
||||
$light-text-color: $classic-primary-color
|
||||
);
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
@use 'mastodon-light/variables';
|
||||
@use 'mastodon-light/css_variables';
|
||||
@use 'mastodon/variables' with (
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
@use 'common';
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
@use 'application';
|
||||
@use 'mastodon-light/diff';
|
||||
|
|
|
|||
|
|
@ -1,196 +1,23 @@
|
|||
@use '../mastodon/theme_utils' as utils;
|
||||
@use 'sass:color';
|
||||
@use '../mastodon/variables' as *;
|
||||
@use 'variables' as *;
|
||||
@use '../mastodon/functions' as *;
|
||||
|
||||
:root {
|
||||
--clr-black: #000;
|
||||
--clr-grey-950: #181821;
|
||||
--clr-grey-800: #292938;
|
||||
--clr-grey-700: #444664;
|
||||
--clr-grey-600: #545778;
|
||||
--clr-grey-500: #696d91;
|
||||
--clr-grey-400: #8b8dac;
|
||||
--clr-grey-300: #b4b6cb;
|
||||
--clr-grey-200: #d8d9e3;
|
||||
--clr-grey-100: #f0f0f5;
|
||||
--clr-grey-50: #f0f1ff;
|
||||
--clr-white: #fff;
|
||||
--clr-indigo-600: #6147e6;
|
||||
--clr-indigo-400: #8886ff;
|
||||
--clr-indigo-300: #a5abfd;
|
||||
--clr-indigo-200: #c8cdfe;
|
||||
--clr-indigo-100: #e0e3ff;
|
||||
--clr-indigo-50: #f0f1ff;
|
||||
--clr-red-500: #ff637e;
|
||||
--clr-red-600: #ec003f;
|
||||
--clr-yellow-400: #ffb900;
|
||||
--clr-yellow-600: #e17100;
|
||||
--clr-green-400: #05df72;
|
||||
--clr-green-600: #00a63e;
|
||||
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-950);
|
||||
--clr-text-secondary: var(--clr-grey-600);
|
||||
--clr-text-tertiary: var(--clr-grey-500);
|
||||
--clr-text-on-inverted: var(--clr-white);
|
||||
--clr-text-accent: var(--clr-indigo-600);
|
||||
--clr-text-accent-subtle: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-accent)
|
||||
);
|
||||
--clr-text-on-accent-strong: var(--clr-white);
|
||||
--clr-text-error: var(--clr-red-600);
|
||||
--clr-text-on-error-strong: var(--clr-white);
|
||||
--clr-text-warning: var(--clr-yellow-600);
|
||||
--clr-text-on-warning-strong: var(--clr-white);
|
||||
--clr-text-success: var(--clr-green-600);
|
||||
--clr-text-on-success-strong: var(--clr-white);
|
||||
--clr-text-disabled: var(--clr-grey-300);
|
||||
--clr-text-on-disabled: var(--clr-grey-200);
|
||||
--clr-text-bookmark-highlight: var(--clr-text-error);
|
||||
--clr-text-favourite-highlight: var(--clr-text-warning);
|
||||
--clr-text-on-media: var(--clr-white);
|
||||
--clr-text-status-links: var(--clr-text-accent);
|
||||
|
||||
/* BACKGROUND TOKENS */
|
||||
|
||||
--clr-bg-primary: var(--clr-white);
|
||||
--clr-bg-secondary-base: var(--clr-grey-600);
|
||||
--clr-bg-secondary-strength: 5%;
|
||||
--clr-bg-secondary: #{color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-secondary-solid: #{color-mix(
|
||||
in srgb,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-tertiary: #{color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
|
||||
)};
|
||||
--clr-bg-ambient: var(--clr-bg-primary);
|
||||
--clr-bg-elevated: var(--clr-bg-primary);
|
||||
--clr-bg-inverted: var(--clr-grey-950);
|
||||
--clr-bg-media-base: var(--clr-black);
|
||||
--clr-bg-media-strength: 65%;
|
||||
--clr-bg-media: #{utils.css-alpha(
|
||||
var(--clr-bg-media-base),
|
||||
var(--clr-bg-media-strength)
|
||||
)};
|
||||
--clr-bg-overlay: var(--clr-bg-primary);
|
||||
--clr-bg-disabled: var(--clr-grey-400);
|
||||
--clr-bg-accent-subtle-base: var(--clr-indigo-600);
|
||||
--clr-bg-accent-subtle-strength: 8%;
|
||||
--clr-bg-accent-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
var(--clr-bg-accent-subtle-strength)
|
||||
)};
|
||||
--clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
|
||||
)};
|
||||
--clr-bg-accent-strong: var(--clr-indigo-600);
|
||||
--clr-bg-accent-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-accent-strong),
|
||||
black var(--clr-bg-accent-subtle-strength)
|
||||
);
|
||||
--clr-bg-error-subtle-base: #f41b3b;
|
||||
--clr-bg-error-subtle-strength: 12%;
|
||||
--clr-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-error-subtle-base),
|
||||
var(--clr-bg-error-subtle-strength)
|
||||
)};
|
||||
--clr-bg-error-strong: var(--clr-red-600);
|
||||
--clr-bg-error-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-error-strong),
|
||||
black var(--clr-bg-error-subtle-strength)
|
||||
);
|
||||
--clr-bg-warning-subtle-base: #ffca1b;
|
||||
--clr-bg-warning-subtle-strength: 10%;
|
||||
--clr-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-warning-subtle-base),
|
||||
var(--clr-bg-warning-subtle-strength)
|
||||
)};
|
||||
--clr-bg-warning-strong: var(--clr-yellow-600);
|
||||
--clr-bg-warning-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-warning-strong),
|
||||
black var(--clr-bg-warning-subtle-strength)
|
||||
);
|
||||
--clr-bg-success-subtle-base: #17e865;
|
||||
--clr-bg-success-subtle-strength: 15%;
|
||||
--clr-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-success-subtle-base),
|
||||
var(--clr-bg-success-subtle-strength)
|
||||
)};
|
||||
--clr-bg-success-strong: var(--clr-green-600);
|
||||
--clr-bg-success-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-success-strong),
|
||||
black var(--clr-bg-success-subtle-strength)
|
||||
);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-base: #000856;
|
||||
--clr-border-primary-strength: 15%;
|
||||
--clr-border-primary: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-border-primary-base) var(--clr-border-primary-strength)
|
||||
);
|
||||
--clr-border-media: rgb(252 248 255 / 15%);
|
||||
--clr-border-on-bg-secondary: var(--clr-grey-200);
|
||||
--clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
|
||||
--clr-border-on-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-error),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-warning),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-success),
|
||||
50%
|
||||
)};
|
||||
|
||||
/* SHADOW TOKENS */
|
||||
|
||||
--clr-shadow-primary-base: var(--clr-black);
|
||||
--clr-shadow-primary-strength: 30%;
|
||||
--clr-shadow-primary: #{utils.css-alpha(
|
||||
var(--clr-shadow-primary-base),
|
||||
var(--clr-shadow-primary-strength)
|
||||
)};
|
||||
--dropdown-shadow:
|
||||
0 20px 25px -5px var(--clr-shadow-primary),
|
||||
0 8px 10px -6px var(--clr-shadow-primary);
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
|
||||
|
||||
/* GRAPHS/CHARTS TOKENS */
|
||||
|
||||
--clr-graph-primary-stroke: var(--clr-text-accent);
|
||||
--clr-graph-primary-fill: var(--clr-bg-accent-subtle);
|
||||
--clr-graph-warning-stroke: var(--clr-text-warning);
|
||||
--clr-graph-warning-fill: var(--clr-bg-warning-subtle);
|
||||
--clr-graph-disabled-stroke: var(--clr-text-disabled);
|
||||
--clr-graph-disabled-fill: var(--clr-bg-disabled);
|
||||
|
||||
/* LEGACY TOKENS */
|
||||
|
||||
--rich-text-container-color: rgb(255 216 231 / 100%);
|
||||
--rich-text-text-color: rgb(114 47 83 / 100%);
|
||||
--rich-text-decorations-color: rgb(255 175 212 / 100%);
|
||||
|
||||
/* MISCELLANEOUS */
|
||||
|
||||
--outline-focus-default: 2px solid var(--clr-text-accent);
|
||||
--avatar-border-radius: 8px;
|
||||
body {
|
||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
||||
--dropdown-background-color: #fff;
|
||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
||||
--modal-background-color: var(--background-color);
|
||||
--background-border-color: hsl(240deg, 25%, 88%);
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||
--background-filter: blur(10px);
|
||||
--surface-variant-background-color: #f1ebfb;
|
||||
--surface-border-color: #cac4d0;
|
||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
|
||||
--rich-text-container-color: rgba(255, 216, 231, 100%);
|
||||
--rich-text-text-color: rgba(114, 47, 83, 100%);
|
||||
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
|
||||
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
|
||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
||||
}
|
||||
|
|
|
|||
530
app/javascript/styles/mastodon-light/diff.scss
Normal file
530
app/javascript/styles/mastodon-light/diff.scss
Normal file
|
|
@ -0,0 +1,530 @@
|
|||
// Notes!
|
||||
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||
@use 'sass:color';
|
||||
@use '../mastodon/functions' as *;
|
||||
@use '../mastodon/variables' as *;
|
||||
|
||||
.simple_form .button.button-tertiary {
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__actions button,
|
||||
.status-card__actions a {
|
||||
color: color.change($white, $alpha: 0.8);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Change default background colors of columns
|
||||
.interaction-modal {
|
||||
background: $white;
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.rules-list li::before {
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.directory__card__img {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
.account__header {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.column-header__button.active {
|
||||
color: $ui-highlight-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button:disabled {
|
||||
color: darken($action-button-color, 25%);
|
||||
}
|
||||
|
||||
.getting-started__footer a {
|
||||
color: $ui-secondary-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.confirmation-modal__secondary-button,
|
||||
.confirmation-modal__cancel-button,
|
||||
.mute-modal__cancel-button,
|
||||
.block-modal__cancel-button {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started .navigation-bar {
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search__input,
|
||||
.search__popout,
|
||||
.setting-text,
|
||||
.report-dialog-modal__textarea,
|
||||
.audio-player {
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.report-dialog-modal .dialog-option .poll__input {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.upload-progress__backdrop {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
// Change the background colors of statuses
|
||||
.focusable:focus-visible {
|
||||
background: lighten($white, 4%);
|
||||
}
|
||||
|
||||
.account-gallery__item a {
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
||||
// Change the text colors on inverted background
|
||||
.actions-modal ul li:not(:empty) a.active,
|
||||
.actions-modal ul li:not(:empty) a.active button,
|
||||
.actions-modal ul li:not(:empty) a:active,
|
||||
.actions-modal ul li:not(:empty) a:active button,
|
||||
.actions-modal ul li:not(:empty) a:focus,
|
||||
.actions-modal ul li:not(:empty) a:focus button,
|
||||
.actions-modal ul li:not(:empty) a:hover,
|
||||
.actions-modal ul li:not(:empty) a:hover button,
|
||||
.simple_form button:not(.button, .link-button) {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.compare-history-modal .report-modal__target,
|
||||
.report-dialog-modal .poll__option.dialog-option {
|
||||
border-bottom-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.report-dialog-modal__container {
|
||||
border-top-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.dialog-modal__content__preview {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--modal-border-color);
|
||||
}
|
||||
|
||||
.reactions-bar__item:hover,
|
||||
.reactions-bar__item:focus,
|
||||
.reactions-bar__item:active {
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
||||
.reactions-bar__item.active {
|
||||
background-color: color.mix($white, $ui-highlight-color, 80%);
|
||||
border-color: color.mix(
|
||||
lighten($ui-base-color, 8%),
|
||||
$ui-highlight-color,
|
||||
80%
|
||||
);
|
||||
}
|
||||
|
||||
.media-modal__overlay .picture-in-picture__footer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.picture-in-picture__header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.announcements,
|
||||
.picture-in-picture__footer {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.icon-with-badge__badge {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.column-settings__hashtags .column-select__option {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dashboard__quick-access,
|
||||
.focal-point__preview strong,
|
||||
.admin-wrapper .content__heading__tabs a.selected {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
color: lighten($gold-star, 16%);
|
||||
}
|
||||
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar,
|
||||
.block-modal__action-bar,
|
||||
.onboarding-modal__paginator,
|
||||
.error-modal__footer {
|
||||
background: darken($ui-base-color, 6%);
|
||||
|
||||
.onboarding-modal__nav,
|
||||
.error-modal__nav {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($ui-base-color, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.display-case__case {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.embed-modal .embed-modal__container .embed-modal__html {
|
||||
background: $white;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:focus {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background: $ui-primary-color;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background: lighten($ui-primary-color, 10%);
|
||||
}
|
||||
|
||||
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
|
||||
.react-toggle-track {
|
||||
background: lighten($ui-highlight-color, 10%);
|
||||
}
|
||||
|
||||
// Change the default color used for the text in an empty column or on the error column
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
color: $primary-text-color;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Change the default colors used on some parts of the profile pages
|
||||
.activity-stream-tabs {
|
||||
background: $white;
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.nothing-here,
|
||||
.page-header,
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
background: $white;
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.picture-in-picture-placeholder {
|
||||
background: $white;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.directory__tag > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar,
|
||||
&__row,
|
||||
.nothing-here {
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-grid {
|
||||
.account-grid-card {
|
||||
.controls {
|
||||
.icon-button {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.warning {
|
||||
box-shadow: none;
|
||||
background: color.change($error-red, $alpha: 0.5);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.recommended {
|
||||
border-color: $ui-highlight-color;
|
||||
color: $ui-highlight-color;
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='url'],
|
||||
input[type='datetime-local'],
|
||||
textarea {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form .compose-form__warning {
|
||||
border-color: $ui-highlight-color;
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
|
||||
&,
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content,
|
||||
.reply-indicator__content {
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__filter-bar button.active::after,
|
||||
.account__section-headline a.active::after {
|
||||
border-color: transparent transparent $white;
|
||||
}
|
||||
|
||||
.activity-stream,
|
||||
.nothing-here,
|
||||
.directory__tag > a,
|
||||
.directory__tag > div,
|
||||
.card > a,
|
||||
.page-header,
|
||||
.compose-form,
|
||||
.compose-form__warning {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
&__img {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
|
||||
&:focus {
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__actions .icon-button.active,
|
||||
.dropdown-button.active,
|
||||
.language-dropdown__dropdown__results__item:focus,
|
||||
.language-dropdown__dropdown__results__item.active,
|
||||
.language-dropdown__dropdown__results__item:focus
|
||||
.language-dropdown__dropdown__results__item__common-name,
|
||||
.language-dropdown__dropdown__results__item.active
|
||||
.language-dropdown__dropdown__results__item__common-name {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option,
|
||||
.visibility-dropdown__option {
|
||||
&:focus,
|
||||
&.active {
|
||||
--dropdown-text-color: #{$white};
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form .spoiler-input__input {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
}
|
||||
|
||||
.emoji-mart-search input,
|
||||
.language-dropdown__dropdown .emoji-mart-search input,
|
||||
.poll__option input[type='text'] {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
.dropdown-button.warning {
|
||||
border-color: #b3261e;
|
||||
color: #b3261e;
|
||||
|
||||
&.active {
|
||||
background-color: #f9dedc;
|
||||
}
|
||||
}
|
||||
|
||||
.search__popout__menu__item {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: $white;
|
||||
|
||||
mark,
|
||||
.icon-button {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline-follow-suggestions {
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
|
||||
|
||||
&.focusable:focus-visible {
|
||||
background: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.inline-follow-suggestions__body__scrollable__card {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.inline-follow-suggestions__body__scroll-button__icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__counters {
|
||||
& > div {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
.report-dialog-modal__textarea {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
.autosuggest-account {
|
||||
.display-name__account {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-group--annual-report {
|
||||
.notification-group__icon,
|
||||
.notification-group__main .link-button {
|
||||
color: var(--indigo-3);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
html {
|
||||
scrollbar-color: color.change($action-button-color, $alpha: 0.25)
|
||||
var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-scrollbars {
|
||||
::-webkit-scrollbar-thumb {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
||||
}
|
||||
46
app/javascript/styles/mastodon-light/variables.scss
Normal file
46
app/javascript/styles/mastodon-light/variables.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
@use 'sass:color';
|
||||
|
||||
@use '../mastodon/functions' with (
|
||||
$darken-multiplier: 1,
|
||||
$lighten-multiplier: -1
|
||||
);
|
||||
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
@use '../mastodon/variables' with (
|
||||
$success-green: color.adjust(
|
||||
hsl(138deg, 32%, 35%),
|
||||
$lightness: 8%,
|
||||
$space: hsl
|
||||
),
|
||||
$base-overlay-background: $white,
|
||||
|
||||
$ui-base-color: $classic-secondary-color,
|
||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
|
||||
$ui-secondary-color: $classic-base-color,
|
||||
|
||||
$ui-button-secondary-color: $grey-600,
|
||||
$ui-button-secondary-border-color: $grey-600,
|
||||
$ui-button-secondary-focus-color: $white,
|
||||
$ui-button-tertiary-color: $blurple-500,
|
||||
$ui-button-tertiary-border-color: $blurple-500,
|
||||
|
||||
$primary-text-color: $black,
|
||||
$darker-text-color: $classic-base-color,
|
||||
$lighter-text-color: $classic-base-color,
|
||||
$highlight-text-color: $classic-highlight-color,
|
||||
$dark-text-color: hsl(240deg, 16%, 32%),
|
||||
$light-text-color: hsl(240deg, 16%, 32%),
|
||||
$inverted-text-color: $black,
|
||||
|
||||
$action-button-color: hsl(240deg, 16%, 45%),
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
31
app/javascript/styles/mastodon/_functions.scss
Normal file
31
app/javascript/styles/mastodon/_functions.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@use 'sass:color';
|
||||
@use 'sass:string';
|
||||
@use 'sass:meta';
|
||||
|
||||
$darken-multiplier: -1 !default;
|
||||
$lighten-multiplier: 1 !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return color.adjust(
|
||||
$color,
|
||||
$lightness: $amount * $darken-multiplier,
|
||||
$space: hsl
|
||||
);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return color.adjust(
|
||||
$color,
|
||||
$lightness: $amount * $lighten-multiplier,
|
||||
$space: hsl
|
||||
);
|
||||
}
|
||||
|
||||
@function hex-color($color) {
|
||||
@if meta.type-of($color) == 'color' {
|
||||
$color: string.slice(color.ie-hex-str($color), 4);
|
||||
}
|
||||
|
||||
@return '%23' + string.unquote($color);
|
||||
}
|
||||
|
|
@ -1,30 +1,33 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
|
||||
@mixin search-input {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: var(--clr-bg-secondary);
|
||||
color: var(--clr-text-primary);
|
||||
background: var(--input-background-color);
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--clr-border-on-bg-secondary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
font-size: 17px;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@mixin search-popout {
|
||||
background: var(--clr-bg-elevated);
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
padding-bottom: 14px;
|
||||
margin-top: 10px;
|
||||
color: var(--clr-text-secondary);
|
||||
box-shadow: 2px 4px 15px var(--clr-shadow-primary);
|
||||
color: $light-text-color;
|
||||
box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $light-text-color;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -40,6 +43,6 @@
|
|||
|
||||
em {
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,91 @@
|
|||
@use 'sass:color';
|
||||
@use 'functions' as *;
|
||||
|
||||
// Commonly used web colors
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #563acc; // Iris
|
||||
$blurple-500: #6364ff; // Brand purple
|
||||
$blurple-400: #7477fd; // Medium slate blue
|
||||
$blurple-300: #858afa; // Faded Blue
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: $red-500 !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
$red-bookmark: $warning-red;
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !default;
|
||||
$simple-background-color: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$error-value-color: $error-red !default;
|
||||
|
||||
// Tell UI to use selected colors
|
||||
$ui-base-color: $classic-base-color !default; // Darkest
|
||||
$ui-base-lighter-color: lighten(
|
||||
$ui-base-color,
|
||||
26%
|
||||
) !default; // Lighter darkest
|
||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
$ui-button-color: $white !default;
|
||||
$ui-button-background-color: $blurple-500 !default;
|
||||
$ui-button-focus-background-color: $blurple-600 !default;
|
||||
$ui-button-focus-outline-color: $blurple-400 !default;
|
||||
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
|
||||
|
||||
$ui-button-disabled-color: color.adjust(
|
||||
$ui-button-background-color,
|
||||
$alpha: -0.3
|
||||
) !default;
|
||||
|
||||
$ui-button-secondary-color: $blurple-500 !default;
|
||||
$ui-button-secondary-border-color: $blurple-500 !default;
|
||||
$ui-button-secondary-focus-border-color: $blurple-300 !default;
|
||||
$ui-button-secondary-focus-color: $blurple-300 !default;
|
||||
|
||||
$ui-button-tertiary-color: $blurple-300 !default;
|
||||
$ui-button-tertiary-border-color: $blurple-300 !default;
|
||||
$ui-button-tertiary-focus-background-color: $blurple-600 !default;
|
||||
$ui-button-tertiary-focus-color: $white !default;
|
||||
|
||||
$ui-button-destructive-background-color: $red-500 !default;
|
||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
||||
|
||||
$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
|
||||
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !default;
|
||||
$darker-text-color: $ui-primary-color !default;
|
||||
$dark-text-color: $ui-base-lighter-color !default;
|
||||
$secondary-text-color: $ui-secondary-color !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
||||
$action-button-color: $ui-base-lighter-color !default;
|
||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Keep this filter a SCSS variable rather than
|
||||
// a CSS Custom Property due to this Safari bug:
|
||||
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
|
|
@ -27,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
|
||||
li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 1em 1.75em;
|
||||
padding-inline-start: 3em;
|
||||
font-weight: 500;
|
||||
|
|
@ -67,8 +68,8 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 1em;
|
||||
background: var(--clr-bg-accent-strong);
|
||||
color: var(--clr-text-on-accent-strong);
|
||||
background: $highlight-text-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 50%;
|
||||
width: 4ch;
|
||||
height: 4ch;
|
||||
|
|
@ -84,13 +85,13 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
}
|
||||
|
||||
&__text {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,21 +104,21 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
> label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
select {
|
||||
> select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
|
|
@ -127,4 +128,18 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
content: '';
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14.933' height='18.467' viewBox='0 0 14.933 18.467'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='currentColor' /></svg>")
|
||||
no-repeat 50% 50%;
|
||||
mask-size: contain;
|
||||
right: 8px;
|
||||
background-color: lighten($ui-base-color, 12%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.card {
|
||||
& > a {
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,8 +22,8 @@
|
|||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-bottom: none;
|
||||
|
||||
img {
|
||||
|
|
@ -44,8 +45,8 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: var(--clr-bg-primary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: none;
|
||||
|
||||
.avatar {
|
||||
|
|
@ -60,7 +61,7 @@
|
|||
display: block;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-secondary);
|
||||
background: darken($ui-base-color, 8%);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +76,7 @@
|
|||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -84,7 +85,7 @@
|
|||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -105,7 +106,7 @@
|
|||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
|
|
@ -113,9 +114,9 @@
|
|||
}
|
||||
|
||||
.current {
|
||||
color: var(--clr-bg-inverted);
|
||||
background: var(--clr-text-on-inverted);
|
||||
background: $simple-background-color;
|
||||
border-radius: 100px;
|
||||
color: $inverted-text-color;
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
.older,
|
||||
.newer {
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
.older {
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: var(--clr-text-disabled);
|
||||
color: lighten($inverted-text-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
|
|
@ -160,8 +161,9 @@
|
|||
}
|
||||
|
||||
.nothing-here {
|
||||
color: var(--clr-text-secondary);
|
||||
background: var(--clr-bg-primary);
|
||||
background: $ui-base-color;
|
||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
@ -172,15 +174,6 @@
|
|||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
min-height: 30vh;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
|
||||
@media screen and (min-width: ($no-gap-breakpoint - 1)) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&--no-toolbar {
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
&--under-tabs {
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
|
@ -203,7 +196,7 @@
|
|||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
color: $ui-secondary-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -213,24 +206,16 @@
|
|||
.simple_form .overridden,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
background-color: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
.information-badge {
|
||||
&.superapp {
|
||||
color: var(--clr-text-success);
|
||||
background-color: var(--clr-bg-success-subtle);
|
||||
border-color: var(--clr-border-on-bg-success-subtle);
|
||||
}
|
||||
background-color: color.change($ui-secondary-color, $alpha: 0.1);
|
||||
border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
|
||||
}
|
||||
|
||||
.account-role {
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
padding-inline-end: 8px;
|
||||
border: 1px solid var(--clr-text-accent);
|
||||
color: var(--clr-text-accent);
|
||||
border: 1px solid $highlight-text-color;
|
||||
color: $highlight-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
|
|
@ -253,10 +238,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
.information-badge {
|
||||
&.superapp {
|
||||
color: $success-green;
|
||||
background-color: color.change($success-green, $alpha: 0.1);
|
||||
border-color: color.change($success-green, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .not_recommended {
|
||||
color: var(--clr-text-error);
|
||||
background-color: var(--clr-bg-error-subtle);
|
||||
border-color: var(--clr-border-on-bg-error-subtle);
|
||||
color: lighten($error-red, 12%);
|
||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
|
|
@ -264,14 +257,14 @@
|
|||
padding: 0;
|
||||
margin: 15px -15px -15px;
|
||||
border: 0 none;
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
dt,
|
||||
|
|
@ -289,17 +282,17 @@
|
|||
font-weight: 500;
|
||||
width: 120px;
|
||||
flex: 0 0 auto;
|
||||
color: var(--clr-text-primary);
|
||||
background: var(--clr-bg-secondary);
|
||||
color: $secondary-text-color;
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
}
|
||||
|
||||
dd {
|
||||
flex: 1 1 auto;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -310,16 +303,16 @@
|
|||
}
|
||||
|
||||
.verified {
|
||||
border: 1px solid var(--clr-border-on-bg-success-subtle);
|
||||
background: var(--clr-bg-success-subtle);
|
||||
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
|
||||
background: color.change($valid-value-color, $alpha: 0.25);
|
||||
|
||||
a {
|
||||
color: var(--clr-text-success);
|
||||
color: $valid-value-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__mark {
|
||||
color: var(--clr-text-success);
|
||||
color: $valid-value-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -334,10 +327,10 @@
|
|||
|
||||
.pending-account {
|
||||
&__header {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: var(--clr-text-primary);
|
||||
color: $ui-secondary-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -348,7 +341,7 @@
|
|||
}
|
||||
|
||||
strong {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -363,7 +356,7 @@
|
|||
}
|
||||
|
||||
.batch-table__row--muted {
|
||||
color: var(--clr-text-tertiary);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
.batch-table__row--muted .pending-account__header,
|
||||
|
|
@ -372,7 +365,7 @@
|
|||
&,
|
||||
a,
|
||||
strong {
|
||||
color: var(--clr-text-tertiary);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -384,12 +377,12 @@
|
|||
tbody td.accounts-table__extra,
|
||||
&__count,
|
||||
&__count small {
|
||||
color: var(--clr-text-tertiary);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table__row--attention {
|
||||
color: var(--clr-text-warning);
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
.batch-table__row--attention .pending-account__header,
|
||||
|
|
@ -398,7 +391,7 @@
|
|||
&,
|
||||
a,
|
||||
strong {
|
||||
color: var(--clr-text-warning);
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -406,6 +399,6 @@
|
|||
tbody td.accounts-table__extra,
|
||||
&__count,
|
||||
&__count small {
|
||||
color: var(--clr-text-warning);
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -170,7 +170,7 @@
|
|||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: var(--clr-graph-primary-stroke) !important;
|
||||
stroke: var(--indigo-3) !important;
|
||||
fill: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
html.has-modal {
|
||||
&,
|
||||
|
|
@ -16,11 +17,11 @@ html.has-modal {
|
|||
|
||||
body {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
background: var(--clr-bg-ambient);
|
||||
background: var(--background-color);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
text-rendering: optimizelegibility;
|
||||
|
||||
// Disable kerning for Japanese text to preserve monospaced alignment for readability
|
||||
|
|
@ -117,7 +118,6 @@ body {
|
|||
|
||||
&.admin {
|
||||
padding: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
|
|
@ -157,7 +157,7 @@ body {
|
|||
a {
|
||||
&:focus {
|
||||
border-radius: 4px;
|
||||
outline: var(--outline-focus-default);
|
||||
outline: $ui-button-focus-outline;
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
|
|
@ -212,7 +212,7 @@ button {
|
|||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
color: var(--clr-text-error);
|
||||
color: lighten($error-red, 4%);
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
|
|
@ -228,7 +228,7 @@ button {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
@ -238,11 +238,11 @@ button {
|
|||
}
|
||||
|
||||
&__footer {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $dark-text-color;
|
||||
font-size: 13px;
|
||||
|
||||
a {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $dark-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ button {
|
|||
display: inline;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $dark-text-color;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -267,7 +267,7 @@ button {
|
|||
}
|
||||
|
||||
&.copied {
|
||||
color: var(--mas-status-success-color);
|
||||
color: $valid-value-color;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.logo {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,7 +27,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
padding: 12px 16px;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
width: 100%;
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,206 +1,42 @@
|
|||
@use 'theme_utils' as utils;
|
||||
@use 'sass:color';
|
||||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
:root {
|
||||
--clr-black: #000;
|
||||
--clr-grey-950: #181821;
|
||||
--clr-grey-800: #292938;
|
||||
--clr-grey-700: #444664;
|
||||
--clr-grey-600: #545778;
|
||||
--clr-grey-500: #696d91;
|
||||
--clr-grey-400: #8b8dac;
|
||||
--clr-grey-300: #b4b6cb;
|
||||
--clr-grey-200: #d8d9e3;
|
||||
--clr-grey-100: #f0f0f5;
|
||||
--clr-grey-50: #f0f1ff;
|
||||
--clr-white: #fff;
|
||||
--clr-indigo-600: #6147e6;
|
||||
--clr-indigo-400: #8886ff;
|
||||
--clr-indigo-300: #a5abfd;
|
||||
--clr-indigo-200: #c8cdfe;
|
||||
--clr-indigo-100: #e0e3ff;
|
||||
--clr-indigo-50: #f0f1ff;
|
||||
--clr-red-500: #ff637e;
|
||||
--clr-red-600: #ec003f;
|
||||
--clr-yellow-400: #ffb900;
|
||||
--clr-yellow-600: #e17100;
|
||||
--clr-green-400: #05df72;
|
||||
--clr-green-600: #00a63e;
|
||||
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-50);
|
||||
--clr-text-secondary: var(--clr-grey-400);
|
||||
--clr-text-tertiary: var(--clr-grey-500);
|
||||
--clr-text-on-inverted: var(--clr-grey-950);
|
||||
--clr-text-accent: var(--clr-indigo-400);
|
||||
--clr-text-accent-subtle: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-accent)
|
||||
);
|
||||
--clr-text-on-accent-strong: var(--clr-white);
|
||||
--clr-text-error: var(--clr-red-500);
|
||||
--clr-text-on-error-strong: var(--clr-white);
|
||||
--clr-text-warning: var(--clr-yellow-400);
|
||||
--clr-text-on-warning-strong: var(--clr-white);
|
||||
--clr-text-success: var(--clr-green-400);
|
||||
--clr-text-on-success-strong: var(--clr-white);
|
||||
--clr-text-disabled: var(--clr-grey-600);
|
||||
--clr-text-on-disabled: var(--clr-grey-400);
|
||||
--clr-text-bookmark-highlight: var(--clr-text-error);
|
||||
--clr-text-favourite-highlight: var(--clr-text-warning);
|
||||
--clr-text-on-media: var(--clr-white);
|
||||
--clr-text-status-links: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-secondary)
|
||||
);
|
||||
|
||||
/* BACKGROUND TOKENS */
|
||||
|
||||
--clr-bg-primary: var(--clr-grey-950);
|
||||
--clr-bg-secondary-base: var(--clr-indigo-200);
|
||||
--clr-bg-secondary-strength: 10%;
|
||||
--clr-bg-secondary: #{utils.css-alpha(
|
||||
var(--clr-bg-secondary-base),
|
||||
var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-secondary-solid: color-mix(
|
||||
in srgb,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
);
|
||||
|
||||
/* Secondary with doubled mix amount */
|
||||
--clr-bg-tertiary: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
|
||||
);
|
||||
--clr-bg-ambient: var(--clr-bg-primary);
|
||||
--clr-bg-elevated: var(--clr-grey-800);
|
||||
--clr-bg-inverted: var(--clr-grey-50);
|
||||
--clr-bg-media-base: var(--clr-black);
|
||||
--clr-bg-media-strength: 65%;
|
||||
--clr-bg-media: #{utils.css-alpha(
|
||||
var(--clr-bg-media-base),
|
||||
var(--clr-bg-media-strength)
|
||||
)};
|
||||
--clr-bg-overlay: var(--clr-bg-primary);
|
||||
--clr-bg-disabled: var(--clr-grey-700);
|
||||
--clr-bg-accent-subtle-base: var(--clr-indigo-400);
|
||||
--clr-bg-accent-subtle-strength: 10%;
|
||||
--clr-bg-accent-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
var(--clr-bg-accent-subtle-strength)
|
||||
)};
|
||||
--clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
|
||||
)};
|
||||
--clr-bg-accent-strong: var(--clr-indigo-600);
|
||||
--clr-bg-accent-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-accent-strong),
|
||||
black var(--clr-bg-accent-subtle-strength)
|
||||
);
|
||||
--clr-bg-error-subtle-base: #f41b3b;
|
||||
--clr-bg-error-subtle-strength: 12%;
|
||||
--clr-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-error-subtle-base),
|
||||
var(--clr-bg-error-subtle-strength)
|
||||
)};
|
||||
--clr-bg-error-strong: var(--clr-red-600);
|
||||
--clr-bg-error-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-error-strong),
|
||||
black var(--clr-bg-error-subtle-strength)
|
||||
);
|
||||
--clr-bg-warning-subtle-base: #ffca1b;
|
||||
--clr-bg-warning-subtle-strength: 10%;
|
||||
--clr-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-warning-subtle-base),
|
||||
var(--clr-bg-warning-subtle-strength)
|
||||
)};
|
||||
--clr-bg-warning-strong: var(--clr-yellow-600);
|
||||
--clr-bg-warning-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-warning-strong),
|
||||
black var(--clr-bg-warning-subtle-strength)
|
||||
);
|
||||
--clr-bg-success-subtle-base: #17e865;
|
||||
--clr-bg-success-subtle-strength: 15%;
|
||||
--clr-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-success-subtle-base),
|
||||
var(--clr-bg-success-subtle-strength)
|
||||
)};
|
||||
--clr-bg-success-strong: var(--clr-green-600);
|
||||
--clr-bg-success-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-success-strong),
|
||||
black var(--clr-bg-success-subtle-strength)
|
||||
);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-base: var(--clr-indigo-200);
|
||||
--clr-border-primary-strength: 18%;
|
||||
--clr-border-primary: #{utils.css-alpha(
|
||||
var(--clr-border-primary-base),
|
||||
var(--clr-border-primary-strength)
|
||||
)};
|
||||
--clr-border-media: rgb(252 248 255 / 15%);
|
||||
--clr-border-on-bg-secondary: #{utils.css-alpha(
|
||||
var(--clr-border-primary-base),
|
||||
calc(var(--clr-border-primary-strength) / 1.5)
|
||||
)};
|
||||
--clr-border-on-bg-accent-subtle: var(--clr-border-primary);
|
||||
--clr-border-on-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-error),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-warning),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-success),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-inverted: var(--clr-border-primary);
|
||||
|
||||
/* SHADOW TOKENS */
|
||||
|
||||
--clr-shadow-primary-base: var(--clr-black);
|
||||
--clr-shadow-primary-strength: 80%;
|
||||
--clr-shadow-primary: #{utils.css-alpha(
|
||||
var(--clr-shadow-primary-base),
|
||||
var(--clr-shadow-primary-strength)
|
||||
)};
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--dropdown-shadow:
|
||||
0 20px 25px -5px var(--clr-shadow-primary),
|
||||
0 8px 10px -6px var(--clr-shadow-primary);
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
|
||||
|
||||
/* GRAPHS/CHARTS TOKENS */
|
||||
|
||||
--clr-graph-primary-stroke: var(--clr-text-accent);
|
||||
--clr-graph-primary-fill: var(--clr-bg-accent-subtle);
|
||||
--clr-graph-warning-stroke: var(--clr-text-warning);
|
||||
--clr-graph-warning-fill: var(--clr-bg-warning-subtle);
|
||||
--clr-graph-disabled-stroke: var(--clr-text-disabled);
|
||||
--clr-graph-disabled-fill: var(--clr-bg-disabled);
|
||||
|
||||
/* LEGACY TOKENS */
|
||||
|
||||
--rich-text-container-color: rgb(87 24 60 / 100%);
|
||||
--rich-text-text-color: rgb(255 175 212 / 100%);
|
||||
--rich-text-decorations-color: rgb(128 58 95 / 100%);
|
||||
|
||||
/* MISCELLANEOUS */
|
||||
|
||||
--outline-focus-default: 2px solid var(--clr-text-accent);
|
||||
0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
|
||||
0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
|
||||
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
|
||||
--modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
|
||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-color: #{darken($ui-base-color, 8%)};
|
||||
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
||||
--surface-variant-background-color: #{$ui-base-color};
|
||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--surface-border-color: #{lighten($ui-base-color, 8%)};
|
||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
|
||||
--avatar-border-radius: 8px;
|
||||
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
|
||||
--overlay-icon-shadow: drop-shadow(
|
||||
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
|
||||
);
|
||||
--error-background-color: #{darken($error-red, 16%)};
|
||||
--error-active-background-color: #{darken($error-red, 12%)};
|
||||
--on-error-color: #fff;
|
||||
--rich-text-container-color: rgba(87, 24, 60, 100%);
|
||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
||||
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
|
||||
--nested-card-text: #{$secondary-text-color};
|
||||
--nested-card-border: 1px solid
|
||||
color(from #{$ui-highlight-color} srgb r g b / 15%);
|
||||
--input-placeholder-color: #{$dark-text-color};
|
||||
--input-background-color: var(--surface-variant-background-color);
|
||||
--on-input-color: #{$secondary-text-color};
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
.dashboard__counters {
|
||||
|
|
@ -15,9 +16,9 @@
|
|||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
margin-bottom: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -84,8 +85,8 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-accent-strong);
|
||||
color: var(--clr-text-on-accent-strong);
|
||||
background: $ui-button-background-color;
|
||||
color: $primary-text-color;
|
||||
transition: all 100ms ease-in;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
|
|
@ -95,18 +96,18 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--clr-bg-accent-strong-highlighted);
|
||||
background-color: $ui-button-focus-background-color;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&.positive {
|
||||
background: var(--clr-bg-success-subtle);
|
||||
color: var(--clr-text-success);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
color: $valid-value-color;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: var(--clr-bg-error-subtle);
|
||||
color: var(--clr-text-error);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.emoji-mart {
|
||||
font-size: 13px;
|
||||
|
|
@ -17,8 +18,7 @@
|
|||
|
||||
.emoji-mart-bar {
|
||||
&:first-child {
|
||||
background: var(--clr-bg-tertiary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
background: var(--dropdown-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,22 +39,18 @@
|
|||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover {
|
||||
color: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-secondary)
|
||||
);
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-selected {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent-subtle);
|
||||
color: lighten($highlight-text-color, 4%);
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
|
|
@ -68,7 +64,7 @@
|
|||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--clr-text-accent);
|
||||
background-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
|
|
@ -105,9 +101,9 @@
|
|||
font-family: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: var(--clr-bg-secondary);
|
||||
color: var(--clr-text-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
|
|
@ -137,6 +133,7 @@
|
|||
transition: all 100ms linear;
|
||||
transition-property: opacity;
|
||||
pointer-events: auto;
|
||||
opacity: 0.7;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
|
|
@ -144,7 +141,7 @@
|
|||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
fill: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -168,7 +165,7 @@
|
|||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--clr-bg-accent-subtle);
|
||||
background-color: var(--dropdown-border-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -228,7 +225,7 @@
|
|||
|
||||
.emoji-mart-no-results {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-tertiary);
|
||||
color: $dark-text-color;
|
||||
text-align: center;
|
||||
padding: 5px 6px;
|
||||
padding-top: 70px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
code {
|
||||
font-family: $font-monospace, monospace;
|
||||
|
|
@ -15,7 +16,7 @@ code {
|
|||
|
||||
.form-section {
|
||||
border-radius: 8px;
|
||||
background: var(--clr-bg-secondary);
|
||||
background: var(--surface-background-color);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
@ -32,7 +33,7 @@ code {
|
|||
display: block;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--clr-bg-secondary-solid),
|
||||
var(--surface-background-color),
|
||||
transparent
|
||||
);
|
||||
position: absolute;
|
||||
|
|
@ -57,16 +58,14 @@ code {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
|
||||
&.success {
|
||||
color: var(--clr-text-on-success-strong);
|
||||
background: var(--clr-bg-success-strong);
|
||||
background: $success-green;
|
||||
}
|
||||
|
||||
&.failure {
|
||||
color: var(--clr-text-on-error-strong);
|
||||
background: var(--clr-bg-error-strong);
|
||||
background: $error-red;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +126,7 @@ code {
|
|||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
padding-top: 5px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -148,7 +147,7 @@ code {
|
|||
}
|
||||
|
||||
label a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
|
@ -190,7 +189,7 @@ code {
|
|||
.lead {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&.invited-by {
|
||||
|
|
@ -198,7 +197,7 @@ code {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -209,16 +208,16 @@ code {
|
|||
}
|
||||
|
||||
.hint {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
background: var(--clr-bg-secondary);
|
||||
background: darken($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -243,7 +242,7 @@ code {
|
|||
|
||||
p.hint {
|
||||
margin-bottom: 15px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
&.subtle-hint {
|
||||
text-align: center;
|
||||
|
|
@ -279,7 +278,7 @@ code {
|
|||
& > label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
min-width: 150px;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -301,7 +300,7 @@ code {
|
|||
.label_input > label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -323,7 +322,7 @@ code {
|
|||
& > label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
|
@ -382,7 +381,7 @@ code {
|
|||
|
||||
.required abbr {
|
||||
text-decoration: none;
|
||||
color: var(--clr-text-error);
|
||||
color: lighten($error-value-color, 12%);
|
||||
}
|
||||
|
||||
.fields-group {
|
||||
|
|
@ -475,7 +474,7 @@ code {
|
|||
margin-bottom: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -485,7 +484,7 @@ code {
|
|||
label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
position: relative;
|
||||
|
|
@ -506,7 +505,7 @@ code {
|
|||
.input.static .label_input__wrapper {
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid $dark-text-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -520,14 +519,14 @@ code {
|
|||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 10px 16px;
|
||||
|
||||
|
|
@ -536,7 +535,7 @@ code {
|
|||
}
|
||||
|
||||
&:required:valid {
|
||||
border-color: var(--clr-text-success);
|
||||
border-color: $valid-value-color;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
|
|
@ -551,13 +550,13 @@ code {
|
|||
input[type='datetime-local'] {
|
||||
&:focus:invalid:not(:placeholder-shown),
|
||||
&:required:invalid:not(:placeholder-shown) {
|
||||
border-color: var(--clr-text-error);
|
||||
border-color: lighten($error-red, 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label {
|
||||
color: var(--clr-text-error);
|
||||
color: lighten($error-red, 12%);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
|
|
@ -567,13 +566,13 @@ code {
|
|||
input[type='datetime-local'],
|
||||
textarea,
|
||||
select {
|
||||
border-color: var(--clr-text-error);
|
||||
border-color: lighten($error-red, 12%);
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-error);
|
||||
color: lighten($error-red, 12%);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -606,8 +605,8 @@ code {
|
|||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-accent-strong);
|
||||
color: var(--clr-text-on-accent-strong);
|
||||
background: $ui-button-background-color;
|
||||
color: $ui-button-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
height: auto;
|
||||
|
|
@ -626,22 +625,21 @@ code {
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: var(--clr-bg-accent-strong-highlighted);
|
||||
background-color: $ui-button-focus-background-color;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
color: var(--clr-text-on-disabled);
|
||||
background: var(--clr-bg-disabled);
|
||||
background-color: $ui-button-disabled-color;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: var(--clr-bg-error-strong);
|
||||
background: $ui-button-destructive-background-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: var(--clr-bg-error-strong-highlighted);
|
||||
background-color: $ui-button-destructive-focus-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -650,14 +648,16 @@ code {
|
|||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 14px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
|
|
@ -695,7 +695,7 @@ code {
|
|||
top: 1px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-tertiary);
|
||||
color: $dark-text-color;
|
||||
font-family: inherit;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
|
|
@ -721,29 +721,6 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
/* Double-chevron icon for custom select components */
|
||||
.select-wrapper,
|
||||
.select .label_input__wrapper {
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
--icon-size: 11px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-end: 9px;
|
||||
width: var(--icon-size);
|
||||
background-color: var(--clr-text-tertiary);
|
||||
pointer-events: none;
|
||||
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='black'/></svg>");
|
||||
mask-position: right center;
|
||||
mask-size: var(--icon-size);
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.block-icon {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
|
@ -752,30 +729,30 @@ code {
|
|||
}
|
||||
|
||||
.flash-message {
|
||||
color: var(--clr-text-accent);
|
||||
background: transparent;
|
||||
border: 1px solid var(--clr-text-accent);
|
||||
background: var(--background-color);
|
||||
color: $highlight-text-color;
|
||||
border: 1px solid $highlight-text-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
|
||||
&.notice {
|
||||
border: 1px solid var(--clr-border-on-bg-success-subtle);
|
||||
background: var(--clr-bg-success-subtle);
|
||||
color: var(--clr-text-success);
|
||||
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
|
||||
background: color.change($valid-value-color, $alpha: 0.25);
|
||||
color: $valid-value-color;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border: 1px solid var(--clr-border-on-bg-warning-subtle);
|
||||
background: var(--clr-bg-warning-subtle);
|
||||
color: var(--clr-text-warning);
|
||||
border: 1px solid color.change($gold-star, $alpha: 0.5);
|
||||
background: color.change($gold-star, $alpha: 0.25);
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
border: 1px solid var(--clr-border-on-bg-error-subtle);
|
||||
background: var(--clr-bg-error-subtle);
|
||||
color: var(--clr-text-error);
|
||||
border: 1px solid color.change($error-value-color, $alpha: 0.5);
|
||||
background: color.change($error-value-color, $alpha: 0.1);
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
|
|
@ -790,11 +767,11 @@ code {
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -824,8 +801,8 @@ code {
|
|||
border: 0;
|
||||
padding: 10px;
|
||||
font-family: $font-monospace, monospace;
|
||||
background: var(--clr-bg-secondary);
|
||||
color: var(--clr-text-primary);
|
||||
background: $ui-base-color;
|
||||
color: $primary-text-color;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
|
|
@ -840,7 +817,7 @@ code {
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -896,7 +873,7 @@ code {
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -916,7 +893,7 @@ code {
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
|
|
@ -924,7 +901,7 @@ code {
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--clr-text-accent-subtle);
|
||||
color: lighten($highlight-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -932,7 +909,7 @@ code {
|
|||
.oauth-prompt,
|
||||
.follow-prompt {
|
||||
margin-bottom: 30px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
|
|
@ -941,7 +918,7 @@ code {
|
|||
}
|
||||
|
||||
strong {
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
font-weight: 500;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
|
|
@ -954,7 +931,7 @@ code {
|
|||
|
||||
.oauth-prompt {
|
||||
h3 {
|
||||
color: var(--clr-text-primary);
|
||||
color: $ui-secondary-color;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
|
|
@ -968,9 +945,9 @@ code {
|
|||
}
|
||||
|
||||
.permissions-list {
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid $ui-base-color;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-secondary);
|
||||
background: darken($ui-base-color, 4%);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -996,10 +973,10 @@ code {
|
|||
|
||||
.qr-code {
|
||||
flex: 0 0 auto;
|
||||
background: white;
|
||||
background: $simple-background-color;
|
||||
padding: 4px;
|
||||
margin: 0 10px 20px 0;
|
||||
box-shadow: 0 0 15px var(--clr-shadow-primary);
|
||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
|
|
@ -1010,7 +987,7 @@ code {
|
|||
|
||||
.qr-alternative {
|
||||
margin-bottom: 20px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
flex: 150px;
|
||||
|
||||
samp {
|
||||
|
|
@ -1019,6 +996,42 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.warning {
|
||||
box-sizing: border-box;
|
||||
background: color.change($error-value-color, $alpha: 0.5);
|
||||
color: $primary-text-color;
|
||||
text-shadow: 1px 1px 0 color.change($base-shadow-color, $alpha: 0.3);
|
||||
box-shadow: 0 2px 6px color.change($base-shadow-color, $alpha: 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -1038,7 +1051,7 @@ code {
|
|||
|
||||
.post-follow-actions {
|
||||
text-align: center;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
div {
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -1051,7 +1064,7 @@ code {
|
|||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
|
|
@ -1064,7 +1077,7 @@ code {
|
|||
}
|
||||
|
||||
.scope-danger {
|
||||
color: var(--clr-text-error);
|
||||
color: $warning-red;
|
||||
}
|
||||
|
||||
.form_admin_settings_site_short_description,
|
||||
|
|
@ -1079,9 +1092,8 @@ code {
|
|||
}
|
||||
|
||||
.input-copy {
|
||||
color: var(--clr-text-primary);
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: darken($ui-base-color, 10%);
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1115,11 +1127,11 @@ code {
|
|||
}
|
||||
|
||||
&.copied {
|
||||
border-color: var(--clr-text-success);
|
||||
border-color: $valid-value-color;
|
||||
transition: none;
|
||||
|
||||
button {
|
||||
background: var(--clr-bg-success-strong);
|
||||
background: $valid-value-color;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1141,8 +1153,8 @@ code {
|
|||
.permissions-list {
|
||||
&__item {
|
||||
padding: 15px;
|
||||
color: var(--clr-text-primary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
color: $ui-secondary-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -1154,7 +1166,7 @@ code {
|
|||
}
|
||||
|
||||
&__type {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
|
@ -1163,7 +1175,7 @@ code {
|
|||
flex: 0 0 auto;
|
||||
font-size: 18px;
|
||||
width: 30px;
|
||||
color: var(--clr-text-success);
|
||||
color: $valid-value-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1218,6 +1230,7 @@ code {
|
|||
align-items: center;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: $white;
|
||||
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -1226,11 +1239,11 @@ code {
|
|||
|
||||
.separator {
|
||||
height: 2px;
|
||||
background: var(--clr-border-primary);
|
||||
background: $ui-base-lighter-color;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&.completed {
|
||||
background: var(--clr-text-accent);
|
||||
background: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1240,7 +1253,7 @@ code {
|
|||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--clr-border-primary);
|
||||
border: 2px solid $ui-base-lighter-color;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1255,7 +1268,7 @@ code {
|
|||
position: absolute;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
|
|
@ -1278,14 +1291,14 @@ code {
|
|||
}
|
||||
|
||||
.active .circle {
|
||||
border-color: var(--clr-text-accent);
|
||||
border-color: $highlight-text-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--clr-text-accent);
|
||||
background: $highlight-text-color;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
|
|
@ -1294,8 +1307,8 @@ code {
|
|||
}
|
||||
|
||||
.completed .circle {
|
||||
border-color: var(--clr-text-accent);
|
||||
background: var(--clr-text-accent);
|
||||
border-color: $highlight-text-color;
|
||||
background: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1306,14 +1319,10 @@ code {
|
|||
&__header-input {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: var(--clr-bg-secondary);
|
||||
background: var(--surface-variant-background-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--clr-bg-accent-subtle);
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -1328,12 +1337,12 @@ code {
|
|||
inset-inline-start: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&.selected .icon {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
transform: none;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 8px;
|
||||
|
|
@ -1342,7 +1351,7 @@ code {
|
|||
}
|
||||
|
||||
&.invalid img {
|
||||
outline: 1px solid var(--clr-text-error);
|
||||
outline: 1px solid $error-value-color;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
|
|
@ -1352,10 +1361,14 @@ code {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: var(--clr-bg-error-subtle);
|
||||
background: color.change($error-value-color, $alpha: 0.25);
|
||||
z-index: 2;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-variant-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar-input {
|
||||
|
|
@ -1371,7 +1384,7 @@ code {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
|
|
@ -1388,14 +1401,14 @@ code {
|
|||
flex: 1 1 auto;
|
||||
|
||||
strong {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.recommended {
|
||||
|
|
@ -1413,7 +1426,7 @@ code {
|
|||
|
||||
&__toggle > div {
|
||||
display: flex;
|
||||
border-inline-start: 1px solid var(--clr-border-primary);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1424,19 +1437,19 @@ code {
|
|||
padding: 8px 0;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.modal-layout {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
background: darken($ui-base-color, 4%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
|
||||
repeat-x bottom fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
|
|
@ -35,19 +38,3 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.with-zig-zag-decoration {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 32px;
|
||||
background-color: var(--clr-bg-accent-subtle);
|
||||
|
||||
/* Decorative zig-zag pattern at the bottom of the page */
|
||||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
|
||||
mask-position: bottom;
|
||||
mask-repeat: repeat-x;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.poll {
|
||||
margin-top: 16px;
|
||||
|
|
@ -13,12 +14,12 @@
|
|||
&__chart {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
background: darken($ui-primary-color, 5%);
|
||||
height: 5px;
|
||||
min-width: 1%;
|
||||
|
||||
&.leading {
|
||||
background: var(--clr-text-accent);
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,12 +39,12 @@
|
|||
// duplication
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 4px;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 4px;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,16 +78,16 @@
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
background: var(--clr-bg-primary);
|
||||
border: 1px solid var(--clr-text-secondary);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid $darker-text-color;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--clr-text-accent);
|
||||
border-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
&__input {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid var(--clr-text-secondary);
|
||||
border: 1px solid $ui-primary-color;
|
||||
box-sizing: border-box;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
|
|
@ -124,13 +125,13 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-success);
|
||||
border-color: lighten($valid-value-color, 15%);
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--clr-bg-success-strong);
|
||||
border-color: var(--clr-text-success);
|
||||
background-color: $valid-value-color;
|
||||
border-color: $valid-value-color;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
|
|
@ -144,16 +145,16 @@
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
border-color: var(--clr-text-disabled);
|
||||
border-color: $dark-text-color;
|
||||
|
||||
&.active {
|
||||
background: var(--clr-text-disabled);
|
||||
background: $dark-text-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-disabled);
|
||||
border-color: $dark-text-color;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -164,7 +165,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-primary);
|
||||
border-color: $ui-primary-color;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -188,7 +189,7 @@
|
|||
&__footer {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
color: var(--clr-text-tertiary);
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&__link {
|
||||
|
|
@ -197,7 +198,7 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
color: var(--clr-text-tertiary);
|
||||
color: $dark-text-color;
|
||||
text-decoration: underline;
|
||||
font-size: inherit;
|
||||
|
||||
|
|
@ -207,7 +208,7 @@
|
|||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: var(--clr-bg-secondary);
|
||||
background-color: color.change($dark-text-color, $alpha: 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -220,13 +221,13 @@
|
|||
}
|
||||
|
||||
.muted .poll {
|
||||
color: var(--clr-text-tertiary);
|
||||
color: $dark-text-color;
|
||||
|
||||
&__chart {
|
||||
background: rgb(from var(--clr-text-accent) r g b / 40%);
|
||||
background: rgba(darken($ui-primary-color, 14%), 0.7);
|
||||
|
||||
&.leading {
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
background: color.change($ui-highlight-color, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
|
@ -53,6 +55,32 @@ table {
|
|||
border-spacing: 0;
|
||||
}
|
||||
|
||||
html:has(body.custom-scrollbars) {
|
||||
scrollbar-color: var(--clr-text-secondary) var(--clr-bg-secondary);
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
html {
|
||||
scrollbar-color: $action-button-color var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-scrollbars {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: $action-button-color;
|
||||
border: 2px var(--background-border-color);
|
||||
border-radius: 12px;
|
||||
width: 6px;
|
||||
box-shadow: inset 0 0 0 2px var(--background-border-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--background-border-color);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
body.rtl {
|
||||
|
|
@ -41,6 +42,12 @@ body.rtl {
|
|||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.simple_form select {
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.dismissable-banner,
|
||||
.warning-banner {
|
||||
&__action {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
|
|
@ -11,13 +12,13 @@
|
|||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
text-align: start;
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
|
||||
&.critical {
|
||||
font-weight: 700;
|
||||
color: var(--clr-text-warning);
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
& > tbody > tr:last-child > td,
|
||||
|
|
@ -41,11 +42,11 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,30 +84,30 @@
|
|||
& > tbody > tr > td {
|
||||
padding: 11px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
color: var(--clr-text-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
& > tbody > tr > th {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: var(--clr-bg-primary);
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
background: var(--background-color);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-inline-start: 1px solid var(--clr-border-primary);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-inline-end: 1px solid var(--clr-border-primary);
|
||||
border-inline-end: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -137,12 +138,12 @@ a.table-action-link {
|
|||
display: inline-block;
|
||||
margin-inline-end: 5px;
|
||||
padding: 0 10px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -195,8 +196,8 @@ a.table-action-link {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: var(--clr-bg-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
|
@ -212,13 +213,13 @@ a.table-action-link {
|
|||
}
|
||||
|
||||
&__select-all {
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
color: var(--clr-text-primary);
|
||||
color: $secondary-text-color;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
|
|
@ -247,7 +248,7 @@ a.table-action-link {
|
|||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
padding: 8px;
|
||||
|
|
@ -255,16 +256,16 @@ a.table-action-link {
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--clr-bg-secondary);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
|
||||
.fields-row {
|
||||
padding-top: 0;
|
||||
|
|
@ -273,13 +274,13 @@ a.table-action-link {
|
|||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -330,7 +331,7 @@ a.table-action-link {
|
|||
&__extra {
|
||||
flex: 0 0 auto;
|
||||
text-align: end;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -361,6 +362,21 @@ a.table-action-link {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&--no-toolbar {
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 870px) {
|
||||
.accounts-table tbody td.optional {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
|
|
@ -11,24 +12,24 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-shadow: 0 0 15px var(--clr-shadow-primary);
|
||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: var(--clr-bg-primary);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background: var(--clr-bg-accent-strong);
|
||||
background: $ui-highlight-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -41,13 +42,13 @@
|
|||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.fa {
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -55,7 +56,7 @@
|
|||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
margin-top: 8px;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
.fa,
|
||||
small,
|
||||
.trends__item__current {
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +75,7 @@
|
|||
}
|
||||
|
||||
&.active .avatar-stack .account__avatar {
|
||||
border-color: var(--clr-text-accent);
|
||||
border-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.trends__item__current {
|
||||
|
|
@ -99,7 +100,7 @@
|
|||
thead th {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 700;
|
||||
padding: 10px;
|
||||
|
||||
|
|
@ -111,7 +112,7 @@
|
|||
tbody td {
|
||||
padding: 15px 0;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
|
|
@ -123,11 +124,11 @@
|
|||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
color: $primary-text-color;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -136,7 +137,7 @@
|
|||
tbody td.accounts-table__extra {
|
||||
width: 120px;
|
||||
text-align: end;
|
||||
color: var(--clr-text-secondary);
|
||||
color: $darker-text-color;
|
||||
padding-inline-end: 16px;
|
||||
|
||||
a {
|
||||
|
|
@ -146,7 +147,7 @@
|
|||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -163,15 +164,15 @@
|
|||
|
||||
.icon {
|
||||
&.active {
|
||||
color: var(--clr-text-accent);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&.passive {
|
||||
color: var(--clr-text-warning);
|
||||
color: $passive-text-color;
|
||||
}
|
||||
|
||||
&.active.passive {
|
||||
color: var(--clr-text-success);
|
||||
color: $active-passive-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
7
app/javascript/styles_new/application.scss
Normal file
7
app/javascript/styles_new/application.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@use 'mastodon/css_variables';
|
||||
@use 'mastodon/variables';
|
||||
@use 'common';
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
8
app/javascript/styles_new/contrast.scss
Normal file
8
app/javascript/styles_new/contrast.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@use 'mastodon/css_variables';
|
||||
@use 'mastodon/variables';
|
||||
@use 'common';
|
||||
@use 'contrast/diff';
|
||||
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
54
app/javascript/styles_new/contrast/diff.scss
Normal file
54
app/javascript/styles_new/contrast/diff.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
:root {
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-50);
|
||||
--clr-text-secondary: var(--clr-grey-300);
|
||||
--clr-text-tertiary: var(--clr-grey-400);
|
||||
--clr-text-accent: var(--clr-indigo-300);
|
||||
--clr-text-status-links: var(--clr-text-accent);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-strength: 18%;
|
||||
}
|
||||
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
.edit-indicator__content a,
|
||||
.link-footer a,
|
||||
.status__content__read-more-button,
|
||||
.status__content__translate-button {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.mention {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
span {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-button:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
14
app/javascript/styles_new/entrypoints/inert.scss
Normal file
14
app/javascript/styles_new/entrypoints/inert.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* This is needed for the wicg-inert polyfill */
|
||||
|
||||
[inert] {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[inert],
|
||||
[inert] * {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
1030
app/javascript/styles_new/entrypoints/mailer.scss
Normal file
1030
app/javascript/styles_new/entrypoints/mailer.scss
Normal file
File diff suppressed because it is too large
Load Diff
8
app/javascript/styles_new/fonts/inter.scss
Normal file
8
app/javascript/styles_new/fonts/inter.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@font-face {
|
||||
font-family: Inter;
|
||||
src: url('../../fonts/inter/inter-variable-font-slnt-wght.woff2')
|
||||
format('woff2-variations');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
mso-generic-font-family: swiss;
|
||||
}
|
||||
13
app/javascript/styles_new/fonts/roboto-mono.scss
Normal file
13
app/javascript/styles_new/fonts/roboto-mono.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@font-face {
|
||||
font-family: mastodon-font-monospace;
|
||||
src:
|
||||
local('Roboto Mono'),
|
||||
url('@/fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
||||
url('@/fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
|
||||
url('@/fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||
url('@/fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular')
|
||||
format('svg');
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
55
app/javascript/styles_new/fonts/roboto.scss
Normal file
55
app/javascript/styles_new/fonts/roboto.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
@font-face {
|
||||
font-family: mastodon-font-sans-serif;
|
||||
src:
|
||||
local('Roboto Italic'),
|
||||
url('@/fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
|
||||
url('@/fonts/roboto/roboto-italic-webfont.woff') format('woff'),
|
||||
url('@/fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
|
||||
url('@/fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont')
|
||||
format('svg');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mastodon-font-sans-serif;
|
||||
src:
|
||||
local('Roboto Bold'),
|
||||
url('@/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
|
||||
url('@/fonts/roboto/roboto-bold-webfont.woff') format('woff'),
|
||||
url('@/fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
|
||||
url('@/fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont')
|
||||
format('svg');
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mastodon-font-sans-serif;
|
||||
src:
|
||||
local('Roboto Medium'),
|
||||
url('@/fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
|
||||
url('@/fonts/roboto/roboto-medium-webfont.woff') format('woff'),
|
||||
url('@/fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
|
||||
url('@/fonts/roboto/roboto-medium-webfont.svg#roboto-medium-webfont')
|
||||
format('svg');
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: mastodon-font-sans-serif;
|
||||
src:
|
||||
local('Roboto'),
|
||||
url('@/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
|
||||
url('@/fonts/roboto/roboto-regular-webfont.woff') format('woff'),
|
||||
url('@/fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
|
||||
url('@/fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont')
|
||||
format('svg');
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
}
|
||||
9
app/javascript/styles_new/mastodon-light.scss
Normal file
9
app/javascript/styles_new/mastodon-light.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@use 'mastodon-light/css_variables';
|
||||
@use 'mastodon/variables' with (
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
@use 'common';
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
196
app/javascript/styles_new/mastodon-light/css_variables.scss
Normal file
196
app/javascript/styles_new/mastodon-light/css_variables.scss
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
@use '../mastodon/theme_utils' as utils;
|
||||
|
||||
:root {
|
||||
--clr-black: #000;
|
||||
--clr-grey-950: #181821;
|
||||
--clr-grey-800: #292938;
|
||||
--clr-grey-700: #444664;
|
||||
--clr-grey-600: #545778;
|
||||
--clr-grey-500: #696d91;
|
||||
--clr-grey-400: #8b8dac;
|
||||
--clr-grey-300: #b4b6cb;
|
||||
--clr-grey-200: #d8d9e3;
|
||||
--clr-grey-100: #f0f0f5;
|
||||
--clr-grey-50: #f0f1ff;
|
||||
--clr-white: #fff;
|
||||
--clr-indigo-600: #6147e6;
|
||||
--clr-indigo-400: #8886ff;
|
||||
--clr-indigo-300: #a5abfd;
|
||||
--clr-indigo-200: #c8cdfe;
|
||||
--clr-indigo-100: #e0e3ff;
|
||||
--clr-indigo-50: #f0f1ff;
|
||||
--clr-red-500: #ff637e;
|
||||
--clr-red-600: #ec003f;
|
||||
--clr-yellow-400: #ffb900;
|
||||
--clr-yellow-600: #e17100;
|
||||
--clr-green-400: #05df72;
|
||||
--clr-green-600: #00a63e;
|
||||
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-950);
|
||||
--clr-text-secondary: var(--clr-grey-600);
|
||||
--clr-text-tertiary: var(--clr-grey-500);
|
||||
--clr-text-on-inverted: var(--clr-white);
|
||||
--clr-text-accent: var(--clr-indigo-600);
|
||||
--clr-text-accent-subtle: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-accent)
|
||||
);
|
||||
--clr-text-on-accent-strong: var(--clr-white);
|
||||
--clr-text-error: var(--clr-red-600);
|
||||
--clr-text-on-error-strong: var(--clr-white);
|
||||
--clr-text-warning: var(--clr-yellow-600);
|
||||
--clr-text-on-warning-strong: var(--clr-white);
|
||||
--clr-text-success: var(--clr-green-600);
|
||||
--clr-text-on-success-strong: var(--clr-white);
|
||||
--clr-text-disabled: var(--clr-grey-300);
|
||||
--clr-text-on-disabled: var(--clr-grey-200);
|
||||
--clr-text-bookmark-highlight: var(--clr-text-error);
|
||||
--clr-text-favourite-highlight: var(--clr-text-warning);
|
||||
--clr-text-on-media: var(--clr-white);
|
||||
--clr-text-status-links: var(--clr-text-accent);
|
||||
|
||||
/* BACKGROUND TOKENS */
|
||||
|
||||
--clr-bg-primary: var(--clr-white);
|
||||
--clr-bg-secondary-base: var(--clr-grey-600);
|
||||
--clr-bg-secondary-strength: 5%;
|
||||
--clr-bg-secondary: #{color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-secondary-solid: #{color-mix(
|
||||
in srgb,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-tertiary: #{color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
|
||||
)};
|
||||
--clr-bg-ambient: var(--clr-bg-primary);
|
||||
--clr-bg-elevated: var(--clr-bg-primary);
|
||||
--clr-bg-inverted: var(--clr-grey-950);
|
||||
--clr-bg-media-base: var(--clr-black);
|
||||
--clr-bg-media-strength: 65%;
|
||||
--clr-bg-media: #{utils.css-alpha(
|
||||
var(--clr-bg-media-base),
|
||||
var(--clr-bg-media-strength)
|
||||
)};
|
||||
--clr-bg-overlay: var(--clr-bg-primary);
|
||||
--clr-bg-disabled: var(--clr-grey-400);
|
||||
--clr-bg-accent-subtle-base: var(--clr-indigo-600);
|
||||
--clr-bg-accent-subtle-strength: 8%;
|
||||
--clr-bg-accent-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
var(--clr-bg-accent-subtle-strength)
|
||||
)};
|
||||
--clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
|
||||
)};
|
||||
--clr-bg-accent-strong: var(--clr-indigo-600);
|
||||
--clr-bg-accent-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-accent-strong),
|
||||
black var(--clr-bg-accent-subtle-strength)
|
||||
);
|
||||
--clr-bg-error-subtle-base: #f41b3b;
|
||||
--clr-bg-error-subtle-strength: 12%;
|
||||
--clr-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-error-subtle-base),
|
||||
var(--clr-bg-error-subtle-strength)
|
||||
)};
|
||||
--clr-bg-error-strong: var(--clr-red-600);
|
||||
--clr-bg-error-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-error-strong),
|
||||
black var(--clr-bg-error-subtle-strength)
|
||||
);
|
||||
--clr-bg-warning-subtle-base: #ffca1b;
|
||||
--clr-bg-warning-subtle-strength: 10%;
|
||||
--clr-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-warning-subtle-base),
|
||||
var(--clr-bg-warning-subtle-strength)
|
||||
)};
|
||||
--clr-bg-warning-strong: var(--clr-yellow-600);
|
||||
--clr-bg-warning-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-warning-strong),
|
||||
black var(--clr-bg-warning-subtle-strength)
|
||||
);
|
||||
--clr-bg-success-subtle-base: #17e865;
|
||||
--clr-bg-success-subtle-strength: 15%;
|
||||
--clr-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-success-subtle-base),
|
||||
var(--clr-bg-success-subtle-strength)
|
||||
)};
|
||||
--clr-bg-success-strong: var(--clr-green-600);
|
||||
--clr-bg-success-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-success-strong),
|
||||
black var(--clr-bg-success-subtle-strength)
|
||||
);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-base: #000856;
|
||||
--clr-border-primary-strength: 15%;
|
||||
--clr-border-primary: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-border-primary-base) var(--clr-border-primary-strength)
|
||||
);
|
||||
--clr-border-media: rgb(252 248 255 / 15%);
|
||||
--clr-border-on-bg-secondary: var(--clr-grey-200);
|
||||
--clr-border-on-bg-accent-subtle: var(--clr-indigo-200);
|
||||
--clr-border-on-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-error),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-warning),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-success),
|
||||
50%
|
||||
)};
|
||||
|
||||
/* SHADOW TOKENS */
|
||||
|
||||
--clr-shadow-primary-base: var(--clr-black);
|
||||
--clr-shadow-primary-strength: 30%;
|
||||
--clr-shadow-primary: #{utils.css-alpha(
|
||||
var(--clr-shadow-primary-base),
|
||||
var(--clr-shadow-primary-strength)
|
||||
)};
|
||||
--dropdown-shadow:
|
||||
0 20px 25px -5px var(--clr-shadow-primary),
|
||||
0 8px 10px -6px var(--clr-shadow-primary);
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
|
||||
|
||||
/* GRAPHS/CHARTS TOKENS */
|
||||
|
||||
--clr-graph-primary-stroke: var(--clr-text-accent);
|
||||
--clr-graph-primary-fill: var(--clr-bg-accent-subtle);
|
||||
--clr-graph-warning-stroke: var(--clr-text-warning);
|
||||
--clr-graph-warning-fill: var(--clr-bg-warning-subtle);
|
||||
--clr-graph-disabled-stroke: var(--clr-text-disabled);
|
||||
--clr-graph-disabled-fill: var(--clr-bg-disabled);
|
||||
|
||||
/* LEGACY TOKENS */
|
||||
|
||||
--rich-text-container-color: rgb(255 216 231 / 100%);
|
||||
--rich-text-text-color: rgb(114 47 83 / 100%);
|
||||
--rich-text-decorations-color: rgb(255 175 212 / 100%);
|
||||
|
||||
/* MISCELLANEOUS */
|
||||
|
||||
--outline-focus-default: 2px solid var(--clr-text-accent);
|
||||
--avatar-border-radius: 8px;
|
||||
}
|
||||
45
app/javascript/styles_new/mastodon/_mixins.scss
Normal file
45
app/javascript/styles_new/mastodon/_mixins.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@mixin search-input {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: var(--clr-bg-secondary);
|
||||
color: var(--clr-text-primary);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--clr-border-on-bg-secondary);
|
||||
font-size: 17px;
|
||||
line-height: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@mixin search-popout {
|
||||
background: var(--clr-bg-elevated);
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
padding-bottom: 14px;
|
||||
margin-top: 10px;
|
||||
color: var(--clr-text-secondary);
|
||||
box-shadow: 2px 4px 15px var(--clr-shadow-primary);
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
}
|
||||
27
app/javascript/styles_new/mastodon/_variables.scss
Normal file
27
app/javascript/styles_new/mastodon/_variables.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
// Keep this filter a SCSS variable rather than
|
||||
// a CSS Custom Property due to this Safari bug:
|
||||
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
||||
$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// Variables for components
|
||||
$media-modal-media-max-width: 100%;
|
||||
|
||||
// put margins on top and bottom of image to avoid the screen covered by image.
|
||||
$media-modal-media-max-height: 80%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
$mobile-menu-breakpoint: 760px;
|
||||
$mobile-breakpoint: 630px;
|
||||
$no-columns-breakpoint: 600px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
|
||||
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
|
||||
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
|
||||
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
|
||||
130
app/javascript/styles_new/mastodon/about.scss
Normal file
130
app/javascript/styles_new/mastodon/about.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
max-width: $maximum-width;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: $fluid-breakpoint) {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rules-list {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
counter-reset: list-counter;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
padding: 1em 1.75em;
|
||||
padding-inline-start: 3em;
|
||||
font-weight: 500;
|
||||
counter-increment: list-counter;
|
||||
min-height: 4ch;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: start;
|
||||
font: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&[aria-expanded='false'] .rules-list__hint {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@supports (-webkit-line-clamp: 2) {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: counter(list-counter);
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 1em;
|
||||
background: var(--clr-bg-accent-strong);
|
||||
color: var(--clr-text-on-accent-strong);
|
||||
border-radius: 50%;
|
||||
width: 4ch;
|
||||
height: 4ch;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: var(--clr-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.rules-languages {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
height: 41px;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
app/javascript/styles_new/mastodon/accessibility.scss
Normal file
13
app/javascript/styles_new/mastodon/accessibility.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
%emoji-color-inversion {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.emojione {
|
||||
@each $emoji in $emojis-requiring-inversion {
|
||||
&[title=':#{$emoji}:'] {
|
||||
@extend %emoji-color-inversion;
|
||||
}
|
||||
}
|
||||
}
|
||||
411
app/javascript/styles_new/mastodon/accounts.scss
Normal file
411
app/javascript/styles_new/mastodon/accounts.scss
Normal file
|
|
@ -0,0 +1,411 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
|
||||
.card {
|
||||
& > a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-bottom: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: var(--clr-bg-primary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-top: none;
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding-top: 2px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-secondary);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
margin-inline-start: 15px;
|
||||
text-align: start;
|
||||
|
||||
svg[data-hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 15px;
|
||||
color: var(--clr-text-primary);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
a,
|
||||
.current,
|
||||
.newer,
|
||||
.older,
|
||||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: var(--clr-bg-inverted);
|
||||
background: var(--clr-text-on-inverted);
|
||||
border-radius: 100px;
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.gap {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.older,
|
||||
.newer {
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
|
||||
.older {
|
||||
float: left;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.newer {
|
||||
float: right;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: var(--clr-text-disabled);
|
||||
}
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
padding: 30px 20px;
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.newer,
|
||||
.older {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: var(--clr-text-secondary);
|
||||
background: var(--clr-bg-primary);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
min-height: 30vh;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
|
||||
@media screen and (min-width: ($no-gap-breakpoint - 1)) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&--no-toolbar {
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
&--under-tabs {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&--flexible {
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.information-badge,
|
||||
.simple_form .overridden,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
cursor: default;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.information-badge,
|
||||
.simple_form .overridden,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
background-color: var(--clr-bg-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
.information-badge {
|
||||
&.superapp {
|
||||
color: var(--clr-text-success);
|
||||
background-color: var(--clr-bg-success-subtle);
|
||||
border-color: var(--clr-border-on-bg-success-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.account-role {
|
||||
display: inline-flex;
|
||||
padding: 4px;
|
||||
padding-inline-end: 8px;
|
||||
border: 1px solid var(--clr-text-accent);
|
||||
color: var(--clr-text-accent);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 16px;
|
||||
gap: 4px;
|
||||
border-radius: 6px;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: auto;
|
||||
height: 15px;
|
||||
opacity: 0.85;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&__domain {
|
||||
font-weight: 400;
|
||||
opacity: 0.75;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .not_recommended {
|
||||
color: var(--clr-text-error);
|
||||
background-color: var(--clr-bg-error-subtle);
|
||||
border-color: var(--clr-border-on-bg-error-subtle);
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
max-width: 100vw;
|
||||
padding: 0;
|
||||
margin: 15px -15px -15px;
|
||||
border: 0 none;
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
dt,
|
||||
dd {
|
||||
box-sizing: border-box;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
max-height: 48px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 500;
|
||||
width: 120px;
|
||||
flex: 0 0 auto;
|
||||
color: var(--clr-text-primary);
|
||||
background: var(--clr-bg-secondary);
|
||||
}
|
||||
|
||||
dd {
|
||||
flex: 1 1 auto;
|
||||
color: var(--clr-text-secondary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.verified {
|
||||
border: 1px solid var(--clr-border-on-bg-success-subtle);
|
||||
background: var(--clr-bg-success-subtle);
|
||||
|
||||
a {
|
||||
color: var(--clr-text-success);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__mark {
|
||||
color: var(--clr-text-success);
|
||||
}
|
||||
}
|
||||
|
||||
dl:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.directory__tag .trends__item__current {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.pending-account {
|
||||
&__header {
|
||||
color: var(--clr-text-secondary);
|
||||
|
||||
a {
|
||||
color: var(--clr-text-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--clr-text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.warning-hint {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table__row--muted {
|
||||
color: var(--clr-text-tertiary);
|
||||
}
|
||||
|
||||
.batch-table__row--muted .pending-account__header,
|
||||
.batch-table__row--muted .accounts-table,
|
||||
.batch-table__row--muted .name-tag {
|
||||
&,
|
||||
a,
|
||||
strong {
|
||||
color: var(--clr-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table__row--muted .name-tag .avatar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.batch-table__row--muted .accounts-table {
|
||||
tbody td.accounts-table__extra,
|
||||
&__count,
|
||||
&__count small {
|
||||
color: var(--clr-text-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table__row--attention {
|
||||
color: var(--clr-text-warning);
|
||||
}
|
||||
|
||||
.batch-table__row--attention .pending-account__header,
|
||||
.batch-table__row--attention .accounts-table,
|
||||
.batch-table__row--attention .name-tag {
|
||||
&,
|
||||
a,
|
||||
strong {
|
||||
color: var(--clr-text-warning);
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table__row--attention .accounts-table {
|
||||
tbody td.accounts-table__extra,
|
||||
&__count,
|
||||
&__count small {
|
||||
color: var(--clr-text-warning);
|
||||
}
|
||||
}
|
||||
2173
app/javascript/styles_new/mastodon/admin.scss
Normal file
2173
app/javascript/styles_new/mastodon/admin.scss
Normal file
File diff suppressed because it is too large
Load Diff
342
app/javascript/styles_new/mastodon/annual_reports.scss
Normal file
342
app/javascript/styles_new/mastodon/annual_reports.scss
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
:root {
|
||||
--indigo-1: #17063b;
|
||||
--indigo-2: #2f0c7a;
|
||||
--indigo-3: #562cfc;
|
||||
--indigo-5: #858afa;
|
||||
--indigo-6: #cccfff;
|
||||
--lime: #baff3b;
|
||||
--goldenrod-2: #ffc954;
|
||||
}
|
||||
|
||||
.annual-report {
|
||||
flex: 0 0 auto;
|
||||
background: var(--indigo-1);
|
||||
padding: 24px;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 16px;
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
color: var(--lime);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
}
|
||||
|
||||
&__bento {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
|
||||
0,
|
||||
auto
|
||||
);
|
||||
|
||||
&__box {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--indigo-2);
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__most-boosted-post {
|
||||
grid-column: span 2;
|
||||
grid-row: span 2;
|
||||
padding: 0;
|
||||
|
||||
.status__content,
|
||||
.content-warning {
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
border: 0;
|
||||
background: var(--indigo-1);
|
||||
|
||||
.link-button {
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta__line {
|
||||
border-bottom-color: var(--indigo-3);
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detailed-status__meta,
|
||||
.poll__footer,
|
||||
.poll__link,
|
||||
.detailed-status .logo,
|
||||
.detailed-status__display-name {
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
|
||||
.detailed-status__meta .animated-number,
|
||||
.detailed-status__display-name strong {
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
.poll__chart {
|
||||
background-color: var(--indigo-3);
|
||||
|
||||
&.leading {
|
||||
background-color: var(--goldenrod-2);
|
||||
}
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.hashtag-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__followers {
|
||||
grid-column: span 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-block-start: 24px;
|
||||
padding-block-end: 24px;
|
||||
|
||||
--sparkline-gradient-top: rgba(86, 44, 252, 50%);
|
||||
--sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
|
||||
|
||||
&__foreground {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: 31px;
|
||||
font-weight: 600;
|
||||
line-height: 37px;
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 17px;
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
&__footnote {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
height: 70%;
|
||||
width: auto;
|
||||
|
||||
path:first-child {
|
||||
fill: url('#gradient') !important;
|
||||
fill-opacity: 1 !important;
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: var(--clr-graph-primary-stroke) !important;
|
||||
fill: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__archetype {
|
||||
grid-column: span 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 16px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--lime);
|
||||
}
|
||||
}
|
||||
|
||||
&__most-used-app {
|
||||
grid-column: span 1;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--goldenrod-2);
|
||||
}
|
||||
}
|
||||
|
||||
&__percentile {
|
||||
grid-row: span 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
padding: 16px 8px;
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: 54px;
|
||||
font-weight: 600;
|
||||
line-height: 73px;
|
||||
color: var(--goldenrod-2);
|
||||
}
|
||||
|
||||
&__footnote {
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__new-posts {
|
||||
grid-column: span 2;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&__label {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
color: var(--indigo-6);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: 76px;
|
||||
font-weight: 600;
|
||||
line-height: 91px;
|
||||
color: var(--goldenrod-2);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
inset-inline-start: -7px;
|
||||
top: -4px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__most-used-hashtag {
|
||||
grid-column: span 2;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__hashtag {
|
||||
font-size: 42px;
|
||||
font-weight: 600;
|
||||
line-height: 58px;
|
||||
color: var(--indigo-6);
|
||||
margin-inline-start: -100%;
|
||||
margin-inline-end: -100%;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.annual-report-modal {
|
||||
max-width: 600px;
|
||||
background: var(--indigo-1);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
.loading-indicator .circular-progress {
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-columns-breakpoint) {
|
||||
border-bottom: 0;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-group--annual-report {
|
||||
.notification-group__icon {
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
.notification-group__main .link-button {
|
||||
font-weight: 500;
|
||||
color: var(--lime);
|
||||
}
|
||||
}
|
||||
300
app/javascript/styles_new/mastodon/basics.scss
Normal file
300
app/javascript/styles_new/mastodon/basics.scss
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
html.has-modal {
|
||||
&,
|
||||
body {
|
||||
touch-action: none;
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
background: var(--clr-bg-ambient);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: var(--clr-text-primary);
|
||||
text-rendering: optimizelegibility;
|
||||
|
||||
// Disable kerning for Japanese text to preserve monospaced alignment for readability
|
||||
&:not(:lang(ja)) {
|
||||
font-feature-settings: 'kern';
|
||||
}
|
||||
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&.system-font {
|
||||
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
|
||||
// -apple-system => Safari <11 specific
|
||||
// BlinkMacSystemFont => Chrome <56 on macOS specific
|
||||
// Segoe UI => Windows 7/8/10
|
||||
// Oxygen => KDE
|
||||
// Ubuntu => Unity/Ubuntu
|
||||
// Cantarell => GNOME
|
||||
// Fira Sans => Firefox OS
|
||||
// Droid Sans => Older Androids (<4.0)
|
||||
// Helvetica Neue => Older macOS <10.11
|
||||
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
$font-sans-serif,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
&.app-body {
|
||||
padding: 0;
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
box-sizing: border-box;
|
||||
|
||||
&.layout-single-column {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
&.layout-multiple-columns {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&.player {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-player video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.media-gallery {
|
||||
margin-top: 0;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.embed {
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.admin {
|
||||
padding: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.dialog {
|
||||
vertical-align: middle;
|
||||
margin: 20px;
|
||||
|
||||
&__illustration {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 470px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -120px;
|
||||
margin-bottom: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:focus {
|
||||
border-radius: 4px;
|
||||
outline: var(--outline-focus-default);
|
||||
}
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.app-holder {
|
||||
&,
|
||||
& > div,
|
||||
& > noscript {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
& > noscript {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-single-column .app-holder {
|
||||
&,
|
||||
& > div {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-multiple-columns .app-holder {
|
||||
&,
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-boundary,
|
||||
.app-holder noscript {
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
color: var(--clr-text-error);
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.85em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
color: var(--clr-text-secondary);
|
||||
font-size: 13px;
|
||||
|
||||
a {
|
||||
color: var(--clr-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--clr-text-secondary);
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
transition: color 300ms linear;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.copied {
|
||||
color: var(--mas-status-success-color);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-resources {
|
||||
// Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
|
||||
visibility: hidden;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
|
||||
// to set the z-index to a high value, which messes with modals and dropdowns.
|
||||
// Blocked elements can in theory only be media and frames/embeds, so they
|
||||
// should only appear in statuses, under divs and articles.
|
||||
body,
|
||||
div,
|
||||
article {
|
||||
.__ns__pop2top {
|
||||
z-index: unset !important;
|
||||
}
|
||||
}
|
||||
5
app/javascript/styles_new/mastodon/branding.scss
Normal file
5
app/javascript/styles_new/mastodon/branding.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.logo {
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
11344
app/javascript/styles_new/mastodon/components.scss
Normal file
11344
app/javascript/styles_new/mastodon/components.scss
Normal file
File diff suppressed because it is too large
Load Diff
166
app/javascript/styles_new/mastodon/containers.scss
Normal file
166
app/javascript/styles_new/mastodon/containers.scss
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.container-alt {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (width <= 740px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin: 50px auto;
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
height: 42px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--clr-text-primary);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
padding: 12px 16px;
|
||||
line-height: 32px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-standalone {
|
||||
.compose-form {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 0;
|
||||
padding-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media screen and (width <= 400px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-header {
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1 1 auto;
|
||||
color: var(--clr-text-primary);
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.logout-link {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.redirect {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&__message {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-accent);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
213
app/javascript/styles_new/mastodon/css_variables.scss
Normal file
213
app/javascript/styles_new/mastodon/css_variables.scss
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
@use 'theme_utils' as utils;
|
||||
|
||||
:root {
|
||||
--clr-black: #000;
|
||||
--clr-grey-950: #181821;
|
||||
--clr-grey-800: #292938;
|
||||
--clr-grey-700: #444664;
|
||||
--clr-grey-600: #545778;
|
||||
--clr-grey-500: #696d91;
|
||||
--clr-grey-400: #8b8dac;
|
||||
--clr-grey-300: #b4b6cb;
|
||||
--clr-grey-200: #d8d9e3;
|
||||
--clr-grey-100: #f0f0f5;
|
||||
--clr-grey-50: #f0f1ff;
|
||||
--clr-white: #fff;
|
||||
--clr-indigo-600: #6147e6;
|
||||
--clr-indigo-400: #8886ff;
|
||||
--clr-indigo-300: #a5abfd;
|
||||
--clr-indigo-200: #c8cdfe;
|
||||
--clr-indigo-100: #e0e3ff;
|
||||
--clr-indigo-50: #f0f1ff;
|
||||
--clr-red-500: #ff637e;
|
||||
--clr-red-600: #ec003f;
|
||||
--clr-yellow-400: #ffb900;
|
||||
--clr-yellow-600: #e17100;
|
||||
--clr-green-400: #05df72;
|
||||
--clr-green-600: #00a63e;
|
||||
|
||||
/* TEXT TOKENS */
|
||||
|
||||
--clr-text-primary: var(--clr-grey-50);
|
||||
--clr-text-secondary: var(--clr-grey-400);
|
||||
--clr-text-tertiary: var(--clr-grey-500);
|
||||
--clr-text-on-inverted: var(--clr-grey-950);
|
||||
--clr-text-accent: var(--clr-indigo-400);
|
||||
--clr-text-accent-subtle: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-accent)
|
||||
);
|
||||
--clr-text-on-accent-strong: var(--clr-white);
|
||||
--clr-text-error: var(--clr-red-500);
|
||||
--clr-text-on-error-strong: var(--clr-white);
|
||||
--clr-text-warning: var(--clr-yellow-400);
|
||||
--clr-text-on-warning-strong: var(--clr-white);
|
||||
--clr-text-success: var(--clr-green-400);
|
||||
--clr-text-on-success-strong: var(--clr-white);
|
||||
--clr-text-disabled: var(--clr-grey-600);
|
||||
--clr-text-on-disabled: var(--clr-grey-400);
|
||||
--clr-text-bookmark-highlight: var(--clr-text-error);
|
||||
--clr-text-favourite-highlight: var(--clr-text-warning);
|
||||
--clr-text-on-media: var(--clr-white);
|
||||
--clr-text-status-links: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-secondary)
|
||||
);
|
||||
|
||||
/* BACKGROUND TOKENS */
|
||||
|
||||
--clr-bg-primary: var(--clr-grey-950);
|
||||
--clr-bg-secondary-base: var(--clr-indigo-200);
|
||||
--clr-bg-secondary-strength: 10%;
|
||||
--clr-bg-secondary: #{utils.css-alpha(
|
||||
var(--clr-bg-secondary-base),
|
||||
var(--clr-bg-secondary-strength)
|
||||
)};
|
||||
--clr-bg-secondary-solid: color-mix(
|
||||
in srgb,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) var(--clr-bg-secondary-strength)
|
||||
);
|
||||
|
||||
/* Secondary with doubled mix amount */
|
||||
--clr-bg-tertiary: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-primary),
|
||||
var(--clr-bg-secondary-base) calc(2 * var(--clr-bg-secondary-strength))
|
||||
);
|
||||
--clr-bg-ambient: var(--clr-bg-primary);
|
||||
--clr-bg-elevated: var(--clr-grey-800);
|
||||
--clr-bg-inverted: var(--clr-grey-50);
|
||||
--clr-bg-media-base: var(--clr-black);
|
||||
--clr-bg-media-strength: 65%;
|
||||
--clr-bg-media: #{utils.css-alpha(
|
||||
var(--clr-bg-media-base),
|
||||
var(--clr-bg-media-strength)
|
||||
)};
|
||||
--clr-bg-overlay: var(--clr-bg-primary);
|
||||
--clr-bg-disabled: var(--clr-grey-700);
|
||||
--clr-bg-accent-subtle-base: var(--clr-indigo-400);
|
||||
--clr-bg-accent-subtle-strength: 10%;
|
||||
--clr-bg-accent-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
var(--clr-bg-accent-subtle-strength)
|
||||
)};
|
||||
--clr-bg-accent-subtle-highlighted: #{utils.css-alpha(
|
||||
var(--clr-bg-accent-subtle-base),
|
||||
calc(var(--clr-bg-accent-subtle-strength) * 1.5)
|
||||
)};
|
||||
--clr-bg-accent-strong: var(--clr-indigo-600);
|
||||
--clr-bg-accent-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-accent-strong),
|
||||
black var(--clr-bg-accent-subtle-strength)
|
||||
);
|
||||
--clr-bg-error-subtle-base: #f41b3b;
|
||||
--clr-bg-error-subtle-strength: 12%;
|
||||
--clr-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-error-subtle-base),
|
||||
var(--clr-bg-error-subtle-strength)
|
||||
)};
|
||||
--clr-bg-error-strong: var(--clr-red-600);
|
||||
--clr-bg-error-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-error-strong),
|
||||
black var(--clr-bg-error-subtle-strength)
|
||||
);
|
||||
--clr-bg-warning-subtle-base: #ffca1b;
|
||||
--clr-bg-warning-subtle-strength: 10%;
|
||||
--clr-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-warning-subtle-base),
|
||||
var(--clr-bg-warning-subtle-strength)
|
||||
)};
|
||||
--clr-bg-warning-strong: var(--clr-yellow-600);
|
||||
--clr-bg-warning-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-warning-strong),
|
||||
black var(--clr-bg-warning-subtle-strength)
|
||||
);
|
||||
--clr-bg-success-subtle-base: #17e865;
|
||||
--clr-bg-success-subtle-strength: 15%;
|
||||
--clr-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-bg-success-subtle-base),
|
||||
var(--clr-bg-success-subtle-strength)
|
||||
)};
|
||||
--clr-bg-success-strong: var(--clr-green-600);
|
||||
--clr-bg-success-strong-highlighted: color-mix(
|
||||
in oklab,
|
||||
var(--clr-bg-success-strong),
|
||||
black var(--clr-bg-success-subtle-strength)
|
||||
);
|
||||
|
||||
/* BORDER TOKENS */
|
||||
|
||||
--clr-border-primary-base: var(--clr-indigo-200);
|
||||
--clr-border-primary-strength: 18%;
|
||||
--clr-border-primary: #{utils.css-alpha(
|
||||
var(--clr-border-primary-base),
|
||||
var(--clr-border-primary-strength)
|
||||
)};
|
||||
--clr-border-media: rgb(252 248 255 / 15%);
|
||||
--clr-border-on-bg-secondary: #{utils.css-alpha(
|
||||
var(--clr-border-primary-base),
|
||||
calc(var(--clr-border-primary-strength) / 1.5)
|
||||
)};
|
||||
--clr-border-on-bg-accent-subtle: var(--clr-border-primary);
|
||||
--clr-border-on-bg-error-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-error),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-warning-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-warning),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-success-subtle: #{utils.css-alpha(
|
||||
var(--clr-text-success),
|
||||
50%
|
||||
)};
|
||||
--clr-border-on-bg-inverted: var(--clr-border-primary);
|
||||
|
||||
/* SHADOW TOKENS */
|
||||
|
||||
--clr-shadow-primary-base: var(--clr-black);
|
||||
--clr-shadow-primary-strength: 80%;
|
||||
--clr-shadow-primary: #{utils.css-alpha(
|
||||
var(--clr-shadow-primary-base),
|
||||
var(--clr-shadow-primary-strength)
|
||||
)};
|
||||
--dropdown-shadow:
|
||||
0 20px 25px -5px var(--clr-shadow-primary),
|
||||
0 8px 10px -6px var(--clr-shadow-primary);
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--clr-shadow-primary));
|
||||
|
||||
/* GRAPHS/CHARTS TOKENS */
|
||||
|
||||
--clr-graph-primary-stroke: var(--clr-text-accent);
|
||||
--clr-graph-primary-fill: var(--clr-bg-accent-subtle);
|
||||
--clr-graph-warning-stroke: var(--clr-text-warning);
|
||||
--clr-graph-warning-fill: var(--clr-bg-warning-subtle);
|
||||
--clr-graph-disabled-stroke: var(--clr-text-disabled);
|
||||
--clr-graph-disabled-fill: var(--clr-bg-disabled);
|
||||
|
||||
/* LEGACY TOKENS */
|
||||
|
||||
--rich-text-container-color: rgb(87 24 60 / 100%);
|
||||
--rich-text-text-color: rgb(255 175 212 / 100%);
|
||||
--rich-text-decorations-color: rgb(128 58 95 / 100%);
|
||||
|
||||
/* MISCELLANEOUS */
|
||||
|
||||
--outline-focus-default: 2px solid var(--clr-text-accent);
|
||||
--avatar-border-radius: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
// Variable for easily inverting directional UI elements,
|
||||
--text-x-direction: 1;
|
||||
|
||||
&.rtl {
|
||||
--text-x-direction: -1;
|
||||
}
|
||||
}
|
||||
120
app/javascript/styles_new/mastodon/dashboard.scss
Normal file
120
app/javascript/styles_new/mastodon/dashboard.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.dashboard__counters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -5px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
& > div {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 33.333%;
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: var(--clr-bg-primary);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& > a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__num,
|
||||
&__text {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: var(--clr-text-primary);
|
||||
margin-bottom: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-secondary);
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
@media screen and (width <= 1350px) {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
&__item {
|
||||
&--span-double-column {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
&--span-double-row {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__quick-access {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
background: var(--clr-bg-accent-strong);
|
||||
color: var(--clr-text-on-accent-strong);
|
||||
transition: all 100ms ease-in;
|
||||
font-size: 14px;
|
||||
padding: 8px 16px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: var(--clr-bg-accent-strong-highlighted);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&.positive {
|
||||
background: var(--clr-bg-success-subtle);
|
||||
color: var(--clr-text-success);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: var(--clr-bg-error-subtle);
|
||||
color: var(--clr-text-error);
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
248
app/javascript/styles_new/mastodon/emoji_picker.scss
Normal file
248
app/javascript/styles_new/mastodon/emoji_picker.scss
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.emoji-mart {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
|
||||
&,
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
&:first-child {
|
||||
background: var(--clr-bg-tertiary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 6px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 4px;
|
||||
overflow: hidden;
|
||||
transition: color 0.1s ease-out;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--clr-text-secondary);
|
||||
|
||||
&:hover {
|
||||
color: color-mix(
|
||||
in oklab,
|
||||
var(--clr-text-primary),
|
||||
var(--clr-text-secondary)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-selected {
|
||||
color: var(--clr-text-accent);
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent-subtle);
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: var(--clr-text-accent);
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 22px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
max-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
overflow-y: scroll;
|
||||
height: 270px;
|
||||
max-height: 35vh;
|
||||
padding: 0 6px 6px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
padding: 10px;
|
||||
padding-inline-end: 45px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding: 7px 9px;
|
||||
padding-inline-end: 25px;
|
||||
font-family: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: var(--clr-bg-secondary);
|
||||
color: var(--clr-text-secondary);
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-radius: 4px;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
&::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
inset-inline-end: 45px + 5px;
|
||||
z-index: 2;
|
||||
padding: 2px 5px 1px;
|
||||
border: 0;
|
||||
background: none;
|
||||
transition: all 100ms linear;
|
||||
transition-property: opacity;
|
||||
pointer-events: auto;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji {
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
z-index: -1;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--clr-bg-accent-subtle);
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-category-label {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
|
||||
.emoji-mart-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip-path: inset(50%);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-category-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.emoji-mart-category-list li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
|
||||
span {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-tertiary);
|
||||
text-align: center;
|
||||
padding: 5px 6px;
|
||||
padding-top: 70px;
|
||||
|
||||
.emoji-mart-no-results-label {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.emoji-mart-emoji:hover::before {
|
||||
cursor: default;
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-preview {
|
||||
display: none;
|
||||
}
|
||||
1449
app/javascript/styles_new/mastodon/forms.scss
Normal file
1449
app/javascript/styles_new/mastodon/forms.scss
Normal file
File diff suppressed because it is too large
Load Diff
19
app/javascript/styles_new/mastodon/lists.scss
Normal file
19
app/javascript/styles_new/mastodon/lists.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.no-list {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.recovery-codes {
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
|
||||
li {
|
||||
font-size: 125%;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
53
app/javascript/styles_new/mastodon/modal.scss
Normal file
53
app/javascript/styles_new/mastodon/modal.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.modal-layout {
|
||||
background: var(--clr-bg-accent-subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-layout__mastodon {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
max-height: 235px;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
.account-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.with-zig-zag-decoration {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 32px;
|
||||
background-color: var(--clr-bg-accent-subtle);
|
||||
|
||||
/* Decorative zig-zag pattern at the bottom of the page */
|
||||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
|
||||
mask-position: bottom;
|
||||
mask-repeat: repeat-x;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
232
app/javascript/styles_new/mastodon/polls.scss
Normal file
232
app/javascript/styles_new/mastodon/polls.scss
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
|
||||
.poll {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__chart {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
height: 5px;
|
||||
min-width: 1%;
|
||||
|
||||
&.leading {
|
||||
background: var(--clr-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
progress {
|
||||
border: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Those rules need to be entirely separate or they won't work, hence the
|
||||
// duplication
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 4px;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 4px;
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
line-height: 18px;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
overflow-wrap: break-word;
|
||||
max-width: calc(100% - 45px - 25px);
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.autosuggest-input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--clr-text-primary);
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
background: var(--clr-bg-primary);
|
||||
border: 1px solid var(--clr-text-secondary);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--clr-text-accent);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.editable,
|
||||
&.disabled {
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid var(--clr-text-secondary);
|
||||
box-sizing: border-box;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.checkbox {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-success);
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--clr-bg-success-strong);
|
||||
border-color: var(--clr-text-success);
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
outline: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
border-color: var(--clr-text-disabled);
|
||||
|
||||
&.active {
|
||||
background: var(--clr-text-disabled);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-disabled);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__option.editable &__input,
|
||||
&__option.disabled &__input {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--clr-text-primary);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__number {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
font-weight: 700;
|
||||
flex: 0 0 45px;
|
||||
}
|
||||
|
||||
&__voted {
|
||||
padding: 0 5px;
|
||||
display: inline-block;
|
||||
|
||||
&__mark {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
color: var(--clr-text-tertiary);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
color: var(--clr-text-tertiary);
|
||||
text-decoration: underline;
|
||||
font-size: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: var(--clr-bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
margin-inline-end: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.muted .poll {
|
||||
color: var(--clr-text-tertiary);
|
||||
|
||||
&__chart {
|
||||
background: rgb(from var(--clr-text-accent) r g b / 40%);
|
||||
|
||||
&.leading {
|
||||
background: rgb(from var(--clr-text-accent) r g b / 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
58
app/javascript/styles_new/mastodon/reset.scss
Normal file
58
app/javascript/styles_new/mastodon/reset.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
html:has(body.custom-scrollbars) {
|
||||
scrollbar-color: var(--clr-text-secondary) var(--clr-bg-secondary);
|
||||
}
|
||||
116
app/javascript/styles_new/mastodon/rich_text.scss
Normal file
116
app/javascript/styles_new/mastodon/rich_text.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
.status__content__text,
|
||||
.e-content,
|
||||
.edit-indicator__content,
|
||||
.reply-indicator__content {
|
||||
code {
|
||||
background: var(--rich-text-container-color);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
color: var(--rich-text-text-color);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--rich-text-container-color);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
color: var(--rich-text-text-color);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
margin-bottom: 22px;
|
||||
white-space: pre-wrap;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-inline-start: 32px;
|
||||
color: var(--rich-text-text-color);
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
mask-image: url('@/images/quote.svg');
|
||||
background-color: var(--rich-text-decorations-color);
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-top: 4px;
|
||||
border-inline-start: 3px solid var(--rich-text-decorations-color);
|
||||
padding-inline-start: 16px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul,
|
||||
& > ol {
|
||||
margin-bottom: 22px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-inline-start: 24px;
|
||||
|
||||
li {
|
||||
padding-inline-start: 8px;
|
||||
|
||||
&::marker {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: '•';
|
||||
|
||||
li::marker {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
}
|
||||
50
app/javascript/styles_new/mastodon/rtl.scss
Normal file
50
app/javascript/styles_new/mastodon/rtl.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
body.rtl {
|
||||
direction: rtl;
|
||||
|
||||
.reactions-bar {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.announcements__mastodon,
|
||||
.drawer__inner__mastodon > img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.compose-form .autosuggest-textarea__textarea {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px + 22px;
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.column-header__setting-arrows {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.admin-wrapper {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.react-swipeable-view-container > * {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.column-back-button__icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.dismissable-banner,
|
||||
.warning-banner {
|
||||
&__action {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
375
app/javascript/styles_new/mastodon/tables.scss
Normal file
375
app/javascript/styles_new/mastodon/tables.scss
Normal file
|
|
@ -0,0 +1,375 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
text-align: start;
|
||||
background: var(--clr-bg-primary);
|
||||
|
||||
&.critical {
|
||||
font-weight: 700;
|
||||
color: var(--clr-text-warning);
|
||||
}
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& > tbody > tr > th {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: var(--clr-bg-primary);
|
||||
}
|
||||
|
||||
& > tbody > tr:last-child > td,
|
||||
& > tbody > tr:last-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--clr-text-secondary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent);
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inline-table {
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td,
|
||||
& > th {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr:first-child {
|
||||
& > td,
|
||||
& > th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-table {
|
||||
border-collapse: collapse;
|
||||
border-style: hidden;
|
||||
|
||||
& > tbody > tr > th,
|
||||
& > tbody > tr > td {
|
||||
padding: 11px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
|
||||
& > tbody > tr > th {
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: var(--clr-bg-primary);
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-inline-start: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-inline-end: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--invites tbody td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
samp {
|
||||
font-family: $font-monospace, monospace;
|
||||
}
|
||||
|
||||
button.table-action-link {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button.table-action-link,
|
||||
a.table-action-link {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-inline-end: 5px;
|
||||
padding: 0 10px;
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: var(--clr-text-accent);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&--no-toolbar {
|
||||
.batch-table__toolbar {
|
||||
position: static;
|
||||
height: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar,
|
||||
&__row {
|
||||
display: flex;
|
||||
|
||||
&__select {
|
||||
box-sizing: border-box;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
min-height: 100%;
|
||||
|
||||
input {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&--aligned {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions,
|
||||
&__content {
|
||||
padding: 8px 0;
|
||||
padding-inline-end: 16px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
background: var(--clr-bg-primary);
|
||||
border-radius: 4px 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
||||
&__actions {
|
||||
text-align: end;
|
||||
padding-inline-end: 16px - 5px;
|
||||
|
||||
.table-action-link {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__select-all {
|
||||
background: var(--clr-bg-primary);
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-top: 0;
|
||||
color: var(--clr-text-primary);
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.selected,
|
||||
.not-selected {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
color: var(--clr-text-accent);
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
padding: 8px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: var(--clr-bg-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-top: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
|
||||
.fields-row {
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-top: 0;
|
||||
background: var(--clr-bg-primary);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
&--unpadded {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&--padded {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
&--with-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__image {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-inline-end: 10px;
|
||||
|
||||
.emojione {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__quote {
|
||||
padding: 12px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&__extra {
|
||||
flex: 0 0 auto;
|
||||
text-align: end;
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.directory__tag {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.optional .batch-table__toolbar,
|
||||
&.optional .batch-table__row__select {
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset the status card to not have borders, background or padding when
|
||||
// inline in the table of statuses
|
||||
.batch-table__row__content > .status__card {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (width <= 870px) {
|
||||
.accounts-table tbody td.optional {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.one-liner {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
183
app/javascript/styles_new/mastodon/widgets.scss
Normal file
183
app/javascript/styles_new/mastodon/widgets.scss
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
@use 'sass:color';
|
||||
@use 'variables' as *;
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > a,
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--clr-border-primary);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
box-shadow: 0 0 15px var(--clr-shadow-primary);
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: var(--clr-bg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a {
|
||||
background: var(--clr-bg-accent-strong);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.disabled > div {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
h4 {
|
||||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--clr-text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.fa {
|
||||
color: var(--clr-text-secondary);
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
margin-top: 8px;
|
||||
color: var(--clr-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&.active h4 {
|
||||
&,
|
||||
.fa,
|
||||
small,
|
||||
.trends__item__current {
|
||||
color: var(--clr-text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-stack {
|
||||
flex: 0 0 auto;
|
||||
width: (36px + 4px) * 3;
|
||||
}
|
||||
|
||||
&.active .avatar-stack .account__avatar {
|
||||
border-color: var(--clr-text-accent);
|
||||
}
|
||||
|
||||
.trends__item__current {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-table {
|
||||
width: 100%;
|
||||
|
||||
.account {
|
||||
max-width: calc(56px + 30ch);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 700;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 15px 0;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid var(--clr-border-primary);
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__count {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--clr-text-primary);
|
||||
|
||||
small {
|
||||
display: block;
|
||||
color: var(--clr-text-secondary);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody td.accounts-table__extra {
|
||||
width: 120px;
|
||||
text-align: end;
|
||||
color: var(--clr-text-secondary);
|
||||
padding-inline-end: 16px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--clr-text-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__comment {
|
||||
width: 50%;
|
||||
vertical-align: initial !important;
|
||||
}
|
||||
|
||||
tbody td.accounts-table__interrelationships {
|
||||
width: 21px;
|
||||
padding-inline-end: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
&.active {
|
||||
color: var(--clr-text-accent);
|
||||
}
|
||||
|
||||
&.passive {
|
||||
color: var(--clr-text-warning);
|
||||
}
|
||||
|
||||
&.active.passive {
|
||||
color: var(--clr-text-success);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
tbody td.optional {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2004,7 +2004,10 @@ en:
|
|||
title: The terms of service of %{domain} are changing
|
||||
themes:
|
||||
contrast: Mastodon (High contrast)
|
||||
contrast-tokens: Mastodon Design Tokens (High contrast)
|
||||
dark-tokens: Mastodon Design Tokens (Dark)
|
||||
default: Mastodon (Dark)
|
||||
light-tokens: Mastodon Design Tokens (Light)
|
||||
mastodon-light: Mastodon (Light)
|
||||
system: Automatic (use system theme)
|
||||
time:
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
default: styles/application.scss
|
||||
contrast: styles/contrast.scss
|
||||
mastodon-light: styles/mastodon-light.scss
|
||||
dark-tokens: styles_new/application.scss
|
||||
light-tokens: styles_new/mastodon-light.scss
|
||||
contrast-tokens: styles_new/contrast.scss
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ module.exports = {
|
|||
extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
|
||||
ignoreFiles: [
|
||||
'app/javascript/styles/mastodon/reset.scss',
|
||||
'app/javascript/styles_new/mastodon/reset.scss',
|
||||
'coverage/**/*',
|
||||
'node_modules/**/*',
|
||||
'public/assets/**/*',
|
||||
|
|
@ -31,7 +32,7 @@ module.exports = {
|
|||
},
|
||||
overrides: [
|
||||
{
|
||||
'files': ['app/javascript/styles/entrypoints/mailer.scss'],
|
||||
'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'],
|
||||
rules: {
|
||||
'property-no-unknown': [
|
||||
true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user