mirrors/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-01-06 10:25:09 +01:00
Code Issues Projects Releases Wiki Activity

remove deprecated

Browse Source
This commit is contained in:
Wolfgang 2024-12-01 16:19:16 +00:00
parent 4de108e755
commit 65a1b4fd1f
16 changed files with 199 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/styles/contrast/variables.scss
View File

@ -1,3 +1,5 @@
@use 'sass:color';
// Dependent colors
$black: #000000;
@ -11,12 +13,18 @@ $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%);
$darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default;
$dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default;
$secondary-text-color: color.adjust(
$ui-secondary-color,
$lightness: 6%
) !default;
$highlight-text-color: color.adjust(
$ui-highlight-color,
$lightness: 10%
) !default;
$action-button-color: color.adjust($ui-base-color, $lightness: 50%);
$inverted-text-color: $black !default;
$lighter-text-color: darken($ui-base-color, 6%) !default;
$light-text-color: darken($ui-primary-color, 40%) !default;
$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;

40
app/javascript/styles/mastodon-light/diff.scss
View File

@ -27,7 +27,7 @@
}
.directory__card__img {
background: lighten($ui-base-color, 12%);
background: color.adjust($ui-base-color, 12%);
}
.account__header {
@ -57,7 +57,7 @@
.confirmation-modal__cancel-button,
.mute-modal__cancel-button,
.block-modal__cancel-button {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, 26%);
&:hover,
&:focus,
@ -105,7 +105,7 @@
// Change the background colors of statuses
.focusable:focus {
background: lighten($white, 4%);
background: color.adjust($white, 4%);
}
.account-gallery__item a {
@ -129,11 +129,11 @@
.compare-history-modal .report-modal__target,
.report-dialog-modal .poll__option.dialog-option {
border-bottom-color: lighten($ui-base-color, 4%);
border-bottom-color: color.adjust($ui-base-color, 4%);
}
.report-dialog-modal__container {
border-top-color: lighten($ui-base-color, 4%);
border-top-color: color.adjust($ui-base-color, 4%);
}
.reactions-bar__item:hover,
@ -144,7 +144,7 @@
.reactions-bar__item.active {
background-color: mix($white, $ui-highlight-color, 80%);
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
border-color: mix(color.adjust($ui-base-color, 8%), $ui-highlight-color, 80%);
}
.media-modal__overlay .picture-in-picture__footer {
@ -176,7 +176,7 @@
}
.flash-message.warning {
color: lighten($gold-star, 16%);
color: color.adjust($gold-star, 16%);
}
.boost-modal__action-bar,
@ -206,7 +206,7 @@
border: 1px solid var(--background-border-color);
&:focus {
border-color: lighten($ui-base-color, 12%);
border-color: color.adjust($ui-base-color, 12%);
background: $white;
}
}
@ -216,12 +216,12 @@
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: lighten($ui-primary-color, 10%);
background: color.adjust($ui-primary-color, $lightness: 10%);
}
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 10%);
background: color.adjust($ui-highlight-color, $lightness: 10%);
}
// Change the default color used for the text in an empty column or on the error column
@ -234,7 +234,7 @@
// Change the default colors used on some parts of the profile pages
.activity-stream-tabs {
background: $account-background-color;
border-bottom-color: lighten($ui-base-color, 8%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
}
.nothing-here,
@ -247,8 +247,8 @@
.picture-in-picture-placeholder {
background: $white;
border-color: lighten($ui-base-color, 8%);
color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
color: color.adjust($ui-base-color, $lightness: 8%);
}
.directory__tag > a {
@ -263,7 +263,7 @@
&__toolbar,
&__row,
.nothing-here {
border-color: lighten($ui-base-color, 8%);
border-color: color.adjust($ui-base-color, $lightness: 8%);
}
}
@ -280,7 +280,7 @@
.detailed-status.light,
.more.light,
.status.light {
border-bottom-color: lighten($ui-base-color, 8%);
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
}
}
@ -341,12 +341,12 @@
input[type='url'],
input[type='datetime-local'],
textarea {
background: darken($ui-base-color, 10%);
background: color.adjust($ui-base-color, $lightness: -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>")
background: color.adjust($ui-base-color, $lightness: -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(color.adjust($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px;
}
}
@ -403,7 +403,7 @@
.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>")
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(color.adjust($ui-base-color, 8%))}'/></svg>")
no-repeat right 8px center / auto 16px;
}
@ -433,7 +433,7 @@
}
.compose-form .spoiler-input__input {
color: lighten($ui-highlight-color, 8%);
color: color.adjust($ui-highlight-color, 8%);
}
.emoji-mart-search input,

21
app/javascript/styles/mastodon-light/variables.scss
View File

@ -16,7 +16,7 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
$grey-100: hsl(240deg, 51%, 90%); // Topaz
// Differences
$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
$success-green: color.adjust(hsl(138deg, 32%, 35%), 8%);
$base-overlay-background: $white !default;
$valid-value-color: $success-green !default;
@ -47,23 +47,6 @@ $light-text-color: hsl(240deg, 16%, 32%);
// 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 {
@ -80,5 +63,5 @@ body {
--rich-text-text-color: rgba(114, 47, 83, 100%);
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
--input-placeholder-color: #{transparentize($dark-text-color, 0.5)};
--input-background-color: #{darken($ui-base-color, 10%)};
--input-background-color: #{color.adjust($ui-base-color, 10%)};
}

26
app/javascript/styles/mastodon/accounts.scss
View File

@ -1,3 +1,5 @@
@use 'sass:color';
.card {
& > a {
display: block;
@ -57,7 +59,7 @@
display: block;
margin: 0;
border-radius: 4px;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, -8%);
object-fit: cover;
}
}
@ -139,7 +141,7 @@
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
color: color.adjust($inverted-text-color, 10%);
}
@media screen and (width <= 700px) {
@ -243,9 +245,9 @@
}
.simple_form .not_recommended {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
color: color.adjust($error-red, 12%);
background-color: rgba(color.adjust($error-red, 12%), 0.1);
border-color: rgba(color.adjust($error-red, 12%), 0.5);
}
.account__header__fields {
@ -253,14 +255,14 @@
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-top: 1px solid color.adjust($ui-base-color, 12%);
border-bottom: 1px solid color.adjust($ui-base-color, 12%);
font-size: 14px;
line-height: 20px;
dl {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid color.adjust($ui-base-color, 12%);
}
dt,
@ -279,7 +281,7 @@
width: 120px;
flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
background: rgba(color.adjust($ui-base-color, -8%), 0.5);
}
dd {
@ -352,7 +354,7 @@
}
.batch-table__row--muted {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, 26%);
}
.batch-table__row--muted .pending-account__header,
@ -361,7 +363,7 @@
&,
a,
strong {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, 26%);
}
}
@ -373,7 +375,7 @@
tbody td.accounts-table__extra,
&__count,
&__count small {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, 26%);
}
}

29
app/javascript/styles/mastodon/admin.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@use 'sass:math';
$no-columns-breakpoint: 890px;
@ -39,7 +40,7 @@ $content-width: 840px;
&__toggle {
display: none;
background: var(--background-color);
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, 4%);
align-items: center;
&__logo {
@ -233,7 +234,7 @@ $content-width: 840px;
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
}
&.selected {
@ -533,7 +534,7 @@ body,
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
border-bottom: 2px solid color.adjust($ui-base-color, 5%);
}
&.selected {
@ -778,7 +779,7 @@ a.inline-name-tag,
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
color: color.adjust($error-red, 12%);
}
.avatar {
@ -818,7 +819,7 @@ a.name-tag,
}
&.negative {
border-left-color: lighten($error-red, 12%);
border-left-color: color.adjust($error-red, 12%);
}
&.warning {
@ -1113,7 +1114,7 @@ a.name-tag,
&.expired {
.expiration {
color: lighten($error-red, 12%);
color: color.adjust($error-red, 12%);
}
.permissions-list__item__icon {
@ -1253,7 +1254,7 @@ a.name-tag,
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: color.adjust($highlight-text-color, 6%) !important;
fill: none !important;
}
}
@ -1271,9 +1272,9 @@ a.sparkline {
background-color: var(--background-color);
background-image: linear-gradient(
90deg,
lighten($ui-base-color, 8%),
lighten($ui-base-color, 12%),
lighten($ui-base-color, 8%)
color.adjust($ui-base-color, 8%),
color.adjust($ui-base-color, 12%),
color.adjust($ui-base-color, 8%)
);
background-size: 200px 100%;
background-repeat: no-repeat;
@ -1300,7 +1301,7 @@ a.sparkline {
}
&__item {
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, 4%);
&__key {
font-weight: 500;
@ -1834,7 +1835,7 @@ a.sparkline {
flex: 0 0 auto;
width: 4px;
height: 21px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
margin: 0 2px;
border-radius: 2px;
@ -1906,7 +1907,7 @@ a.sparkline {
}
.status {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, 4%);
background: $ui-base-color;
border-radius: 4px;
}
@ -1921,7 +1922,7 @@ a.sparkline {
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, 4%);
color: $primary-text-color;
box-sizing: border-box;
min-height: 100%;

4
app/javascript/styles/mastodon/basics.scss
View File

@ -1,3 +1,5 @@
@use 'sass:color';
@function hex-color($color) {
@if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4);
@ -210,7 +212,7 @@ button {
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: lighten($error-red, 4%);
color: color.adjust($error-red, $lightness: 4%);
text-align: center;
& > div {

137
app/javascript/styles/mastodon/components.scss
View File

@ -130,8 +130,8 @@
&:active,
&:focus,
&:hover {
border-color: lighten($highlight-text-color, 4%);
color: lighten($highlight-text-color, 4%);
border-color: color.adjust($highlight-text-color, 4%);
color: color.adjust($highlight-text-color, 4%);
background-color: transparent;
text-decoration: none;
}
@ -254,7 +254,7 @@
&:hover,
&:active,
&:focus {
color: lighten($action-button-color, 7%);
color: color.adjust($action-button-color, 7%);
background-color: rgba($action-button-color, 0.15);
}
@ -263,7 +263,7 @@
}
&.disabled {
color: darken($action-button-color, 13%);
color: color.adjust($action-button-color, -13%);
background-color: transparent;
cursor: default;
}
@ -274,7 +274,7 @@
&:hover,
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
color: color.adjust($lighter-text-color, -7%);
background-color: rgba($lighter-text-color, 0.15);
}
@ -283,7 +283,7 @@
}
&.disabled {
color: lighten($lighter-text-color, 7%);
color: color.adjust($lighter-text-color, 7%);
background-color: transparent;
}
}
@ -299,7 +299,7 @@
}
&.disabled {
color: lighten($highlight-text-color, 13%);
color: color.adjust($highlight-text-color, 13%);
}
}
@ -354,7 +354,7 @@
&:hover,
&:active,
&:focus {
color: darken($lighter-text-color, 7%);
color: color.adjust($lighter-text-color, -7%);
background-color: rgba($lighter-text-color, 0.15);
}
@ -363,7 +363,7 @@
}
&.disabled {
color: lighten($lighter-text-color, 20%);
color: color.adjust($lighter-text-color, 20%);
background-color: transparent;
cursor: default;
}
@ -855,7 +855,7 @@ body > [data-popper-placement] {
&__sep {
width: 1px;
height: 22px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
flex: 0 0 auto;
}
}
@ -1130,7 +1130,7 @@ body > [data-popper-placement] {
inset-inline-start: 50%;
top: 4px;
transform: translateX(-50%);
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
width: 2px;
height: calc(100% + 32px - 8px); // Account for gap to next element
}
@ -1167,11 +1167,11 @@ body > [data-popper-placement] {
.edit-indicator {
border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
padding: 12px;
overflow-y: auto;
flex: 0 0 auto;
border-bottom: 0.5px solid lighten($ui-base-color, 8%);
border-bottom: 0.5px solid color.adjust($ui-base-color, 8%);
display: flex;
flex-direction: column;
gap: 4px;
@ -1349,7 +1349,7 @@ body > [data-popper-placement] {
&__button {
display: inline;
color: lighten($ui-highlight-color, 8%);
color: color.adjust($ui-highlight-color, 8%);
border: 0;
background: transparent;
padding: 0;
@ -1434,7 +1434,7 @@ body > [data-popper-placement] {
&:hover,
&:focus {
background: lighten($ui-primary-color, 8%);
background: color.adjust($ui-primary-color, 8%);
}
}
}
@ -1485,7 +1485,7 @@ body > [data-popper-placement] {
&__line {
height: 16px - 4px;
border-inline-start: 2px solid lighten($ui-base-color, 8%);
border-inline-start: 2px solid color.adjust($ui-base-color, 8%);
width: 0;
position: absolute;
top: 0;
@ -1590,7 +1590,7 @@ body > [data-popper-placement] {
padding: 0 10px;
.detailed-status__display-name {
color: lighten($inverted-text-color, 16%);
color: color.adjust($inverted-text-color, 16%);
span {
display: inline;
@ -1801,13 +1801,17 @@ body > [data-popper-placement] {
&:focus {
.detailed-status,
.detailed-status__action-bar {
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
background: mix(
color.adjust($ui-base-color, 4%),
$ui-highlight-color,
95%
);
}
}
.detailed-status__action-bar {
border-top-color: mix(
lighten($ui-base-color, 8%),
color.adjust($ui-base-color, 8%),
$ui-highlight-color,
95%
);
@ -3201,7 +3205,7 @@ $ui-header-logo-wordmark-width: 99px;
}
.copy-paste-text {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
border-radius: 8px;
border: 1px solid var(--background-border-color);
padding: 16px;
@ -3578,7 +3582,7 @@ $ui-header-logo-wordmark-width: 99px;
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
.react-toggle-track {
background: lighten($ui-highlight-color, 5%);
background: color.adjust($ui-highlight-color, 5%);
}
.switch-to-advanced {
@ -3723,7 +3727,7 @@ $ui-header-logo-wordmark-width: 99px;
kbd {
display: inline-block;
padding: 3px 5px;
background-color: lighten($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, 8%);
border: 1px solid darken($ui-base-color, 4%);
}
}
@ -3958,7 +3962,7 @@ a.status-card {
flex: 0 0 auto;
width: 120px;
aspect-ratio: 1;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
position: relative;
& > .icon {
@ -4082,7 +4086,7 @@ a.status-card {
&:focus,
&:active {
text-decoration: underline;
color: lighten($highlight-text-color, 4%);
color: color.adjust($highlight-text-color, 4%);
}
}
@ -4194,7 +4198,7 @@ a.status-card {
font-size: 14px;
&:hover {
color: lighten($highlight-text-color, 6%);
color: color.adjust($highlight-text-color, 6%);
}
}
}
@ -4300,7 +4304,7 @@ a.status-card {
}
&:hover {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
}
&:focus-visible {
@ -4451,7 +4455,7 @@ a.status-card {
}
.circular-progress {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, 26%);
animation: 1.4s linear 0s infinite normal none running simple-rotate;
circle {
@ -4606,7 +4610,7 @@ a.status-card {
}
.modal-container--preloader {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
}
.account--panel {
@ -4682,7 +4686,7 @@ a.status-card {
@include search-input;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
}
&::-moz-focus-inner {
@ -4696,7 +4700,7 @@ a.status-card {
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
}
@media screen and (width <= 600px) {
@ -4715,7 +4719,7 @@ a.status-card {
}
&__multi-value {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
&__remove {
cursor: pointer;
@ -4723,8 +4727,8 @@ a.status-card {
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 12%);
color: lighten($darker-text-color, 4%);
background: color.adjust($ui-base-color, 12%);
color: color.adjust($darker-text-color, 4%);
}
}
}
@ -4744,12 +4748,12 @@ a.status-card {
&:hover,
&:active,
&:focus {
color: lighten($dark-text-color, 4%);
color: color.adjust($dark-text-color, 4%);
}
}
&__indicator-separator {
background-color: lighten($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, 8%);
}
&__menu {
@ -7135,7 +7139,7 @@ a.status-card {
&:hover,
&:active,
&:focus {
color: lighten($darker-text-color, 7%);
color: color.adjust($darker-text-color, 7%);
}
}
@ -7257,7 +7261,7 @@ a.status-card {
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, 8%);
}
&__handle {
@ -7270,7 +7274,7 @@ a.status-card {
inset-inline-start: 0;
margin-inline-start: -6px;
transform: translate(0, -50%);
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
opacity: 0;
@ -7324,7 +7328,7 @@ a.status-card {
height: 4px;
border-radius: 4px;
top: 14px;
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, 8%);
}
&__buffer {
@ -7340,7 +7344,7 @@ a.status-card {
height: 12px;
top: 10px;
margin-inline-start: -6px;
background: lighten($ui-highlight-color, 8%);
background: color.adjust($ui-highlight-color, 8%);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
.no-reduce-motion & {
@ -7975,7 +7979,7 @@ noscript {
}
a {
color: lighten($ui-highlight-color, 8%);
color: color.adjust($ui-highlight-color, 8%);
}
.icon {
@ -8185,7 +8189,7 @@ noscript {
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: color.adjust($highlight-text-color, 6%) !important;
fill: none !important;
}
}
@ -8209,31 +8213,34 @@ noscript {
}
path:last-child {
stroke: lighten($gold-star, 6%) !important;
stroke: color.adjust($gold-star, 6%) !important;
}
}
}
&--disabled {
.trends__item__name {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, 12%);
a {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, 12%);
}
}
.trends__item__current {
color: lighten($ui-base-color, 12%);
color: color.adjust($ui-base-color, 12%);
}
.trends__item__sparkline {
path:first-child {
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
fill: rgba(color.adjust($ui-base-color, 12%), 0.25) !important;
}
path:last-child {
stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
stroke: color.adjust(
color.adjust($ui-base-color, 12%),
6%
) !important;
}
}
}
@ -8251,7 +8258,7 @@ noscript {
padding-bottom: 0;
&:focus {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, 2%);
outline: 0;
}
@ -8320,7 +8327,7 @@ noscript {
}
.announcements {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
font-size: 13px;
display: flex;
align-items: flex-end;
@ -8404,7 +8411,7 @@ noscript {
&__item {
flex-shrink: 0;
background: lighten($ui-base-color, 12%);
background: color.adjust($ui-base-color, 12%);
color: $darker-text-color;
border: 0;
border-radius: 3px;
@ -8447,21 +8454,21 @@ noscript {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 16%);
background: color.adjust($ui-base-color, 16%);
transition: all 200ms ease-out;
transition-property: background-color, color;
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
}
&.active {
transition: all 100ms ease-in;
transition-property: background-color, color;
background-color: mix(
lighten($ui-base-color, 12%),
color.adjust($ui-base-color, 12%),
$ui-highlight-color,
80%
);
color: lighten($highlight-text-color, 8%);
color: color.adjust($highlight-text-color, 8%);
}
}
@ -8491,7 +8498,7 @@ noscript {
&:active,
&:focus {
opacity: 1;
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
transition: all 200ms ease-out;
transition-property: background-color, color;
}
@ -8531,7 +8538,7 @@ noscript {
&__footer {
border-radius: 0 0 4px 4px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
padding: 10px;
padding-top: 12px;
display: flex;
@ -8540,7 +8547,7 @@ noscript {
&__header {
border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
padding: 10px;
display: flex;
justify-content: space-between;
@ -8602,7 +8609,7 @@ noscript {
&:hover,
&:focus,
&:active {
border-color: lighten($ui-base-color, 12%);
border-color: color.adjust($ui-base-color, 12%);
}
}
@ -9000,7 +9007,7 @@ noscript {
min-width: 0;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
}
&:focus {
@ -9022,7 +9029,7 @@ noscript {
&.focused &__input {
border-color: $highlight-text-color;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
}
&.invalid &__input {
@ -9302,7 +9309,7 @@ noscript {
hr {
border: 0;
border-top: 1px solid lighten($ui-base-color, 4%);
border-top: 1px solid color.adjust($ui-base-color, 4%);
margin-top: 3em;
margin-bottom: 3em;
}
@ -9515,7 +9522,7 @@ noscript {
width: 100%;
height: auto;
aspect-ratio: 1.9;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
border-radius: 8px;
margin-bottom: 30px;
}
@ -9747,7 +9754,7 @@ noscript {
color: $white;
background: rgba($black, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
border: 1px solid rgba(color.adjust($classic-base-color, 4%), 0.85);
border-radius: 8px;
box-shadow:
0 10px 15px -3px rgba($base-shadow-color, 0.25),
@ -9952,7 +9959,7 @@ noscript {
opacity: 1;
.inline-follow-suggestions__body__scroll-button__icon {
background: lighten($ui-highlight-color, 4%);
background: color.adjust($ui-highlight-color, 4%);
}
}
}

4
app/javascript/styles/mastodon/dashboard.scss
View File

@ -98,12 +98,12 @@
}
&.positive {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
color: $valid-value-color;
}
&.negative {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
color: $error-value-color;
}

4
app/javascript/styles/mastodon/emoji_picker.scss
View File

@ -39,7 +39,7 @@
color: $darker-text-color;
&:hover {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, 4%);
}
}
@ -47,7 +47,7 @@
color: $highlight-text-color;
&:hover {
color: lighten($highlight-text-color, 4%);
color: color.adjust($highlight-text-color, 4%);
}
.emoji-mart-anchor-bar {

18
app/javascript/styles/mastodon/forms.scss
View File

@ -337,7 +337,7 @@ code {
.required abbr {
text-decoration: none;
color: lighten($error-value-color, 12%);
color: color.adjust($error-value-color, 12%);
}
.fields-group {
@ -506,13 +506,13 @@ code {
input[type='datetime-local'] {
&:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, 12%);
}
}
.input.field_with_errors {
label {
color: lighten($error-red, 12%);
color: color.adjust($error-red, 12%);
}
input[type='text'],
@ -522,13 +522,13 @@ code {
input[type='datetime-local'],
textarea,
select {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, 12%);
}
.error {
display: block;
font-weight: 500;
color: lighten($error-red, 12%);
color: color.adjust($error-red, 12%);
margin-top: 4px;
}
}
@ -620,7 +620,7 @@ code {
font-family: inherit;
resize: vertical;
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>")
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(color.adjust($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px;
border: 1px solid var(--background-border-color);
border-radius: 4px;
@ -760,7 +760,7 @@ code {
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, 4%);
}
}
@ -844,7 +844,7 @@ code {
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 8%);
color: color.adjust($highlight-text-color, 8%);
}
}
}
@ -1097,7 +1097,7 @@ code {
&__item {
padding: 15px;
color: $ui-secondary-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, 4%);
display: flex;
align-items: center;

4
app/javascript/styles/mastodon/modal.scss
View File

@ -1,5 +1,7 @@
@use 'sass:color';
.modal-layout {
background: darken($ui-base-color, 4%)
background: color.adjust($ui-base-color, -4%)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
repeat-x bottom fixed;
display: flex;

2
app/javascript/styles/mastodon/polls.scss
View File

@ -121,7 +121,7 @@
&:active,
&:focus,
&:hover {
border-color: lighten($valid-value-color, 15%);
border-color: color.adjust($valid-value-color, 15%);
border-width: 4px;
}

2
app/javascript/styles/mastodon/rtl.scss
View File

@ -41,7 +41,7 @@ body.rtl {
.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>")
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(color.adjust($ui-base-color, 12%))}'/></svg>")
no-repeat left 8px center / auto 16px;
}

2
app/javascript/styles/mastodon/tables.scss
View File

@ -241,7 +241,7 @@ a.table-action-link {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, 8%);
}
}
}

52
app/javascript/styles/mastodon/variables.scss
View File

@ -1,3 +1,5 @@
@use 'sass:color';
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
@ -33,9 +35,9 @@ $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-lighter-color: color.adjust(
$ui-base-color,
26%
$lightness: 26%
) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
@ -67,9 +69,15 @@ $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;
$highlight-text-color: color.adjust(
$ui-highlight-color,
$lightness: 8%
) !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
$action-button-focus-color: color.adjust(
$ui-base-lighter-color,
$lightness: 4%
) !default;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
@ -95,26 +103,38 @@ $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-border-color: #{color.adjust($ui-base-color, $lightness: 4%)};
--dropdown-background-color: #{rgba(
color.adjust($ui-base-color, $lightness: -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-color: #{rgba(
color.adjust($ui-base-color, $lightness: -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%)};
--modal-border-color: #{color.adjust($ui-base-color, $lightness: 4%)};
--background-border-color: #{color.adjust($ui-base-color, $lightness: 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%)};
--background-color: #{color.adjust($ui-base-color, $lightness: -8%)};
--background-color-tint: #{rgba(
color.adjust($ui-base-color, $lightness: -8%),
0.9
)};
--surface-background-color: #{color.adjust($ui-base-color, $lightness: -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)};
--surface-variant-active-background-color: #{color.adjust(
$ui-base-color,
$lightness: 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.25)});
--error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)};
--error-background-color: #{color.adjust($error-red, $lightness: -16%)};
--error-active-background-color: #{color.adjust($error-red, $lightness: -12%)};
--on-error-color: #fff;
--rich-text-container-color: rgba(87, 24, 60, 100%);
--rich-text-text-color: rgba(255, 175, 212, 100%);

4
app/javascript/styles/mastodon/widgets.scss
View File

@ -1,3 +1,5 @@
@use 'sass:color';
.directory {
&__tag {
box-sizing: border-box;
@ -108,7 +110,7 @@
tbody td {
padding: 15px 0;
vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, 8%);
}
tbody tr:last-child td {