diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index a41272364..635bab546 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -23,7 +23,7 @@ html {
// Change default background colors of columns
.interaction-modal {
background: $white;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
}
.rules-list li::before {
@@ -75,8 +75,8 @@ html {
}
.getting-started .navigation-bar {
- border-top: 1px solid lighten($ui-base-color, 8%);
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid var(--background-border-color);
+ border-bottom: 1px solid var(--background-border-color);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
@@ -88,7 +88,7 @@ html {
.setting-text,
.report-dialog-modal__textarea,
.audio-player {
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
}
.report-dialog-modal .dialog-option .poll__input {
@@ -140,7 +140,6 @@ html {
.actions-modal ul li:not(:empty) a:focus button,
.actions-modal ul li:not(:empty) a:hover,
.actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.simple_form .block-button,
.simple_form .button,
.simple_form button {
@@ -175,7 +174,7 @@ html {
.picture-in-picture__footer,
.reactions-bar__item {
background: $white;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
}
.reactions-bar__item:hover,
@@ -217,7 +216,7 @@ html {
.column-header__collapsible-inner {
background: darken($ui-base-color, 4%);
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-bottom: 0;
}
@@ -259,7 +258,7 @@ html {
.embed-modal .embed-modal__container .embed-modal__html {
background: $white;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
&:focus {
border-color: lighten($ui-base-color, 12%);
@@ -298,7 +297,7 @@ html {
.directory__tag > a,
.directory__tag > div {
background: $white;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
@media screen and (max-width: $no-gap-breakpoint) {
border-left: 0;
@@ -307,18 +306,6 @@ html {
}
}
-.simple_form {
- input[type='text'],
- input[type='number'],
- input[type='email'],
- input[type='password'],
- textarea {
- &:hover {
- border-color: lighten($ui-base-color, 12%);
- }
- }
-}
-
.picture-in-picture-placeholder {
background: $white;
border-color: lighten($ui-base-color, 8%);
@@ -346,7 +333,7 @@ html {
}
.activity-stream {
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
&--under-tabs {
border-top: 0;
@@ -411,6 +398,22 @@ html {
color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1);
}
+
+ input[type='text'],
+ input[type='number'],
+ input[type='email'],
+ input[type='password'],
+ input[type='url'],
+ input[type='datetime-local'],
+ textarea {
+ background: darken($ui-base-color, 10%);
+ }
+
+ select {
+ background: darken($ui-base-color, 10%)
+ url("data:image/svg+xml;utf8,")
+ no-repeat right 8px center / auto 14px;
+ }
}
.compose-form .compose-form__warning {
@@ -449,8 +452,24 @@ html {
box-shadow: none;
}
+.card {
+ &__img {
+ background: darken($ui-base-color, 10%);
+ }
+
+ & > a {
+ &:hover,
+ &:active,
+ &:focus {
+ .card__bar {
+ background: darken($ui-base-color, 10%);
+ }
+ }
+ }
+}
+
.mute-modal select {
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
background: $simple-background-color
url("data:image/svg+xml;utf8,")
no-repeat right 8px center / auto 16px;
@@ -491,6 +510,7 @@ html {
.search__popout,
.emoji-mart-search input,
.language-dropdown__dropdown .emoji-mart-search input,
+// .strike-card,
.poll__option input[type='text'] {
background: darken($ui-base-color, 10%);
}
@@ -507,3 +527,43 @@ html {
.inline-follow-suggestions__body__scroll-button__icon {
color: $white;
}
+
+a.sparkline {
+ &:hover,
+ &:focus,
+ &:active {
+ background: darken($ui-base-color, 10%);
+ }
+}
+
+.dashboard__counters {
+ & > div {
+ & > a {
+ &:hover,
+ &:focus,
+ &:active {
+ background: darken($ui-base-color, 10%);
+ }
+ }
+ }
+}
+
+.directory {
+ &__tag {
+ & > a {
+ &:hover,
+ &:focus,
+ &:active {
+ background: darken($ui-base-color, 10%);
+ }
+ }
+ }
+}
+
+.strike-entry {
+ &:hover,
+ &:focus,
+ &:active {
+ background: darken($ui-base-color, 10%);
+ }
+}
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index 80d6c13ce..e63601fa9 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -10,7 +10,7 @@
&:active,
&:focus {
.card__bar {
- background: lighten($ui-base-color, 8%);
+ background: $ui-base-color;
}
}
}
@@ -18,7 +18,9 @@
&__img {
height: 130px;
position: relative;
- background: darken($ui-base-color, 12%);
+ background: $ui-base-color;
+ border: 1px solid var(--background-border-color);
+ border-bottom: none;
img {
display: block;
@@ -39,7 +41,9 @@
display: flex;
justify-content: flex-start;
align-items: center;
- background: lighten($ui-base-color, 4%);
+ background: var(--background-color);
+ border: 1px solid var(--background-border-color);
+ border-top: none;
.avatar {
flex: 0 0 auto;
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 06a3b5202..7420a6fc5 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1,7 +1,7 @@
@use 'sass:math';
$no-columns-breakpoint: 600px;
-$sidebar-width: 240px;
+$sidebar-width: 300px;
$content-width: 840px;
.admin-wrapper {
@@ -26,7 +26,7 @@ $content-width: 840px;
&__inner {
display: flex;
justify-content: flex-end;
- background: $ui-base-color;
+ background: var(--background-color);
height: 100%;
}
}
@@ -38,7 +38,7 @@ $content-width: 840px;
&__toggle {
display: none;
- background: darken($ui-base-color, 4%);
+ background: var(--background-color);
border-bottom: 1px solid lighten($ui-base-color, 4%);
align-items: center;
@@ -103,7 +103,6 @@ $content-width: 840px;
ul {
list-style: none;
- border-radius: 4px 0 0 4px;
overflow: hidden;
margin-bottom: 20px;
@@ -112,13 +111,13 @@ $content-width: 840px;
}
a {
+ font-size: 14px;
display: block;
padding: 15px;
color: $darker-text-color;
text-decoration: none;
transition: all 200ms linear;
transition-property: color, background-color;
- border-radius: 4px 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -129,19 +128,13 @@ $content-width: 840px;
&:hover {
color: $primary-text-color;
- background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
transition-property: color, background-color;
}
-
- &.selected {
- border-radius: 4px 0 0;
- }
}
ul {
- background: darken($ui-base-color, 4%);
- border-radius: 0 0 0 4px;
+ background: var(--background-color);
margin: 0;
a {
@@ -156,16 +149,10 @@ $content-width: 840px;
}
.simple-navigation-active-leaf a {
- color: $primary-text-color;
- background-color: $ui-highlight-color;
+ color: $highlight-text-color;
border-bottom: 0;
- border-radius: 0;
}
}
-
- & > ul > .simple-navigation-active-leaf a {
- border-radius: 4px 0 0 4px;
- }
}
.content-wrapper {
@@ -299,7 +286,7 @@ $content-width: 840px;
color: $darker-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
}
h6 {
@@ -372,7 +359,7 @@ $content-width: 840px;
width: 100%;
height: 0;
border: 0;
- border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
+ border-bottom: 1px solid var(--background-border-color);
margin: 20px 0;
&.spacer {
@@ -410,14 +397,14 @@ $content-width: 840px;
inset-inline-start: 0;
bottom: 0;
overflow-y: auto;
- background: $ui-base-color;
+ background: var(--background-color);
}
}
ul a,
ul ul a {
+ font-size: 16px;
border-radius: 0;
- border-bottom: 1px solid lighten($ui-base-color, 4%);
transition: none;
&:hover {
@@ -683,8 +670,10 @@ body,
line-height: 20px;
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
- background: $ui-base-color;
- border-bottom: 1px solid darken($ui-base-color, 8%);
+ background: var(--background-color);
+ border-right: 1px solid var(--background-border-color);
+ border-left: 1px solid var(--background-border-color);
+ border-bottom: 1px solid var(--background-border-color);
position: relative;
text-decoration: none;
color: $darker-text-color;
@@ -693,18 +682,13 @@ body,
&:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
+ border-top: 1px solid var(--background-border-color);
}
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- border-bottom: 0;
- }
-
- &:hover,
- &:focus,
- &:active {
- background: lighten($ui-base-color, 4%);
+ border-bottom: 1px solid var(--background-border-color);
}
&__avatar {
@@ -744,6 +728,47 @@ body,
}
}
+.strike-entry {
+ display: block;
+ line-height: 20px;
+ padding: 15px;
+ padding-inline-start: 15px * 2 + 40px;
+ background: var(--background-color);
+ border: 1px solid var(--background-border-color);
+ border-radius: 4px;
+ position: relative;
+ text-decoration: none;
+ color: $darker-text-color;
+ font-size: 14px;
+ margin-bottom: 15px;
+
+ &__avatar {
+ position: absolute;
+ inset-inline-start: 15px;
+ top: 15px;
+
+ .avatar {
+ border-radius: 4px;
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ &__title {
+ word-wrap: break-word;
+ }
+
+ &__timestamp {
+ color: $dark-text-color;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ background: $ui-base-color;
+ }
+}
+
a.name-tag,
.name-tag,
a.inline-name-tag,
@@ -751,6 +776,10 @@ a.inline-name-tag,
text-decoration: none;
color: $secondary-text-color;
+ &:hover {
+ color: $highlight-text-color;
+ }
+
.username {
font-weight: 500;
}
@@ -830,7 +859,8 @@ a.name-tag,
}
.report-card {
- background: $ui-base-color;
+ background: var(--background-color);
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
margin-bottom: 20px;
@@ -842,7 +872,6 @@ a.name-tag,
.account {
padding: 0;
- border: 0;
&__avatar-wrapper {
margin-inline-start: 0;
@@ -863,7 +892,7 @@ a.name-tag,
&:focus,
&:hover,
&:active {
- color: lighten($darker-text-color, 8%);
+ color: $highlight-text-color;
}
}
@@ -877,11 +906,7 @@ a.name-tag,
&__item {
display: flex;
justify-content: flex-start;
- border-top: 1px solid darken($ui-base-color, 4%);
-
- &:hover {
- background: lighten($ui-base-color, 2%);
- }
+ border-top: 1px solid var(--background-border-color);
&__reported-by,
&__assigned {
@@ -904,7 +929,6 @@ a.name-tag,
max-width: calc(100% - 300px);
&__icon {
- color: $dark-text-color;
margin-inline-end: 4px;
font-weight: 500;
}
@@ -917,6 +941,10 @@ a.name-tag,
padding: 15px;
text-decoration: none;
color: $darker-text-color;
+
+ &:hover {
+ color: $highlight-text-color;
+ }
}
}
}
@@ -952,14 +980,15 @@ a.name-tag,
.account__header__fields,
.account__header__content {
- background: lighten($ui-base-color, 8%);
+ background: var(--background-color);
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
height: 100%;
}
.account__header__fields {
margin: 0;
- border: 0;
+ border: 1px solid var(--background-border-color);
a {
color: $highlight-text-color;
@@ -988,8 +1017,8 @@ a.name-tag,
.applications-list__item,
.filters-list__item {
padding: 15px 0;
- background: $ui-base-color;
- border: 1px solid lighten($ui-base-color, 4%);
+ background: var(--background-color);
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
margin-top: 15px;
}
@@ -1000,13 +1029,13 @@ a.name-tag,
.announcements-list,
.filters-list {
- border: 1px solid lighten($ui-base-color, 4%);
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
+ border-bottom: none;
&__item {
padding: 15px 0;
- background: $ui-base-color;
- border-bottom: 1px solid lighten($ui-base-color, 4%);
+ border-bottom: 1px solid var(--background-border-color);
&__title {
padding: 0 15px;
@@ -1018,6 +1047,10 @@ a.name-tag,
text-decoration: none;
margin-bottom: 10px;
+ &:hover {
+ color: $highlight-text-color;
+ }
+
.account-role {
vertical-align: middle;
}
@@ -1056,10 +1089,6 @@ a.name-tag,
&__permissions {
margin-top: 10px;
}
-
- &:last-child {
- border-bottom: 0;
- }
}
}
@@ -1109,7 +1138,7 @@ a.name-tag,
&__table {
&__number {
- color: $secondary-text-color;
+ color: var(--background-color);
padding: 10px;
}
@@ -1136,7 +1165,7 @@ a.name-tag,
&__box {
box-sizing: border-box;
- background: $ui-highlight-color;
+ background: var(--background-color);
padding: 10px;
font-weight: 500;
color: $primary-text-color;
@@ -1158,8 +1187,9 @@ a.name-tag,
.sparkline {
display: block;
text-decoration: none;
- background: lighten($ui-base-color, 4%);
+ background: var(--background-color);
border-radius: 4px;
+ border: 1px solid var(--background-border-color);
padding: 0;
position: relative;
padding-bottom: 55px + 20px;
@@ -1231,12 +1261,12 @@ a.sparkline {
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 6%);
+ background: $ui-base-color;
}
}
.skeleton {
- background-color: lighten($ui-base-color, 8%);
+ background-color: var(--background-color);
background-image: linear-gradient(
90deg,
lighten($ui-base-color, 8%),
@@ -1316,17 +1346,13 @@ a.sparkline {
.report-reason-selector {
border-radius: 4px;
- background: $ui-base-color;
+ background: var(--background-color);
margin-bottom: 20px;
&__category {
cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%);
- &:last-child {
- border-bottom: 0;
- }
-
&__label {
padding: 15px;
display: flex;
@@ -1355,7 +1381,7 @@ a.sparkline {
&__details {
&__item {
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
padding: 15px 0;
&:last-child {
@@ -1386,7 +1412,7 @@ a.sparkline {
.account-card {
border-radius: 4px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
position: relative;
&__warning-badge {
@@ -1474,7 +1500,6 @@ a.sparkline {
position: absolute;
bottom: 0;
inset-inline-end: 15px;
- background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none;
}
@@ -1550,11 +1575,11 @@ a.sparkline {
margin-bottom: 20px;
&__item {
- background: $ui-base-color;
+ background: var(--background-color);
position: relative;
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
- border-bottom: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
&:first-child {
border-top-left-radius: 4px;
@@ -1564,11 +1589,6 @@ a.sparkline {
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
- border-bottom: 0;
- }
-
- &:hover {
- background-color: lighten($ui-base-color, 4%);
}
&__avatar {
@@ -1646,13 +1666,10 @@ a.sparkline {
}
.report-actions {
- border: 1px solid darken($ui-base-color, 8%);
-
&__item {
display: flex;
align-items: center;
line-height: 18px;
- border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child {
border-bottom: 0;
@@ -1715,8 +1732,6 @@ a.sparkline {
.strike-card {
padding: 15px;
- border-radius: 4px;
- background: $ui-base-color;
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
@@ -1724,6 +1739,8 @@ a.sparkline {
color: $primary-text-color;
box-sizing: border-box;
min-height: 100%;
+ border: 1px solid var(--background-border-color);
+ border-radius: 4px;
a {
color: $highlight-text-color;
@@ -1764,15 +1781,14 @@ a.sparkline {
&__statuses-list {
border-radius: 4px;
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
font-size: 13px;
line-height: 18px;
overflow: hidden;
&__item {
padding: 16px;
- background: lighten($ui-base-color, 2%);
- border-bottom: 1px solid darken($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
&:last-child {
border-bottom: 0;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 2e7d5e5e9..456e042c5 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -122,7 +122,7 @@ body {
}
&.admin {
- background: darken($ui-base-color, 4%);
+ background: var(--background-color);
padding: 0;
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 18a775fb2..58c9b53a2 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -521,7 +521,7 @@ body > [data-popper-placement] {
gap: 16px;
flex: 0 1 auto;
border-radius: 4px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
transition: border-color 300ms linear;
min-height: 0;
position: relative;
@@ -587,7 +587,7 @@ body > [data-popper-placement] {
.autosuggest-input {
flex: 1 1 auto;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
}
}
@@ -1452,7 +1452,7 @@ body > [data-popper-placement] {
}
&--first-in-thread {
- border-top: 1px solid lighten($ui-base-color, 8%);
+ border-top: 1px solid var(--background-border-color);
}
&__line {
@@ -1794,7 +1794,6 @@ body > [data-popper-placement] {
.account {
padding: 16px;
- border-bottom: 1px solid var(--background-border-color);
.account__display-name {
flex: 1 1 auto;
@@ -3325,7 +3324,7 @@ $ui-header-logo-wordmark-width: 99px;
.copy-paste-text {
background: lighten($ui-base-color, 4%);
border-radius: 8px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
padding: 16px;
color: $primary-text-color;
font-size: 15px;
@@ -4728,7 +4727,7 @@ a.status-card {
section {
padding: 16px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
&:last-child {
border-bottom: 0;
@@ -5316,7 +5315,7 @@ a.status-card {
input {
padding: 8px 12px;
background: $ui-base-color;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
color: $darker-text-color;
@media screen and (width <= 600px) {
@@ -5402,7 +5401,7 @@ a.status-card {
margin-top: -2px;
width: 100%;
background: $ui-base-color;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-radius: 0 0 4px 4px;
box-shadow: var(--dropdown-shadow);
z-index: 99;
@@ -8789,13 +8788,13 @@ noscript {
}
.search__input {
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
padding: 10px;
padding-inline-end: 30px;
}
.search__popout {
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
}
.search .icon {
@@ -9114,7 +9113,7 @@ noscript {
&__input {
@include search-input;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
padding: 4px 6px;
color: $primary-text-color;
font-size: 16px;
@@ -9149,7 +9148,7 @@ noscript {
margin-top: -1px;
padding-top: 5px;
padding-bottom: 5px;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
}
&.focused &__input {
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 8a472d75b..9363e428b 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -63,7 +63,7 @@
padding: 20px 0;
margin-top: 40px;
margin-bottom: 10px;
- border-bottom: 1px solid lighten($ui-base-color, 8%);
+ border-bottom: 1px solid var(--background-border-color);
@media screen and (width <= 440px) {
width: 100%;
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index 36a7f4425..12d0a6b92 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -13,8 +13,9 @@
& > div,
& > a {
padding: 20px;
- background: lighten($ui-base-color, 4%);
+ background: var(--background-color);
border-radius: 4px;
+ border: 1px solid var(--background-border-color);
box-sizing: border-box;
height: 100%;
}
@@ -27,7 +28,7 @@
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 8%);
+ background: $ui-base-color;
}
}
}
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index b9fdaa584..3652ad4ab 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -105,7 +105,7 @@
width: 100%;
background: $ui-base-color;
color: $darker-text-color;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
&::-moz-focus-inner {
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 26bb2bee1..13a731f7f 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -414,7 +414,7 @@ code {
}
.input.static .label_input__wrapper {
- font-size: 16px;
+ font-size: 14px;
padding: 10px;
border: 1px solid $dark-text-color;
border-radius: 4px;
@@ -436,13 +436,14 @@ code {
outline: 0;
font-family: inherit;
resize: vertical;
- background: darken($ui-base-color, 10%);
- border: 1px solid darken($ui-base-color, 10%);
- border-radius: 8px;
+ background: $ui-base-color;
+ border: 1px solid var(--background-border-color);
+ border-radius: 4px;
padding: 10px 16px;
&::placeholder {
- color: lighten($darker-text-color, 4%);
+ color: $dark-text-color;
+ opacity: 1;
}
&:invalid {
@@ -453,11 +454,6 @@ code {
border-color: $valid-value-color;
}
- &:active,
- &:focus {
- border-color: $highlight-text-color;
- }
-
@media screen and (width <= 600px) {
font-size: 16px;
}
@@ -576,21 +572,25 @@ code {
select {
appearance: none;
box-sizing: border-box;
- font-size: 16px;
+ font-size: 14px;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
- background: darken($ui-base-color, 10%)
+ background: $ui-base-color
url("data:image/svg+xml;utf8,")
- no-repeat right 8px center / auto 16px;
- border: 1px solid darken($ui-base-color, 14%);
+ no-repeat right 8px center / auto 14px;
+ border: 1px solid var(--background-border-color);
border-radius: 4px;
padding-inline-start: 10px;
padding-inline-end: 30px;
height: 41px;
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
+ }
}
h4 {
@@ -644,8 +644,9 @@ code {
}
.flash-message {
- background: lighten($ui-base-color, 8%);
- color: $darker-text-color;
+ background: var(--background-color);
+ color: $highlight-text-color;
+ border: 1px solid $highlight-text-color;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
@@ -1335,7 +1336,7 @@ code {
&__toggle > div {
display: flex;
- border-inline-start: 1px solid lighten($ui-base-color, 8%);
+ border-inline-start: 1px solid var(--background-border-color);
padding-inline-start: 16px;
}
}
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index b5c4836bc..8d3efcb57 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -46,7 +46,7 @@ body.rtl {
}
.simple_form select {
- background: darken($ui-base-color, 10%)
+ background: $ui-base-color
url("data:image/svg+xml;utf8,")
no-repeat left 8px center / auto 16px;
}
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index dd5b483ec..eab793715 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -9,9 +9,9 @@
padding: 8px;
line-height: 18px;
vertical-align: top;
- border-top: 1px solid $ui-base-color;
+ border-bottom: 1px solid var(--background-border-color);
text-align: start;
- background: darken($ui-base-color, 4%);
+ background: var(--background-color);
&.critical {
font-weight: 700;
@@ -21,8 +21,6 @@
& > thead > tr > th {
vertical-align: bottom;
- border-bottom: 2px solid $ui-base-color;
- border-top: 0;
font-weight: 500;
}
@@ -32,15 +30,20 @@
& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
- background: $ui-base-color;
+ background: var(--background-color);
+ }
+
+ & > tbody > tr:last-child > td,
+ & > tbody > tr:last-child > th {
+ border-bottom: 0;
}
a {
- color: $highlight-text-color;
- text-decoration: underline;
+ color: $darker-text-color;
+ text-decoration: none;
&:hover {
- text-decoration: none;
+ color: $highlight-text-color;
}
}
@@ -78,7 +81,7 @@
& > tbody > tr > td {
padding: 11px 10px;
background: transparent;
- border: 1px solid lighten($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
color: $secondary-text-color;
}
@@ -90,18 +93,18 @@
&.batch-table {
& > thead > tr > th {
- background: $ui-base-color;
- border-top: 1px solid darken($ui-base-color, 8%);
- border-bottom: 1px solid darken($ui-base-color, 8%);
+ background: var(--background-color);
+ border-top: 1px solid var(--background-border-color);
+ border-bottom: 1px solid var(--background-border-color);
&:first-child {
border-radius: 4px 0 0;
- border-inline-start: 1px solid darken($ui-base-color, 8%);
+ border-inline-start: 1px solid var(--background-border-color);
}
&:last-child {
border-radius: 0 4px 0 0;
- border-inline-end: 1px solid darken($ui-base-color, 8%);
+ border-inline-end: 1px solid var(--background-border-color);
}
}
}
@@ -136,7 +139,7 @@ a.table-action-link {
font-weight: 500;
&:hover {
- color: $primary-text-color;
+ color: $highlight-text-color;
}
i.fa {
@@ -186,9 +189,9 @@ a.table-action-link {
position: sticky;
top: 0;
z-index: 1;
- border: 1px solid darken($ui-base-color, 8%);
- background: $ui-base-color;
- border-radius: 4px 0 0;
+ border: 1px solid var(--background-border-color);
+ background: var(--background-color);
+ border-radius: 4px 4px 0 0;
height: 47px;
align-items: center;
@@ -199,11 +202,11 @@ a.table-action-link {
}
&__select-all {
- background: $ui-base-color;
+ background: var(--background-color);
height: 47px;
align-items: center;
justify-content: center;
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-top: 0;
color: $secondary-text-color;
display: none;
@@ -249,9 +252,9 @@ a.table-action-link {
&__form {
padding: 16px;
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-top: 0;
- background: $ui-base-color;
+ background: var(--background-color);
.fields-row {
padding-top: 0;
@@ -260,26 +263,18 @@ a.table-action-link {
}
&__row {
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-top: 0;
- background: darken($ui-base-color, 4%);
+ background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child {
- border-top: 1px solid darken($ui-base-color, 8%);
+ border-top: 1px solid var(--background-border-color);
}
}
- &:hover {
- background: darken($ui-base-color, 2%);
- }
-
&:nth-child(even) {
- background: $ui-base-color;
-
- &:hover {
- background: lighten($ui-base-color, 2%);
- }
+ background: var(--background-color);
}
&__content {
@@ -357,12 +352,13 @@ a.table-action-link {
}
.nothing-here {
- border: 1px solid darken($ui-base-color, 8%);
+ border: 1px solid var(--background-border-color);
border-top: 0;
box-shadow: none;
+ background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) {
- border-top: 1px solid darken($ui-base-color, 8%);
+ border-top: 1px solid var(--background-border-color);
}
}
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 1f69f0cf0..0d56bd9c4 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -204,7 +204,7 @@
}
.directory {
- background: $ui-base-color;
+ background: var(--background-color);
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@@ -217,7 +217,7 @@
display: flex;
align-items: center;
justify-content: space-between;
- background: $ui-base-color;
+ border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
padding: 15px;
text-decoration: none;
@@ -229,7 +229,7 @@
&:hover,
&:active,
&:focus {
- background: lighten($ui-base-color, 8%);
+ background: $ui-base-color;
}
}
@@ -351,7 +351,7 @@
&:focus,
&:hover,
&:active {
- text-decoration: underline;
+ color: $highlight-text-color;
}
}
}
diff --git a/app/views/admin/roles/index.html.haml b/app/views/admin/roles/index.html.haml
index 4f6c511b4..90a647cc8 100644
--- a/app/views/admin/roles/index.html.haml
+++ b/app/views/admin/roles/index.html.haml
@@ -8,10 +8,10 @@
%hr.spacer/
-.applications-list
+.announcements-list
= render partial: 'role', collection: @roles.select(&:everyone?)
%hr.spacer/
-.applications-list
+.announcements-list
= render partial: 'role', collection: @roles.reject(&:everyone?)
diff --git a/app/views/auth/registrations/_account_warning.html.haml b/app/views/auth/registrations/_account_warning.html.haml
index 19e5746ff..c51179b49 100644
--- a/app/views/auth/registrations/_account_warning.html.haml
+++ b/app/views/auth/registrations/_account_warning.html.haml
@@ -1,14 +1,14 @@
-= link_to disputes_strike_path(account_warning), class: 'log-entry' do
- .log-entry__header
- .log-entry__avatar
+= link_to disputes_strike_path(account_warning), class: 'strike-entry' do
+ .strike-entry__header
+ .strike-entry__avatar
.indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' }
= fa_icon 'warning'
- .log-entry__content
- .log-entry__title
+ .strike-entry__content
+ .strike-entry__title
= t 'disputes.strikes.title',
action: t(account_warning.action, scope: 'disputes.strikes.title_actions'),
date: l(account_warning.created_at.to_date)
- .log-entry__timestamp
+ .strike-entry__timestamp
%time.formatted{ datetime: account_warning.created_at.iso8601 }= l(account_warning.created_at)
- if account_warning.overruled?