mirror of
https://github.com/mastodon/mastodon.git
synced 2025-11-29 10:53:39 +00:00
Remove theme_tokens feature flag & make new styles the default (#37056)
This commit is contained in:
diondiondion
GitHub
parent
37ccffa95a
commit
92278796c3
|
|
@ -68,7 +68,6 @@ docker-compose.override.yml
|
||||||
|
|
||||||
# Ignore vendored CSS reset
|
# Ignore vendored CSS reset
|
||||||
app/javascript/styles/mastodon/reset.scss
|
app/javascript/styles/mastodon/reset.scss
|
||||||
app/javascript/styles_new/mastodon/reset.scss
|
|
||||||
|
|
||||||
# Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
|
# Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
|
||||||
*.js
|
*.js
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@ module ThemeHelper
|
||||||
def theme_style_tags(theme)
|
def theme_style_tags(theme)
|
||||||
if theme == 'system'
|
if theme == 'system'
|
||||||
''.html_safe.tap do |tags|
|
''.html_safe.tap do |tags|
|
||||||
tags << vite_stylesheet_tag(theme_path_for('mastodon-light'), type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
|
tags << vite_stylesheet_tag('themes/mastodon-light', type: :virtual, media: 'not all and (prefers-color-scheme: dark)', crossorigin: 'anonymous')
|
||||||
tags << vite_stylesheet_tag(theme_path_for('default'), type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
|
tags << vite_stylesheet_tag('themes/default', type: :virtual, media: '(prefers-color-scheme: dark)', crossorigin: 'anonymous')
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
vite_stylesheet_tag theme_path_for(theme), type: :virtual, media: 'all', crossorigin: 'anonymous'
|
vite_stylesheet_tag "themes/#{theme}", type: :virtual, media: 'all', crossorigin: 'anonymous'
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
@ -53,8 +53,4 @@ module ThemeHelper
|
||||||
def theme_color_for(theme)
|
def theme_color_for(theme)
|
||||||
theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
|
theme == 'mastodon-light' ? Themes::THEME_COLORS[:light] : Themes::THEME_COLORS[:dark]
|
||||||
end
|
end
|
||||||
|
|
||||||
def theme_path_for(theme)
|
|
||||||
Mastodon::Feature.theme_tokens_enabled? ? "themes/#{theme}_theme_tokens" : "themes/#{theme}"
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,7 @@
|
||||||
@use 'mastodon/functions';
|
|
||||||
@use 'mastodon/mixins';
|
|
||||||
@use 'mastodon/variables';
|
|
||||||
@use 'mastodon/css_variables';
|
@use 'mastodon/css_variables';
|
||||||
@use 'fonts/roboto';
|
@use 'mastodon/variables';
|
||||||
@use 'fonts/roboto-mono';
|
@use 'common';
|
||||||
|
|
||||||
@use 'mastodon/reset';
|
html {
|
||||||
@use 'mastodon/basics';
|
color-scheme: dark;
|
||||||
@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,3 +1,8 @@
|
||||||
@use 'contrast/variables';
|
@use 'mastodon/css_variables';
|
||||||
@use 'application';
|
@use 'mastodon/variables';
|
||||||
|
@use 'common';
|
||||||
@use 'contrast/diff';
|
@use 'contrast/diff';
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,16 @@
|
||||||
@use '../mastodon/variables' as *;
|
:root {
|
||||||
|
/* TEXT TOKENS */
|
||||||
|
|
||||||
|
--color-text-primary: var(--color-grey-50);
|
||||||
|
--color-text-secondary: var(--color-grey-300);
|
||||||
|
--color-text-tertiary: var(--color-grey-400);
|
||||||
|
--color-text-brand: var(--color-indigo-300);
|
||||||
|
--color-text-status-links: var(--color-text-brand);
|
||||||
|
|
||||||
|
/* BORDER TOKENS */
|
||||||
|
|
||||||
|
--border-strength-primary: 18%;
|
||||||
|
}
|
||||||
|
|
||||||
.status__content a,
|
.status__content a,
|
||||||
.reply-indicator__content a,
|
.reply-indicator__content a,
|
||||||
|
|
@ -31,16 +43,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.link-button:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
@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,4 +1,9 @@
|
||||||
@use 'mastodon-light/variables';
|
|
||||||
@use 'mastodon-light/css_variables';
|
@use 'mastodon-light/css_variables';
|
||||||
@use 'application';
|
@use 'mastodon/variables' with (
|
||||||
@use 'mastodon-light/diff';
|
$emojis-requiring-inversion: 'chains'
|
||||||
|
);
|
||||||
|
@use 'common';
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,214 @@
|
||||||
@use 'sass:color';
|
@use '../mastodon/theme_utils' as utils;
|
||||||
@use '../mastodon/variables' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
@use '../mastodon/functions' as *;
|
|
||||||
|
|
||||||
body {
|
:root {
|
||||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
--color-black: #000;
|
||||||
--dropdown-background-color: #fff;
|
--color-grey-950: #181821;
|
||||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
--color-grey-800: #292938;
|
||||||
--modal-background-color: var(--background-color);
|
--color-grey-700: #444664;
|
||||||
--background-border-color: hsl(240deg, 25%, 88%);
|
--color-grey-600: #545778;
|
||||||
--background-color: #fff;
|
--color-grey-500: #696d91;
|
||||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
--color-grey-400: #8b8dac;
|
||||||
--background-filter: blur(10px);
|
--color-grey-300: #b4b6cb;
|
||||||
--surface-variant-background-color: #f1ebfb;
|
--color-grey-200: #d8d9e3;
|
||||||
--surface-border-color: #cac4d0;
|
--color-grey-100: #f0f0f5;
|
||||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
|
--color-grey-50: #f0f1ff;
|
||||||
--rich-text-container-color: rgba(255, 216, 231, 100%);
|
--color-white: #fff;
|
||||||
--rich-text-text-color: rgba(114, 47, 83, 100%);
|
--color-indigo-600: #6147e6;
|
||||||
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
|
--color-indigo-400: #8886ff;
|
||||||
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
|
--color-indigo-300: #a5abfd;
|
||||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
--color-indigo-200: #c8cdfe;
|
||||||
|
--color-indigo-100: #e0e3ff;
|
||||||
|
--color-indigo-50: #f0f1ff;
|
||||||
|
--color-red-500: #ff637e;
|
||||||
|
--color-red-600: #ec003f;
|
||||||
|
--color-yellow-400: #ffb900;
|
||||||
|
--color-yellow-600: #e17100;
|
||||||
|
--color-green-400: #05df72;
|
||||||
|
--color-green-600: #00a63e;
|
||||||
|
|
||||||
|
/* TEXT TOKENS */
|
||||||
|
|
||||||
|
--color-text-primary: var(--color-grey-950);
|
||||||
|
--color-text-secondary: var(--color-grey-600);
|
||||||
|
--color-text-tertiary: var(--color-grey-500);
|
||||||
|
--color-text-on-inverted: var(--color-white);
|
||||||
|
--color-text-brand: var(--color-indigo-600);
|
||||||
|
--color-text-brand-soft: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-text-primary),
|
||||||
|
var(--color-text-brand)
|
||||||
|
);
|
||||||
|
--color-text-on-brand-base: var(--color-white);
|
||||||
|
--color-text-error: var(--color-red-600);
|
||||||
|
--color-text-on-error-base: var(--color-white);
|
||||||
|
--color-text-warning: var(--color-yellow-600);
|
||||||
|
--color-text-on-warning-base: var(--color-white);
|
||||||
|
--color-text-success: var(--color-green-600);
|
||||||
|
--color-text-on-success-base: var(--color-white);
|
||||||
|
--color-text-disabled: var(--color-grey-300);
|
||||||
|
--color-text-on-disabled: var(--color-grey-200);
|
||||||
|
--color-text-bookmark-highlight: var(--color-text-error);
|
||||||
|
--color-text-favourite-highlight: var(--color-text-warning);
|
||||||
|
--color-text-on-media: var(--color-white);
|
||||||
|
--color-text-status-links: var(--color-text-brand);
|
||||||
|
|
||||||
|
/* BACKGROUND TOKENS */
|
||||||
|
|
||||||
|
// Neutrals
|
||||||
|
--color-bg-primary: var(--color-white);
|
||||||
|
--overlay-strength-secondary: 5%;
|
||||||
|
--color-bg-secondary-base: var(--color-grey-600);
|
||||||
|
--color-bg-secondary: #{color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
||||||
|
)};
|
||||||
|
--color-bg-secondary-solid: #{color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
||||||
|
)};
|
||||||
|
--color-bg-tertiary: #{color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Utility
|
||||||
|
--color-bg-ambient: var(--color-bg-primary);
|
||||||
|
--color-bg-elevated: var(--color-bg-primary);
|
||||||
|
--color-bg-inverted: var(--color-grey-950);
|
||||||
|
--color-bg-media-base: var(--color-black);
|
||||||
|
--color-bg-media-strength: 65%;
|
||||||
|
--color-bg-media: #{utils.css-alpha(
|
||||||
|
var(--color-bg-media-base),
|
||||||
|
var(--color-bg-media-strength)
|
||||||
|
)};
|
||||||
|
--color-bg-overlay: var(--color-bg-primary);
|
||||||
|
--color-bg-disabled: var(--color-grey-400);
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
--overlay-strength-brand: 8%;
|
||||||
|
--color-bg-brand-base: var(--color-indigo-600);
|
||||||
|
--color-bg-brand-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
black var(--overlay-strength-brand)
|
||||||
|
);
|
||||||
|
--color-bg-brand-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
calc(var(--overlay-strength-brand) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-brand-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
var(--overlay-strength-brand)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Error
|
||||||
|
--overlay-strength-error: 12%;
|
||||||
|
--color-bg-error-base: var(--color-red-600);
|
||||||
|
--color-bg-error-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
black var(--overlay-strength-error)
|
||||||
|
);
|
||||||
|
--color-bg-error-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
calc(var(--overlay-strength-error) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
var(--overlay-strength-error)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Warning
|
||||||
|
--overlay-strength-warning: 10%;
|
||||||
|
--color-bg-warning-base: var(--color-yellow-600);
|
||||||
|
--color-bg-warning-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
black var(--overlay-strength-warning)
|
||||||
|
);
|
||||||
|
--color-bg-warning-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
calc(var(--overlay-strength-warning) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
var(--overlay-strength-warning)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Success
|
||||||
|
--overlay-strength-success: 15%;
|
||||||
|
--color-bg-success-base: var(--color-green-600);
|
||||||
|
--color-bg-success-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
black var(--overlay-strength-success)
|
||||||
|
);
|
||||||
|
--color-bg-success-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
calc(var(--overlay-strength-success) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
var(--overlay-strength-success)
|
||||||
|
)};
|
||||||
|
|
||||||
|
/* BORDER TOKENS */
|
||||||
|
|
||||||
|
--border-strength-primary: 15%;
|
||||||
|
--color-border-primary: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-grey-950) var(--border-strength-primary)
|
||||||
|
);
|
||||||
|
--color-border-media: rgb(252 248 255 / 15%);
|
||||||
|
--color-border-on-bg-secondary: var(--color-grey-200);
|
||||||
|
--color-border-on-bg-brand-softer: var(--color-indigo-200);
|
||||||
|
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-error),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-warning),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-success),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-inverted: var(--color-border-primary);
|
||||||
|
|
||||||
|
/* SHADOW TOKENS */
|
||||||
|
|
||||||
|
--shadow-strength-primary: 30%;
|
||||||
|
--color-shadow-primary: #{utils.css-alpha(
|
||||||
|
var(--color-black),
|
||||||
|
var(--shadow-strength-primary)
|
||||||
|
)};
|
||||||
|
--dropdown-shadow:
|
||||||
|
0 20px 25px -5px var(--color-shadow-primary),
|
||||||
|
0 8px 10px -6px var(--color-shadow-primary);
|
||||||
|
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
||||||
|
|
||||||
|
/* GRAPHS/CHARTS TOKENS */
|
||||||
|
|
||||||
|
--color-graph-primary-stroke: var(--color-text-brand);
|
||||||
|
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
||||||
|
--color-graph-warning-stroke: var(--color-text-warning);
|
||||||
|
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
||||||
|
--color-graph-disabled-stroke: var(--color-text-disabled);
|
||||||
|
--color-graph-disabled-fill: var(--color-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(--color-text-brand);
|
||||||
|
--avatar-border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,530 +0,0 @@
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
@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'
|
|
||||||
);
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
@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,33 +1,30 @@
|
||||||
@use 'sass:color';
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
@mixin search-input {
|
@mixin search-input {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
background: var(--input-background-color);
|
background: var(--color-bg-secondary);
|
||||||
color: $darker-text-color;
|
color: var(--color-text-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-on-bg-secondary);
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin search-popout {
|
@mixin search-popout {
|
||||||
background: $simple-background-color;
|
background: var(--color-bg-elevated);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 10px 14px;
|
padding: 10px 14px;
|
||||||
padding-bottom: 14px;
|
padding-bottom: 14px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
color: $light-text-color;
|
color: var(--color-text-secondary);
|
||||||
box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
|
box-shadow: 2px 4px 15px var(--color-shadow-primary);
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $light-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
@ -43,6 +40,6 @@
|
||||||
|
|
||||||
em {
|
em {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $inverted-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,91 +1,3 @@
|
||||||
@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
|
// Keep this filter a SCSS variable rather than
|
||||||
// a CSS Custom Property due to this Safari bug:
|
// a CSS Custom Property due to this Safari bug:
|
||||||
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
$maximum-width: 1235px;
|
$maximum-width: 1235px;
|
||||||
$fluid-breakpoint: $maximum-width + 20px;
|
$fluid-breakpoint: $maximum-width + 20px;
|
||||||
|
|
@ -28,7 +27,7 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
padding: 1em 1.75em;
|
padding: 1em 1.75em;
|
||||||
padding-inline-start: 3em;
|
padding-inline-start: 3em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -68,8 +67,8 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
top: 1em;
|
top: 1em;
|
||||||
background: $highlight-text-color;
|
background: var(--color-bg-brand-base);
|
||||||
color: $ui-base-color;
|
color: var(--color-text-on-brand-base);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 4ch;
|
width: 4ch;
|
||||||
height: 4ch;
|
height: 4ch;
|
||||||
|
|
@ -85,13 +84,13 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__hint {
|
&__hint {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -104,21 +103,21 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||||
> label {
|
> label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
> select {
|
select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-secondary);
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding-inline-start: 10px;
|
padding-inline-start: 10px;
|
||||||
padding-inline-end: 30px;
|
padding-inline-end: 30px;
|
||||||
|
|
@ -128,18 +127,4 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||||
font-size: 16px;
|
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,6 +1,5 @@
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
& > a {
|
& > a {
|
||||||
|
|
@ -14,7 +13,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
.card__bar {
|
.card__bar {
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-brand-softer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -22,8 +21,8 @@
|
||||||
&__img {
|
&__img {
|
||||||
height: 130px;
|
height: 130px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-secondary);
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
@ -45,8 +44,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
|
|
@ -61,7 +60,7 @@
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: darken($ui-base-color, 8%);
|
background: var(--color-bg-secondary);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -76,7 +75,7 @@
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -85,7 +84,7 @@
|
||||||
span {
|
span {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -106,7 +105,7 @@
|
||||||
.page,
|
.page,
|
||||||
.gap {
|
.gap {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
@ -114,9 +113,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.current {
|
.current {
|
||||||
background: $simple-background-color;
|
color: var(--color-bg-primary);
|
||||||
|
background: var(--color-text-primary);
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
color: $inverted-text-color;
|
|
||||||
cursor: default;
|
cursor: default;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -128,7 +127,7 @@
|
||||||
.older,
|
.older,
|
||||||
.newer {
|
.newer {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.older {
|
.older {
|
||||||
|
|
@ -143,7 +142,7 @@
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: lighten($inverted-text-color, 10%);
|
color: var(--color-text-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (width <= 700px) {
|
@media screen and (width <= 700px) {
|
||||||
|
|
@ -161,9 +160,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothing-here {
|
.nothing-here {
|
||||||
background: $ui-base-color;
|
color: var(--color-text-secondary);
|
||||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
background: var(--color-bg-primary);
|
||||||
color: $darker-text-color;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -174,6 +172,15 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
min-height: 30vh;
|
min-height: 30vh;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
|
||||||
|
@media screen and (min-width: ($no-gap-breakpoint - 1)) {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--no-toolbar {
|
||||||
|
border-top: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
&--under-tabs {
|
&--under-tabs {
|
||||||
border-radius: 0 0 4px 4px;
|
border-radius: 0 0 4px 4px;
|
||||||
|
|
@ -196,7 +203,7 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $ui-secondary-color;
|
color: var(--color-text-primary);
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -206,16 +213,24 @@
|
||||||
.simple_form .overridden,
|
.simple_form .overridden,
|
||||||
.simple_form .recommended,
|
.simple_form .recommended,
|
||||||
.simple_form .not_recommended {
|
.simple_form .not_recommended {
|
||||||
background-color: color.change($ui-secondary-color, $alpha: 0.1);
|
background-color: var(--color-bg-secondary);
|
||||||
border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.information-badge {
|
||||||
|
&.superapp {
|
||||||
|
color: var(--color-text-success);
|
||||||
|
background-color: var(--color-bg-success-softer);
|
||||||
|
border-color: var(--color-border-on-bg-success-softer);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-role {
|
.account-role {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
padding-inline-end: 8px;
|
padding-inline-end: 8px;
|
||||||
border: 1px solid $highlight-text-color;
|
border: 1px solid var(--color-text-brand);
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
|
|
@ -238,18 +253,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.simple_form .not_recommended {
|
||||||
color: lighten($error-red, 12%);
|
color: var(--color-text-error);
|
||||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
background-color: var(--color-bg-error-softer);
|
||||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
border-color: var(--color-border-on-bg-error-softer);
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__header__fields {
|
.account__header__fields {
|
||||||
|
|
@ -257,14 +264,14 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 15px -15px -15px;
|
margin: 15px -15px -15px;
|
||||||
border: 0 none;
|
border: 0 none;
|
||||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
border-top: 1px solid var(--color-border-primary);
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
dt,
|
dt,
|
||||||
|
|
@ -282,17 +289,17 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
width: 120px;
|
width: 120px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
background: var(--color-bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -303,16 +310,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.verified {
|
.verified {
|
||||||
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
|
border: 1px solid var(--color-border-on-bg-success-softer);
|
||||||
background: color.change($valid-value-color, $alpha: 0.25);
|
background: var(--color-bg-success-softer);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $valid-value-color;
|
color: var(--color-text-success);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__mark {
|
&__mark {
|
||||||
color: $valid-value-color;
|
color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -327,10 +334,10 @@
|
||||||
|
|
||||||
.pending-account {
|
.pending-account {
|
||||||
&__header {
|
&__header {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $ui-secondary-color;
|
color: var(--color-text-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -341,7 +348,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -356,7 +363,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-table__row--muted {
|
.batch-table__row--muted {
|
||||||
color: lighten($ui-base-color, 26%);
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-table__row--muted .pending-account__header,
|
.batch-table__row--muted .pending-account__header,
|
||||||
|
|
@ -365,7 +372,7 @@
|
||||||
&,
|
&,
|
||||||
a,
|
a,
|
||||||
strong {
|
strong {
|
||||||
color: lighten($ui-base-color, 26%);
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -377,12 +384,12 @@
|
||||||
tbody td.accounts-table__extra,
|
tbody td.accounts-table__extra,
|
||||||
&__count,
|
&__count,
|
||||||
&__count small {
|
&__count small {
|
||||||
color: lighten($ui-base-color, 26%);
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-table__row--attention {
|
.batch-table__row--attention {
|
||||||
color: $gold-star;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-table__row--attention .pending-account__header,
|
.batch-table__row--attention .pending-account__header,
|
||||||
|
|
@ -391,7 +398,7 @@
|
||||||
&,
|
&,
|
||||||
a,
|
a,
|
||||||
strong {
|
strong {
|
||||||
color: $gold-star;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -399,6 +406,6 @@
|
||||||
tbody td.accounts-table__extra,
|
tbody td.accounts-table__extra,
|
||||||
&__count,
|
&__count,
|
||||||
&__count small {
|
&__count small {
|
||||||
color: $gold-star;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -170,7 +170,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
path:last-child {
|
path:last-child {
|
||||||
stroke: var(--indigo-3) !important;
|
stroke: var(--color-graph-primary-stroke) !important;
|
||||||
fill: none !important;
|
fill: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
html.has-modal {
|
html.has-modal {
|
||||||
&,
|
&,
|
||||||
|
|
@ -17,11 +16,11 @@ html.has-modal {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: $font-sans-serif, sans-serif;
|
font-family: $font-sans-serif, sans-serif;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-ambient);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
text-rendering: optimizelegibility;
|
text-rendering: optimizelegibility;
|
||||||
|
|
||||||
// Disable kerning for Japanese text to preserve monospaced alignment for readability
|
// Disable kerning for Japanese text to preserve monospaced alignment for readability
|
||||||
|
|
@ -118,6 +117,7 @@ body {
|
||||||
|
|
||||||
&.admin {
|
&.admin {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
background: var(--color-bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.error {
|
&.error {
|
||||||
|
|
@ -157,7 +157,7 @@ body {
|
||||||
a {
|
a {
|
||||||
&:focus {
|
&:focus {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: $ui-button-focus-outline;
|
outline: var(--outline-focus-default);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
&:focus:not(:focus-visible) {
|
||||||
|
|
@ -212,7 +212,7 @@ button {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
color: lighten($error-red, 4%);
|
color: var(--color-text-error);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
& > div {
|
& > div {
|
||||||
|
|
@ -228,7 +228,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
@ -238,11 +238,11 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
color: $dark-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $dark-text-color;
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -250,7 +250,7 @@ button {
|
||||||
display: inline;
|
display: inline;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: $dark-text-color;
|
color: var(--color-text-secondary);
|
||||||
font: inherit;
|
font: inherit;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -267,7 +267,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.copied {
|
&.copied {
|
||||||
color: $valid-value-color;
|
color: var(--mas-status-success-color);
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,7 +27,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
|
|
||||||
@media screen and (width <= 440px) {
|
@media screen and (width <= 440px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,7 +148,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,221 @@
|
||||||
@use 'sass:color';
|
@use 'theme_utils' as utils;
|
||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
|
--color-black: #000;
|
||||||
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
--color-grey-950: #181821;
|
||||||
--dropdown-shadow:
|
--color-grey-800: #292938;
|
||||||
0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
|
--color-grey-700: #444664;
|
||||||
0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
|
--color-grey-600: #545778;
|
||||||
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
|
--color-grey-500: #696d91;
|
||||||
--modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
|
--color-grey-400: #8b8dac;
|
||||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
--color-grey-300: #b4b6cb;
|
||||||
--background-border-color: #{lighten($ui-base-color, 4%)};
|
--color-grey-200: #d8d9e3;
|
||||||
--background-color: #{darken($ui-base-color, 8%)};
|
--color-grey-100: #f0f0f5;
|
||||||
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
--color-grey-50: #f0f1ff;
|
||||||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
--color-white: #fff;
|
||||||
--surface-variant-background-color: #{$ui-base-color};
|
--color-indigo-600: #6147e6;
|
||||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
--color-indigo-400: #8886ff;
|
||||||
--surface-border-color: #{lighten($ui-base-color, 8%)};
|
--color-indigo-300: #a5abfd;
|
||||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
|
--color-indigo-200: #c8cdfe;
|
||||||
--avatar-border-radius: 8px;
|
--color-indigo-100: #e0e3ff;
|
||||||
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
|
--color-indigo-50: #f0f1ff;
|
||||||
--overlay-icon-shadow: drop-shadow(
|
--color-red-500: #ff637e;
|
||||||
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
|
--color-red-600: #ec003f;
|
||||||
|
--color-yellow-400: #ffb900;
|
||||||
|
--color-yellow-600: #e17100;
|
||||||
|
--color-green-400: #05df72;
|
||||||
|
--color-green-600: #00a63e;
|
||||||
|
|
||||||
|
/* TEXT TOKENS */
|
||||||
|
|
||||||
|
--color-text-primary: var(--color-grey-50);
|
||||||
|
--color-text-secondary: var(--color-grey-400);
|
||||||
|
--color-text-tertiary: var(--color-grey-500);
|
||||||
|
--color-text-on-inverted: var(--color-grey-950);
|
||||||
|
--color-text-brand: var(--color-indigo-400);
|
||||||
|
--color-text-brand-soft: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-text-primary),
|
||||||
|
var(--color-text-brand)
|
||||||
);
|
);
|
||||||
--error-background-color: #{darken($error-red, 16%)};
|
--color-text-on-brand-base: var(--color-white);
|
||||||
--error-active-background-color: #{darken($error-red, 12%)};
|
--color-text-error: var(--color-red-500);
|
||||||
--on-error-color: #fff;
|
--color-text-on-error-base: var(--color-white);
|
||||||
--rich-text-container-color: rgba(87, 24, 60, 100%);
|
--color-text-warning: var(--color-yellow-400);
|
||||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
--color-text-on-warning-base: var(--color-white);
|
||||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
--color-text-success: var(--color-green-400);
|
||||||
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
|
--color-text-on-success-base: var(--color-white);
|
||||||
--nested-card-text: #{$secondary-text-color};
|
--color-text-disabled: var(--color-grey-600);
|
||||||
--nested-card-border: 1px solid
|
--color-text-on-disabled: var(--color-grey-400);
|
||||||
color(from #{$ui-highlight-color} srgb r g b / 15%);
|
--color-text-bookmark-highlight: var(--color-text-error);
|
||||||
--input-placeholder-color: #{$dark-text-color};
|
--color-text-favourite-highlight: var(--color-text-warning);
|
||||||
--input-background-color: var(--surface-variant-background-color);
|
--color-text-on-media: var(--color-white);
|
||||||
--on-input-color: #{$secondary-text-color};
|
--color-text-status-links: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-text-primary),
|
||||||
|
var(--color-text-secondary)
|
||||||
|
);
|
||||||
|
|
||||||
|
/* BACKGROUND TOKENS */
|
||||||
|
|
||||||
|
// Neutrals
|
||||||
|
--color-bg-primary: var(--color-grey-950);
|
||||||
|
--overlay-strength-secondary: 10%;
|
||||||
|
--color-bg-secondary-base: var(--color-indigo-200);
|
||||||
|
--color-bg-secondary: #{utils.css-alpha(
|
||||||
|
var(--color-bg-secondary-base),
|
||||||
|
var(--overlay-strength-secondary)
|
||||||
|
)};
|
||||||
|
--color-bg-secondary-solid: color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
||||||
|
);
|
||||||
|
--color-bg-tertiary: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
||||||
|
);
|
||||||
|
|
||||||
|
// Utility
|
||||||
|
--color-bg-ambient: var(--color-bg-primary);
|
||||||
|
--color-bg-elevated: var(--color-bg-primary);
|
||||||
|
--color-bg-inverted: var(--color-grey-50);
|
||||||
|
--color-bg-media-base: var(--color-black);
|
||||||
|
--color-bg-media-strength: 65%;
|
||||||
|
--color-bg-media: #{utils.css-alpha(
|
||||||
|
var(--color-bg-media-base),
|
||||||
|
var(--color-bg-media-strength)
|
||||||
|
)};
|
||||||
|
--color-bg-overlay: var(--color-black);
|
||||||
|
--color-bg-disabled: var(--color-grey-700);
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
--overlay-strength-brand: 10%;
|
||||||
|
--color-bg-brand-base: var(--color-indigo-600);
|
||||||
|
--color-bg-brand-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
black var(--overlay-strength-brand)
|
||||||
|
);
|
||||||
|
--color-bg-brand-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
calc(var(--overlay-strength-brand) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-brand-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
var(--overlay-strength-brand)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Error
|
||||||
|
--overlay-strength-error: 12%;
|
||||||
|
--color-bg-error-base: var(--color-red-600);
|
||||||
|
--color-bg-error-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
black var(--overlay-strength-error)
|
||||||
|
);
|
||||||
|
--color-bg-error-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
calc(var(--overlay-strength-error) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
var(--overlay-strength-error)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Warning
|
||||||
|
--overlay-strength-warning: 10%;
|
||||||
|
--color-bg-warning-base: var(--color-yellow-600);
|
||||||
|
--color-bg-warning-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
black var(--overlay-strength-warning)
|
||||||
|
);
|
||||||
|
--color-bg-warning-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
calc(var(--overlay-strength-warning) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
var(--overlay-strength-warning)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Success
|
||||||
|
--overlay-strength-success: 15%;
|
||||||
|
--color-bg-success-base: var(--color-green-600);
|
||||||
|
--color-bg-success-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
black var(--overlay-strength-success)
|
||||||
|
);
|
||||||
|
--color-bg-success-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
calc(var(--overlay-strength-success) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
var(--overlay-strength-success)
|
||||||
|
)};
|
||||||
|
|
||||||
|
/* BORDER TOKENS */
|
||||||
|
|
||||||
|
--border-strength-primary: 18%;
|
||||||
|
--color-border-primary: #{utils.css-alpha(
|
||||||
|
var(--color-indigo-200),
|
||||||
|
var(--border-strength-primary)
|
||||||
|
)};
|
||||||
|
--color-border-media: rgb(252 248 255 / 15%);
|
||||||
|
--color-border-on-bg-secondary: #{utils.css-alpha(
|
||||||
|
var(--color-indigo-200),
|
||||||
|
calc(var(--border-strength-primary) / 1.5)
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-brand-softer: var(--color-border-primary);
|
||||||
|
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-error),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-warning),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-success),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-inverted: var(--color-border-primary);
|
||||||
|
|
||||||
|
/* SHADOW TOKENS */
|
||||||
|
|
||||||
|
--shadow-strength-primary: 80%;
|
||||||
|
--color-shadow-primary: #{utils.css-alpha(
|
||||||
|
var(--color-black),
|
||||||
|
var(--shadow-strength-primary)
|
||||||
|
)};
|
||||||
|
--dropdown-shadow:
|
||||||
|
0 20px 25px -5px var(--color-shadow-primary),
|
||||||
|
0 8px 10px -6px var(--color-shadow-primary);
|
||||||
|
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
||||||
|
|
||||||
|
/* GRAPHS/CHARTS TOKENS */
|
||||||
|
|
||||||
|
--color-graph-primary-stroke: var(--color-text-brand);
|
||||||
|
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
||||||
|
--color-graph-warning-stroke: var(--color-text-warning);
|
||||||
|
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
||||||
|
--color-graph-disabled-stroke: var(--color-text-disabled);
|
||||||
|
--color-graph-disabled-fill: var(--color-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(--color-text-brand);
|
||||||
|
--avatar-border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
|
|
||||||
.dashboard__counters {
|
.dashboard__counters {
|
||||||
|
|
@ -16,9 +15,9 @@
|
||||||
& > div,
|
& > div,
|
||||||
& > a {
|
& > a {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +30,7 @@
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-brand-softer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +40,7 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -52,7 +51,7 @@
|
||||||
|
|
||||||
&__label {
|
&__label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
@ -85,8 +84,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: $ui-button-background-color;
|
background: var(--color-bg-brand-base);
|
||||||
color: $primary-text-color;
|
color: var(--color-text-on-brand-base);
|
||||||
transition: all 100ms ease-in;
|
transition: all 100ms ease-in;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
@ -96,18 +95,18 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $ui-button-focus-background-color;
|
background-color: var(--color-bg-brand-base-hover);
|
||||||
transition: all 200ms ease-out;
|
transition: all 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.positive {
|
&.positive {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: var(--color-bg-success-softer);
|
||||||
color: $valid-value-color;
|
color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.negative {
|
&.negative {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: var(--color-bg-error-softer);
|
||||||
color: $error-value-color;
|
color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.emoji-mart {
|
.emoji-mart {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|
@ -18,7 +17,8 @@
|
||||||
|
|
||||||
.emoji-mart-bar {
|
.emoji-mart-bar {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
background: var(--dropdown-border-color);
|
background: var(--color-bg-tertiary);
|
||||||
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,18 +39,22 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: lighten($darker-text-color, 4%);
|
color: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-text-primary),
|
||||||
|
var(--color-text-secondary)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-anchor-selected {
|
.emoji-mart-anchor-selected {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: lighten($highlight-text-color, 4%);
|
color: var(--color-text-brand-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-anchor-bar {
|
.emoji-mart-anchor-bar {
|
||||||
|
|
@ -64,7 +68,7 @@
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background-color: $highlight-text-color;
|
background-color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-mart-anchors {
|
.emoji-mart-anchors {
|
||||||
|
|
@ -101,9 +105,9 @@
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-secondary);
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
|
|
@ -133,7 +137,6 @@
|
||||||
transition: all 100ms linear;
|
transition: all 100ms linear;
|
||||||
transition-property: opacity;
|
transition-property: opacity;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
@ -141,7 +144,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: $darker-text-color;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -165,7 +168,7 @@
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--dropdown-border-color);
|
background-color: var(--color-bg-brand-softer);
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -225,7 +228,7 @@
|
||||||
|
|
||||||
.emoji-mart-no-results {
|
.emoji-mart-no-results {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $dark-text-color;
|
color: var(--color-text-tertiary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5px 6px;
|
padding: 5px 6px;
|
||||||
padding-top: 70px;
|
padding-top: 70px;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: $font-monospace, monospace;
|
font-family: $font-monospace, monospace;
|
||||||
|
|
@ -16,7 +15,7 @@ code {
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--surface-background-color);
|
background: var(--color-bg-secondary);
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
@ -33,7 +32,7 @@ code {
|
||||||
display: block;
|
display: block;
|
||||||
background: linear-gradient(
|
background: linear-gradient(
|
||||||
to bottom,
|
to bottom,
|
||||||
var(--surface-background-color),
|
var(--color-bg-secondary-solid),
|
||||||
transparent
|
transparent
|
||||||
);
|
);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -58,14 +57,16 @@ code {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
&.success {
|
&.success {
|
||||||
background: $success-green;
|
color: var(--color-text-on-success-base);
|
||||||
|
background: var(--color-bg-success-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.failure {
|
&.failure {
|
||||||
background: $error-red;
|
color: var(--color-text-on-error-base);
|
||||||
|
background: var(--color-bg-error-base);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -126,7 +127,7 @@ code {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -147,7 +148,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
label a {
|
label a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
|
|
@ -189,7 +190,7 @@ code {
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
&.invited-by {
|
&.invited-by {
|
||||||
|
|
@ -197,7 +198,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -208,16 +209,16 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 0.2em 0.4em;
|
padding: 0.2em 0.4em;
|
||||||
background: darken($ui-base-color, 12%);
|
background: var(--color-bg-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
@ -242,7 +243,7 @@ code {
|
||||||
|
|
||||||
p.hint {
|
p.hint {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
&.subtle-hint {
|
&.subtle-hint {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -278,7 +279,7 @@ code {
|
||||||
& > label {
|
& > label {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|
@ -300,7 +301,7 @@ code {
|
||||||
.label_input > label {
|
.label_input > label {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
|
@ -322,7 +323,7 @@ code {
|
||||||
& > label {
|
& > label {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
@ -381,7 +382,7 @@ code {
|
||||||
|
|
||||||
.required abbr {
|
.required abbr {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: lighten($error-value-color, 12%);
|
color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fields-group {
|
.fields-group {
|
||||||
|
|
@ -474,7 +475,7 @@ code {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -484,7 +485,7 @@ code {
|
||||||
label {
|
label {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -505,7 +506,7 @@ code {
|
||||||
.input.static .label_input__wrapper {
|
.input.static .label_input__wrapper {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 1px solid $dark-text-color;
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -519,14 +520,14 @@ code {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-secondary);
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
|
|
||||||
|
|
@ -535,7 +536,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:required:valid {
|
&:required:valid {
|
||||||
border-color: $valid-value-color;
|
border-color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
@media screen and (width <= 600px) {
|
||||||
|
|
@ -550,13 +551,13 @@ code {
|
||||||
input[type='datetime-local'] {
|
input[type='datetime-local'] {
|
||||||
&:focus:invalid:not(:placeholder-shown),
|
&:focus:invalid:not(:placeholder-shown),
|
||||||
&:required:invalid:not(:placeholder-shown) {
|
&:required:invalid:not(:placeholder-shown) {
|
||||||
border-color: lighten($error-red, 12%);
|
border-color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input.field_with_errors {
|
.input.field_with_errors {
|
||||||
label {
|
label {
|
||||||
color: lighten($error-red, 12%);
|
color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type='text'],
|
input[type='text'],
|
||||||
|
|
@ -566,13 +567,13 @@ code {
|
||||||
input[type='datetime-local'],
|
input[type='datetime-local'],
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
border-color: lighten($error-red, 12%);
|
border-color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: lighten($error-red, 12%);
|
color: var(--color-text-error);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -605,8 +606,8 @@ code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: $ui-button-background-color;
|
background: var(--color-bg-brand-base);
|
||||||
color: $ui-button-color;
|
color: var(--color-text-on-brand-base);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -625,21 +626,22 @@ code {
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $ui-button-focus-background-color;
|
background: var(--color-bg-brand-base-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&:disabled:hover {
|
&:disabled:hover {
|
||||||
background-color: $ui-button-disabled-color;
|
color: var(--color-text-on-disabled);
|
||||||
|
background: var(--color-bg-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.negative {
|
&.negative {
|
||||||
background: $ui-button-destructive-background-color;
|
background: var(--color-bg-error-base);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: $ui-button-destructive-focus-background-color;
|
background: var(--color-bg-error-base-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -648,16 +650,14 @@ code {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
background: $ui-base-color
|
background: var(--color-bg-secondary);
|
||||||
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>")
|
border: 1px solid var(--color-border-primary);
|
||||||
no-repeat right 8px center / auto 14px;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding-inline-start: 10px;
|
padding-inline-start: 10px;
|
||||||
padding-inline-end: 30px;
|
padding-inline-end: 30px;
|
||||||
|
|
@ -695,7 +695,7 @@ code {
|
||||||
top: 1px;
|
top: 1px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $dark-text-color;
|
color: var(--color-text-tertiary);
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
@ -721,6 +721,29 @@ 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(--color-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 {
|
.block-icon {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -729,30 +752,30 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.flash-message {
|
.flash-message {
|
||||||
background: var(--background-color);
|
color: var(--color-text-brand);
|
||||||
color: $highlight-text-color;
|
background: transparent;
|
||||||
border: 1px solid $highlight-text-color;
|
border: 1px solid var(--color-text-brand);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&.notice {
|
&.notice {
|
||||||
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
|
border: 1px solid var(--color-border-on-bg-success-softer);
|
||||||
background: color.change($valid-value-color, $alpha: 0.25);
|
background: var(--color-bg-success-softer);
|
||||||
color: $valid-value-color;
|
color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
border: 1px solid color.change($gold-star, $alpha: 0.5);
|
border: 1px solid var(--color-border-on-bg-warning-softer);
|
||||||
background: color.change($gold-star, $alpha: 0.25);
|
background: var(--color-bg-warning-softer);
|
||||||
color: $gold-star;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.alert {
|
&.alert {
|
||||||
border: 1px solid color.change($error-value-color, $alpha: 0.5);
|
border: 1px solid var(--color-border-on-bg-error-softer);
|
||||||
background: color.change($error-value-color, $alpha: 0.1);
|
background: var(--color-bg-error-softer);
|
||||||
color: $error-value-color;
|
color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
|
|
@ -767,11 +790,11 @@ code {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -801,8 +824,8 @@ code {
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-family: $font-monospace, monospace;
|
font-family: $font-monospace, monospace;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-secondary);
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
|
@ -817,7 +840,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background: lighten($ui-base-color, 4%);
|
background: var(--color-bg-brand-softer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -873,7 +896,7 @@ code {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
@ -893,7 +916,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -901,7 +924,7 @@ code {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
color: lighten($highlight-text-color, 8%);
|
color: var(--color-text-brand-soft);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -909,7 +932,7 @@ code {
|
||||||
.oauth-prompt,
|
.oauth-prompt,
|
||||||
.follow-prompt {
|
.follow-prompt {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -918,7 +941,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
@each $lang in $cjk-langs {
|
@each $lang in $cjk-langs {
|
||||||
|
|
@ -931,7 +954,7 @@ code {
|
||||||
|
|
||||||
.oauth-prompt {
|
.oauth-prompt {
|
||||||
h3 {
|
h3 {
|
||||||
color: $ui-secondary-color;
|
color: var(--color-text-primary);
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -945,9 +968,9 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.permissions-list {
|
.permissions-list {
|
||||||
border: 1px solid $ui-base-color;
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: darken($ui-base-color, 4%);
|
background: var(--color-bg-secondary);
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -973,10 +996,10 @@ code {
|
||||||
|
|
||||||
.qr-code {
|
.qr-code {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
background: $simple-background-color;
|
background: white;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin: 0 10px 20px 0;
|
margin: 0 10px 20px 0;
|
||||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
box-shadow: 0 0 15px var(--color-shadow-primary);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|
@ -987,7 +1010,7 @@ code {
|
||||||
|
|
||||||
.qr-alternative {
|
.qr-alternative {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
flex: 150px;
|
flex: 150px;
|
||||||
|
|
||||||
samp {
|
samp {
|
||||||
|
|
@ -996,42 +1019,6 @@ 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 {
|
.action-pagination {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -1051,7 +1038,7 @@ code {
|
||||||
|
|
||||||
.post-follow-actions {
|
.post-follow-actions {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
div {
|
div {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
@ -1064,7 +1051,7 @@ code {
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -1077,7 +1064,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.scope-danger {
|
.scope-danger {
|
||||||
color: $warning-red;
|
color: var(--color-text-error);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form_admin_settings_site_short_description,
|
.form_admin_settings_site_short_description,
|
||||||
|
|
@ -1092,8 +1079,9 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-copy {
|
.input-copy {
|
||||||
background: darken($ui-base-color, 10%);
|
color: var(--color-text-primary);
|
||||||
border: 1px solid darken($ui-base-color, 14%);
|
background: var(--color-bg-secondary);
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1127,11 +1115,11 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.copied {
|
&.copied {
|
||||||
border-color: $valid-value-color;
|
border-color: var(--color-text-success);
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
background: $valid-value-color;
|
background: var(--color-bg-success-base);
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1153,8 +1141,8 @@ code {
|
||||||
.permissions-list {
|
.permissions-list {
|
||||||
&__item {
|
&__item {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
color: $ui-secondary-color;
|
color: var(--color-text-primary);
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
|
@ -1166,7 +1154,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__type {
|
&__type {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1175,7 +1163,7 @@ code {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
color: $valid-value-color;
|
color: var(--color-text-success);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
@ -1230,7 +1218,6 @@ code {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
color: $white;
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|
@ -1239,11 +1226,11 @@ code {
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: $ui-base-lighter-color;
|
background: var(--color-border-primary);
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|
||||||
&.completed {
|
&.completed {
|
||||||
background: $highlight-text-color;
|
background: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1253,7 +1240,7 @@ code {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid $ui-base-lighter-color;
|
border: 2px solid var(--color-border-primary);
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1268,7 +1255,7 @@ code {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -1291,14 +1278,14 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.active .circle {
|
.active .circle {
|
||||||
border-color: $highlight-text-color;
|
border-color: var(--color-text-brand);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: $highlight-text-color;
|
background: var(--color-text-brand);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
@ -1307,8 +1294,8 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
.completed .circle {
|
.completed .circle {
|
||||||
border-color: $highlight-text-color;
|
border-color: var(--color-text-brand);
|
||||||
background: $highlight-text-color;
|
background: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1319,10 +1306,14 @@ code {
|
||||||
&__header-input {
|
&__header-input {
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: var(--surface-variant-background-color);
|
background: var(--color-bg-secondary);
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--color-bg-brand-softer);
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1337,12 +1328,12 @@ code {
|
||||||
inset-inline-start: 50%;
|
inset-inline-start: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.selected .icon {
|
&.selected .icon {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
transform: none;
|
transform: none;
|
||||||
inset-inline-start: auto;
|
inset-inline-start: auto;
|
||||||
inset-inline-end: 8px;
|
inset-inline-end: 8px;
|
||||||
|
|
@ -1351,7 +1342,7 @@ code {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.invalid img {
|
&.invalid img {
|
||||||
outline: 1px solid $error-value-color;
|
outline: 1px solid var(--color-text-error);
|
||||||
outline-offset: -1px;
|
outline-offset: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1361,14 +1352,10 @@ code {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: color.change($error-value-color, $alpha: 0.25);
|
background: var(--color-bg-error-softer);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--surface-variant-active-background-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__avatar-input {
|
&__avatar-input {
|
||||||
|
|
@ -1384,7 +1371,7 @@ code {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
|
|
@ -1401,14 +1388,14 @@ code {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.recommended {
|
.recommended {
|
||||||
|
|
@ -1426,7 +1413,7 @@ code {
|
||||||
|
|
||||||
&__toggle > div {
|
&__toggle > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-inline-start: 1px solid var(--background-border-color);
|
border-inline-start: 1px solid var(--color-border-primary);
|
||||||
padding-inline-start: 16px;
|
padding-inline-start: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1437,19 +1424,19 @@ code {
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
&__text {
|
&__text {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: block;
|
display: block;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.modal-layout {
|
.modal-layout {
|
||||||
background: darken($ui-base-color, 4%)
|
background: var(--color-bg-brand-softer);
|
||||||
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -38,3 +35,19 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.with-zig-zag-decoration {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 0 0;
|
||||||
|
height: 32px;
|
||||||
|
background-color: var(--color-bg-brand-softer);
|
||||||
|
|
||||||
|
/* 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,6 +1,5 @@
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.poll {
|
.poll {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
|
@ -14,12 +13,12 @@
|
||||||
&__chart {
|
&__chart {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
display: block;
|
display: block;
|
||||||
background: darken($ui-primary-color, 5%);
|
background: rgb(from var(--color-text-brand) r g b / 60%);
|
||||||
height: 5px;
|
height: 5px;
|
||||||
min-width: 1%;
|
min-width: 1%;
|
||||||
|
|
||||||
&.leading {
|
&.leading {
|
||||||
background: $ui-highlight-color;
|
background: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -39,12 +38,12 @@
|
||||||
// duplication
|
// duplication
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: darken($ui-primary-color, 5%);
|
background: rgb(from var(--color-text-brand) r g b / 60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: darken($ui-primary-color, 5%);
|
background: rgb(from var(--color-text-brand) r g b / 60%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,16 +77,16 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-primary);
|
||||||
border: 1px solid $darker-text-color;
|
border: 1px solid var(--color-text-secondary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $ui-highlight-color;
|
border-color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
@media screen and (width <= 600px) {
|
||||||
|
|
@ -111,7 +110,7 @@
|
||||||
&__input {
|
&__input {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px solid $ui-primary-color;
|
border: 1px solid var(--color-text-secondary);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 17px;
|
width: 17px;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
|
|
@ -125,13 +124,13 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: lighten($valid-value-color, 15%);
|
border-color: var(--color-text-success);
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $valid-value-color;
|
background-color: var(--color-bg-success-base);
|
||||||
border-color: $valid-value-color;
|
border-color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
|
|
@ -145,16 +144,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
border-color: $dark-text-color;
|
border-color: var(--color-text-disabled);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background: $dark-text-color;
|
background: var(--color-text-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $dark-text-color;
|
border-color: var(--color-text-disabled);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -165,7 +164,7 @@
|
||||||
&:active,
|
&:active,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: $ui-primary-color;
|
border-color: var(--color-text-primary);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -189,7 +188,7 @@
|
||||||
&__footer {
|
&__footer {
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
color: $dark-text-color;
|
color: var(--color-text-tertiary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
|
|
@ -198,7 +197,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: $dark-text-color;
|
color: var(--color-text-tertiary);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
|
||||||
|
|
@ -208,7 +207,7 @@
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: color.change($dark-text-color, $alpha: 0.1);
|
background-color: var(--color-bg-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -221,13 +220,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.muted .poll {
|
.muted .poll {
|
||||||
color: $dark-text-color;
|
color: var(--color-text-tertiary);
|
||||||
|
|
||||||
&__chart {
|
&__chart {
|
||||||
background: rgba(darken($ui-primary-color, 14%), 0.7);
|
background: rgb(from var(--color-text-brand) r g b / 40%);
|
||||||
|
|
||||||
&.leading {
|
&.leading {
|
||||||
background: color.change($ui-highlight-color, $alpha: 0.5);
|
background: rgb(from var(--color-text-brand) r g b / 60%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
v2.0 | 20110126
|
v2.0 | 20110126
|
||||||
License: none (public domain)
|
License: none (public domain)
|
||||||
|
|
@ -55,32 +53,6 @@ table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports not selector(::-webkit-scrollbar) {
|
html:has(body.custom-scrollbars) {
|
||||||
html {
|
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
|
||||||
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,4 +1,3 @@
|
||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
|
|
||||||
body.rtl {
|
body.rtl {
|
||||||
|
|
@ -42,12 +41,6 @@ body.rtl {
|
||||||
transform: scale(-1, 1);
|
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,
|
.dismissable-banner,
|
||||||
.warning-banner {
|
.warning-banner {
|
||||||
&__action {
|
&__action {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -12,13 +11,13 @@
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
text-align: start;
|
text-align: start;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
|
|
||||||
&.critical {
|
&.critical {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $gold-star;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,7 +32,7 @@
|
||||||
|
|
||||||
& > tbody > tr:nth-child(odd) > td,
|
& > tbody > tr:nth-child(odd) > td,
|
||||||
& > tbody > tr:nth-child(odd) > th {
|
& > tbody > tr:nth-child(odd) > th {
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > tbody > tr:last-child > td,
|
& > tbody > tr:last-child > td,
|
||||||
|
|
@ -42,11 +41,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -84,30 +83,30 @@
|
||||||
& > tbody > tr > td {
|
& > tbody > tr > td {
|
||||||
padding: 11px 10px;
|
padding: 11px 10px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > tbody > tr > th {
|
& > tbody > tr > th {
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.batch-table {
|
&.batch-table {
|
||||||
& > thead > tr > th {
|
& > thead > tr > th {
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
border-top: 1px solid var(--background-border-color);
|
border-top: 1px solid var(--color-border-primary);
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-radius: 4px 0 0;
|
border-radius: 4px 0 0;
|
||||||
border-inline-start: 1px solid var(--background-border-color);
|
border-inline-start: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-radius: 0 4px 0 0;
|
border-radius: 0 4px 0 0;
|
||||||
border-inline-end: 1px solid var(--background-border-color);
|
border-inline-end: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -138,12 +137,12 @@ a.table-action-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-inline-end: 5px;
|
margin-inline-end: 5px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
|
@ -196,8 +195,8 @@ a.table-action-link {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
border-radius: 4px 4px 0 0;
|
border-radius: 4px 4px 0 0;
|
||||||
height: 47px;
|
height: 47px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -213,13 +212,13 @@ a.table-action-link {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__select-all {
|
&__select-all {
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
height: 47px;
|
height: 47px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
color: $secondary-text-color;
|
color: var(--color-text-primary);
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
|
|
@ -248,7 +247,7 @@ a.table-action-link {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
@ -256,16 +255,16 @@ a.table-action-link {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
background: lighten($ui-base-color, 8%);
|
background: var(--color-bg-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__form {
|
&__form {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
|
|
||||||
.fields-row {
|
.fields-row {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
@ -274,13 +273,13 @@ a.table-action-link {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__row {
|
&__row {
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
background: var(--background-color);
|
background: var(--color-bg-primary);
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
@media screen and (max-width: $no-gap-breakpoint) {
|
||||||
.optional &:first-child {
|
.optional &:first-child {
|
||||||
border-top: 1px solid var(--background-border-color);
|
border-top: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -331,7 +330,7 @@ a.table-action-link {
|
||||||
&__extra {
|
&__extra {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -362,21 +361,6 @@ a.table-action-link {
|
||||||
padding: 0;
|
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) {
|
@media screen and (width <= 870px) {
|
||||||
.accounts-table tbody td.optional {
|
.accounts-table tbody td.optional {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use 'variables' as *;
|
@use 'variables' as *;
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.directory {
|
.directory {
|
||||||
&__tag {
|
&__tag {
|
||||||
|
|
@ -12,24 +11,24 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border: 1px solid var(--background-border-color);
|
border: 1px solid var(--color-border-primary);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
box-shadow: 0 0 15px var(--color-shadow-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > a {
|
& > a {
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
background: $ui-base-color;
|
background: var(--color-bg-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active > a {
|
&.active > a {
|
||||||
background: $ui-highlight-color;
|
background: var(--color-bg-brand-base);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,7 +41,7 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
@ -52,7 +51,7 @@
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,7 +59,7 @@
|
||||||
&,
|
&,
|
||||||
small,
|
small,
|
||||||
.trends__item__current {
|
.trends__item__current {
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -70,7 +69,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active .avatar-stack .account__avatar {
|
&.active .avatar-stack .account__avatar {
|
||||||
border-color: $ui-highlight-color;
|
border-color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.trends__item__current {
|
.trends__item__current {
|
||||||
|
|
@ -95,7 +94,7 @@
|
||||||
thead th {
|
thead th {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
|
|
@ -107,7 +106,7 @@
|
||||||
tbody td {
|
tbody td {
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:last-child td {
|
tbody tr:last-child td {
|
||||||
|
|
@ -119,11 +118,11 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $primary-text-color;
|
color: var(--color-text-primary);
|
||||||
|
|
||||||
small {
|
small {
|
||||||
display: block;
|
display: block;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
@ -132,7 +131,7 @@
|
||||||
tbody td.accounts-table__extra {
|
tbody td.accounts-table__extra {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
color: $darker-text-color;
|
color: var(--color-text-secondary);
|
||||||
padding-inline-end: 16px;
|
padding-inline-end: 16px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -142,7 +141,7 @@
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active {
|
&:active {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -159,15 +158,15 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
&.active {
|
&.active {
|
||||||
color: $highlight-text-color;
|
color: var(--color-text-brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.passive {
|
&.passive {
|
||||||
color: $passive-text-color;
|
color: var(--color-text-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active.passive {
|
&.active.passive {
|
||||||
color: $active-passive-text-color;
|
color: var(--color-text-success);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
@use 'mastodon/css_variables';
|
|
||||||
@use 'mastodon/variables';
|
|
||||||
@use 'common';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
@use 'mastodon/css_variables';
|
|
||||||
@use 'mastodon/variables';
|
|
||||||
@use 'common';
|
|
||||||
@use 'contrast/diff';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
:root {
|
|
||||||
/* TEXT TOKENS */
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-grey-50);
|
|
||||||
--color-text-secondary: var(--color-grey-300);
|
|
||||||
--color-text-tertiary: var(--color-grey-400);
|
|
||||||
--color-text-brand: var(--color-indigo-300);
|
|
||||||
--color-text-status-links: var(--color-text-brand);
|
|
||||||
|
|
||||||
/* BORDER TOKENS */
|
|
||||||
|
|
||||||
--border-strength-primary: 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,8 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
@use 'mastodon-light/css_variables';
|
|
||||||
@use 'mastodon/variables' with (
|
|
||||||
$emojis-requiring-inversion: 'chains'
|
|
||||||
);
|
|
||||||
@use 'common';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
|
|
@ -1,214 +0,0 @@
|
||||||
@use '../mastodon/theme_utils' as utils;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-black: #000;
|
|
||||||
--color-grey-950: #181821;
|
|
||||||
--color-grey-800: #292938;
|
|
||||||
--color-grey-700: #444664;
|
|
||||||
--color-grey-600: #545778;
|
|
||||||
--color-grey-500: #696d91;
|
|
||||||
--color-grey-400: #8b8dac;
|
|
||||||
--color-grey-300: #b4b6cb;
|
|
||||||
--color-grey-200: #d8d9e3;
|
|
||||||
--color-grey-100: #f0f0f5;
|
|
||||||
--color-grey-50: #f0f1ff;
|
|
||||||
--color-white: #fff;
|
|
||||||
--color-indigo-600: #6147e6;
|
|
||||||
--color-indigo-400: #8886ff;
|
|
||||||
--color-indigo-300: #a5abfd;
|
|
||||||
--color-indigo-200: #c8cdfe;
|
|
||||||
--color-indigo-100: #e0e3ff;
|
|
||||||
--color-indigo-50: #f0f1ff;
|
|
||||||
--color-red-500: #ff637e;
|
|
||||||
--color-red-600: #ec003f;
|
|
||||||
--color-yellow-400: #ffb900;
|
|
||||||
--color-yellow-600: #e17100;
|
|
||||||
--color-green-400: #05df72;
|
|
||||||
--color-green-600: #00a63e;
|
|
||||||
|
|
||||||
/* TEXT TOKENS */
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-grey-950);
|
|
||||||
--color-text-secondary: var(--color-grey-600);
|
|
||||||
--color-text-tertiary: var(--color-grey-500);
|
|
||||||
--color-text-on-inverted: var(--color-white);
|
|
||||||
--color-text-brand: var(--color-indigo-600);
|
|
||||||
--color-text-brand-soft: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-text-primary),
|
|
||||||
var(--color-text-brand)
|
|
||||||
);
|
|
||||||
--color-text-on-brand-base: var(--color-white);
|
|
||||||
--color-text-error: var(--color-red-600);
|
|
||||||
--color-text-on-error-base: var(--color-white);
|
|
||||||
--color-text-warning: var(--color-yellow-600);
|
|
||||||
--color-text-on-warning-base: var(--color-white);
|
|
||||||
--color-text-success: var(--color-green-600);
|
|
||||||
--color-text-on-success-base: var(--color-white);
|
|
||||||
--color-text-disabled: var(--color-grey-300);
|
|
||||||
--color-text-on-disabled: var(--color-grey-200);
|
|
||||||
--color-text-bookmark-highlight: var(--color-text-error);
|
|
||||||
--color-text-favourite-highlight: var(--color-text-warning);
|
|
||||||
--color-text-on-media: var(--color-white);
|
|
||||||
--color-text-status-links: var(--color-text-brand);
|
|
||||||
|
|
||||||
/* BACKGROUND TOKENS */
|
|
||||||
|
|
||||||
// Neutrals
|
|
||||||
--color-bg-primary: var(--color-white);
|
|
||||||
--overlay-strength-secondary: 5%;
|
|
||||||
--color-bg-secondary-base: var(--color-grey-600);
|
|
||||||
--color-bg-secondary: #{color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
||||||
)};
|
|
||||||
--color-bg-secondary-solid: #{color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
||||||
)};
|
|
||||||
--color-bg-tertiary: #{color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Utility
|
|
||||||
--color-bg-ambient: var(--color-bg-primary);
|
|
||||||
--color-bg-elevated: var(--color-bg-primary);
|
|
||||||
--color-bg-inverted: var(--color-grey-950);
|
|
||||||
--color-bg-media-base: var(--color-black);
|
|
||||||
--color-bg-media-strength: 65%;
|
|
||||||
--color-bg-media: #{utils.css-alpha(
|
|
||||||
var(--color-bg-media-base),
|
|
||||||
var(--color-bg-media-strength)
|
|
||||||
)};
|
|
||||||
--color-bg-overlay: var(--color-bg-primary);
|
|
||||||
--color-bg-disabled: var(--color-grey-400);
|
|
||||||
|
|
||||||
// Brand
|
|
||||||
--overlay-strength-brand: 8%;
|
|
||||||
--color-bg-brand-base: var(--color-indigo-600);
|
|
||||||
--color-bg-brand-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
black var(--overlay-strength-brand)
|
|
||||||
);
|
|
||||||
--color-bg-brand-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
calc(var(--overlay-strength-brand) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-brand-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
var(--overlay-strength-brand)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Error
|
|
||||||
--overlay-strength-error: 12%;
|
|
||||||
--color-bg-error-base: var(--color-red-600);
|
|
||||||
--color-bg-error-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
black var(--overlay-strength-error)
|
|
||||||
);
|
|
||||||
--color-bg-error-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
calc(var(--overlay-strength-error) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
var(--overlay-strength-error)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
--overlay-strength-warning: 10%;
|
|
||||||
--color-bg-warning-base: var(--color-yellow-600);
|
|
||||||
--color-bg-warning-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
black var(--overlay-strength-warning)
|
|
||||||
);
|
|
||||||
--color-bg-warning-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
calc(var(--overlay-strength-warning) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
var(--overlay-strength-warning)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Success
|
|
||||||
--overlay-strength-success: 15%;
|
|
||||||
--color-bg-success-base: var(--color-green-600);
|
|
||||||
--color-bg-success-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
black var(--overlay-strength-success)
|
|
||||||
);
|
|
||||||
--color-bg-success-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
calc(var(--overlay-strength-success) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
var(--overlay-strength-success)
|
|
||||||
)};
|
|
||||||
|
|
||||||
/* BORDER TOKENS */
|
|
||||||
|
|
||||||
--border-strength-primary: 15%;
|
|
||||||
--color-border-primary: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-grey-950) var(--border-strength-primary)
|
|
||||||
);
|
|
||||||
--color-border-media: rgb(252 248 255 / 15%);
|
|
||||||
--color-border-on-bg-secondary: var(--color-grey-200);
|
|
||||||
--color-border-on-bg-brand-softer: var(--color-indigo-200);
|
|
||||||
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-error),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-warning),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-success),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-inverted: var(--color-border-primary);
|
|
||||||
|
|
||||||
/* SHADOW TOKENS */
|
|
||||||
|
|
||||||
--shadow-strength-primary: 30%;
|
|
||||||
--color-shadow-primary: #{utils.css-alpha(
|
|
||||||
var(--color-black),
|
|
||||||
var(--shadow-strength-primary)
|
|
||||||
)};
|
|
||||||
--dropdown-shadow:
|
|
||||||
0 20px 25px -5px var(--color-shadow-primary),
|
|
||||||
0 8px 10px -6px var(--color-shadow-primary);
|
|
||||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
|
||||||
|
|
||||||
/* GRAPHS/CHARTS TOKENS */
|
|
||||||
|
|
||||||
--color-graph-primary-stroke: var(--color-text-brand);
|
|
||||||
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
|
||||||
--color-graph-warning-stroke: var(--color-text-warning);
|
|
||||||
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
|
||||||
--color-graph-disabled-stroke: var(--color-text-disabled);
|
|
||||||
--color-graph-disabled-fill: var(--color-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(--color-text-brand);
|
|
||||||
--avatar-border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
@mixin search-input {
|
|
||||||
outline: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: none;
|
|
||||||
font-family: inherit;
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--color-border-on-bg-secondary);
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: normal;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin search-popout {
|
|
||||||
background: var(--color-bg-elevated);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
box-shadow: 2px 4px 15px var(--color-shadow-primary);
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--color-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(--color-text-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
// 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;
|
|
||||||
|
|
@ -1,130 +0,0 @@
|
||||||
@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(--color-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(--color-bg-brand-base);
|
|
||||||
color: var(--color-text-on-brand-base);
|
|
||||||
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(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hint {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-languages {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
appearance: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
outline: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
resize: vertical;
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding-inline-start: 10px;
|
|
||||||
padding-inline-end: 30px;
|
|
||||||
height: 41px;
|
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
%emoji-color-inversion {
|
|
||||||
filter: invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emojione {
|
|
||||||
@each $emoji in $emojis-requiring-inversion {
|
|
||||||
&[title=':#{$emoji}:'] {
|
|
||||||
@extend %emoji-color-inversion;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,411 +0,0 @@
|
||||||
@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(--color-bg-brand-softer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__img {
|
|
||||||
height: 130px;
|
|
||||||
position: relative;
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
border: 1px solid var(--color-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(--color-bg-primary);
|
|
||||||
border: 1px solid var(--color-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(--color-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(--color-text-primary);
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-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(--color-text-primary);
|
|
||||||
font-weight: 500;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
color: var(--color-bg-primary);
|
|
||||||
background: var(--color-text-primary);
|
|
||||||
border-radius: 100px;
|
|
||||||
cursor: default;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.older,
|
|
||||||
.newer {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.older {
|
|
||||||
float: left;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newer {
|
|
||||||
float: right;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
cursor: default;
|
|
||||||
color: var(--color-text-disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 700px) {
|
|
||||||
padding: 30px 20px;
|
|
||||||
|
|
||||||
.page {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newer,
|
|
||||||
.older {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nothing-here {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
background: var(--color-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(--color-border-primary);
|
|
||||||
|
|
||||||
@media screen and (min-width: ($no-gap-breakpoint - 1)) {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--no-toolbar {
|
|
||||||
border-top: 1px solid var(--color-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(--color-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(--color-bg-secondary);
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.information-badge {
|
|
||||||
&.superapp {
|
|
||||||
color: var(--color-text-success);
|
|
||||||
background-color: var(--color-bg-success-softer);
|
|
||||||
border-color: var(--color-border-on-bg-success-softer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-role {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 4px;
|
|
||||||
padding-inline-end: 8px;
|
|
||||||
border: 1px solid var(--color-text-brand);
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
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(--color-text-error);
|
|
||||||
background-color: var(--color-bg-error-softer);
|
|
||||||
border-color: var(--color-border-on-bg-error-softer);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header__fields {
|
|
||||||
max-width: 100vw;
|
|
||||||
padding: 0;
|
|
||||||
margin: 15px -15px -15px;
|
|
||||||
border: 0 none;
|
|
||||||
border-top: 1px solid var(--color-border-primary);
|
|
||||||
border-bottom: 1px solid var(--color-border-primary);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
dl {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid var(--color-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(--color-text-primary);
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.verified {
|
|
||||||
border: 1px solid var(--color-border-on-bg-success-softer);
|
|
||||||
background: var(--color-bg-success-softer);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-success);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mark {
|
|
||||||
color: var(--color-text-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory__tag .trends__item__current {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending-account {
|
|
||||||
&__header {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-hint {
|
|
||||||
font-weight: normal !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--muted {
|
|
||||||
color: var(--color-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(--color-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(--color-text-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--attention {
|
|
||||||
color: var(--color-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(--color-text-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--attention .accounts-table {
|
|
||||||
tbody td.accounts-table__extra,
|
|
||||||
&__count,
|
|
||||||
&__count small {
|
|
||||||
color: var(--color-text-warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,342 +0,0 @@
|
||||||
@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(--color-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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,300 +0,0 @@
|
||||||
@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(--color-bg-ambient);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--color-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(--color-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(--color-text-error);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0.85em;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
display: inline;
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--color-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,166 +0,0 @@
|
||||||
@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(--color-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(--color-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(--color-text-primary);
|
|
||||||
|
|
||||||
.username {
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--color-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(--color-text-brand);
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,228 +0,0 @@
|
||||||
@use 'theme_utils' as utils;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-black: #000;
|
|
||||||
--color-grey-950: #181821;
|
|
||||||
--color-grey-800: #292938;
|
|
||||||
--color-grey-700: #444664;
|
|
||||||
--color-grey-600: #545778;
|
|
||||||
--color-grey-500: #696d91;
|
|
||||||
--color-grey-400: #8b8dac;
|
|
||||||
--color-grey-300: #b4b6cb;
|
|
||||||
--color-grey-200: #d8d9e3;
|
|
||||||
--color-grey-100: #f0f0f5;
|
|
||||||
--color-grey-50: #f0f1ff;
|
|
||||||
--color-white: #fff;
|
|
||||||
--color-indigo-600: #6147e6;
|
|
||||||
--color-indigo-400: #8886ff;
|
|
||||||
--color-indigo-300: #a5abfd;
|
|
||||||
--color-indigo-200: #c8cdfe;
|
|
||||||
--color-indigo-100: #e0e3ff;
|
|
||||||
--color-indigo-50: #f0f1ff;
|
|
||||||
--color-red-500: #ff637e;
|
|
||||||
--color-red-600: #ec003f;
|
|
||||||
--color-yellow-400: #ffb900;
|
|
||||||
--color-yellow-600: #e17100;
|
|
||||||
--color-green-400: #05df72;
|
|
||||||
--color-green-600: #00a63e;
|
|
||||||
|
|
||||||
/* TEXT TOKENS */
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-grey-50);
|
|
||||||
--color-text-secondary: var(--color-grey-400);
|
|
||||||
--color-text-tertiary: var(--color-grey-500);
|
|
||||||
--color-text-on-inverted: var(--color-grey-950);
|
|
||||||
--color-text-brand: var(--color-indigo-400);
|
|
||||||
--color-text-brand-soft: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-text-primary),
|
|
||||||
var(--color-text-brand)
|
|
||||||
);
|
|
||||||
--color-text-on-brand-base: var(--color-white);
|
|
||||||
--color-text-error: var(--color-red-500);
|
|
||||||
--color-text-on-error-base: var(--color-white);
|
|
||||||
--color-text-warning: var(--color-yellow-400);
|
|
||||||
--color-text-on-warning-base: var(--color-white);
|
|
||||||
--color-text-success: var(--color-green-400);
|
|
||||||
--color-text-on-success-base: var(--color-white);
|
|
||||||
--color-text-disabled: var(--color-grey-600);
|
|
||||||
--color-text-on-disabled: var(--color-grey-400);
|
|
||||||
--color-text-bookmark-highlight: var(--color-text-error);
|
|
||||||
--color-text-favourite-highlight: var(--color-text-warning);
|
|
||||||
--color-text-on-media: var(--color-white);
|
|
||||||
--color-text-status-links: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-text-primary),
|
|
||||||
var(--color-text-secondary)
|
|
||||||
);
|
|
||||||
|
|
||||||
/* BACKGROUND TOKENS */
|
|
||||||
|
|
||||||
// Neutrals
|
|
||||||
--color-bg-primary: var(--color-grey-950);
|
|
||||||
--overlay-strength-secondary: 10%;
|
|
||||||
--color-bg-secondary-base: var(--color-indigo-200);
|
|
||||||
--color-bg-secondary: #{utils.css-alpha(
|
|
||||||
var(--color-bg-secondary-base),
|
|
||||||
var(--overlay-strength-secondary)
|
|
||||||
)};
|
|
||||||
--color-bg-secondary-solid: color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
||||||
);
|
|
||||||
--color-bg-tertiary: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
|
||||||
);
|
|
||||||
|
|
||||||
// Utility
|
|
||||||
--color-bg-ambient: var(--color-bg-primary);
|
|
||||||
--color-bg-elevated: var(--color-bg-primary);
|
|
||||||
--color-bg-inverted: var(--color-grey-50);
|
|
||||||
--color-bg-media-base: var(--color-black);
|
|
||||||
--color-bg-media-strength: 65%;
|
|
||||||
--color-bg-media: #{utils.css-alpha(
|
|
||||||
var(--color-bg-media-base),
|
|
||||||
var(--color-bg-media-strength)
|
|
||||||
)};
|
|
||||||
--color-bg-overlay: var(--color-black);
|
|
||||||
--color-bg-disabled: var(--color-grey-700);
|
|
||||||
|
|
||||||
// Brand
|
|
||||||
--overlay-strength-brand: 10%;
|
|
||||||
--color-bg-brand-base: var(--color-indigo-600);
|
|
||||||
--color-bg-brand-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
black var(--overlay-strength-brand)
|
|
||||||
);
|
|
||||||
--color-bg-brand-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
calc(var(--overlay-strength-brand) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-brand-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
var(--overlay-strength-brand)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Error
|
|
||||||
--overlay-strength-error: 12%;
|
|
||||||
--color-bg-error-base: var(--color-red-600);
|
|
||||||
--color-bg-error-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
black var(--overlay-strength-error)
|
|
||||||
);
|
|
||||||
--color-bg-error-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
calc(var(--overlay-strength-error) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
var(--overlay-strength-error)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
--overlay-strength-warning: 10%;
|
|
||||||
--color-bg-warning-base: var(--color-yellow-600);
|
|
||||||
--color-bg-warning-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
black var(--overlay-strength-warning)
|
|
||||||
);
|
|
||||||
--color-bg-warning-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
calc(var(--overlay-strength-warning) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
var(--overlay-strength-warning)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Success
|
|
||||||
--overlay-strength-success: 15%;
|
|
||||||
--color-bg-success-base: var(--color-green-600);
|
|
||||||
--color-bg-success-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
black var(--overlay-strength-success)
|
|
||||||
);
|
|
||||||
--color-bg-success-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
calc(var(--overlay-strength-success) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
var(--overlay-strength-success)
|
|
||||||
)};
|
|
||||||
|
|
||||||
/* BORDER TOKENS */
|
|
||||||
|
|
||||||
--border-strength-primary: 18%;
|
|
||||||
--color-border-primary: #{utils.css-alpha(
|
|
||||||
var(--color-indigo-200),
|
|
||||||
var(--border-strength-primary)
|
|
||||||
)};
|
|
||||||
--color-border-media: rgb(252 248 255 / 15%);
|
|
||||||
--color-border-on-bg-secondary: #{utils.css-alpha(
|
|
||||||
var(--color-indigo-200),
|
|
||||||
calc(var(--border-strength-primary) / 1.5)
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-brand-softer: var(--color-border-primary);
|
|
||||||
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-error),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-warning),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-success),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-inverted: var(--color-border-primary);
|
|
||||||
|
|
||||||
/* SHADOW TOKENS */
|
|
||||||
|
|
||||||
--shadow-strength-primary: 80%;
|
|
||||||
--color-shadow-primary: #{utils.css-alpha(
|
|
||||||
var(--color-black),
|
|
||||||
var(--shadow-strength-primary)
|
|
||||||
)};
|
|
||||||
--dropdown-shadow:
|
|
||||||
0 20px 25px -5px var(--color-shadow-primary),
|
|
||||||
0 8px 10px -6px var(--color-shadow-primary);
|
|
||||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
|
||||||
|
|
||||||
/* GRAPHS/CHARTS TOKENS */
|
|
||||||
|
|
||||||
--color-graph-primary-stroke: var(--color-text-brand);
|
|
||||||
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
|
||||||
--color-graph-warning-stroke: var(--color-text-warning);
|
|
||||||
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
|
||||||
--color-graph-disabled-stroke: var(--color-text-disabled);
|
|
||||||
--color-graph-disabled-fill: var(--color-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(--color-text-brand);
|
|
||||||
--avatar-border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
// Variable for easily inverting directional UI elements,
|
|
||||||
--text-x-direction: 1;
|
|
||||||
|
|
||||||
&.rtl {
|
|
||||||
--text-x-direction: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
@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(--color-bg-primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: var(--color-bg-brand-softer);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__num,
|
|
||||||
&__text {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--color-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(--color-bg-brand-base);
|
|
||||||
color: var(--color-text-on-brand-base);
|
|
||||||
transition: all 100ms ease-in;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-bg-brand-base-hover);
|
|
||||||
transition: all 200ms ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.positive {
|
|
||||||
background: var(--color-bg-success-softer);
|
|
||||||
color: var(--color-text-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.negative {
|
|
||||||
background: var(--color-bg-error-softer);
|
|
||||||
color: var(--color-text-error);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,248 +0,0 @@
|
||||||
@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(--color-bg-tertiary);
|
|
||||||
border-bottom: 1px solid var(--color-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(--color-text-secondary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-text-primary),
|
|
||||||
var(--color-text-secondary)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchor-selected {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-text-brand-soft);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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(--color-text-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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(--color-bg-secondary);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
border: 1px solid var(--color-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(--color-bg-brand-softer);
|
|
||||||
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(--color-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;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,19 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.modal-layout {
|
|
||||||
background: var(--color-bg-brand-softer);
|
|
||||||
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(--color-bg-brand-softer);
|
|
||||||
|
|
||||||
/* 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,232 +0,0 @@
|
||||||
@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(--color-text-brand) r g b / 60%);
|
|
||||||
height: 5px;
|
|
||||||
min-width: 1%;
|
|
||||||
|
|
||||||
&.leading {
|
|
||||||
background: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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(--color-text-brand) r g b / 60%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-progress-value {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: rgb(from var(--color-text-brand) 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(--color-text-primary);
|
|
||||||
outline: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
border: 1px solid var(--color-text-secondary);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
@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(--color-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(--color-text-success);
|
|
||||||
border-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: var(--color-bg-success-base);
|
|
||||||
border-color: var(--color-text-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
outline: 0 !important;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
outline: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
border-color: var(--color-text-disabled);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--color-text-disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--color-text-disabled);
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option.editable &__input,
|
|
||||||
&__option.disabled &__input {
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--color-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(--color-text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
display: inline;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
color: var(--color-text-tertiary);
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
margin-inline-end: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.muted .poll {
|
|
||||||
color: var(--color-text-tertiary);
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
background: rgb(from var(--color-text-brand) r g b / 40%);
|
|
||||||
|
|
||||||
&.leading {
|
|
||||||
background: rgb(from var(--color-text-brand) r g b / 60%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
/* 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(--color-text-secondary) var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,375 +0,0 @@
|
||||||
@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(--color-border-primary);
|
|
||||||
text-align: start;
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
|
|
||||||
&.critical {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-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(--color-bg-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr:last-child > td,
|
|
||||||
& > tbody > tr:last-child > th {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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(--color-border-primary);
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr > th {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.batch-table {
|
|
||||||
& > thead > tr > th {
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
border-top: 1px solid var(--color-border-primary);
|
|
||||||
border-bottom: 1px solid var(--color-border-primary);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-radius: 4px 0 0;
|
|
||||||
border-inline-start: 1px solid var(--color-border-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-radius: 0 4px 0 0;
|
|
||||||
border-inline-end: 1px solid var(--color-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(--color-text-secondary);
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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(--color-border-primary);
|
|
||||||
background: var(--color-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(--color-bg-primary);
|
|
||||||
height: 47px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
border-top: 0;
|
|
||||||
color: var(--color-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(--color-text-brand);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__form {
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
border-top: 0;
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
|
|
||||||
.fields-row {
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__row {
|
|
||||||
border: 1px solid var(--color-border-primary);
|
|
||||||
border-top: 0;
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
.optional &:first-child {
|
|
||||||
border-top: 1px solid var(--color-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(--color-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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
@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(--color-border-primary);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
box-shadow: 0 0 15px var(--color-shadow-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: var(--color-bg-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > a {
|
|
||||||
background: var(--color-bg-brand-base);
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled > div {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 15px;
|
|
||||||
margin-top: 8px;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active h4 {
|
|
||||||
&,
|
|
||||||
small,
|
|
||||||
.trends__item__current {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-stack {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: (36px + 4px) * 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .avatar-stack .account__avatar {
|
|
||||||
border-color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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(--color-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(--color-border-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:last-child td {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td.accounts-table__extra {
|
|
||||||
width: 120px;
|
|
||||||
text-align: end;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
padding-inline-end: 16px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__comment {
|
|
||||||
width: 50%;
|
|
||||||
vertical-align: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td.accounts-table__interrelationships {
|
|
||||||
width: 21px;
|
|
||||||
padding-inline-end: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
&.active {
|
|
||||||
color: var(--color-text-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.passive {
|
|
||||||
color: var(--color-text-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active.passive {
|
|
||||||
color: var(--color-text-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
tbody td.optional {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -40,14 +40,7 @@ export function MastodonThemes(): Plugin {
|
||||||
|
|
||||||
// Get all files mentioned in the themes.yml file.
|
// Get all files mentioned in the themes.yml file.
|
||||||
const themes = await loadThemesFromConfig(projectRoot);
|
const themes = await loadThemesFromConfig(projectRoot);
|
||||||
const allThemes = {
|
for (const [themeName, themePath] of Object.entries(themes)) {
|
||||||
...themes,
|
|
||||||
default_theme_tokens: 'styles_new/application.scss',
|
|
||||||
'mastodon-light_theme_tokens': 'styles_new/mastodon-light.scss',
|
|
||||||
contrast_theme_tokens: 'styles_new/contrast.scss',
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const [themeName, themePath] of Object.entries(allThemes)) {
|
|
||||||
entrypoints[`themes/${themeName}`] = path.resolve(jsRoot, themePath);
|
entrypoints[`themes/${themeName}`] = path.resolve(jsRoot, themePath);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -70,11 +63,7 @@ export function MastodonThemes(): Plugin {
|
||||||
// Rewrite the URL to the entrypoint if it matches a theme.
|
// Rewrite the URL to the entrypoint if it matches a theme.
|
||||||
if (isThemeFile(req.url ?? '', themes)) {
|
if (isThemeFile(req.url ?? '', themes)) {
|
||||||
const themeName = pathToThemeName(req.url ?? '');
|
const themeName = pathToThemeName(req.url ?? '');
|
||||||
const themePath = `/packs-dev/${themes[themeName]}`;
|
req.url = `/packs-dev/${themes[themeName]}`;
|
||||||
const isThemeTokenRequest = req.url.includes('_theme_tokens');
|
|
||||||
req.url = isThemeTokenRequest
|
|
||||||
? themePath.replace('styles/', 'styles_new/')
|
|
||||||
: themePath;
|
|
||||||
}
|
}
|
||||||
next();
|
next();
|
||||||
});
|
});
|
||||||
|
|
@ -87,7 +76,7 @@ export function MastodonThemes(): Plugin {
|
||||||
const themePathToName = new Map(
|
const themePathToName = new Map(
|
||||||
Object.entries(themes).map(([themeName, themePath]) => [
|
Object.entries(themes).map(([themeName, themePath]) => [
|
||||||
path.resolve(jsRoot, themePath),
|
path.resolve(jsRoot, themePath),
|
||||||
`/themes/${areThemeTokensEnabled() ? `${themeName}_theme_tokens` : themeName}`,
|
`/themes/${themeName}`,
|
||||||
]),
|
]),
|
||||||
);
|
);
|
||||||
const themeNames = new Set<string>();
|
const themeNames = new Set<string>();
|
||||||
|
|
@ -150,7 +139,6 @@ async function loadThemesFromConfig(root: string) {
|
||||||
console.warn(`Invalid theme path "${themePath}" in themes.yml, skipping`);
|
console.warn(`Invalid theme path "${themePath}" in themes.yml, skipping`);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
themes[themeName] = themePath;
|
themes[themeName] = themePath;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -162,7 +150,7 @@ async function loadThemesFromConfig(root: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function pathToThemeName(file: string) {
|
function pathToThemeName(file: string) {
|
||||||
const basename = path.basename(file.replace('_theme_tokens', ''));
|
const basename = path.basename(file);
|
||||||
return basename.split(/[.?]/)[0] ?? '';
|
return basename.split(/[.?]/)[0] ?? '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -174,12 +162,3 @@ function isThemeFile(file: string, themes: Themes) {
|
||||||
const basename = pathToThemeName(file);
|
const basename = pathToThemeName(file);
|
||||||
return basename in themes;
|
return basename in themes;
|
||||||
}
|
}
|
||||||
|
|
||||||
function areThemeTokensEnabled() {
|
|
||||||
const raw = process.env.EXPERIMENTAL_FEATURES ?? '';
|
|
||||||
const features = raw
|
|
||||||
.split(',')
|
|
||||||
.map((s) => s.trim())
|
|
||||||
.filter(Boolean);
|
|
||||||
return features.includes('theme_tokens');
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ module.exports = {
|
||||||
extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
|
extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
|
||||||
ignoreFiles: [
|
ignoreFiles: [
|
||||||
'app/javascript/styles/mastodon/reset.scss',
|
'app/javascript/styles/mastodon/reset.scss',
|
||||||
'app/javascript/styles_new/mastodon/reset.scss',
|
|
||||||
'coverage/**/*',
|
'coverage/**/*',
|
||||||
'node_modules/**/*',
|
'node_modules/**/*',
|
||||||
'public/assets/**/*',
|
'public/assets/**/*',
|
||||||
|
|
@ -32,7 +31,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
'files': ['app/javascript/styles/entrypoints/mailer.scss', 'app/javascript/styles_new/entrypoints/mailer.scss'],
|
'files': ['app/javascript/styles/entrypoints/mailer.scss'],
|
||||||
rules: {
|
rules: {
|
||||||
'property-no-unknown': [
|
'property-no-unknown': [
|
||||||
true,
|
true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user