diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index dcfab6bd01..50c96a6f6f 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/app/javascript/styles/mastodon/_mixins.scss
@@ -15,14 +15,19 @@
outline: 0;
box-sizing: border-box;
width: 100%;
- border: 0;
+ border: 1px solid var(--surface-outline);
box-shadow: none;
font-family: inherit;
- background: $ui-base-color;
- color: $darker-text-color;
+ background: var(--surface);
+ color: var(--on-surface);
border-radius: 4px;
font-size: 14px;
margin: 0;
+
+ &::placeholder {
+ color: var(--on-surface-muted);
+ opacity: 1;
+ }
}
@mixin search-popout {
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 80d6c13cef..2195799a98 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -216,8 +216,8 @@
display: inline-flex;
padding: 4px;
padding-inline-end: 8px;
- border: 1px solid $highlight-text-color;
- color: $highlight-text-color;
+ border: 1px solid var(--primary);
+ color: var(--primary);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.5px;
@@ -305,16 +305,16 @@
}
.verified {
- border: 1px solid rgba($valid-value-color, 0.5);
- background: rgba($valid-value-color, 0.25);
+ border: 1px solid var(--successful-outline);
+ background: var(--successful-variant);
a {
- color: $valid-value-color;
+ color: var(--successful);
font-weight: 500;
}
&__mark {
- color: $valid-value-color;
+ color: var(--successful);
}
}
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 6714b24268..74b6421326 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -6,9 +6,10 @@
@return '%23' + unquote($color);
}
+
body {
font-family: $font-sans-serif, sans-serif;
- background: darken($ui-base-color, 7%);
+ background: var(--background);
font-size: 13px;
line-height: 18px;
font-weight: 400;
@@ -66,10 +67,6 @@ body {
}
}
- &.lighter {
- background: $ui-base-color;
- }
-
&.with-modals {
overflow-x: hidden;
overflow-y: scroll;
@@ -109,7 +106,6 @@ body {
}
&.embed {
- background: lighten($ui-base-color, 4%);
margin: 0;
padding-bottom: 0;
@@ -122,7 +118,6 @@ body {
}
&.admin {
- background: darken($ui-base-color, 4%);
padding: 0;
}
@@ -130,7 +125,6 @@ body {
position: absolute;
text-align: center;
color: $darker-text-color;
- background: $ui-base-color;
width: 100%;
height: 100%;
padding: 0;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7f0f15f113..62d1d55edf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -47,11 +47,11 @@
}
.button {
- background-color: $ui-button-background-color;
+ background-color: var(--primary);
border: 10px none;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
box-sizing: border-box;
- color: $ui-button-color;
+ color: var(--on-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
@@ -74,7 +74,7 @@
&:active,
&:focus,
&:hover {
- background-color: $ui-button-focus-background-color;
+ background-color: var(--primary-highlighted);
}
&:focus-visible {
@@ -85,14 +85,14 @@
&:active,
&:focus,
&:hover {
- background-color: $ui-button-destructive-focus-background-color;
+ background-color: var(--danger);
transition: none;
}
}
&:disabled,
&.disabled {
- background-color: $ui-primary-color;
+ background-color: var(--primary-muted);
cursor: default;
}
@@ -152,7 +152,7 @@
&:focus,
&:hover {
background: $valid-value-color;
- color: $primary-text-color;
+ color: var(--on-background);
}
}
@@ -164,7 +164,7 @@
&:focus,
&:hover {
background: $error-value-color;
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
@@ -198,10 +198,10 @@
.icon-button {
display: inline-flex;
- color: $action-button-color;
+ color: var(--on-background-muted);
border: 0;
padding: 0;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
align-items: center;
@@ -218,8 +218,8 @@
&:hover,
&:active,
&:focus {
- color: lighten($action-button-color, 7%);
- background-color: rgba($action-button-color, 0.15);
+ color: var(--on-background);
+ // background-color: rgba($action-button-color, 0.15);
}
&:focus-visible {
@@ -227,7 +227,7 @@
}
&.disabled {
- color: darken($action-button-color, 13%);
+ opacity: 0.5;
background-color: transparent;
cursor: default;
}
@@ -253,30 +253,30 @@
}
&.active {
- color: $highlight-text-color;
+ color: var(--primary);
&:hover,
&:active,
&:focus {
- color: $highlight-text-color;
+ color: var(--primary-highlighted);
background-color: transparent;
}
&.disabled {
- color: lighten($highlight-text-color, 13%);
+ color: var(--primary-muted);
}
}
&.overlayed {
box-sizing: content-box;
- background: rgba($black, 0.65);
+ background: var(--overlay-variant);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
- color: rgba($white, 0.7);
- border-radius: 4px;
+ color: var(--on-overlay);
+ border-radius: var(--radius-sm);
padding: 2px;
&:hover {
- background: rgba($black, 0.9);
+ // background: rgba($black, 0.9);
}
}
@@ -302,7 +302,7 @@
.text-icon-button {
color: $lighter-text-color;
border: 0;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
font-weight: 600;
@@ -392,7 +392,7 @@ body > [data-popper-placement] {
flex: 0 0 auto;
margin-inline-end: 10px;
top: -1px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
vertical-align: middle;
cursor: inherit;
@@ -411,7 +411,7 @@ body > [data-popper-placement] {
background: $ui-primary-color;
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
padding: 8px 10px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 400;
@@ -497,12 +497,12 @@ body > [data-popper-placement] {
}
.spoiler-input__input {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
.autosuggest-textarea__textarea {
min-height: 100px;
- border-radius: 4px 4px 0 0;
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding-bottom: 0;
padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto
resize: none;
@@ -532,7 +532,7 @@ body > [data-popper-placement] {
z-index: 99;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
background: $ui-secondary-color;
- border-radius: 0 0 4px 4px;
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
color: $inverted-text-color;
font-size: 14px;
padding: 6px;
@@ -545,7 +545,7 @@ body > [data-popper-placement] {
.autosuggest-textarea__suggestions__item {
padding: 10px;
cursor: pointer;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
&:hover,
&:focus,
@@ -672,7 +672,7 @@ body > [data-popper-placement] {
}
.compose-form__upload-thumbnail {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
background-color: $base-shadow-color;
background-position: center;
background-size: cover;
@@ -686,7 +686,7 @@ body > [data-popper-placement] {
.compose-form__buttons-wrapper {
padding: 10px;
background: darken($simple-background-color, 8%);
- border-radius: 0 0 4px 4px;
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
display: flex;
justify-content: space-between;
flex: 0 0 auto;
@@ -795,7 +795,7 @@ body > [data-popper-placement] {
}
.reply-indicator {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
margin-bottom: 10px;
background: $ui-primary-color;
padding: 10px;
@@ -847,7 +847,7 @@ body > [data-popper-placement] {
overflow: hidden;
text-overflow: ellipsis;
padding-top: 2px;
- color: $primary-text-color;
+ color: var(--on-background);
&:focus {
outline: 0;
@@ -878,7 +878,7 @@ body > [data-popper-placement] {
}
a {
- color: $secondary-text-color;
+ color: var(--primary);
text-decoration: none;
unicode-bidi: isolate;
@@ -898,15 +898,16 @@ body > [data-popper-placement] {
}
a.unhandled-link {
- color: $highlight-text-color;
+ color: var(--primary);
}
.status__content__spoiler-link {
- background: $action-button-color;
+ background: var(--surface);
+ color: var(--on-surface);
&:hover,
&:focus {
- background: lighten($action-button-color, 7%);
+ background: var(--surface-highlighted);
text-decoration: none;
}
@@ -950,7 +951,7 @@ body > [data-popper-placement] {
}
a {
- color: $secondary-text-color;
+ color: var(--primary);
text-decoration: none;
&:hover {
@@ -968,7 +969,7 @@ body > [data-popper-placement] {
}
&.unhandled-link {
- color: $highlight-text-color;
+ color: var(--primary);
}
}
}
@@ -983,7 +984,7 @@ body > [data-popper-placement] {
align-items: center;
font-size: 15px;
line-height: 22px;
- color: $highlight-text-color;
+ color: var(--primary);
border: 0;
background: transparent;
padding: 0;
@@ -1007,7 +1008,7 @@ body > [data-popper-placement] {
line-height: 22px;
display: flex;
justify-content: space-between;
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
.status__content__spoiler-link {
@@ -1026,7 +1027,7 @@ body > [data-popper-placement] {
}
.status__wrapper--filtered {
- color: $dark-text-color;
+ color: var(--on-background-muted);
border: 0;
font-size: inherit;
text-align: center;
@@ -1036,11 +1037,11 @@ body > [data-popper-placement] {
box-sizing: border-box;
width: 100%;
clear: both;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
&__button {
display: inline;
- color: lighten($ui-highlight-color, 8%);
+ color: var(--primary);
border: 0;
background: transparent;
padding: 0;
@@ -1057,11 +1058,11 @@ body > [data-popper-placement] {
.focusable {
&:focus {
outline: 0;
- background: lighten($ui-base-color, 4%);
+ background: var(--background-highlighted);
.detailed-status,
.detailed-status__action-bar {
- background: lighten($ui-base-color, 8%);
+ background: var(--background-highlighted);
}
}
}
@@ -1069,7 +1070,7 @@ body > [data-popper-placement] {
.status {
padding: 16px;
min-height: 54px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
cursor: auto;
@keyframes fade {
@@ -1118,7 +1119,7 @@ body > [data-popper-placement] {
}
&__spoiler-link {
- color: $primary-text-color;
+ color: var(--on-background);
background: $ui-primary-color;
&:hover,
@@ -1153,12 +1154,12 @@ body > [data-popper-placement] {
}
&--first-in-thread {
- border-top: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid var(--background-outline);
}
&__line {
height: 16px - 4px;
- border-inline-start: 2px solid lighten($ui-base-color, 8%);
+ border-inline-start: 2px solid var(--background-outline);
width: 0;
position: absolute;
top: 0;
@@ -1175,7 +1176,7 @@ body > [data-popper-placement] {
top: 16px - 4px;
height: 46px + 4px + 4px;
width: 2px;
- background: $ui-base-color;
+ background: var(--background);
inset-inline-start: -2px;
}
}
@@ -1198,11 +1199,11 @@ body > [data-popper-placement] {
height: 40px;
order: 2;
flex: 0 0 auto;
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
.notification__relative_time {
- color: $dark-text-color;
+ color: var(--on-background-muted);
float: right;
font-size: 14px;
padding-bottom: 1px;
@@ -1219,7 +1220,7 @@ body > [data-popper-placement] {
}
.status__display-name {
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
.status__info .status__display-name {
@@ -1299,10 +1300,10 @@ body > [data-popper-placement] {
font-size: 15px;
line-height: 22px;
font-weight: 500;
- color: $dark-text-color;
+ color: var(--on-background-muted);
.status__display-name strong {
- color: $dark-text-color;
+ color: var(--on-background);
}
> span {
@@ -1313,14 +1314,14 @@ body > [data-popper-placement] {
}
.status__wrapper-direct {
- background: mix($ui-base-color, $ui-highlight-color, 95%);
+ //background: mix($ui-base-color, $ui-highlight-color, 95%);
&:focus {
- background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+ //background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
}
.status__prepend {
- color: $highlight-text-color;
+ //color: $highlight-text-color;
}
}
@@ -1332,6 +1333,18 @@ body > [data-popper-placement] {
margin-top: 16px;
}
+.detailed-status__action-bar,
+.status__action-bar {
+ .icon-button {
+ padding: 4px;
+
+ .icon {
+ width: 20px;
+ height: 20px;
+ }
+ }
+}
+
.detailed-status__action-bar-dropdown {
flex: 1 1 auto;
display: flex;
@@ -1341,9 +1354,9 @@ body > [data-popper-placement] {
}
.detailed-status {
- background: lighten($ui-base-color, 4%);
+ background: var(--background);
padding: 16px;
- border-top: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid var(--background-outline);
&--flex {
display: flex;
@@ -1391,7 +1404,7 @@ body > [data-popper-placement] {
.detailed-status__meta {
margin-top: 16px;
- color: $dark-text-color;
+ color: var(--on-background-muted);
font-size: 14px;
line-height: 18px;
@@ -1404,9 +1417,9 @@ body > [data-popper-placement] {
}
.detailed-status__action-bar {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-top: 1px solid var(--background-outline);
+ border-bottom: 1px solid var(--background-outline);
display: flex;
flex-direction: row;
padding: 10px 0;
@@ -1415,26 +1428,22 @@ body > [data-popper-placement] {
.detailed-status__wrapper-direct {
.detailed-status,
.detailed-status__action-bar {
- background: mix($ui-base-color, $ui-highlight-color, 95%);
+ //background: mix($ui-base-color, $ui-highlight-color, 95%);
}
&:focus {
.detailed-status,
.detailed-status__action-bar {
- background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+ //background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
}
}
.detailed-status__action-bar {
- border-top-color: mix(
- lighten($ui-base-color, 8%),
- $ui-highlight-color,
- 95%
- );
+ //border-top-color: mix(var(--Neutral-90), $ui-highlight-color, 95%);
}
.status__prepend {
- color: $highlight-text-color;
+ //color: $highlight-text-color;
}
}
@@ -1470,12 +1479,12 @@ body > [data-popper-placement] {
.domain {
padding: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
.domain__domain-name {
flex: 1 1 auto;
display: block;
- color: $primary-text-color;
+ color: var(--on-background);
text-decoration: none;
font-size: 14px;
font-weight: 500;
@@ -1494,14 +1503,14 @@ body > [data-popper-placement] {
.account {
padding: 16px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
.account__display-name {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
overflow: hidden;
text-decoration: none;
font-size: 14px;
@@ -1536,10 +1545,10 @@ body > [data-popper-placement] {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-top: 10px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
&--missing {
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
p {
@@ -1610,7 +1619,7 @@ body > [data-popper-placement] {
top: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
- color: $primary-text-color;
+ color: var(--on-background);
text-shadow: 1px 1px 2px $base-shadow-color;
font-weight: 700;
font-size: 15px;
@@ -1667,7 +1676,7 @@ a .account__avatar {
.status__display-name,
.account__display-name {
.display-name strong {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
@@ -1698,7 +1707,7 @@ a.account__display-name {
}
.detailed-status__display-name {
- color: $darker-text-color;
+ color: var(--on-background-muted);
display: flex;
align-items: center;
gap: 10px;
@@ -1715,7 +1724,7 @@ a.account__display-name {
}
strong {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
@@ -1727,33 +1736,21 @@ a.account__display-name {
.muted {
.status__content,
.status__content p,
- .status__content a {
- color: $dark-text-color;
- }
-
+ .status__content a,
+ .status__display-name,
.status__display-name strong {
- color: $dark-text-color;
- }
-
- .status__avatar {
- opacity: 0.5;
+ color: var(--on-background-muted);
}
+ .status__avatar,
a.status__content__spoiler-link {
- background: $ui-base-lighter-color;
- color: $inverted-text-color;
-
- &:hover,
- &:focus {
- background: lighten($ui-base-lighter-color, 7%);
- text-decoration: none;
- }
+ opacity: 0.5;
}
}
.notification__report {
padding: 16px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
display: flex;
gap: 10px;
@@ -1766,7 +1763,7 @@ a.account__display-name {
display: flex;
justify-content: space-between;
align-items: center;
- color: $darker-text-color;
+ color: var(--on-background-muted);
gap: 10px;
font-size: 15px;
line-height: 22px;
@@ -1792,7 +1789,7 @@ a.account__display-name {
padding: 16px;
padding-bottom: 0;
cursor: default;
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-size: 15px;
line-height: 22px;
font-weight: 500;
@@ -1807,7 +1804,7 @@ a.account__display-name {
}
.icon-star {
- color: $gold-star;
+ color: var(--favourite);
}
> span {
@@ -1818,11 +1815,11 @@ a.account__display-name {
}
.icon-button.star-icon.active {
- color: $gold-star;
+ color: var(--favourite);
}
.icon-button.bookmark-icon.active {
- color: $red-bookmark;
+ color: var(--bookmark);
}
.no-reduce-motion .icon-button.star-icon {
@@ -1942,10 +1939,10 @@ a.account__display-name {
flex-shrink: 0;
cursor: default;
gap: 10px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
strong {
- color: $secondary-text-color;
+ color: var(--on-background);
}
a {
@@ -2026,7 +2023,7 @@ a.account__display-name {
background: var(--dropdown-background-color);
border: 1px solid var(--dropdown-border-color);
padding: 4px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
box-shadow: var(--dropdown-shadow);
z-index: 9999;
@@ -2104,7 +2101,7 @@ a.account__display-name {
display: block;
&--dangerous {
- color: $error-value-color;
+ color: var(--dangerous);
}
a,
@@ -2123,7 +2120,7 @@ a.account__display-name {
text-overflow: ellipsis;
white-space: nowrap;
text-align: inherit;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
&:focus,
&:hover,
@@ -2262,7 +2259,7 @@ $ui-header-height: 55px;
}
.tabs-bar__wrapper {
- background: darken($ui-base-color, 8%);
+ background: var(--background);
position: sticky;
top: $ui-header-height;
z-index: 2;
@@ -2298,8 +2295,10 @@ $ui-header-height: 55px;
flex-direction: column;
> .scrollable {
- background: $ui-base-color;
- border-radius: 0 0 4px 4px;
+ background: var(--background);
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+ border: 1px solid var(--background-outline);
+ border-top: 0;
}
}
@@ -2323,7 +2322,7 @@ $ui-header-height: 55px;
display: flex;
flex: 1 1 auto;
padding: 13px 3px 11px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-decoration: none;
text-align: center;
font-size: 16px;
@@ -2457,8 +2456,8 @@ $ui-header-height: 55px;
.navigation-panel {
margin: 0;
- background: $ui-base-color;
- border-inline-start: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-inline-start: 1px solid var(--background-outline);
height: 100vh;
}
@@ -2476,8 +2475,8 @@ $ui-header-height: 55px;
.layout-single-column .ui__header {
display: flex;
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-bottom: 1px solid var(--background-outline);
}
.column-header,
@@ -2534,14 +2533,14 @@ $ui-header-height: 55px;
position: absolute;
inset-inline-start: 9px;
top: -13px;
- background: $ui-highlight-color;
- border: 2px solid lighten($ui-base-color, 8%);
+ background: var(--primary);
+ border: 2px solid var(--surface);
padding: 1px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 500;
line-height: 14px;
- color: $primary-text-color;
+ color: var(--on-primary);
}
&__issue-badge {
@@ -2549,7 +2548,7 @@ $ui-header-height: 55px;
inset-inline-start: 11px;
bottom: 1px;
display: block;
- background: $error-red;
+ background: var(--dangerous);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@@ -2557,7 +2556,7 @@ $ui-header-height: 55px;
}
.column-link--transparent .icon-with-badge__badge {
- border-color: darken($ui-base-color, 8%);
+ border-color: var(--background);
}
.column-title {
@@ -2575,7 +2574,7 @@ $ui-header-height: 55px;
font-size: 16px;
line-height: 24px;
font-weight: 400;
- color: $darker-text-color;
+ color: var(--on-background-muted);
}
@media screen and (width >= 600px) {
@@ -2585,7 +2584,7 @@ $ui-header-height: 55px;
.onboarding__footer {
margin-top: 30px;
- color: $dark-text-color;
+ color: var(--on-background-muted);
text-align: center;
font-size: 14px;
@@ -2601,8 +2600,8 @@ $ui-header-height: 55px;
align-items: center;
justify-content: space-between;
gap: 10px;
- color: $highlight-text-color;
- background: lighten($ui-base-color, 4%);
+ color: var(--on-surface);
+ background: var(--surface);
border-radius: 8px;
padding: 10px 15px;
box-sizing: border-box;
@@ -2618,7 +2617,7 @@ $ui-header-height: 55px;
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 8%);
+ background: var(--surface-highlighted);
}
}
@@ -2634,13 +2633,13 @@ $ui-header-height: 55px;
font-size: 16px;
line-height: 24px;
font-weight: 400;
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-align: center;
margin-bottom: 30px;
strong {
font-weight: 700;
- color: $secondary-text-color;
+ color: var(--on-background);
}
}
@@ -2660,7 +2659,8 @@ $ui-header-height: 55px;
margin-bottom: 30px;
&__item {
- background: lighten($ui-base-color, 4%);
+ background: var(--surface);
+ color: var(--on-surface);
border: 0;
border-radius: 8px;
display: flex;
@@ -2677,7 +2677,7 @@ $ui-header-height: 55px;
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 8%);
+ background: var(--surface-highlighted);
}
&__icon {
@@ -2688,7 +2688,7 @@ $ui-header-height: 55px;
justify-content: center;
width: 36px;
height: 36px;
- color: $highlight-text-color;
+ color: var(--primary);
font-size: 1.2rem;
@media screen and (width >= 600px) {
@@ -2705,7 +2705,7 @@ $ui-header-height: 55px;
justify-content: center;
width: 21px;
height: 21px;
- color: $primary-text-color;
+ color: var(--on-background);
svg {
height: 14px;
@@ -2720,7 +2720,7 @@ $ui-header-height: 55px;
justify-content: center;
width: 21px;
height: 21px;
- color: $highlight-text-color;
+ color: var(--primary);
font-size: 17px;
svg {
@@ -2734,13 +2734,13 @@ $ui-header-height: 55px;
line-height: 20px;
h6 {
- color: $highlight-text-color;
+ color: var(--primary);
font-weight: 500;
font-size: 14px;
}
p {
- color: $darker-text-color;
+ color: var(--on-surface);
overflow: hidden;
}
}
@@ -2748,7 +2748,7 @@ $ui-header-height: 55px;
}
.follow-recommendations {
- background: darken($ui-base-color, 4%);
+ background: var(--background);
border-radius: 8px;
margin-bottom: 30px;
@@ -2758,7 +2758,7 @@ $ui-header-height: 55px;
&__empty {
text-align: center;
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-weight: 500;
padding: 40px;
}
@@ -2772,7 +2772,7 @@ $ui-header-height: 55px;
&:focus {
outline: 0;
- border-color: $highlight-text-color;
+ border-color: var(--primary);
}
.media-modal__pagination {
@@ -2781,11 +2781,11 @@ $ui-header-height: 55px;
}
.copy-paste-text {
- background: lighten($ui-base-color, 4%);
+ background: var(--surface);
border-radius: 8px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--surface-outline);
padding: 16px;
- color: $primary-text-color;
+ color: var(--on-surface);
font-size: 15px;
line-height: 22px;
display: flex;
@@ -2798,7 +2798,7 @@ $ui-header-height: 55px;
&.focused {
transition: none;
outline: 0;
- border-color: $highlight-text-color;
+ border-color: var(--primary);
}
&.copied {
@@ -2828,7 +2828,7 @@ $ui-header-height: 55px;
margin-bottom: 40px + 20px;
.app-form__avatar-input {
- border: 2px solid $ui-base-color;
+ border: 2px solid var(--background);
position: absolute;
inset-inline-start: -2px;
bottom: -40px;
@@ -2849,7 +2849,7 @@ $ui-header-height: 55px;
display: flex;
flex-direction: column;
flex: 0 1 auto;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
transition: box-shadow 300ms linear;
min-height: 0;
position: relative;
@@ -2879,11 +2879,11 @@ $ui-header-height: 55px;
&__text {
padding: 15px;
- color: $secondary-text-color;
+ color: var(--on-background-muted);
strong {
font-weight: 700;
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
@@ -2904,7 +2904,7 @@ $ui-header-height: 55px;
.compose-form__autosuggest-wrapper {
overflow-y: auto;
background-color: $white;
- border-radius: 4px 4px 0 0;
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
flex: 0 1 auto;
}
@@ -2941,7 +2941,7 @@ $ui-header-height: 55px;
flex: 0 0 auto;
border: 0;
background: transparent;
- border-top: 1px solid lighten($ui-base-color, 4%);
+ border-top: 1px solid var(--background-outline);
margin: 10px 0;
}
@@ -2957,14 +2957,14 @@ $ui-header-height: 55px;
position: relative;
overflow: hidden;
display: flex;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
.drawer__inner {
position: absolute;
top: 0;
inset-inline-start: 0;
- background: $ui-base-color;
+ background: var(--background);
box-sizing: border-box;
padding: 0;
display: flex;
@@ -2975,12 +2975,12 @@ $ui-header-height: 55px;
height: 100%;
&.darker {
- background: $ui-base-color;
+ background: var(--background);
}
}
.drawer__inner__mastodon {
- background: $ui-base-color
+ background: var(--background)
url('data:image/svg+xml;utf8,')
no-repeat bottom / 100% auto;
flex: 1;
@@ -3003,7 +3003,7 @@ $ui-header-height: 55px;
}
.pseudo-drawer {
- background: lighten($ui-base-color, 13%);
+ background: var(--background);
font-size: 13px;
text-align: start;
}
@@ -3011,15 +3011,15 @@ $ui-header-height: 55px;
.drawer__header {
flex: 0 0 auto;
font-size: 16px;
- background: $ui-base-color;
+ background: var(--background);
margin-bottom: 10px;
display: flex;
flex-direction: row;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
overflow: hidden;
a:hover {
- background: lighten($ui-base-color, 3%);
+ background: var(--background-highlighted);
}
}
@@ -3064,15 +3064,15 @@ $ui-header-height: 55px;
.column-back-button {
box-sizing: border-box;
width: 100%;
- background: $ui-base-color;
- border-radius: 4px 4px 0 0;
- color: $highlight-text-color;
+ background: var(--background);
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+ color: var(--primary);
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
line-height: inherit;
border: 0;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-outline);
text-align: unset;
padding: 15px;
margin: 0;
@@ -3089,10 +3089,10 @@ $ui-header-height: 55px;
.column-header__back-button {
display: flex;
align-items: center;
- background: $ui-base-color;
+ background: var(--background);
border: 0;
font-family: inherit;
- color: $highlight-text-color;
+ color: var(--primary);
cursor: pointer;
white-space: nowrap;
font-size: 16px;
@@ -3171,7 +3171,7 @@ $ui-header-height: 55px;
width: 16px;
height: 16px;
border-radius: 50%;
- background-color: $primary-text-color;
+ background-color: var(--on-background);
box-sizing: border-box;
transition: all 0.25s ease;
transition-property: border-color, left;
@@ -3183,24 +3183,24 @@ $ui-header-height: 55px;
}
.switch-to-advanced {
- color: $light-text-color;
- background-color: $ui-base-color;
+ color: var(--on-background-muted);
+ background-color: var(--background);
padding: 15px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
margin-top: 4px;
margin-bottom: 12px;
font-size: 13px;
line-height: 18px;
.switch-to-advanced__toggle {
- color: $ui-button-tertiary-color;
+ color: var(--on-primary);
font-weight: bold;
}
}
.column-link {
- background: lighten($ui-base-color, 8%);
- color: $primary-text-color;
+ background: var(--surface);
+ color: var(--on-surface);
display: flex;
align-items: center;
gap: 5px;
@@ -3215,7 +3215,7 @@ $ui-header-height: 55px;
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 11%);
+ background: var(--surface-highlighted);
}
&:focus {
@@ -3229,17 +3229,17 @@ $ui-header-height: 55px;
&--transparent {
background: transparent;
- color: $ui-secondary-color;
+ color: var(--on-background-muted);
&:hover,
&:focus,
&:active {
background: transparent;
- color: $primary-text-color;
+ color: var(--on-background);
}
&.active {
- color: $highlight-text-color;
+ color: var(--primary);
}
}
@@ -3257,18 +3257,18 @@ $ui-header-height: 55px;
.column-link__badge {
display: inline-block;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
font-size: 12px;
line-height: 19px;
font-weight: 500;
- background: $ui-base-color;
+ background: var(--background);
padding: 4px 8px;
margin: -6px 10px;
}
.column-subheading {
- background: $ui-base-color;
- color: $dark-text-color;
+ background: var(--background);
+ color: var(--on-background-muted);
padding: 8px 20px;
font-size: 12px;
font-weight: 500;
@@ -3279,7 +3279,7 @@ $ui-header-height: 55px;
.getting-started__wrapper,
.getting-started,
.flex-spacer {
- background: $ui-base-color;
+ background: var(--background);
}
.getting-started__wrapper {
@@ -3291,7 +3291,7 @@ $ui-header-height: 55px;
}
.getting-started {
- color: $dark-text-color;
+ color: var(--on-background-muted);
overflow: auto;
&__trends {
@@ -3301,14 +3301,14 @@ $ui-header-height: 55px;
margin-top: 10px;
h4 {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
padding: 10px;
font-size: 12px;
text-transform: uppercase;
font-weight: 500;
a {
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-decoration: none;
}
}
@@ -3334,7 +3334,7 @@ $ui-header-height: 55px;
padding: 10px;
&__current {
- color: $darker-text-color;
+ color: var(--on-background-muted);
}
}
}
@@ -3356,8 +3356,8 @@ $ui-header-height: 55px;
kbd {
display: inline-block;
padding: 3px 5px;
- background-color: lighten($ui-base-color, 8%);
- border: 1px solid darken($ui-base-color, 4%);
+ background-color: var(--surface);
+ border: 1px solid var(--surface-outline);
}
}
@@ -3371,7 +3371,7 @@ $ui-header-height: 55px;
font-family: inherit;
font-size: 14px;
line-height: 22px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
border: 1px solid $white;
&:focus {
@@ -3383,7 +3383,7 @@ $ui-header-height: 55px;
background: $white;
border: 1px solid $ui-secondary-color;
margin-bottom: 10px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
.setting-text {
border: 0;
@@ -3419,11 +3419,11 @@ $ui-header-height: 55px;
align-items: center;
position: relative;
font-size: 14px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin-top: 14px;
text-decoration: none;
overflow: hidden;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-outline);
border-radius: 8px;
&__actions {
@@ -3451,7 +3451,7 @@ $ui-header-height: 55px;
button,
a {
display: inline;
- color: $secondary-text-color;
+ color: var(--on-background-muted);
background: transparent;
border: 0;
padding: 0 8px;
@@ -3462,7 +3462,7 @@ $ui-header-height: 55px;
&:hover,
&:active,
&:focus {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
@@ -3484,7 +3484,7 @@ a.status-card {
.status-card__host,
.status-card__author,
.status-card__description {
- color: $highlight-text-color;
+ color: var(--primary);
}
}
}
@@ -3500,7 +3500,7 @@ a.status-card {
.status-card__host,
.status-card__author,
.status-card__description {
- color: $highlight-text-color;
+ color: var(--primary);
}
}
}
@@ -3530,7 +3530,7 @@ a.status-card {
font-weight: 700;
font-size: 19px;
line-height: 24px;
- color: $primary-text-color;
+ color: var(--on-background);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -3564,7 +3564,7 @@ a.status-card {
display: block;
margin-top: 8px;
font-size: 14px;
- color: $primary-text-color;
+ color: var(--on-background);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -3587,7 +3587,7 @@ a.status-card {
flex: 0 0 auto;
width: 120px;
aspect-ratio: 1;
- background: lighten($ui-base-color, 8%);
+ background: var(--surface);
position: relative;
& > .icon {
@@ -3661,7 +3661,7 @@ a.status-card {
.load-more {
display: block;
- color: $dark-text-color;
+ color: var(--on-background-muted);
background-color: transparent;
border: 0;
font-size: inherit;
@@ -3675,17 +3675,17 @@ a.status-card {
text-decoration: none;
&:hover {
- background: lighten($ui-base-color, 2%);
+ color: var(--on-background-muted);
}
}
.load-gap {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
}
.timeline-hint {
text-align: center;
- color: $darker-text-color;
+ color: var(--on-background-muted);
padding: 15px;
box-sizing: border-box;
width: 100%;
@@ -3696,14 +3696,13 @@ a.status-card {
}
a {
- color: $highlight-text-color;
+ color: var(--primary);
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
- color: lighten($highlight-text-color, 4%);
}
}
}
@@ -3712,8 +3711,8 @@ a.status-card {
text-align: center;
font-size: 16px;
font-weight: 500;
- color: $dark-text-color;
- background: $ui-base-color;
+ color: var(--on-background-muted);
+ background: var(--background);
cursor: default;
display: flex;
flex: 1 1 auto;
@@ -3742,7 +3741,7 @@ a.status-card {
strong {
display: block;
margin-bottom: 10px;
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
span {
@@ -3789,9 +3788,9 @@ a.status-card {
.column-header {
display: flex;
font-size: 16px;
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px 4px 0 0;
+ background: var(--background);
+ border: 1px solid var(--background-outline);
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
flex: 0 0 auto;
cursor: pointer;
position: relative;
@@ -3821,13 +3820,13 @@ a.status-card {
}
& > .column-header__back-button {
- color: $highlight-text-color;
+ color: var(--primary);
}
&.active {
.column-header__icon {
- color: $highlight-text-color;
- text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
+ color: var(--primary);
+ // text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
}
}
@@ -3854,9 +3853,9 @@ a.status-card {
display: flex;
justify-content: center;
align-items: center;
- background: $ui-base-color;
+ background: var(--background);
border: 0;
- color: $darker-text-color;
+ color: var(--on-background-muted);
cursor: pointer;
font-size: 16px;
padding: 0 15px;
@@ -3866,7 +3865,7 @@ a.status-card {
}
&:hover {
- color: lighten($darker-text-color, 4%);
+ color: var(--on-background);
}
&:focus-visible {
@@ -3874,17 +3873,18 @@ a.status-card {
}
&.active {
- color: $primary-text-color;
- background: lighten($ui-base-color, 4%);
+ color: var(--on-background);
+ background: var(--background-outline);
&:hover {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
&:disabled {
- color: $dark-text-color;
+ color: var(--on-background-muted);
cursor: default;
+ opacity: 0.5;
}
}
@@ -3892,8 +3892,8 @@ a.status-card {
max-height: 70vh;
overflow: hidden;
overflow-y: auto;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
- color: $darker-text-color;
+ border-bottom: 1px solid var(--background-outline);
+ color: var(--on-background-muted);
transition:
max-height 150ms ease-in-out,
opacity 300ms linear;
@@ -3904,6 +3904,7 @@ a.status-card {
&.collapsed {
max-height: 0;
opacity: 0.5;
+ border-bottom: 0;
}
&.animating {
@@ -3914,20 +3915,20 @@ a.status-card {
height: 0;
background: transparent;
border: 0;
- border-top: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid var(--background-outline);
margin: 10px 0;
}
}
.column-header__collapsible-inner {
- background: $ui-base-color;
+ background: var(--background);
padding: 15px;
}
.column-header__setting-btn {
&:hover,
&:focus {
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-decoration: underline;
}
}
@@ -3981,13 +3982,13 @@ a.status-card {
color: $warning-red;
&:hover {
- color: $error-red;
+ color: var(--dangerous);
text-decoration: underline;
}
}
.loading-indicator {
- color: $dark-text-color;
+ color: var(--on-background-muted);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
@@ -4006,14 +4007,14 @@ a.status-card {
transform: none;
.circular-progress {
- color: $primary-text-color;
+ color: var(--on-background);
width: 22px;
height: 22px;
}
}
.circular-progress {
- color: lighten($ui-base-color, 26%);
+ color: var(--on-background-muted);
animation: 1.4s linear 0s infinite normal none running simple-rotate;
circle {
@@ -4097,8 +4098,8 @@ a.status-card {
.video-error-cover {
align-items: center;
- background: $base-overlay-background;
- color: $primary-text-color;
+ background: var(--overlay);
+ color: var(--on-overlay);
cursor: pointer;
display: flex;
flex-direction: column;
@@ -4111,20 +4112,19 @@ a.status-card {
}
.media-spoiler {
- background: $base-overlay-background;
- color: $darker-text-color;
+ background: var(--overlay);
+ color: var(--on-overlay);
border: 0;
padding: 0;
width: 100%;
height: 100%;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
appearance: none;
&:hover,
&:active,
&:focus {
padding: 0;
- color: lighten($darker-text-color, 8%);
}
}
@@ -4173,10 +4173,10 @@ a.status-card {
padding: 0;
margin: 0;
border: 0;
- color: $white;
+ color: var(--on-overlay);
&__label {
- background-color: rgba($black, 0.45);
+ background-color: var(--overlay-variant);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
border-radius: 6px;
padding: 10px 15px;
@@ -4197,20 +4197,20 @@ a.status-card {
&:hover,
&:focus {
.spoiler-button__overlay__label {
- background-color: rgba($black, 0.9);
+ background-color: var(--overlay-variant-highlighted);
}
}
}
}
.modal-container--preloader {
- background: lighten($ui-base-color, 8%);
+ background: var(--surface);
}
.account--panel {
- background: lighten($ui-base-color, 4%);
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-top: 1px solid var(--background-outline);
+ border-bottom: 1px solid var(--background-outline);
display: flex;
flex-direction: row;
padding: 10px 0;
@@ -4223,12 +4223,12 @@ a.status-card {
}
.column-settings__outer {
- background: lighten($ui-base-color, 8%);
+ background: var(--surface);
padding: 15px;
}
.column-settings__section {
- color: $darker-text-color;
+ color: var(--on-surface-muted);
cursor: default;
display: block;
font-weight: 500;
@@ -4282,7 +4282,7 @@ a.status-card {
}
&__multi-value {
- background: lighten($ui-base-color, 8%);
+ background: var(--surface);
&__remove {
cursor: pointer;
@@ -4316,7 +4316,7 @@ a.status-card {
}
&__indicator-separator {
- background-color: lighten($ui-base-color, 8%);
+ background-color: var(--surface-outline);
}
&__menu {
@@ -4332,7 +4332,7 @@ a.status-card {
&__option {
color: $inverted-text-color;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
font-size: 14px;
&--is-focused,
@@ -4350,16 +4350,16 @@ a.status-card {
}
.relationship-tag {
- color: $white;
+ color: var(--on-overlay);
margin-bottom: 4px;
display: block;
- background-color: rgba($black, 0.45);
+ background-color: var(--overlay-variant);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
padding: 2px 6px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
.setting-toggle {
@@ -4368,7 +4368,7 @@ a.status-card {
}
.setting-toggle__label {
- color: $darker-text-color;
+ color: var(--on-background-muted);
display: inline-block;
margin-bottom: 14px;
margin-inline-start: 8px;
@@ -4377,7 +4377,7 @@ a.status-card {
.limited-account-hint {
p {
- color: $secondary-text-color;
+ color: var(--on-background-muted);
font-size: 15px;
font-weight: 500;
margin-bottom: 20px;
@@ -4386,8 +4386,8 @@ a.status-card {
.empty-column-indicator,
.follow_requests-unlocked_explanation {
- color: $dark-text-color;
- background: $ui-base-color;
+ color: var(--on-background-muted);
+ background: var(--background);
text-align: center;
padding: 20px;
font-size: 15px;
@@ -4403,7 +4403,7 @@ a.status-card {
}
a {
- color: $highlight-text-color;
+ color: var(--primary);
text-decoration: none;
&:hover {
@@ -4413,16 +4413,16 @@ a.status-card {
}
.follow_requests-unlocked_explanation {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-bottom: 1px solid var(--background-outline);
contain: initial;
flex-grow: 0;
}
.error-column {
padding: 20px;
- background: $ui-base-color;
- border-radius: 4px;
+ background: var(--background);
+ border-radius: var(--radius-sm);
display: flex;
flex: 1 1 auto;
align-items: center;
@@ -4438,7 +4438,7 @@ a.status-card {
&__message {
text-align: center;
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-size: 15px;
line-height: 22px;
@@ -4447,7 +4447,7 @@ a.status-card {
line-height: 33px;
font-weight: 700;
margin-bottom: 15px;
- color: $primary-text-color;
+ color: var(--on-background);
}
p {
@@ -4537,7 +4537,7 @@ a.status-card {
background: $simple-background-color;
position: relative;
box-shadow: var(--dropdown-shadow);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
margin-top: 5px;
z-index: 2;
@@ -4563,7 +4563,7 @@ a.status-card {
top: -4px;
inset-inline-start: -8px;
background: $simple-background-color;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden;
@@ -4594,7 +4594,7 @@ a.status-card {
.upload-area {
align-items: center;
- background: rgba($base-overlay-background, 0.8);
+ background: var(--overlay-variant);
display: flex;
height: 100vh;
justify-content: center;
@@ -4627,9 +4627,9 @@ a.status-card {
bottom: 0;
inset-inline-start: 0;
z-index: -1;
- border-radius: 4px;
- background: $ui-base-color;
- box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+ border-radius: var(--radius-sm);
+ background: var(--background);
+ box-shadow: var(--dropdown-shadow);
}
.upload-area__content {
@@ -4638,11 +4638,11 @@ a.status-card {
align-items: center;
justify-content: center;
text-align: center;
- color: $secondary-text-color;
+ color: var(--on-background-muted);
font-size: 18px;
font-weight: 500;
- border: 2px dashed $ui-base-lighter-color;
- border-radius: 4px;
+ border: 2px dashed var(--background-outline);
+ border-radius: var(--radius-sm);
}
.upload-progress {
@@ -4730,7 +4730,7 @@ a.status-card {
.privacy-dropdown__dropdown {
background: $simple-background-color;
box-shadow: var(--dropdown-shadow);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
overflow: hidden;
z-index: 2;
@@ -4761,14 +4761,14 @@ a.status-card {
&:hover,
&.active {
background: $ui-highlight-color;
- color: $primary-text-color;
+ color: var(--on-background);
outline: 0;
.privacy-dropdown__option__content {
- color: $primary-text-color;
+ color: var(--on-background);
strong {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
@@ -4806,7 +4806,7 @@ a.status-card {
&__dropdown {
background: $simple-background-color;
box-shadow: var(--dropdown-shadow);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
overflow: hidden;
z-index: 2;
@@ -4836,7 +4836,7 @@ a.status-card {
color: $inverted-text-color;
font-weight: 500;
padding: 10px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
display: flex;
gap: 6px;
align-items: center;
@@ -4853,7 +4853,7 @@ a.status-card {
&.active {
background: $ui-highlight-color;
- color: $primary-text-color;
+ color: var(--on-background);
outline: 0;
.language-dropdown__dropdown__results__item__common-name {
@@ -4880,8 +4880,9 @@ a.status-card {
inset-inline-start: 0;
margin-top: -2px;
width: 100%;
- background: $ui-base-color;
- border-radius: 0 0 4px 4px;
+ background: var(--surface);
+ border: 1px solid var(--surface-outline);
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
box-shadow: var(--dropdown-shadow);
z-index: 99;
font-size: 13px;
@@ -4889,7 +4890,7 @@ a.status-card {
h4 {
text-transform: uppercase;
- color: $dark-text-color;
+ color: var(--on-surface-muted);
font-weight: 500;
padding: 0 10px;
margin-bottom: 10px;
@@ -4897,6 +4898,7 @@ a.status-card {
.icon-button {
padding: 0;
+ color: var(--on-surface-muted);
}
.icon {
@@ -4912,7 +4914,7 @@ a.status-card {
}
&__message {
- color: $dark-text-color;
+ color: var(--on-surface-muted);
padding: 0 10px;
}
@@ -4923,10 +4925,10 @@ a.status-card {
border: 0;
font: inherit;
background: transparent;
- color: $darker-text-color;
+ color: var(--on-surface-muted);
padding: 10px;
cursor: pointer;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
text-align: start;
text-overflow: ellipsis;
overflow: hidden;
@@ -4945,18 +4947,19 @@ a.status-card {
&:focus,
&:active,
&.selected {
- background: $ui-highlight-color;
- color: $primary-text-color;
+ background: var(--primary);
+ color: var(--on-primary);
- .icon-button {
- color: $primary-text-color;
+ .icon-button,
+ mark {
+ color: var(--on-primary);
}
}
mark {
background: transparent;
font-weight: 700;
- color: $primary-text-color;
+ color: var(--on-background);
}
span {
@@ -4968,6 +4971,10 @@ a.status-card {
}
&.active {
+ .search__input {
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+ }
+
.search__popout {
display: block;
}
@@ -4983,10 +4990,6 @@ a.status-card {
line-height: 18px;
font-size: 16px;
- &::placeholder {
- color: lighten($darker-text-color, 4%);
- }
-
&::-moz-focus-inner {
border: 0;
}
@@ -4996,10 +4999,6 @@ a.status-card {
&:active {
outline: 0 !important;
}
-
- &:focus {
- background: lighten($ui-base-color, 4%);
- }
}
.search__icon {
@@ -5022,7 +5021,7 @@ a.status-card {
transition-property: transform, opacity;
width: 24px;
height: 24px;
- color: $secondary-text-color;
+ color: var(--on-surface-muted);
cursor: default;
pointer-events: none;
@@ -5043,7 +5042,6 @@ a.status-card {
.icon-times-circle {
transform: rotate(0deg);
- color: $action-button-color;
cursor: pointer;
&.active {
@@ -5052,14 +5050,14 @@ a.status-card {
}
&:hover {
- color: lighten($action-button-color, 7%);
+ color: var(--on-surface);
}
}
}
.search-results__header {
- color: $dark-text-color;
- background: lighten($ui-base-color, 2%);
+ color: var(--on-background-muted);
+ background: var(--background);
padding: 15px;
font-weight: 500;
font-size: 16px;
@@ -5070,19 +5068,16 @@ a.status-card {
}
.search-results__section {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
-
- &:last-child {
- border-bottom: 0;
- }
+ border: 1px solid var(--background-outline);
+ border-top: 0;
&__header {
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-bottom: 1px solid var(--background-outline);
padding: 15px;
font-weight: 500;
font-size: 14px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
display: flex;
justify-content: space-between;
@@ -5093,7 +5088,7 @@ a.status-card {
}
button {
- color: $highlight-text-color;
+ color: var(--primary);
padding: 0;
border: 0;
background: 0;
@@ -5306,16 +5301,16 @@ a.status-card {
}
&.star-icon.active {
- color: $gold-star;
+ color: var(--favourite);
&:hover,
&:focus,
&:active {
- background: rgba($gold-star, 0.15);
+ background: rgba(var(--favourite), 0.15);
}
&:focus {
- background: rgba($gold-star, 0.3);
+ background: rgba(var(--favourite), 0.3);
}
}
@@ -5444,7 +5439,7 @@ a.status-card {
line-height: inherit;
height: auto;
margin: -10px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
background-color: transparent;
&:hover,
@@ -5485,11 +5480,11 @@ a.status-card {
}
&__case {
- background: $ui-base-color;
+ background: var(--background);
color: $secondary-text-color;
font-weight: 500;
padding: 10px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
}
@@ -5647,7 +5642,7 @@ a.status-card {
}
.status__content__spoiler-link {
- color: $primary-text-color;
+ color: var(--on-background);
background: $ui-primary-color;
&:hover {
@@ -5725,7 +5720,7 @@ a.status-card {
resize: vertical;
border: 0;
outline: 0;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
margin: 20px 0;
&::placeholder {
@@ -5760,8 +5755,8 @@ a.status-card {
&:focus,
&:active {
background: transparent;
- border-color: $ui-button-background-color;
- color: $ui-button-background-color;
+ border-color: var(--primary);
+ color: var(--primary);
}
}
@@ -5927,7 +5922,7 @@ a.status-card {
&,
button {
background: $ui-highlight-color;
- color: $primary-text-color;
+ color: var(--on-background);
}
}
@@ -5994,7 +5989,7 @@ a.status-card {
url("data:image/svg+xml;utf8,")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
padding: 6px 10px;
padding-inline-end: 30px;
}
@@ -6102,7 +6097,7 @@ a.status-card {
background: rgba($black, 0.65);
backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
padding: 2px 6px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
z-index: 1;
@@ -6118,8 +6113,8 @@ a.status-card {
.attachment-list {
display: flex;
font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
- border-radius: 4px;
+ border: 1px solid var(--background-outline);
+ border-radius: var(--radius-sm);
margin-top: 16px;
overflow: hidden;
@@ -6128,7 +6123,7 @@ a.status-card {
color: $dark-text-color;
padding: 8px 18px;
cursor: default;
- border-inline-end: 1px solid lighten($ui-base-color, 8%);
+ border-inline-end: 1px solid var(--background-outline);
display: flex;
flex-direction: column;
align-items: center;
@@ -6279,7 +6274,7 @@ a.status-card {
overflow: hidden;
box-sizing: border-box;
position: relative;
- background: darken($ui-base-color, 8%);
+ background: var(--background);
border-radius: 8px;
padding-bottom: 44px;
width: 100%;
@@ -6536,7 +6531,7 @@ a.status-card {
content: '';
width: 50px;
background: rgba($white, 0.35);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
display: block;
position: absolute;
height: 4px;
@@ -6549,7 +6544,7 @@ a.status-card {
display: block;
position: absolute;
height: 4px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
inset-inline-start: 0;
top: 50%;
transform: translate(0, -50%);
@@ -6606,7 +6601,7 @@ a.status-card {
content: '';
width: 100%;
background: rgba($white, 0.35);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
display: block;
position: absolute;
height: 4px;
@@ -6618,7 +6613,7 @@ a.status-card {
display: block;
position: absolute;
height: 4px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
top: 14px;
background: lighten($ui-highlight-color, 8%);
}
@@ -6675,20 +6670,20 @@ a.status-card {
.scrollable .account-card {
margin: 10px;
- background: lighten($ui-base-color, 8%);
+ background: var(--background);
}
.scrollable .account-card__title__avatar {
img,
.account__avatar {
- border-color: lighten($ui-base-color, 8%);
+ border-color: var(--background-outline);
}
}
.scrollable .account-card__bio::after {
background: linear-gradient(
to left,
- lighten($ui-base-color, 8%),
+ var(--background),
transparent
);
}
@@ -6704,7 +6699,7 @@ a.status-card {
box-sizing: border-box;
display: block;
position: relative;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
overflow: hidden;
margin: 2px;
@@ -6719,8 +6714,9 @@ a.status-card {
.notification__filter-bar,
.account__section-headline {
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border: 1px solid var(--background-outline);
+ border-top: 0;
cursor: default;
display: flex;
flex-shrink: 0;
@@ -6735,7 +6731,7 @@ a.status-card {
a {
display: block;
flex: 1 1 auto;
- color: $darker-text-color;
+ color: var(--on-background-muted);
padding: 15px 0;
font-size: 14px;
font-weight: 500;
@@ -6746,7 +6742,7 @@ a.status-card {
white-space: nowrap;
&.active {
- color: $primary-text-color;
+ color: var(--on-background);
&::before {
display: block;
@@ -6756,15 +6752,15 @@ a.status-card {
left: 0;
width: 100%;
height: 3px;
- border-radius: 4px;
- background: $highlight-text-color;
+ border-radius: var(--radius-sm);
+ background: var(--primary);
}
}
}
}
.filter-form {
- background: $ui-base-color;
+ background: var(--background);
&__column {
padding: 10px 15px;
@@ -6971,12 +6967,12 @@ noscript {
border: 0;
padding: 10px;
font-family: $font-monospace, monospace;
- background: $ui-base-color;
- color: $primary-text-color;
+ background: var(--background);
+ color: var(--on-background);
font-size: 14px;
margin: 0;
margin-bottom: 15px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
&::-moz-focus-inner {
border: 0;
@@ -7002,7 +6998,7 @@ noscript {
max-width: 100%;
overflow: hidden;
border: 0;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
}
}
@@ -7011,7 +7007,7 @@ noscript {
.follow-request-banner,
.account-memorial-banner {
padding: 20px;
- background: lighten($ui-base-color, 4%);
+ background: var(--background);
display: flex;
align-items: center;
flex-direction: column;
@@ -7054,7 +7050,7 @@ noscript {
justify-content: flex-start;
gap: 15px;
align-items: center;
- background: lighten($ui-base-color, 4%);
+ background: var(--background);
label {
flex: 1 1 auto;
@@ -7076,7 +7072,7 @@ noscript {
}
.list-editor {
- background: $ui-base-color;
+ background: var(--background);
flex-direction: column;
border-radius: 8px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -7089,7 +7085,7 @@ noscript {
h4 {
padding: 15px 0;
- background: lighten($ui-base-color, 13%);
+ background: var(--on-background-muted);
font-weight: 500;
font-size: 16px;
text-align: center;
@@ -7098,7 +7094,7 @@ noscript {
.drawer__pager {
height: 50vh;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
.drawer__inner {
@@ -7131,7 +7127,7 @@ noscript {
}
.list-adder {
- background: $ui-base-color;
+ background: var(--background);
flex-direction: column;
border-radius: 8px;
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@@ -7143,11 +7139,11 @@ noscript {
}
&__account {
- background: lighten($ui-base-color, 13%);
+ // background: lighten($ui-base-color, 13%);
}
&__lists {
- background: lighten($ui-base-color, 13%);
+ // background: lighten($ui-base-color, 13%);
height: 50vh;
border-radius: 0 0 8px 8px;
overflow-y: auto;
@@ -7155,7 +7151,7 @@ noscript {
.list {
padding: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
}
.list__wrapper {
@@ -7224,7 +7220,7 @@ noscript {
}
strong {
- color: $primary-text-color;
+ color: var(--on-background);
font-size: 14px;
font-weight: 500;
display: block;
@@ -7232,7 +7228,7 @@ noscript {
}
div {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
}
}
@@ -7298,8 +7294,8 @@ noscript {
overflow: hidden;
height: 145px;
position: relative;
- background: darken($ui-base-color, 4%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ background: var(--background);
+ border-bottom: 1px solid var(--background-outline);
img {
object-fit: cover;
@@ -7313,7 +7309,7 @@ noscript {
&__bar {
position: relative;
padding: 0 20px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
.avatar {
display: block;
@@ -7321,8 +7317,8 @@ noscript {
width: 94px;
.account__avatar {
- background: darken($ui-base-color, 8%);
- border: 2px solid $ui-base-color;
+ background: var(--surface);
+ border: 2px solid var(--background);
}
}
}
@@ -7364,8 +7360,8 @@ noscript {
}
.icon-button {
- border: 1px solid lighten($ui-base-color, 12%);
- border-radius: 4px;
+ border: 1px solid var(--background-outline);
+ border-radius: var(--radius-sm);
box-sizing: content-box;
padding: 5px;
@@ -7398,7 +7394,7 @@ noscript {
h1 {
font-size: 17px;
line-height: 22px;
- color: $primary-text-color;
+ color: var(--on-background);
font-weight: 700;
overflow: hidden;
white-space: nowrap;
@@ -7407,7 +7403,7 @@ noscript {
small {
display: block;
font-size: 15px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
@@ -7426,20 +7422,32 @@ noscript {
&__bio {
.account__header__content {
- color: $primary-text-color;
+ color: var(--on-background);
}
.account__header__fields {
margin: 0;
margin-top: 16px;
- border-radius: 4px;
- background: darken($ui-base-color, 4%);
+ border-radius: var(--radius-sm);
+ background: var(--background);
border: 0;
dl {
display: block;
padding: 11px 16px;
- border-bottom-color: lighten($ui-base-color, 4%);
+ border: 1px solid var(--background-outline);
+ border-top: 0;
+
+ &:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ border-top: 1px solid var(--background-outline);
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
}
dd,
@@ -7454,11 +7462,11 @@ noscript {
width: auto;
background: transparent;
text-transform: uppercase;
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
dd {
- color: $darker-text-color;
+ color: var(--on-background);
}
a {
@@ -7471,23 +7479,16 @@ noscript {
}
.verified {
- border: 1px solid rgba($valid-value-color, 0.5);
+ border: 1px solid var(--successful-outline);
margin-top: -1px;
&:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
margin-top: 0;
}
- &:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-
dt,
dd {
- color: $valid-value-color;
+ color: var(--successful);
}
dd {
@@ -7501,7 +7502,7 @@ noscript {
}
a {
- color: $valid-value-color;
+ color: var(--successful);
}
}
}
@@ -7512,28 +7513,28 @@ noscript {
&__links {
font-size: 14px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin: 0 -10px;
padding-top: 16px;
padding-bottom: 10px;
a {
display: inline-block;
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-decoration: none;
padding: 5px 10px;
font-weight: 500;
strong {
font-weight: 700;
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
}
&__account-note {
- color: $primary-text-color;
+ color: var(--on-background);
font-size: 14px;
font-weight: 400;
margin-bottom: 10px;
@@ -7542,7 +7543,7 @@ noscript {
display: block;
font-size: 12px;
font-weight: 500;
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-transform: uppercase;
margin-bottom: 5px;
}
@@ -7551,7 +7552,7 @@ noscript {
display: block;
box-sizing: border-box;
width: calc(100% + 20px);
- color: $secondary-text-color;
+ color: var(--on-surface);
background: transparent;
padding: 10px;
margin: 0 -10px;
@@ -7560,15 +7561,15 @@ noscript {
resize: none;
border: 0;
outline: 0;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
&::placeholder {
- color: $dark-text-color;
+ color: var(--on-surface-muted);
opacity: 1;
}
&:focus {
- background: $ui-base-color;
+ background: var(--surface);
}
}
}
@@ -7587,7 +7588,7 @@ noscript {
.verified-badge {
display: inline-flex;
align-items: center;
- color: $valid-value-color;
+ color: var(--successful);
gap: 4px;
overflow: hidden;
white-space: nowrap;
@@ -7614,7 +7615,7 @@ noscript {
display: flex;
align-items: center;
padding: 15px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
gap: 15px;
&:last-child {
@@ -7623,7 +7624,7 @@ noscript {
&__name {
flex: 1 1 auto;
- color: $dark-text-color;
+ color: var(--on-background-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -7633,7 +7634,7 @@ noscript {
}
a {
- color: $darker-text-color;
+ color: var(--on-background-muted);
text-decoration: none;
font-size: 14px;
font-weight: 500;
@@ -7657,7 +7658,7 @@ noscript {
font-size: 24px;
font-weight: 500;
text-align: end;
- color: $secondary-text-color;
+ color: var(--on-background-muted);
text-decoration: none;
}
@@ -7666,60 +7667,62 @@ noscript {
width: 50px;
path:first-child {
- fill: rgba($highlight-text-color, 0.25) !important;
- fill-opacity: 1 !important;
+ fill: var(--primary) !important;
+ fill-opacity: 0.25 !important;
}
path:last-child {
- stroke: lighten($highlight-text-color, 6%) !important;
+ stroke: var(--primary-highlighted) !important;
fill: none !important;
}
}
&--requires-review {
.trends__item__name {
- color: $gold-star;
+ color: var(--favourite);
a {
- color: $gold-star;
+ color: var(--favourite);
}
}
.trends__item__current {
- color: $gold-star;
+ color: var(--favourite);
}
.trends__item__sparkline {
path:first-child {
- fill: rgba($gold-star, 0.25) !important;
+ fill: var(--favourite) !important;
+ fill-opacity: 0.25 !important;
}
path:last-child {
- stroke: lighten($gold-star, 6%) !important;
+ stroke: var(--favourite-highlighted) !important;
}
}
}
&--disabled {
.trends__item__name {
- color: lighten($ui-base-color, 12%);
+ color: var(--on-background-muted);
a {
- color: lighten($ui-base-color, 12%);
+ color: var(--on-background-muted);
}
}
.trends__item__current {
- color: lighten($ui-base-color, 12%);
+ color: var(--on-background-muted);
}
.trends__item__sparkline {
path:first-child {
- fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
+ fill: var(--on-background-muted) !important;
+ fill-opacity: 0.25 !important;
}
path:last-child {
- stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
+ stroke: var(--on-background-muted) !important;
}
}
}
@@ -7732,12 +7735,12 @@ noscript {
.conversation {
display: flex;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
padding: 5px;
padding-bottom: 0;
&:focus {
- background: lighten($ui-base-color, 2%);
+ background: var(--background-highlighted);
outline: 0;
}
@@ -7751,7 +7754,8 @@ noscript {
&__unread {
display: inline-block;
- background: $highlight-text-color;
+ background: var(--primary);
+ color: var(--on-primary);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@@ -7773,12 +7777,12 @@ noscript {
&__relative-time {
font-size: 15px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
padding-inline-start: 15px;
}
&__names {
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-size: 15px;
white-space: nowrap;
overflow: hidden;
@@ -7788,7 +7792,7 @@ noscript {
flex-grow: 1;
a {
- color: $primary-text-color;
+ color: var(--on-background);
text-decoration: none;
&:hover,
@@ -7805,10 +7809,10 @@ noscript {
}
&--unread {
- background: lighten($ui-base-color, 2%);
+ background: var(--background-highlighted);
&:focus {
- background: lighten($ui-base-color, 4%);
+ background: var(--background-highlighted);
}
.conversation__content__info {
@@ -7816,13 +7820,13 @@ noscript {
}
.conversation__content__relative-time {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
.announcements {
- background: lighten($ui-base-color, 8%);
+ background: var(--background-outline);
font-size: 13px;
display: flex;
align-items: flex-end;
@@ -7872,7 +7876,8 @@ noscript {
top: 19px;
inset-inline-end: 19px;
display: block;
- background: $highlight-text-color;
+ background: var(--primary);
+ color: var(--on-primary);
border-radius: 50%;
width: 0.625rem;
height: 0.625rem;
@@ -7881,7 +7886,7 @@ noscript {
&__pagination {
padding: 15px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
position: absolute;
bottom: 3px;
inset-inline-end: 0;
@@ -7906,7 +7911,7 @@ noscript {
&__item {
flex-shrink: 0;
- background: lighten($ui-base-color, 12%);
+ background: var(--surface);
border: 0;
border-radius: 3px;
margin: 2px;
@@ -7943,18 +7948,18 @@ noscript {
font-weight: 500;
text-align: center;
margin-inline-start: 6px;
- color: $darker-text-color;
+ color: var(--on-surface);
}
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 16%);
+ background: var(--surface-highlighted);
transition: all 200ms ease-out;
transition-property: background-color, color;
&__count {
- color: lighten($darker-text-color, 4%);
+ color: var(--on-surface-highlighted);
}
}
@@ -8037,8 +8042,8 @@ noscript {
width: 300px;
&__footer {
- border-radius: 0 0 4px 4px;
- background: lighten($ui-base-color, 4%);
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+ background: var(--background-outline);
padding: 10px;
padding-top: 12px;
display: flex;
@@ -8046,8 +8051,8 @@ noscript {
}
&__header {
- border-radius: 4px 4px 0 0;
- background: lighten($ui-base-color, 4%);
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+ background: var(--background-outline);
padding: 10px;
display: flex;
justify-content: space-between;
@@ -8063,7 +8068,7 @@ noscript {
}
.display-name {
- color: $primary-text-color;
+ color: var(--on-background);
text-decoration: none;
strong,
@@ -8074,7 +8079,7 @@ noscript {
}
span {
- color: $darker-text-color;
+ color: var(--on-background-muted);
}
}
}
@@ -8087,8 +8092,8 @@ noscript {
.picture-in-picture-placeholder {
box-sizing: border-box;
- border: 2px dashed lighten($ui-base-color, 8%);
- background: $base-shadow-color;
+ border: 2px dashed var(--background-outline);
+ background: var(--overlay);
display: flex;
flex-direction: column;
align-items: center;
@@ -8097,7 +8102,7 @@ noscript {
font-size: 16px;
font-weight: 500;
cursor: pointer;
- color: $darker-text-color;
+ color: var(--on-overlay);
aspect-ratio: 16 / 9;
.icon {
@@ -8109,13 +8114,13 @@ noscript {
&:hover,
&:focus,
&:active {
- border-color: lighten($ui-base-color, 12%);
+ // border-color: lighten($ui-base-color, 12%);
}
}
.notifications-permission-banner {
padding: 30px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
display: flex;
flex-direction: column;
align-items: center;
@@ -8136,14 +8141,14 @@ noscript {
}
p {
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin-bottom: 15px;
text-align: center;
}
}
.explore__search-header {
- background: darken($ui-base-color, 4%);
+ background: var(--background);
justify-content: center;
align-items: center;
padding: 15px;
@@ -8154,19 +8159,13 @@ noscript {
}
.search__input {
- border: 1px solid lighten($ui-base-color, 8%);
padding: 10px;
padding-inline-end: 28px;
}
- .search__popout {
- border: 1px solid lighten($ui-base-color, 8%);
- }
-
.search .icon {
top: 9px;
inset-inline-end: 10px;
- color: $dark-text-color;
}
}
@@ -8174,7 +8173,7 @@ noscript {
flex: 1 1 auto;
display: flex;
flex-direction: column;
- background: $ui-base-color;
+ background: var(--background);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
@@ -8182,10 +8181,10 @@ noscript {
.story {
display: flex;
align-items: center;
- color: $primary-text-color;
+ color: var(--on-background);
text-decoration: none;
padding: 15px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
gap: 15px;
&:last-child {
@@ -8207,7 +8206,7 @@ noscript {
flex: 1 1 auto;
&__publisher {
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin-bottom: 8px;
}
@@ -8219,7 +8218,7 @@ noscript {
}
&__shared {
- color: $darker-text-color;
+ color: var(--on-background-muted);
}
strong {
@@ -8287,7 +8286,7 @@ noscript {
padding: 20px 0;
&__introduction {
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin-bottom: 20px;
strong {
@@ -8308,13 +8307,13 @@ noscript {
&__hero {
display: block;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
width: 100%;
height: auto;
margin-bottom: 20px;
aspect-ratio: 1.9;
border: 0;
- background: $ui-base-color;
+ background: var(--background);
object-fit: cover;
}
@@ -8336,19 +8335,19 @@ noscript {
&__number {
font-weight: 600;
- color: $primary-text-color;
+ color: var(--on-background);
font-size: 14px;
}
&__number-label {
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-weight: 500;
font-size: 14px;
}
h4 {
text-transform: uppercase;
- color: $darker-text-color;
+ color: var(--on-background-muted);
margin-bottom: 10px;
font-weight: 600;
}
@@ -8391,7 +8390,7 @@ noscript {
color: $darker-text-color;
strong {
- color: $primary-text-color;
+ color: var(--on-background);
font-weight: 700;
}
}
@@ -8421,9 +8420,9 @@ noscript {
&__input {
@include search-input;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--surface-outline);
padding: 4px 6px;
- color: $primary-text-color;
+ color: var(--on-surface);
font-size: 16px;
line-height: 18px;
display: flex;
@@ -8438,7 +8437,8 @@ noscript {
flex: 1 1 auto;
&::placeholder {
- color: lighten($darker-text-color, 4%);
+ color: var(--on-surface-muted);
+ opacity: 1;
}
&:focus {
@@ -8455,16 +8455,10 @@ noscript {
margin-top: -1px;
padding-top: 5px;
padding-bottom: 5px;
- border: 1px solid lighten($ui-base-color, 8%);
- }
-
- &.focused &__input {
- border-color: $highlight-text-color;
- background: lighten($ui-base-color, 4%);
}
&.invalid &__input {
- border-color: $error-red;
+ border-color: var(--dangerous);
}
&.expanded .search__popout {
@@ -8472,7 +8466,7 @@ noscript {
}
&.expanded &__input {
- border-radius: 4px 4px 0 0;
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
}
@@ -8528,10 +8522,10 @@ noscript {
input {
display: block;
font-family: inherit;
- background: darken($ui-base-color, 8%);
- border: 1px solid $highlight-text-color;
- color: $darker-text-color;
- border-radius: 4px;
+ background: var(--surface);
+ border: 1px solid var(--primary);
+ color: var(--on-surface-muted);
+ border-radius: var(--radius-sm);
padding: 6px 9px;
line-height: 22px;
font-size: 14px;
@@ -8541,7 +8535,6 @@ noscript {
&:focus {
outline: 0;
- background: darken($ui-base-color, 4%);
}
}
@@ -8564,11 +8557,11 @@ noscript {
}
.privacy-policy {
- background: $ui-base-color;
+ background: var(--background);
padding: 20px;
@media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
&__body {
@@ -8712,7 +8705,7 @@ noscript {
h6,
strong,
b {
- color: $primary-text-color;
+ color: var(--on-background);
font-weight: 700;
}
@@ -8734,14 +8727,14 @@ noscript {
code {
font-size: 0.875em;
- background: darken($ui-base-color, 8%);
- border-radius: 4px;
+ background: var(--surface);
+ border-radius: var(--radius-sm);
padding: 0.2em 0.3em;
}
hr {
border: 0;
- border-top: 1px solid lighten($ui-base-color, 4%);
+ border-top: 1px solid var(--background-outline);
margin-top: 3em;
margin-bottom: 3em;
}
@@ -8799,7 +8792,7 @@ noscript {
font-size: 15px;
line-height: 22px;
font-weight: 500;
- color: $primary-text-color;
+ color: var(--on-background);
p {
margin-bottom: 15px;
@@ -8859,7 +8852,7 @@ noscript {
}
a {
- color: $primary-text-color;
+ color: var(--on-background);
}
}
}
@@ -8904,7 +8897,7 @@ noscript {
font-size: 13px;
p {
- color: $dark-text-color;
+ color: var(--on-background-muted);
margin-bottom: 20px;
.version {
@@ -8916,7 +8909,7 @@ noscript {
}
a {
- color: $dark-text-color;
+ color: var(--on-background-muted);
text-decoration: underline;
&:hover,
@@ -8932,11 +8925,11 @@ noscript {
padding: 20px;
@media screen and (min-width: $no-gap-breakpoint) {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
&__footer {
- color: $dark-text-color;
+ color: var(--on-background-muted);
text-align: center;
font-size: 15px;
line-height: 22px;
@@ -8950,7 +8943,7 @@ noscript {
width: 100%;
height: auto;
aspect-ratio: 1.9;
- background: lighten($ui-base-color, 4%);
+ background: var(--surface);
border-radius: 8px;
margin-bottom: 30px;
}
@@ -8971,13 +8964,13 @@ noscript {
font-size: 16px;
line-height: 24px;
font-weight: 400;
- color: $darker-text-color;
+ color: var(--on-background-muted);
}
}
&__meta {
- background: lighten($ui-base-color, 4%);
- border-radius: 4px;
+ background: var(--surface);
+ border-radius: var(--radius-sm);
display: flex;
margin-bottom: 30px;
font-size: 15px;
@@ -8992,7 +8985,7 @@ noscript {
width: 0;
border: 0;
border-style: solid;
- border-color: lighten($ui-base-color, 8%);
+ border-color: var(--background-outline);
border-left-width: 1px;
min-height: calc(100% - 60px);
flex: 0 0 auto;
@@ -9001,7 +8994,7 @@ noscript {
h4 {
font-size: 15px;
text-transform: uppercase;
- color: $darker-text-color;
+ color: var(--on-background-muted);
font-weight: 500;
margin-bottom: 20px;
}
@@ -9052,7 +9045,7 @@ noscript {
}
&__mail {
- color: $primary-text-color;
+ color: var(--on-background);
text-decoration: none;
font-weight: 500;
@@ -9099,18 +9092,18 @@ noscript {
font-weight: 600;
line-height: 22px;
padding: 20px;
- border-radius: 4px;
- background: lighten($ui-base-color, 4%);
- color: $highlight-text-color;
+ border-radius: var(--radius-sm);
+ background: var(--background-outline);
+ color: var(--primary);
cursor: pointer;
}
&.active &__title {
- border-radius: 4px 4px 0 0;
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
&__body {
- border: 1px solid lighten($ui-base-color, 4%);
+ border: 1px solid var(--background-outline);
border-top: 0;
padding: 20px;
font-size: 15px;
@@ -9120,18 +9113,18 @@ noscript {
&__domain-blocks {
margin-top: 30px;
- background: darken($ui-base-color, 4%);
- border: 1px solid lighten($ui-base-color, 4%);
- border-radius: 4px;
+ background: var(--background);
+ border: 1px solid var(--background-outline);
+ border-radius: var(--radius-sm);
&__domain {
- border-bottom: 1px solid lighten($ui-base-color, 4%);
+ border-bottom: 1px solid var(--background-outline);
padding: 10px;
font-size: 15px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
&:nth-child(2n) {
- background: darken($ui-base-color, 2%);
+ background: var(--background-variant);
}
&:last-child {
@@ -9147,7 +9140,7 @@ noscript {
}
h6 {
- color: $secondary-text-color;
+ color: var(--on-background);
font-size: inherit;
white-space: nowrap;
overflow: hidden;
@@ -9163,6 +9156,12 @@ noscript {
}
}
+.column .scrollable.about,
+.column .scrollable.privacy-policy {
+ border-top: 1px solid var(--background-outline);
+ border-radius: var(--radius-sm);
+}
+
.notification-list {
position: fixed;
bottom: 2rem;
@@ -9180,8 +9179,8 @@ noscript {
width: auto;
padding: 15px;
margin: 0;
- color: $white;
- background: rgba($black, 0.85);
+ color: var(--on-overlay);
+ background: var(--overlay-variant);
backdrop-filter: blur(8px);
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
border-radius: 8px;
@@ -9215,23 +9214,23 @@ noscript {
text-transform: uppercase;
margin-inline-start: 10px;
cursor: pointer;
- color: $blurple-300;
- border-radius: 4px;
+ color: var(--primary);
+ border-radius: var(--radius-sm);
padding: 0 4px;
&:hover,
&:focus,
&:active {
- background: rgba($ui-base-color, 0.85);
+ // background: rgba($ui-base-color, 0.85);
}
}
.hashtag-header {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-outline);
padding: 15px;
font-size: 17px;
line-height: 22px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
strong {
font-weight: 700;
@@ -9245,7 +9244,7 @@ noscript {
gap: 15px;
h1 {
- color: $primary-text-color;
+ color: var(--on-background);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -9263,7 +9262,7 @@ noscript {
font-size: 14px;
line-height: 18px;
gap: 4px;
- color: $darker-text-color;
+ color: var(--on-background-muted);
a {
display: inline-flex;
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index 8a26e611ca..52b7242c40 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -8,14 +8,14 @@
}
&__chart {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
display: block;
- background: darken($ui-primary-color, 5%);
+ background: var(--primary-muted);
height: 5px;
min-width: 1%;
&.leading {
- background: $ui-highlight-color;
+ background: var(--primary);
}
}
@@ -34,18 +34,18 @@
// Those rules need to be entirely separate or they won't work, hence the
// duplication
&::-moz-progress-bar {
- border-radius: 4px;
- background: darken($ui-primary-color, 5%);
+ border-radius: var(--radius-sm);
+ background: var(--primary-muted);
}
&::-ms-fill {
- border-radius: 4px;
- background: darken($ui-primary-color, 5%);
+ border-radius: var(--radius-sm);
+ background: var(--primary-muted);
}
&::-webkit-progress-value {
- border-radius: 4px;
- background: darken($ui-primary-color, 5%);
+ border-radius: var(--radius-sm);
+ background: var(--primary-muted);
}
}
@@ -83,7 +83,7 @@
font-family: inherit;
background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
padding: 6px 10px;
&:focus {
@@ -118,7 +118,7 @@
flex: 0 0 18px;
&.checkbox {
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
&:active,
@@ -178,7 +178,7 @@
&__footer {
padding-top: 6px;
padding-bottom: 5px;
- color: $dark-text-color;
+ color: var(--on-background-muted);
}
&__link {
@@ -187,18 +187,13 @@
padding: 0;
margin: 0;
border: 0;
- color: $dark-text-color;
+ color: var(--on-background-muted);
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
-
- &:active,
- &:focus {
- background-color: rgba($dark-text-color, 0.1);
- }
}
.button {
@@ -283,7 +278,7 @@
url("data:image/svg+xml;utf8,")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
padding: 6px 10px;
padding-inline-end: 30px;
}
@@ -294,13 +289,9 @@
}
.muted .poll {
- color: $dark-text-color;
+ color: var(--on-background-muted);
&__chart {
- background: rgba(darken($ui-primary-color, 14%), 0.7);
-
- &.leading {
- background: rgba($ui-highlight-color, 0.5);
- }
+ opacity: 0.5;
}
}
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 611c8bb5d1..a7f4da7ad8 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -94,10 +94,51 @@ $font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;
:root {
- --dropdown-border-color: #{lighten($ui-base-color, 12%)};
- --dropdown-background-color: #{lighten($ui-base-color, 4%)};
+ --dropdown-border-color: var(--surface-outline);
+ --dropdown-background-color: var(--surface);
--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: #{darken($ui-base-color, 4%)};
- --modal-border-color: #{lighten($ui-base-color, 4%)};
+ --modal-background-color: var(--background);
+ --modal-border-color: var(--background-outline);
+
+ // New design system
+ --overlay: #000;
+ --overlay-variant: rgba(0, 0, 0, 0.85);
+ --overlay-variant-highlighted: rgba(0, 0, 0, 0.9);
+ --on-overlay: #fff;
+ --background: #161316;
+ --background-outline: #302D30;
+ --background-highlighted: unset;
+ --background-muted: unset;
+ --on-background: #FDFAFE;
+ --on-background-muted: #D1CDD1;
+ --primary: #B2A2FF;
+ --primary-outline: unset;
+ --primary-highlighted: #C3B9FF;
+ --primary-muted: unset;
+ --on-primary: #2A1880;
+ --surface: #302D30;
+ --surface-outline: #6C686C;
+ --surface-highlighted: #4D4A4D;
+ --surface-muted: unset;
+ --on-surface: unset;
+ --on-surface-muted: #A8A5A9;
+ --dangerous: #EC8786;
+ --successful: #7DB664;
+ --successful-outline: #9BC789;
+ --successful-variant: #203417;
+ // One-offs
+ --favourite: #DB9640;
+ --favourite-highlighted: #E4B073;
+ --bookmark: #C06868;
+ --bookmark-highlighted: #EC8786;
+ // Geometry
+ --radius-sm: 4px;
+
+ --Neutral-105: color(display-p3 0.0863 0.0745 0.0863);
+ --Neutral-105-invert: color(display-p3 0.9922 0.9804 0.9961);
+ --Neutral-100: color(display-p3 0.1882 0.1765 0.1882);
+ --Neutral-90: color(display-p3 0.302 0.2902 0.302);
+ --Neutral-77-invert: color(display-p3 0.8196 0.8039 0.8196);
+ --Neutral-65: color(display-p3 0.5255 0.5137 0.5255);
}
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 1f69f0cf01..8564a0bcd7 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -1,294 +1,5 @@
@use 'sass:math';
-.hero-widget {
- margin-bottom: 10px;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &__img {
- width: 100%;
- position: relative;
- overflow: hidden;
- border-radius: 4px 4px 0 0;
- background: $base-shadow-color;
-
- img {
- object-fit: cover;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0;
- border-radius: 4px 4px 0 0;
- }
- }
-
- &__text {
- background: $ui-base-color;
- padding: 20px;
- border-radius: 0 0 4px 4px;
- font-size: 15px;
- color: $darker-text-color;
- line-height: 20px;
- word-wrap: break-word;
- font-weight: 400;
-
- .emojione {
- width: 20px;
- height: 20px;
- margin: -3px 0 0;
- margin-inline-start: 0.075em;
- margin-inline-end: 0.075em;
- }
-
- p {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- em {
- display: inline;
- margin: 0;
- padding: 0;
- font-weight: 700;
- background: transparent;
- font-family: inherit;
- font-size: inherit;
- line-height: inherit;
- color: lighten($darker-text-color, 10%);
- }
-
- a {
- color: $secondary-text-color;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
-
- @media screen and (max-width: $no-gap-breakpoint) {
- display: none;
- }
-}
-
-.endorsements-widget {
- margin-bottom: 10px;
- padding-bottom: 10px;
-
- h4 {
- padding: 10px;
- text-transform: uppercase;
- font-weight: 700;
- font-size: 13px;
- color: $darker-text-color;
- }
-
- .account {
- padding: 10px 0;
-
- &:last-child {
- border-bottom: 0;
- }
-
- .account__display-name {
- display: flex;
- align-items: center;
- }
- }
-
- .trends__item {
- padding: 10px;
- }
-}
-
-.trends-widget {
- h4 {
- color: $darker-text-color;
- }
-}
-
-.placeholder-widget {
- padding: 16px;
- border-radius: 4px;
- border: 2px dashed $dark-text-color;
- text-align: center;
- color: $darker-text-color;
- margin-bottom: 10px;
-}
-
-.moved-account-widget {
- padding: 15px;
- padding-bottom: 20px;
- border-radius: 4px;
- background: $ui-base-color;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
- color: $secondary-text-color;
- font-weight: 400;
- margin-bottom: 10px;
-
- strong,
- a {
- font-weight: 500;
-
- @each $lang in $cjk-langs {
- &:lang(#{$lang}) {
- font-weight: 700;
- }
- }
- }
-
- a {
- color: inherit;
- text-decoration: underline;
-
- &.mention {
- text-decoration: none;
-
- span {
- text-decoration: none;
- }
-
- &:focus,
- &:hover,
- &:active {
- text-decoration: none;
-
- span {
- text-decoration: underline;
- }
- }
- }
- }
-
- &__message {
- margin-bottom: 15px;
-
- .fa {
- margin-inline-end: 5px;
- color: $darker-text-color;
- }
- }
-
- &__card {
- .detailed-status__display-avatar {
- position: relative;
- cursor: pointer;
- }
-
- .detailed-status__display-name {
- margin-bottom: 0;
- text-decoration: none;
-
- span {
- font-weight: 400;
- }
- }
- }
-}
-
-.memoriam-widget {
- padding: 20px;
- border-radius: 4px;
- background: $base-shadow-color;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
- font-size: 14px;
- color: $darker-text-color;
- margin-bottom: 10px;
-}
-
-.directory {
- background: $ui-base-color;
- border-radius: 4px;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
- &__tag {
- box-sizing: border-box;
- margin-bottom: 10px;
-
- & > a,
- & > div {
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: $ui-base-color;
- border-radius: 4px;
- padding: 15px;
- text-decoration: none;
- color: inherit;
- box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
- }
-
- & > a {
- &:hover,
- &:active,
- &:focus {
- background: lighten($ui-base-color, 8%);
- }
- }
-
- &.active > a {
- background: $ui-highlight-color;
- cursor: default;
- }
-
- &.disabled > div {
- opacity: 0.5;
- cursor: default;
- }
-
- h4 {
- flex: 1 1 auto;
- font-size: 18px;
- font-weight: 700;
- color: $primary-text-color;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- .fa {
- color: $darker-text-color;
- }
-
- small {
- display: block;
- font-weight: 400;
- font-size: 15px;
- margin-top: 8px;
- color: $darker-text-color;
- }
- }
-
- &.active h4 {
- &,
- .fa,
- small,
- .trends__item__current {
- color: $primary-text-color;
- }
- }
-
- .avatar-stack {
- flex: 0 0 auto;
- width: (36px + 4px) * 3;
- }
-
- &.active .avatar-stack .account__avatar {
- border-color: $ui-highlight-color;
- }
-
- .trends__item__current {
- padding-inline-end: 0;
- }
- }
-}
-
.accounts-table {
width: 100%;
@@ -389,8 +100,6 @@
}
}
-.moved-account-widget,
-.memoriam-widget,
.directory {
@media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0;
@@ -398,17 +107,3 @@
border-radius: 0;
}
}
-
-.placeholder-widget {
- a {
- text-decoration: none;
- font-weight: 500;
- color: $ui-highlight-color;
-
- &:hover,
- &:focus,
- &:active {
- text-decoration: underline;
- }
- }
-}