mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Recolor Preferences/Admin UI to better match main design 

Port 8b7f93cc7f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2794/head
Michael Stanclift 2024-07-23 10:30:45 -05:00 committed by Claire
parent d999fc52ba
commit 2919d8b097
12 changed files with 258 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/flavours/glitch/styles/accounts.scss
View File

@ -10,7 +10,7 @@
&:active, &:active,
&:focus { &:focus {
.card__bar { .card__bar {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
} }
@ -18,7 +18,9 @@
&__img { &__img {
height: 130px; height: 130px;
position: relative; position: relative;
background: darken($ui-base-color, 12%); background: $ui-base-color;
border: 1px solid var(--background-border-color);
border-bottom: none;
img { img {
display: block; display: block;
@ -39,7 +41,9 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border: 1px solid var(--background-border-color);
border-top: none;
.avatar { .avatar {
flex: 0 0 auto; flex: 0 0 auto;

176
app/javascript/flavours/glitch/styles/admin.scss
View File

@ -1,7 +1,7 @@
@use 'sass:math'; @use 'sass:math';
$no-columns-breakpoint: 600px; $no-columns-breakpoint: 600px;
$sidebar-width: 240px; $sidebar-width: 300px;
$content-width: 840px; $content-width: 840px;
.admin-wrapper { .admin-wrapper {
@ -19,7 +19,7 @@ $content-width: 840px;
&__inner { &__inner {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
background: $ui-base-color; background: var(--background-color);
height: 100%; height: 100%;
} }
} }
@ -31,7 +31,7 @@ $content-width: 840px;
&__toggle { &__toggle {
display: none; display: none;
background: darken($ui-base-color, 4%); background: var(--background-color);
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid lighten($ui-base-color, 4%);
align-items: center; align-items: center;
@ -96,7 +96,6 @@ $content-width: 840px;
ul { ul {
list-style: none; list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden; overflow: hidden;
margin-bottom: 20px; margin-bottom: 20px;
@ -105,13 +104,13 @@ $content-width: 840px;
} }
a { a {
font-size: 14px;
display: block; display: block;
padding: 15px; padding: 15px;
color: $darker-text-color; color: $darker-text-color;
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
border-radius: 4px 0 0 4px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -122,19 +121,13 @@ $content-width: 840px;
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear; transition: all 100ms linear;
transition-property: color, background-color; transition-property: color, background-color;
} }
&.selected {
border-radius: 4px 0 0;
}
} }
ul { ul {
background: darken($ui-base-color, 4%); background: var(--background-color);
border-radius: 0 0 0 4px;
margin: 0; margin: 0;
a { a {
@ -149,16 +142,10 @@ $content-width: 840px;
} }
.simple-navigation-active-leaf a { .simple-navigation-active-leaf a {
color: $primary-text-color; color: $highlight-text-color;
background-color: $ui-highlight-color;
border-bottom: 0; border-bottom: 0;
border-radius: 0;
} }
} }
& > ul > .simple-navigation-active-leaf a {
border-radius: 4px 0 0 4px;
}
} }
.content-wrapper { .content-wrapper {
@ -292,7 +279,7 @@ $content-width: 840px;
color: $darker-text-color; color: $darker-text-color;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
h6 { h6 {
@ -365,7 +352,7 @@ $content-width: 840px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 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; margin: 20px 0;
&.spacer { &.spacer {
@ -403,14 +390,14 @@ $content-width: 840px;
inset-inline-start: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
overflow-y: auto; overflow-y: auto;
background: $ui-base-color; background: var(--background-color);
} }
} }
ul a, ul a,
ul ul a { ul ul a {
font-size: 16px;
border-radius: 0; border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
transition: none; transition: none;
&:hover { &:hover {
@ -697,8 +684,10 @@ body,
line-height: 20px; line-height: 20px;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color; background: var(--background-color);
border-bottom: 1px solid darken($ui-base-color, 8%); 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; position: relative;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: $darker-text-color;
@ -707,18 +696,13 @@ body,
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-top: 1px solid var(--background-border-color);
} }
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom: 0; border-bottom: 1px solid var(--background-border-color);
}
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
} }
&__avatar { &__avatar {
@ -758,6 +742,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, a.name-tag,
.name-tag, .name-tag,
a.inline-name-tag, a.inline-name-tag,
@ -765,6 +790,10 @@ a.inline-name-tag,
text-decoration: none; text-decoration: none;
color: $secondary-text-color; color: $secondary-text-color;
&:hover {
color: $highlight-text-color;
}
.username { .username {
font-weight: 500; font-weight: 500;
} }
@ -844,7 +873,8 @@ a.name-tag,
} }
.report-card { .report-card {
background: $ui-base-color; background: var(--background-color);
border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
margin-bottom: 20px; margin-bottom: 20px;
@ -856,7 +886,6 @@ a.name-tag,
.account { .account {
padding: 0; padding: 0;
border: 0;
&__avatar-wrapper { &__avatar-wrapper {
margin-inline-start: 0; margin-inline-start: 0;
@ -877,7 +906,7 @@ a.name-tag,
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
color: lighten($darker-text-color, 8%); color: $highlight-text-color;
} }
} }
@ -891,11 +920,7 @@ a.name-tag,
&__item { &__item {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%); border-top: 1px solid var(--background-border-color);
&:hover {
background: lighten($ui-base-color, 2%);
}
&__reported-by, &__reported-by,
&__assigned { &__assigned {
@ -918,7 +943,6 @@ a.name-tag,
max-width: calc(100% - 300px); max-width: calc(100% - 300px);
&__icon { &__icon {
color: $dark-text-color;
margin-inline-end: 4px; margin-inline-end: 4px;
font-weight: 500; font-weight: 500;
} }
@ -931,6 +955,10 @@ a.name-tag,
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
color: $darker-text-color; color: $darker-text-color;
&:hover {
color: $highlight-text-color;
}
} }
} }
} }
@ -966,14 +994,15 @@ a.name-tag,
.account__header__fields, .account__header__fields,
.account__header__content { .account__header__content {
background: lighten($ui-base-color, 8%); background: var(--background-color);
border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
} }
.account__header__fields { .account__header__fields {
margin: 0; margin: 0;
border: 0; border: 1px solid var(--background-border-color);
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -1002,8 +1031,8 @@ a.name-tag,
.applications-list__item, .applications-list__item,
.filters-list__item { .filters-list__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; background: var(--background-color);
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
margin-top: 15px; margin-top: 15px;
} }
@ -1014,13 +1043,13 @@ a.name-tag,
.announcements-list, .announcements-list,
.filters-list { .filters-list {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
border-bottom: none;
&__item { &__item {
padding: 15px 0; padding: 15px 0;
background: $ui-base-color; border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 4%);
&__title { &__title {
padding: 0 15px; padding: 0 15px;
@ -1032,6 +1061,10 @@ a.name-tag,
text-decoration: none; text-decoration: none;
margin-bottom: 10px; margin-bottom: 10px;
&:hover {
color: $highlight-text-color;
}
.account-role { .account-role {
vertical-align: middle; vertical-align: middle;
} }
@ -1070,10 +1103,6 @@ a.name-tag,
&__permissions { &__permissions {
margin-top: 10px; margin-top: 10px;
} }
&:last-child {
border-bottom: 0;
}
} }
} }
@ -1123,7 +1152,7 @@ a.name-tag,
&__table { &__table {
&__number { &__number {
color: $secondary-text-color; color: var(--background-color);
padding: 10px; padding: 10px;
} }
@ -1150,7 +1179,7 @@ a.name-tag,
&__box { &__box {
box-sizing: border-box; box-sizing: border-box;
background: $ui-highlight-color; background: var(--background-color);
padding: 10px; padding: 10px;
font-weight: 500; font-weight: 500;
color: $primary-text-color; color: $primary-text-color;
@ -1172,8 +1201,9 @@ a.name-tag,
.sparkline { .sparkline {
display: block; display: block;
text-decoration: none; text-decoration: none;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color);
padding: 0; padding: 0;
position: relative; position: relative;
padding-bottom: 55px + 20px; padding-bottom: 55px + 20px;
@ -1245,12 +1275,12 @@ a.sparkline {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 6%); background: $ui-base-color;
} }
} }
.skeleton { .skeleton {
background-color: lighten($ui-base-color, 8%); background-color: var(--background-color);
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
lighten($ui-base-color, 8%), lighten($ui-base-color, 8%),
@ -1330,17 +1360,13 @@ a.sparkline {
.report-reason-selector { .report-reason-selector {
border-radius: 4px; border-radius: 4px;
background: $ui-base-color; background: var(--background-color);
margin-bottom: 20px; margin-bottom: 20px;
&__category { &__category {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child {
border-bottom: 0;
}
&__label { &__label {
padding: 15px; padding: 15px;
display: flex; display: flex;
@ -1369,7 +1395,7 @@ a.sparkline {
&__details { &__details {
&__item { &__item {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 15px 0; padding: 15px 0;
&:last-child { &:last-child {
@ -1400,7 +1426,7 @@ a.sparkline {
.account-card { .account-card {
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
position: relative; position: relative;
&__warning-badge { &__warning-badge {
@ -1488,7 +1514,6 @@ a.sparkline {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
inset-inline-end: 15px; inset-inline-end: 15px;
background: linear-gradient(to left, $ui-base-color, transparent);
pointer-events: none; pointer-events: none;
} }
@ -1564,11 +1589,11 @@ a.sparkline {
margin-bottom: 20px; margin-bottom: 20px;
&__item { &__item {
background: $ui-base-color; background: var(--background-color);
position: relative; position: relative;
padding: 15px; padding: 15px;
padding-inline-start: 15px * 2 + 40px; padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&:first-child { &:first-child {
border-top-left-radius: 4px; border-top-left-radius: 4px;
@ -1578,11 +1603,6 @@ a.sparkline {
&:last-child { &:last-child {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom: 0;
}
&:hover {
background-color: lighten($ui-base-color, 4%);
} }
&__avatar { &__avatar {
@ -1660,13 +1680,10 @@ a.sparkline {
} }
.report-actions { .report-actions {
border: 1px solid darken($ui-base-color, 8%);
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 18px; line-height: 18px;
border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -1729,8 +1746,6 @@ a.sparkline {
.strike-card { .strike-card {
padding: 15px; padding: 15px;
border-radius: 4px;
background: $ui-base-color;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
@ -1738,6 +1753,8 @@ a.sparkline {
color: $primary-text-color; color: $primary-text-color;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
border: 1px solid var(--background-border-color);
border-radius: 4px;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -1778,15 +1795,14 @@ a.sparkline {
&__statuses-list { &__statuses-list {
border-radius: 4px; border-radius: 4px;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
overflow: hidden; overflow: hidden;
&__item { &__item {
padding: 16px; padding: 16px;
background: lighten($ui-base-color, 2%); border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid darken($ui-base-color, 8%);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

2
app/javascript/flavours/glitch/styles/basics.scss
View File

@ -122,7 +122,7 @@ body {
} }
&.admin { &.admin {
background: darken($ui-base-color, 4%); background: var(--background-color);
padding: 0; padding: 0;
} }

23
app/javascript/flavours/glitch/styles/components.scss
View File

@ -521,7 +521,7 @@ body > [data-popper-placement] {
gap: 16px; gap: 16px;
flex: 0 1 auto; flex: 0 1 auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
transition: border-color 300ms linear; transition: border-color 300ms linear;
min-height: 0; min-height: 0;
position: relative; position: relative;
@ -587,7 +587,7 @@ body > [data-popper-placement] {
.autosuggest-input { .autosuggest-input {
flex: 1 1 auto; flex: 1 1 auto;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
} }
@ -1504,7 +1504,7 @@ body > [data-popper-placement] {
} }
&--first-in-thread { &--first-in-thread {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
} }
&__line { &__line {
@ -1976,7 +1976,6 @@ body > [data-popper-placement] {
.account { .account {
padding: 10px; // glitch: reduced padding padding: 10px; // glitch: reduced padding
border-bottom: 1px solid var(--background-border-color);
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -3509,7 +3508,7 @@ $ui-header-logo-wordmark-width: 99px;
.copy-paste-text { .copy-paste-text {
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);
border-radius: 8px; border-radius: 8px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 16px; padding: 16px;
color: $primary-text-color; color: $primary-text-color;
font-size: 15px; font-size: 15px;
@ -5080,7 +5079,7 @@ a.status-card {
section { section {
padding: 16px; padding: 16px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -5784,7 +5783,7 @@ a.status-card {
input { input {
padding: 8px 12px; padding: 8px 12px;
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
color: $darker-text-color; color: $darker-text-color;
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
@ -5870,7 +5869,7 @@ a.status-card {
margin-top: -2px; margin-top: -2px;
width: 100%; width: 100%;
background: $ui-base-color; 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; border-radius: 0 0 4px 4px;
box-shadow: var(--dropdown-shadow); box-shadow: var(--dropdown-shadow);
z-index: 99; z-index: 99;
@ -9347,13 +9346,13 @@ noscript {
} }
.search__input { .search__input {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 10px; padding: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
} }
.search__popout { .search__popout {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.search .icon { .search .icon {
@ -9672,7 +9671,7 @@ noscript {
&__input { &__input {
@include search-input; @include search-input;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
padding: 4px 6px; padding: 4px 6px;
color: $primary-text-color; color: $primary-text-color;
font-size: 16px; font-size: 16px;
@ -9707,7 +9706,7 @@ noscript {
margin-top: -1px; margin-top: -1px;
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
&.focused &__input { &.focused &__input {

2
app/javascript/flavours/glitch/styles/containers.scss
View File

@ -63,7 +63,7 @@
padding: 20px 0; padding: 20px 0;
margin-top: 40px; margin-top: 40px;
margin-bottom: 10px; 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) { @media screen and (width <= 440px) {
width: 100%; width: 100%;

5
app/javascript/flavours/glitch/styles/dashboard.scss
View File

@ -13,8 +13,9 @@
& > div, & > div,
& > a { & > a {
padding: 20px; padding: 20px;
background: lighten($ui-base-color, 4%); background: var(--background-color);
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color);
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
@ -27,7 +28,7 @@
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
} }

2
app/javascript/flavours/glitch/styles/emoji_picker.scss
View File

@ -105,7 +105,7 @@
width: 100%; width: 100%;
background: $ui-base-color; background: $ui-base-color;
color: $darker-text-color; color: $darker-text-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
&::-moz-focus-inner { &::-moz-focus-inner {

35
app/javascript/flavours/glitch/styles/forms.scss
View File

@ -415,7 +415,7 @@ code {
} }
.input.static .label_input__wrapper { .input.static .label_input__wrapper {
font-size: 16px; font-size: 14px;
padding: 10px; padding: 10px;
border: 1px solid $dark-text-color; border: 1px solid $dark-text-color;
border-radius: 4px; border-radius: 4px;
@ -437,13 +437,14 @@ code {
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%); background: $ui-base-color;
border: 1px solid darken($ui-base-color, 10%); border: 1px solid var(--background-border-color);
border-radius: 8px; border-radius: 4px;
padding: 10px 16px; padding: 10px 16px;
&::placeholder { &::placeholder {
color: lighten($darker-text-color, 4%); color: $dark-text-color;
opacity: 1;
} }
&:invalid { &:invalid {
@ -454,11 +455,6 @@ code {
border-color: $valid-value-color; border-color: $valid-value-color;
} }
&:active,
&:focus {
border-color: $highlight-text-color;
}
@media screen and (width <= 600px) { @media screen and (width <= 600px) {
font-size: 16px; font-size: 16px;
} }
@ -577,21 +573,25 @@ code {
select { select {
appearance: none; appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 14px;
color: $primary-text-color; color: $primary-text-color;
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: darken($ui-base-color, 10%) background: $ui-base-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 14px;
border: 1px solid darken($ui-base-color, 14%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 10px; padding-inline-start: 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
height: 41px; height: 41px;
@media screen and (width <= 600px) {
font-size: 16px;
}
} }
h4 { h4 {
@ -644,8 +644,9 @@ code {
} }
.flash-message { .flash-message {
background: lighten($ui-base-color, 8%); background: var(--background-color);
color: $darker-text-color; color: $highlight-text-color;
border: 1px solid $highlight-text-color;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
@ -1336,7 +1337,7 @@ code {
&__toggle > div { &__toggle > div {
display: flex; 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; padding-inline-start: 16px;
} }
} }

106
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@ -23,7 +23,7 @@ html {
// Change default background colors of columns // Change default background colors of columns
.interaction-modal { .interaction-modal {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.rules-list li::before { .rules-list li::before {
@ -75,8 +75,8 @@ html {
} }
.getting-started .navigation-bar { .getting-started .navigation-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
border-top: 0; border-top: 0;
@ -88,7 +88,7 @@ html {
.setting-text, .setting-text,
.report-dialog-modal__textarea, .report-dialog-modal__textarea,
.audio-player { .audio-player {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.report-dialog-modal .dialog-option .poll__input { .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:focus button,
.actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover,
.actions-modal ul li:not(:empty) a:hover button, .actions-modal ul li:not(:empty) a:hover button,
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
.simple_form .block-button, .simple_form .block-button,
.simple_form .button, .simple_form .button,
.simple_form button { .simple_form button {
@ -175,7 +174,7 @@ html {
.picture-in-picture__footer, .picture-in-picture__footer,
.reactions-bar__item { .reactions-bar__item {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
} }
.reactions-bar__item:hover, .reactions-bar__item:hover,
@ -217,7 +216,7 @@ html {
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-bottom: 0; border-bottom: 0;
} }
@ -259,7 +258,7 @@ html {
.embed-modal .embed-modal__container .embed-modal__html { .embed-modal .embed-modal__container .embed-modal__html {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&:focus { &:focus {
border-color: lighten($ui-base-color, 12%); border-color: lighten($ui-base-color, 12%);
@ -298,7 +297,7 @@ html {
.directory__tag > a, .directory__tag > a,
.directory__tag > div { .directory__tag > div {
background: $white; 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) { @media screen and (max-width: $no-gap-breakpoint) {
border-left: 0; 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 { .picture-in-picture-placeholder {
background: $white; background: $white;
border-color: lighten($ui-base-color, 8%); border-color: lighten($ui-base-color, 8%);
@ -346,7 +333,7 @@ html {
} }
.activity-stream { .activity-stream {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
&--under-tabs { &--under-tabs {
border-top: 0; border-top: 0;
@ -411,6 +398,22 @@ html {
color: $ui-highlight-color; color: $ui-highlight-color;
background-color: rgba($ui-highlight-color, 0.1); 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat right 8px center / auto 14px;
}
} }
.compose-form .compose-form__warning { .compose-form .compose-form__warning {
@ -449,8 +452,24 @@ html {
box-shadow: none; 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 { .mute-modal select {
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
background: $simple-background-color background: $simple-background-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
@ -554,6 +573,7 @@ html {
.search__popout, .search__popout,
.emoji-mart-search input, .emoji-mart-search input,
.language-dropdown__dropdown .emoji-mart-search input, .language-dropdown__dropdown .emoji-mart-search input,
// .strike-card,
.poll__option input[type='text'] { .poll__option input[type='text'] {
background: darken($ui-base-color, 10%); background: darken($ui-base-color, 10%);
} }
@ -570,3 +590,43 @@ html {
.inline-follow-suggestions__body__scroll-button__icon { .inline-follow-suggestions__body__scroll-button__icon {
color: $white; 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%);
}
}

2
app/javascript/flavours/glitch/styles/rtl.scss
View File

@ -101,7 +101,7 @@ body.rtl {
} }
.simple_form select { .simple_form select {
background: darken($ui-base-color, 10%) background: $ui-base-color
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
no-repeat left 8px center / auto 16px; no-repeat left 8px center / auto 16px;
} }

68
app/javascript/flavours/glitch/styles/tables.scss
View File

@ -9,9 +9,9 @@
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid $ui-base-color; border-bottom: 1px solid var(--background-border-color);
text-align: start; text-align: start;
background: darken($ui-base-color, 4%); background: var(--background-color);
&.critical { &.critical {
font-weight: 700; font-weight: 700;
@ -21,8 +21,6 @@
& > thead > tr > th { & > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid $ui-base-color;
border-top: 0;
font-weight: 500; font-weight: 500;
} }
@ -32,15 +30,20 @@
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > th {
background: $ui-base-color; background: var(--background-color);
}
& > tbody > tr:last-child > td,
& > tbody > tr:last-child > th {
border-bottom: 0;
} }
a { a {
color: $highlight-text-color; color: $darker-text-color;
text-decoration: underline; text-decoration: none;
&:hover { &:hover {
text-decoration: none; color: $highlight-text-color;
} }
} }
@ -78,7 +81,7 @@
& > tbody > tr > td { & > tbody > tr > td {
padding: 11px 10px; padding: 11px 10px;
background: transparent; background: transparent;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
color: $secondary-text-color; color: $secondary-text-color;
} }
@ -90,18 +93,18 @@
&.batch-table { &.batch-table {
& > thead > tr > th { & > thead > tr > th {
background: $ui-base-color; background: var(--background-color);
border-top: 1px solid darken($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
border-bottom: 1px solid darken($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
&:first-child { &:first-child {
border-radius: 4px 0 0; 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 { &:last-child {
border-radius: 0 4px 0 0; 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; font-weight: 500;
&:hover { &:hover {
color: $primary-text-color; color: $highlight-text-color;
} }
i.fa { i.fa {
@ -186,9 +189,9 @@ a.table-action-link {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
background: $ui-base-color; background: var(--background-color);
border-radius: 4px 0 0; border-radius: 4px 4px 0 0;
height: 47px; height: 47px;
align-items: center; align-items: center;
@ -199,11 +202,11 @@ a.table-action-link {
} }
&__select-all { &__select-all {
background: $ui-base-color; background: var(--background-color);
height: 47px; height: 47px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
color: $secondary-text-color; color: $secondary-text-color;
display: none; display: none;
@ -249,9 +252,9 @@ a.table-action-link {
&__form { &__form {
padding: 16px; padding: 16px;
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
background: $ui-base-color; background: var(--background-color);
.fields-row { .fields-row {
padding-top: 0; padding-top: 0;
@ -260,26 +263,18 @@ a.table-action-link {
} }
&__row { &__row {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
background: darken($ui-base-color, 4%); background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child { .optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
} }
} }
&:hover {
background: darken($ui-base-color, 2%);
}
&:nth-child(even) { &:nth-child(even) {
background: $ui-base-color; background: var(--background-color);
&:hover {
background: lighten($ui-base-color, 2%);
}
} }
&__content { &__content {
@ -353,12 +348,13 @@ a.table-action-link {
} }
.nothing-here { .nothing-here {
border: 1px solid darken($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
box-shadow: none; box-shadow: none;
background: var(--background-color);
@media screen and (max-width: $no-gap-breakpoint) { @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);
} }
} }

8
app/javascript/flavours/glitch/styles/widgets.scss
View File

@ -198,7 +198,7 @@
} }
.directory { .directory {
background: $ui-base-color; background: var(--background-color);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
@ -211,7 +211,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
@ -223,7 +223,7 @@
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
background: lighten($ui-base-color, 8%); background: $ui-base-color;
} }
} }
@ -340,7 +340,7 @@
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {
text-decoration: underline; color: $highlight-text-color;
} }
} }
} }