Merge tag 'v4.4.0-rc.1' into chinwag-next
This commit is contained in:
commit
fbbcaf4efd
2660 changed files with 83548 additions and 52192 deletions
|
|
@ -1,24 +1,27 @@
|
|||
@import 'mastodon/mixins';
|
||||
@import 'mastodon/variables';
|
||||
@import 'fonts/roboto';
|
||||
@import 'fonts/roboto-mono';
|
||||
@use 'mastodon/functions';
|
||||
@use 'mastodon/mixins';
|
||||
@use 'mastodon/variables';
|
||||
@use 'mastodon/css_variables';
|
||||
@use 'fonts/roboto';
|
||||
@use 'fonts/roboto-mono';
|
||||
|
||||
@import 'mastodon/reset';
|
||||
@import 'mastodon/basics';
|
||||
@import 'mastodon/branding';
|
||||
@import 'mastodon/containers';
|
||||
@import 'mastodon/lists';
|
||||
@import 'mastodon/widgets';
|
||||
@import 'mastodon/forms';
|
||||
@import 'mastodon/accounts';
|
||||
@import 'mastodon/components';
|
||||
@import 'mastodon/polls';
|
||||
@import 'mastodon/modal';
|
||||
@import 'mastodon/emoji_picker';
|
||||
@import 'mastodon/about';
|
||||
@import 'mastodon/tables';
|
||||
@import 'mastodon/admin';
|
||||
@import 'mastodon/dashboard';
|
||||
@import 'mastodon/rtl';
|
||||
@import 'mastodon/accessibility';
|
||||
@import 'mastodon/rich_text';
|
||||
@use 'mastodon/reset';
|
||||
@use 'mastodon/basics';
|
||||
@use 'mastodon/branding';
|
||||
@use 'mastodon/containers';
|
||||
@use 'mastodon/lists';
|
||||
@use 'mastodon/widgets';
|
||||
@use 'mastodon/forms';
|
||||
@use 'mastodon/accounts';
|
||||
@use 'mastodon/components';
|
||||
@use 'mastodon/polls';
|
||||
@use 'mastodon/modal';
|
||||
@use 'mastodon/emoji_picker';
|
||||
@use 'mastodon/annual_reports';
|
||||
@use 'mastodon/about';
|
||||
@use 'mastodon/tables';
|
||||
@use 'mastodon/admin';
|
||||
@use 'mastodon/dashboard';
|
||||
@use 'mastodon/rtl';
|
||||
@use 'mastodon/accessibility';
|
||||
@use 'mastodon/rich_text';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import 'contrast/variables';
|
||||
@import 'application';
|
||||
@import 'contrast/diff';
|
||||
@use 'contrast/variables';
|
||||
@use 'application';
|
||||
@use 'contrast/diff';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use '../mastodon/variables' as *;
|
||||
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
.edit-indicator__content a,
|
||||
|
|
@ -35,10 +37,6 @@
|
|||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.report-dialog-modal__textarea::placeholder {
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
@use '../mastodon/functions' as *;
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$black: #000;
|
||||
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
||||
|
|
@ -11,12 +13,13 @@ $ui-primary-color: $classic-primary-color !default;
|
|||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
|
||||
$action-button-color: lighten($ui-base-color, 50%);
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !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,8 +1,8 @@
|
|||
@import 'fonts/inter';
|
||||
@use '../fonts/inter';
|
||||
|
||||
body {
|
||||
accent-color: #6364ff;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
margin: 0;
|
||||
background-color: #f3f2f5;
|
||||
padding: 0;
|
||||
|
|
@ -45,7 +45,7 @@ table + p {
|
|||
.email {
|
||||
min-width: 280px;
|
||||
font-family: Inter, 'Lucida Grande', sans-serif;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
color: #17063b;
|
||||
background-color: #f3f2f5;
|
||||
}
|
||||
|
|
@ -173,7 +173,9 @@ table + p {
|
|||
}
|
||||
|
||||
.email-prose {
|
||||
p {
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
color: #17063b;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
|
@ -257,7 +259,7 @@ table + p {
|
|||
.email-header-td {
|
||||
padding: 16px 32px;
|
||||
background-color: #1b001f;
|
||||
background-image: url('../images/mailer-new/common/header-bg-start.png');
|
||||
background-image: url('../../images/mailer-new/common/header-bg-start.png');
|
||||
background-position: left top;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
|
@ -424,7 +426,7 @@ table + p {
|
|||
|
||||
// Body content
|
||||
.email-body-td {
|
||||
background-image: url('../images/mailer-new/common/header-bg-end.png');
|
||||
background-image: url('../../images/mailer-new/common/header-bg-end.png');
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
@ -920,7 +922,7 @@ table + p {
|
|||
// Extra content on light purple background
|
||||
.email-extra-wave {
|
||||
height: 42px;
|
||||
background-image: url('../images/mailer-new/welcome/purple-extra-soft-wave.png');
|
||||
background-image: url('../../images/mailer-new/welcome/purple-extra-soft-wave.png');
|
||||
background-position: bottom center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
@ -928,7 +930,7 @@ table + p {
|
|||
.email-extra-td {
|
||||
padding: 32px 32px 24px;
|
||||
background-color: #f0f0ff;
|
||||
background-image: url('../images/mailer-new/welcome/purple-extra-soft-spacer.png'); // Using an image to maintain the color even in forced dark modes
|
||||
background-image: url('../../images/mailer-new/welcome/purple-extra-soft-spacer.png'); // Using an image to maintain the color even in forced dark modes
|
||||
|
||||
.email-column-td {
|
||||
padding-top: 8px;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: Inter;
|
||||
src: url('../fonts/inter/inter-variable-font-slnt-wght.woff2')
|
||||
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; /* stylelint-disable-line property-no-unknown -- Proprietary property for Outlook on Windows. */
|
||||
mso-generic-font-family: swiss;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@
|
|||
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')
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
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')
|
||||
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;
|
||||
|
|
@ -16,10 +16,10 @@
|
|||
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')
|
||||
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;
|
||||
|
|
@ -30,10 +30,10 @@
|
|||
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')
|
||||
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;
|
||||
|
|
@ -44,10 +44,10 @@
|
|||
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')
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'mastodon-light/variables';
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
@use 'mastodon-light/variables';
|
||||
@use 'mastodon-light/css_variables';
|
||||
@use 'application';
|
||||
@use 'mastodon-light/diff';
|
||||
|
|
|
|||
21
app/javascript/styles/mastodon-light/css_variables.scss
Normal file
21
app/javascript/styles/mastodon-light/css_variables.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@use 'sass:color';
|
||||
@use '../mastodon/variables' as *;
|
||||
@use 'variables' as *;
|
||||
@use '../mastodon/functions' as *;
|
||||
|
||||
body {
|
||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
||||
--dropdown-background-color: #fff;
|
||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
||||
--modal-background-color: var(--background-color-tint);
|
||||
--background-border-color: hsl(240deg, 25%, 88%);
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||
--background-filter: blur(10px);
|
||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
|
||||
--rich-text-container-color: rgba(255, 216, 231, 100%);
|
||||
--rich-text-text-color: rgba(114, 47, 83, 100%);
|
||||
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
|
||||
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
|
||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
||||
}
|
||||
|
|
@ -1,8 +1,17 @@
|
|||
// 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,
|
||||
|
|
@ -87,18 +96,6 @@
|
|||
color: $white;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor .search .search__input {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.upload-progress__backdrop {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
|
@ -108,17 +105,6 @@
|
|||
background: lighten($white, 4%);
|
||||
}
|
||||
|
||||
// Change the background colors of status__content__spoiler-link
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content .status__content__spoiler-link {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.account-gallery__item a {
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
|
@ -132,9 +118,7 @@
|
|||
.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 .block-button,
|
||||
.simple_form .button,
|
||||
.simple_form button {
|
||||
.simple_form button:not(.button, .link-button) {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
|
@ -147,6 +131,11 @@
|
|||
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 {
|
||||
|
|
@ -154,8 +143,12 @@
|
|||
}
|
||||
|
||||
.reactions-bar__item.active {
|
||||
background-color: mix($white, $ui-highlight-color, 80%);
|
||||
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
|
||||
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 {
|
||||
|
|
@ -244,7 +237,7 @@
|
|||
|
||||
// Change the default colors used on some parts of the profile pages
|
||||
.activity-stream-tabs {
|
||||
background: $account-background-color;
|
||||
background: $white;
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
|
|
@ -278,36 +271,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&--under-tabs {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.entry {
|
||||
background: $account-background-color;
|
||||
|
||||
.detailed-status.light,
|
||||
.more.light,
|
||||
.status.light {
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.status.light {
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accounts-grid {
|
||||
.account-grid-card {
|
||||
.controls {
|
||||
|
|
@ -411,13 +374,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mute-modal select {
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: $simple-background-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, 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
background-color: rgba($ui-highlight-color, 0.1);
|
||||
|
||||
|
|
@ -447,17 +403,35 @@
|
|||
color: lighten($ui-highlight-color, 8%);
|
||||
}
|
||||
|
||||
.compose-form .autosuggest-textarea__textarea,
|
||||
.compose-form__highlightable,
|
||||
.autosuggest-textarea__suggestions,
|
||||
.search__input,
|
||||
.search__popout,
|
||||
.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: rgba($ui-highlight-color, 0.1);
|
||||
border-bottom-color: rgba($ui-highlight-color, 0.3);
|
||||
|
|
@ -525,6 +499,13 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
|
||||
.notification-group--annual-report {
|
||||
.notification-group__icon,
|
||||
.notification-group__main .link-button {
|
||||
color: var(--indigo-3);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
html {
|
||||
scrollbar-color: rgba($action-button-color, 0.25)
|
||||
|
|
@ -532,6 +513,8 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
opacity: 0.25;
|
||||
.custom-scrollbars {
|
||||
::-webkit-scrollbar-thumb {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,46 @@
|
|||
@use 'sass:color';
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
@use '../mastodon/functions' with (
|
||||
$darken-multiplier: 1,
|
||||
$lighten-multiplier: -1
|
||||
);
|
||||
|
||||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #bdacbb;
|
||||
$classic-secondary-color: #e0e0d8;
|
||||
$classic-highlight-color: #2c7130;
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$blurple-500: #1dac1b; // Brand green
|
||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
||||
|
||||
$blurple-600: #3b953f; // Deeper green
|
||||
$blurple-500: #1dac1b; // Lighter than that
|
||||
$blurple-300: #94e47c; // Urgh blurple is the worst
|
||||
$grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
||||
$classic-highlight-color: $blurple-500;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
|
||||
@use '../mastodon/variables' with (
|
||||
$success-green: color.adjust(
|
||||
hsl(138deg, 32%, 35%),
|
||||
$lightness: 8%,
|
||||
$space: hsl
|
||||
),
|
||||
$base-overlay-background: $white,
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$ui-base-color: $classic-secondary-color,
|
||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
|
||||
$ui-secondary-color: $classic-base-color,
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: #6abf69;
|
||||
$ui-primary-color: #c3cec3;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
$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,
|
||||
|
||||
$ui-button-secondary-color: $grey-600 !default;
|
||||
$ui-button-secondary-border-color: $grey-600 !default;
|
||||
$ui-button-secondary-focus-color: $white !default;
|
||||
$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,
|
||||
|
||||
$ui-button-tertiary-color: $blurple-500 !default;
|
||||
$ui-button-tertiary-border-color: $blurple-500 !default;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||
$dark-text-color: #5e5066;
|
||||
$action-button-color: #495542;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #7b807b;
|
||||
|
||||
// Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(
|
||||
hue($color),
|
||||
color.channel($color, 'saturation', $space: hsl),
|
||||
color.channel($color, 'lightness', $space: hsl) + $amount
|
||||
);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(
|
||||
hue($color),
|
||||
color.channel($color, 'saturation', $space: hsl),
|
||||
color.channel($color, 'lightness', $space: hsl) - $amount
|
||||
);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
|
||||
body {
|
||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
||||
--dropdown-background-color: #fff;
|
||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
||||
--modal-background-color: var(--background-color-tint);
|
||||
--background-border-color: hsl(240deg, 25%, 88%);
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
||||
--background-filter: blur(10px);
|
||||
--on-surface-color: #{transparentize($ui-base-color, 0.65)};
|
||||
}
|
||||
$action-button-color: hsl(240deg, 16%, 45%),
|
||||
$emojis-requiring-inversion: 'chains'
|
||||
);
|
||||
|
|
|
|||
31
app/javascript/styles/mastodon/_functions.scss
Normal file
31
app/javascript/styles/mastodon/_functions.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@use 'sass:color';
|
||||
@use 'sass:string';
|
||||
@use 'sass:meta';
|
||||
|
||||
$darken-multiplier: -1 !default;
|
||||
$lighten-multiplier: 1 !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return color.adjust(
|
||||
$color,
|
||||
$lightness: $amount * $darken-multiplier,
|
||||
$space: hsl
|
||||
);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return color.adjust(
|
||||
$color,
|
||||
$lightness: $amount * $lighten-multiplier,
|
||||
$space: hsl
|
||||
);
|
||||
}
|
||||
|
||||
@function hex-color($color) {
|
||||
@if meta.type-of($color) == 'color' {
|
||||
$color: string.slice(color.ie-hex-str($color), 4);
|
||||
}
|
||||
|
||||
@return '%23' + string.unquote($color);
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
@mixin search-input {
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: $ui-base-color;
|
||||
background: var(--input-background-color);
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@use 'sass:color';
|
||||
@use 'functions' as *;
|
||||
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$black: #000; // Black
|
||||
$white: #fff; // White
|
||||
$red-600: #b7253d !default; // Deep Carmine
|
||||
$red-500: #df405a !default; // Cerise
|
||||
$blurple-600: #3b953f; // Deeper green
|
||||
|
|
@ -46,6 +49,11 @@ $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;
|
||||
|
|
@ -78,6 +86,11 @@ $inverted-text-color: $ui-base-color !default;
|
|||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Keep this filter a SCSS variable rather than
|
||||
// a CSS Custom Property due to this Safari bug:
|
||||
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
||||
$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;
|
||||
|
||||
|
|
@ -88,32 +101,15 @@ $media-modal-media-max-width: 100%;
|
|||
$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;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
|
||||
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
|
||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
||||
--background-color: #{darken($ui-base-color, 8%)};
|
||||
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
||||
--surface-variant-background-color: #{$ui-base-color};
|
||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--on-surface-color: #{transparentize($ui-base-color, 0.5)};
|
||||
--avatar-border-radius: 8px;
|
||||
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
|
||||
--error-background-color: #{darken($error-red, 16%)};
|
||||
--error-active-background-color: #{darken($error-red, 12%)};
|
||||
--on-error-color: #fff;
|
||||
}
|
||||
$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,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
|
||||
|
|
@ -21,7 +24,6 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
.rules-list {
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: $primary-text-color;
|
||||
counter-reset: list-counter;
|
||||
|
||||
li {
|
||||
|
|
@ -31,13 +33,41 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
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: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: 1em;
|
||||
background: $highlight-text-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 50%;
|
||||
|
|
@ -54,9 +84,62 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__hint {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.rules-languages {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
> label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
> select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
height: 41px;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
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,7 +1,4 @@
|
|||
$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;
|
||||
@use 'variables' as *;
|
||||
|
||||
%emoji-color-inversion {
|
||||
filter: invert(1);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.card {
|
||||
& > a {
|
||||
display: block;
|
||||
|
|
@ -159,7 +162,7 @@
|
|||
.nothing-here {
|
||||
background: $ui-base-color;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
color: $light-text-color;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@use 'sass:math';
|
||||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
$no-columns-breakpoint: 890px;
|
||||
$sidebar-width: 300px;
|
||||
|
|
@ -7,8 +9,11 @@ $content-width: 840px;
|
|||
.admin-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
||||
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
|
|
@ -112,15 +117,14 @@ $content-width: 840px;
|
|||
|
||||
a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
|
|
@ -253,6 +257,10 @@ $content-width: 840px;
|
|||
.time-period {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 small {
|
||||
|
|
@ -580,16 +588,6 @@ body,
|
|||
.account-status {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.activity-stream {
|
||||
flex: 2 0 0;
|
||||
margin-inline-end: 20px;
|
||||
max-width: calc(100% - 60px);
|
||||
|
||||
.entry {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report-status__actions,
|
||||
|
|
@ -611,16 +609,6 @@ body,
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.actions {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-form-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -1109,7 +1097,7 @@ a.name-tag,
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__permissions {
|
||||
|
|
@ -1132,6 +1120,15 @@ a.name-tag,
|
|||
}
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a.table-action-link {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__counters.admin-account-counters {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -1434,8 +1431,8 @@ a.sparkline {
|
|||
inset-inline-start: 10px;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
url('../images/warning-stripes.svg') repeat-y left,
|
||||
url('../images/warning-stripes.svg') repeat-y right,
|
||||
url('@/images/warning-stripes.svg') repeat-y left,
|
||||
url('@/images/warning-stripes.svg') repeat-y right,
|
||||
var(--background-color);
|
||||
}
|
||||
|
||||
|
|
@ -1635,6 +1632,17 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
|
||||
a.timestamp {
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
margin-inline-start: 5px;
|
||||
vertical-align: baseline;
|
||||
|
|
@ -1922,3 +1930,109 @@ a.sparkline {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__card {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
font-weight: 400;
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
color: $primary-text-color;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
|
||||
.status__prepend {
|
||||
padding: 0 0 15px;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
padding-top: 0;
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin {
|
||||
&__terms-of-service {
|
||||
&__container {
|
||||
background: var(--surface-background-color);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
overflow: hidden;
|
||||
|
||||
&__header {
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $secondary-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
background: var(--background-color);
|
||||
padding: 16px;
|
||||
overflow-y: scroll;
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
|
||||
&__history {
|
||||
& > li {
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 16px 0;
|
||||
padding-bottom: 8px;
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
&__indicator {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $dark-text-color;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: $valid-value-color;
|
||||
|
||||
.dot-indicator__indicator {
|
||||
background-color: $valid-value-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
342
app/javascript/styles/mastodon/annual_reports.scss
Normal file
342
app/javascript/styles/mastodon/annual_reports.scss
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
:root {
|
||||
--indigo-1: #17063b;
|
||||
--indigo-2: #2f0c7a;
|
||||
--indigo-3: #562cfc;
|
||||
--indigo-5: #858afa;
|
||||
--indigo-6: #cccfff;
|
||||
--lime: #baff3b;
|
||||
--goldenrod-2: #ffc954;
|
||||
}
|
||||
|
||||
.annual-report {
|
||||
flex: 0 0 auto;
|
||||
background: var(--indigo-1);
|
||||
padding: 24px;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 16px;
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
color: var(--lime);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
}
|
||||
|
||||
&__bento {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
|
||||
0,
|
||||
auto
|
||||
);
|
||||
|
||||
&__box {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--indigo-2);
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__most-boosted-post {
|
||||
grid-column: span 2;
|
||||
grid-row: span 2;
|
||||
padding: 0;
|
||||
|
||||
.status__content,
|
||||
.content-warning {
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.content-warning {
|
||||
border: 0;
|
||||
background: var(--indigo-1);
|
||||
|
||||
.link-button {
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta__line {
|
||||
border-bottom-color: var(--indigo-3);
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detailed-status__meta,
|
||||
.poll__footer,
|
||||
.poll__link,
|
||||
.detailed-status .logo,
|
||||
.detailed-status__display-name {
|
||||
color: var(--indigo-5);
|
||||
}
|
||||
|
||||
.detailed-status__meta .animated-number,
|
||||
.detailed-status__display-name strong {
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
.poll__chart {
|
||||
background-color: var(--indigo-3);
|
||||
|
||||
&.leading {
|
||||
background-color: var(--goldenrod-2);
|
||||
}
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.hashtag-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__followers {
|
||||
grid-column: span 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-block-start: 24px;
|
||||
padding-block-end: 24px;
|
||||
|
||||
--sparkline-gradient-top: rgba(86, 44, 252, 50%);
|
||||
--sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
|
||||
|
||||
&__foreground {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__number {
|
||||
font-size: 31px;
|
||||
font-weight: 600;
|
||||
line-height: 37px;
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 17px;
|
||||
color: var(--indigo-6);
|
||||
}
|
||||
|
||||
&__footnote {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
height: 70%;
|
||||
width: auto;
|
||||
|
||||
path:first-child {
|
||||
fill: url('#gradient') !important;
|
||||
fill-opacity: 1 !important;
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: var(--indigo-3) !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,9 +1,18 @@
|
|||
@function hex-color($color) {
|
||||
@if type-of($color) == 'color' {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
html.has-modal {
|
||||
&,
|
||||
body {
|
||||
touch-action: none;
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@return '%23' + unquote($color);
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -14,7 +23,12 @@ body {
|
|||
font-weight: 400;
|
||||
color: $primary-text-color;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: 'kern';
|
||||
|
||||
// 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;
|
||||
|
|
@ -48,6 +62,9 @@ body {
|
|||
|
||||
&.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;
|
||||
|
|
@ -59,19 +76,7 @@ body {
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.with-modals--active {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.with-modals {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
|
||||
&--active {
|
||||
overflow-y: hidden;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,13 +112,7 @@ body {
|
|||
&.embed {
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.admin {
|
||||
|
|
@ -141,6 +140,7 @@ body {
|
|||
width: 100%;
|
||||
height: auto;
|
||||
margin-top: -120px;
|
||||
margin-bottom: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.logo {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
.container-alt {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
45
app/javascript/styles/mastodon/css_variables.scss
Normal file
45
app/javascript/styles/mastodon/css_variables.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
@use 'sass:color';
|
||||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
|
||||
--modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
|
||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--background-color: #{darken($ui-base-color, 8%)};
|
||||
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
||||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
||||
--surface-variant-background-color: #{$ui-base-color};
|
||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
|
||||
--avatar-border-radius: 8px;
|
||||
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
|
||||
--overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.35)});
|
||||
--error-background-color: #{darken($error-red, 16%)};
|
||||
--error-active-background-color: #{darken($error-red, 12%)};
|
||||
--on-error-color: #fff;
|
||||
--rich-text-container-color: rgba(87, 24, 60, 100%);
|
||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
||||
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
|
||||
--nested-card-text: #{$secondary-text-color};
|
||||
--nested-card-border: 1px solid
|
||||
color(from #{$ui-highlight-color} srgb r g b / 15%);
|
||||
--input-placeholder-color: #{$dark-text-color};
|
||||
--input-background-color: var(--surface-variant-background-color);
|
||||
--on-input-color: #{$secondary-text-color};
|
||||
}
|
||||
|
||||
body {
|
||||
// Variable for easily inverting directional UI elements,
|
||||
--text-x-direction: 1;
|
||||
|
||||
&.rtl {
|
||||
--text-x-direction: -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
.dashboard__counters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.emoji-mart {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$no-columns-breakpoint: 600px;
|
||||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
code {
|
||||
font-family: $font-monospace, monospace;
|
||||
|
|
@ -76,6 +77,21 @@ code {
|
|||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.character-counter {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -325,10 +341,33 @@ code {
|
|||
columns: unset;
|
||||
}
|
||||
|
||||
.input.datetime .label_input select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
flex: 0;
|
||||
.input.datetime .label_input,
|
||||
.input.date .label_input {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input.date_of_birth .label_input {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
box-sizing: content-box;
|
||||
width: 32px;
|
||||
flex: 0;
|
||||
|
||||
&:last-child {
|
||||
width: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input.select.select--languages {
|
||||
|
|
@ -354,7 +393,7 @@ code {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--avatar-border-radius);
|
||||
background: url('images/void.png');
|
||||
background: url('@/images/void.png');
|
||||
|
||||
&[src$='missing.png'] {
|
||||
visibility: hidden;
|
||||
|
|
@ -540,6 +579,7 @@ code {
|
|||
.actions {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
&.actions--top {
|
||||
margin-top: 0;
|
||||
|
|
@ -548,13 +588,14 @@ code {
|
|||
}
|
||||
|
||||
.stacked-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
button,
|
||||
.button,
|
||||
.block-button {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
|
@ -571,8 +612,6 @@ code {
|
|||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
outline: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-inline-end: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-inline-end: 0;
|
||||
|
|
@ -584,8 +623,9 @@ code {
|
|||
background-color: $ui-button-focus-background-color;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
background-color: $ui-primary-color;
|
||||
background-color: $ui-button-disabled-color;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
|
|
@ -599,16 +639,6 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.button.button-tertiary {
|
||||
padding: 9px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -638,6 +668,18 @@ code {
|
|||
}
|
||||
|
||||
.label_input {
|
||||
position: relative;
|
||||
|
||||
&__loading-indicator {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
border: 1px solid transparent;
|
||||
padding: 10px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1114,7 +1156,7 @@ code {
|
|||
|
||||
&__type {
|
||||
color: $darker-text-color;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1177,6 +1219,7 @@ code {
|
|||
align-items: center;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: 30px;
|
||||
color: $white;
|
||||
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -1259,11 +1302,13 @@ code {
|
|||
}
|
||||
|
||||
.app-form {
|
||||
padding: 16px;
|
||||
|
||||
&__avatar-input,
|
||||
&__header-input {
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
background: var(--dropdown-background-color);
|
||||
background: var(--surface-variant-background-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -1311,7 +1356,7 @@ code {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--dropdown-border-color);
|
||||
background-color: var(--surface-variant-active-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1374,4 +1419,33 @@ code {
|
|||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $darker-text-color;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.modal-layout {
|
||||
background: darken($ui-base-color, 4%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.poll {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
|
|
@ -38,11 +41,6 @@
|
|||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
border-radius: 4px;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 4px;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use 'variables' as *;
|
||||
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
|
|
@ -59,24 +61,26 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.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-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-track {
|
||||
background-color: var(--background-border-color);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,29 @@
|
|||
.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: 20px;
|
||||
margin-bottom: 22px;
|
||||
white-space: pre-wrap;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
|
|
@ -14,19 +34,45 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
padding-inline-start: 10px;
|
||||
border-inline-start: 3px solid $darker-text-color;
|
||||
color: $darker-text-color;
|
||||
padding-inline-start: 32px;
|
||||
color: var(--rich-text-text-color);
|
||||
white-space: normal;
|
||||
position: relative;
|
||||
|
||||
p:last-child {
|
||||
&::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: 20px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
b,
|
||||
|
|
@ -41,7 +87,15 @@
|
|||
|
||||
ul,
|
||||
ol {
|
||||
margin-inline-start: 2em;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
li {
|
||||
padding-inline-start: 8px;
|
||||
|
||||
&::marker {
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -49,7 +103,11 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
list-style-type: '•';
|
||||
|
||||
li::marker {
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'functions' as *;
|
||||
@use 'variables' as *;
|
||||
|
||||
body.rtl {
|
||||
direction: rtl;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -149,6 +152,14 @@ a.table-action-link {
|
|||
}
|
||||
|
||||
.batch-table {
|
||||
&--no-toolbar {
|
||||
.batch-table__toolbar {
|
||||
position: static;
|
||||
height: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar,
|
||||
&__row {
|
||||
display: flex;
|
||||
|
|
@ -339,16 +350,12 @@ a.table-action-link {
|
|||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
padding-top: 0;
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
// Reset the status card to not have borders, background or padding when
|
||||
// inline in the table of statuses
|
||||
.status__card {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use 'variables' as *;
|
||||
@use 'functions' as *;
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue