monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change background color in web UI 

Port 5b60d4b696

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-03-12 10:51:30 +01:00 committed by Claire
parent c6dbb33944
commit 8c0673037a
8 changed files with 147 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -189,18 +189,20 @@ class About extends PureComponent {
<> <>
<p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p> <p><FormattedMessage id='about.domain_blocks.preamble' defaultMessage='Mastodon generally allows you to view content from and interact with users from any other server in the fediverse. These are the exceptions that have been made on this particular server.' /></p>
<div className='about__domain-blocks'> {domainBlocks.get('items').size > 0 && (
{domainBlocks.get('items').map(block => ( <div className='about__domain-blocks'>
<div className='about__domain-blocks__domain' key={block.get('domain')}> {domainBlocks.get('items').map(block => (
<div className='about__domain-blocks__domain__header'> <div className='about__domain-blocks__domain' key={block.get('domain')}>
<h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6> <div className='about__domain-blocks__domain__header'>
<span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span> <h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
</div> <span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
</div>
<p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p> <p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
</div> </div>
))} ))}
</div> </div>
)}
</> </>
) : ( ) : (
<p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p> <p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>

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

@ -26,7 +26,7 @@ $fluid-breakpoint: $maximum-width + 20px;
li { li {
position: relative; position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 1em 1.75em; padding: 1em 1.75em;
padding-inline-start: 3em; padding-inline-start: 3em;
font-weight: 500; font-weight: 500;

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

@ -1399,8 +1399,8 @@ a.sparkline {
} }
.account-card { .account-card {
background: $ui-base-color;
border-radius: 4px; border-radius: 4px;
border: 1px solid lighten($ui-base-color, 8%);
&__permalink { &__permalink {
color: inherit; color: inherit;

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

@ -8,7 +8,7 @@
body { body {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
background: darken($ui-base-color, 8%); background: var(--background-color);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;

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

@ -1375,7 +1375,7 @@ body > [data-popper-placement] {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
clear: both; clear: both;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
&__button { &__button {
display: inline; display: inline;
@ -1396,19 +1396,14 @@ body > [data-popper-placement] {
.focusable { .focusable {
&:focus { &:focus {
outline: 0; outline: 0;
background: lighten($ui-base-color, 4%); background: rgba($ui-highlight-color, 0.05);
.detailed-status,
.detailed-status__action-bar {
background: lighten($ui-base-color, 8%);
}
} }
} }
.status { .status {
padding: 10px 14px; // glitch: reduced padding padding: 10px 14px; // glitch: reduced padding
min-height: 54px; min-height: 54px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
cursor: auto; cursor: auto;
@keyframes fade { @keyframes fade {
@ -1800,10 +1795,10 @@ body > [data-popper-placement] {
} }
.status__wrapper-direct { .status__wrapper-direct {
background: mix($ui-base-color, $ui-highlight-color, 95%); background: rgba($ui-highlight-color, 0.05);
&:focus { &:focus {
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%); background: rgba($ui-highlight-color, 0.05);
} }
.status__prepend { .status__prepend {
@ -1831,9 +1826,8 @@ body > [data-popper-placement] {
} }
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%);
padding: 14px 10px; // glitch: reduced padding padding: 14px 10px; // glitch: reduced padding
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
&--flex { &--flex {
display: flex; display: flex;
@ -1893,9 +1887,8 @@ body > [data-popper-placement] {
} }
.detailed-status__action-bar { .detailed-status__action-bar {
background: lighten($ui-base-color, 4%); border-top: 1px solid var(--background-border-color);
border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 8px 0; // glitch: reduced padding padding: 8px 0; // glitch: reduced padding
@ -1950,7 +1943,7 @@ body > [data-popper-placement] {
.domain { .domain {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
.domain__domain-name { .domain__domain-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -1974,7 +1967,7 @@ body > [data-popper-placement] {
.account { .account {
padding: 10px; // glitch: reduced padding padding: 10px; // glitch: reduced padding
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
.account__display-name { .account__display-name {
flex: 1 1 auto; flex: 1 1 auto;
@ -2234,7 +2227,7 @@ a.account__display-name {
.notification__report { .notification__report {
padding: 10px; // glitch: reduced padding padding: 10px; // glitch: reduced padding
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
display: flex; display: flex;
gap: 10px; gap: 10px;
@ -2493,6 +2486,7 @@ a.account__display-name {
.dropdown-menu { .dropdown-menu {
background: var(--dropdown-background-color); background: var(--dropdown-background-color);
backdrop-filter: var(--background-filter);
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--dropdown-border-color);
padding: 2px; // glitch: reduced padding padding: 2px; // glitch: reduced padding
border-radius: 4px; border-radius: 4px;
@ -2683,6 +2677,7 @@ $ui-header-height: 55px;
z-index: 3; z-index: 3;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
backdrop-filter: var(--background-filter);
&__logo { &__logo {
display: inline-flex; display: inline-flex;
@ -2731,7 +2726,8 @@ $ui-header-height: 55px;
} }
.tabs-bar__wrapper { .tabs-bar__wrapper {
background: darken($ui-base-color, 8%); background: var(--background-color-tint);
backdrop-filter: var(--background-filter);
position: sticky; position: sticky;
top: $ui-header-height; top: $ui-header-height;
z-index: 2; z-index: 2;
@ -2767,8 +2763,15 @@ $ui-header-height: 55px;
flex-direction: column; flex-direction: column;
> .scrollable { > .scrollable {
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-top: 0;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
&.about,
&.privacy-policy {
border-top: 1px solid var(--background-border-color);
border-radius: 4px;
}
} }
} }
@ -2798,7 +2801,6 @@ $ui-header-height: 55px;
font-size: 16px; font-size: 16px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-bottom: 2px solid transparent;
} }
.column, .column,
@ -2927,8 +2929,7 @@ $ui-header-height: 55px;
.navigation-panel { .navigation-panel {
margin: 0; margin: 0;
background: $ui-base-color; border-inline-start: 1px solid var(--background-border-color);
border-inline-start: 1px solid lighten($ui-base-color, 8%);
height: 100vh; height: 100vh;
} }
@ -2946,8 +2947,15 @@ $ui-header-height: 55px;
.layout-single-column .ui__header { .layout-single-column .ui__header {
display: flex; display: flex;
background: $ui-base-color; background: var(--background-color-tint);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
}
.column > .scrollable,
.tabs-bar__wrapper .column-header,
.tabs-bar__wrapper .column-back-button {
border-left: 0;
border-right: 0;
} }
.column-header, .column-header,
@ -3005,7 +3013,7 @@ $ui-header-height: 55px;
inset-inline-start: 9px; inset-inline-start: 9px;
top: -13px; top: -13px;
background: $ui-highlight-color; background: $ui-highlight-color;
border: 2px solid lighten($ui-base-color, 8%); border: 2px solid var(--background-color);
padding: 1px 6px; padding: 1px 6px;
border-radius: 6px; border-radius: 6px;
font-size: 10px; font-size: 10px;
@ -3027,7 +3035,7 @@ $ui-header-height: 55px;
} }
.column-link--transparent .icon-with-badge__badge { .column-link--transparent .icon-with-badge__badge {
border-color: darken($ui-base-color, 8%); border-color: var(--background-color);
} }
.column-title { .column-title {
@ -3377,7 +3385,7 @@ $ui-header-height: 55px;
flex: 0 0 auto; flex: 0 0 auto;
border: 0; border: 0;
background: transparent; background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%); border-top: 1px solid var(--background-border-color);
margin: 10px 0; margin: 10px 0;
} }
@ -3394,13 +3402,14 @@ $ui-header-height: 55px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--background-border-color);
} }
.drawer__inner { .drawer__inner {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
background: darken($ui-base-color, 4%); background: var(--background-color);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
display: flex; display: flex;
@ -3409,15 +3418,11 @@ $ui-header-height: 55px;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
&.darker {
background: $ui-base-color;
}
} }
.drawer__inner__mastodon { .drawer__inner__mastodon {
background: darken($ui-base-color, 4%) background: var(--background-color)
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color(darken($ui-base-color, 4%))}"/></svg>')
no-repeat bottom / 100% auto; no-repeat bottom / 100% auto;
flex: 1; flex: 1;
min-height: 47px; min-height: 47px;
@ -3441,7 +3446,7 @@ $ui-header-height: 55px;
.drawer__header { .drawer__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
background: darken($ui-base-color, 4%); border: 1px solid var(--background-border-color);
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -3451,7 +3456,7 @@ $ui-header-height: 55px;
a:hover, a:hover,
a:focus, a:focus,
a:active { a:active {
background: $ui-base-color; color: $primary-text-color;
} }
} }
@ -3496,15 +3501,14 @@ $ui-header-height: 55px;
.column-back-button { .column-back-button {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
background: $ui-base-color; background: transparent;
border: 1px solid var(--background-border-color);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
color: $highlight-text-color; color: $highlight-text-color;
cursor: pointer; cursor: pointer;
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
line-height: inherit; line-height: inherit;
border: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%);
text-align: unset; text-align: unset;
padding: 13px; padding: 13px;
margin: 0; margin: 0;
@ -3517,13 +3521,17 @@ $ui-header-height: 55px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
}
} }
.column-header__back-button { .column-header__back-button {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
background: $ui-base-color; background: transparent;
border: 0; border: 0;
font-family: inherit; font-family: inherit;
color: $highlight-text-color; color: $highlight-text-color;
@ -3629,8 +3637,6 @@ $ui-header-height: 55px;
} }
.column-link { .column-link {
background: lighten($ui-base-color, 8%);
color: $primary-text-color;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
@ -3640,12 +3646,18 @@ $ui-header-height: 55px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
border: 0; border: 0;
background: transparent;
color: $secondary-text-color;
border-left: 4px solid transparent; border-left: 4px solid transparent;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: lighten($ui-base-color, 11%); color: $primary-text-color;
}
&.active {
color: $highlight-text-color;
} }
&:focus { &:focus {
@ -3657,22 +3669,6 @@ $ui-header-height: 55px;
border-radius: 0; border-radius: 0;
} }
&--transparent {
background: transparent;
color: $secondary-text-color;
&:hover,
&:focus,
&:active {
background: transparent;
color: $primary-text-color;
}
&.active {
color: $highlight-text-color;
}
}
&--logo { &--logo {
background: transparent; background: transparent;
padding: 10px; padding: 10px;
@ -3697,8 +3693,8 @@ $ui-header-height: 55px;
} }
.column-subheading { .column-subheading {
background: $ui-base-color; background: darken($ui-base-color, 4%);
color: $dark-text-color; color: $darker-text-color;
padding: 8px 20px; padding: 8px 20px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
@ -3706,12 +3702,6 @@ $ui-header-height: 55px;
cursor: default; cursor: default;
} }
.getting-started__wrapper,
.getting-started,
.flex-spacer {
background: $ui-base-color;
}
.getting-started__wrapper { .getting-started__wrapper {
flex: 0 0 auto; flex: 0 0 auto;
} }
@ -3723,6 +3713,8 @@ $ui-header-height: 55px;
.getting-started { .getting-started {
color: $dark-text-color; color: $dark-text-color;
overflow: auto; overflow: auto;
border: 1px solid var(--background-border-color);
border-top: 0;
&__trends { &__trends {
flex: 0 1 auto; flex: 0 1 auto;
@ -3731,7 +3723,7 @@ $ui-header-height: 55px;
margin-top: 10px; margin-top: 10px;
h4 { h4 {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
@ -3876,7 +3868,7 @@ input.glitch-setting-text {
margin-top: 14px; margin-top: 14px;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 8px; border-radius: 8px;
&__actions { &__actions {
@ -4133,7 +4125,7 @@ a.status-card {
} }
.load-gap { .load-gap {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
.timeline-hint { .timeline-hint {
@ -4166,7 +4158,8 @@ a.status-card {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: $dark-text-color; color: $dark-text-color;
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-top: 0;
cursor: default; cursor: default;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
@ -4242,8 +4235,7 @@ a.status-card {
.column-header { .column-header {
display: flex; display: flex;
font-size: 16px; font-size: 16px;
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
flex: 0 0 auto; flex: 0 0 auto;
cursor: pointer; cursor: pointer;
@ -4310,6 +4302,10 @@ a.status-card {
padding-top: 16px; padding-top: 16px;
} }
} }
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
}
} }
.column-header__buttons { .column-header__buttons {
@ -4329,9 +4325,9 @@ a.status-card {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: $ui-base-color;
border: 0; border: 0;
color: $darker-text-color; color: $darker-text-color;
background: transparent;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
padding: 0 15px; padding: 0 15px;
@ -4350,7 +4346,6 @@ a.status-card {
&.active { &.active {
color: $primary-text-color; color: $primary-text-color;
background: lighten($ui-base-color, 4%);
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
@ -4406,7 +4401,6 @@ a.status-card {
max-height: 70vh; max-height: 70vh;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
border-bottom: 1px solid lighten($ui-base-color, 8%);
color: $darker-text-color; color: $darker-text-color;
transition: transition:
max-height 150ms ease-in-out, max-height 150ms ease-in-out,
@ -4428,7 +4422,7 @@ a.status-card {
height: 0; height: 0;
background: transparent; background: transparent;
border: 0; border: 0;
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid var(--background-border-color);
margin: 10px 0; margin: 10px 0;
} }
@ -4444,7 +4438,8 @@ a.status-card {
} }
.column-header__collapsible-inner { .column-header__collapsible-inner {
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-top: 0;
} }
.column-header__setting-btn { .column-header__setting-btn {
@ -4786,9 +4781,8 @@ a.status-card {
} }
.account--panel { .account--panel {
background: lighten($ui-base-color, 4%); border-top: 1px solid var(--background-border-color);
border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
border-bottom: 1px solid lighten($ui-base-color, 8%);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 10px 0; padding: 10px 0;
@ -4998,7 +4992,6 @@ a.status-card {
.empty-column-indicator, .empty-column-indicator,
.follow_requests-unlocked_explanation { .follow_requests-unlocked_explanation {
color: $dark-text-color; color: $dark-text-color;
background: $ui-base-color;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
font-size: 15px; font-size: 15px;
@ -5025,14 +5018,14 @@ a.status-card {
.follow_requests-unlocked_explanation { .follow_requests-unlocked_explanation {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
contain: initial; contain: initial;
flex-grow: 0; flex-grow: 0;
} }
.error-column { .error-column {
padding: 20px; padding: 20px;
background: $ui-base-color; border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
@ -5247,7 +5240,7 @@ a.status-card {
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 6px; border-radius: 6px;
background: darken($ui-base-color, 8%); background: var(--background-color);
position: relative; position: relative;
margin-top: 5px; margin-top: 5px;
} }
@ -5781,7 +5774,7 @@ a.status-card {
} }
.search-results__section { .search-results__section {
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;
@ -5789,7 +5782,7 @@ a.status-card {
&__header { &__header {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 15px; padding: 15px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
@ -6885,7 +6878,7 @@ img.modal-warning {
.attachment-list { .attachment-list {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
margin-top: 14px; // glitch: reduced margins margin-top: 14px; // glitch: reduced margins
overflow: hidden; overflow: hidden;
@ -6895,7 +6888,7 @@ img.modal-warning {
color: $dark-text-color; color: $dark-text-color;
padding: 8px 18px; padding: 8px 18px;
cursor: default; cursor: default;
border-inline-end: 1px solid lighten($ui-base-color, 8%); border-inline-end: 1px solid var(--background-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -7066,7 +7059,7 @@ img.modal-warning {
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background: darken($ui-base-color, 8%); background: var(--background-color);
border-radius: 8px; border-radius: 8px;
padding-bottom: 44px; padding-bottom: 44px;
width: 100%; width: 100%;
@ -7479,7 +7472,6 @@ img.modal-warning {
.scrollable .account-card { .scrollable .account-card {
margin: 10px; margin: 10px;
background: lighten($ui-base-color, 8%);
} }
.scrollable .account-card__title__avatar { .scrollable .account-card__title__avatar {
@ -7490,11 +7482,7 @@ img.modal-warning {
} }
.scrollable .account-card__bio::after { .scrollable .account-card__bio::after {
background: linear-gradient( background: linear-gradient(to left, var(--background-color), transparent);
to left,
lighten($ui-base-color, 8%),
transparent
);
} }
.account-gallery__container { .account-gallery__container {
@ -7523,9 +7511,8 @@ img.modal-warning {
.notification__filter-bar, .notification__filter-bar,
.account__section-headline { .account__section-headline {
// deliberate glitch-soc choice for now border: 1px solid var(--background-border-color);
background: darken($ui-base-color, 4%); border-top: 0;
border-bottom: 1px solid lighten($ui-base-color, 8%);
cursor: default; cursor: default;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@ -7564,10 +7551,15 @@ img.modal-warning {
} }
} }
} }
.scrollable & {
border-left: 0;
border-right: 0;
}
} }
.filter-form { .filter-form {
background: $ui-base-color; border-bottom: 1px solid var(--background-border-color);
&__column { &__column {
display: flex; display: flex;
@ -7785,7 +7777,8 @@ noscript {
justify-content: flex-start; justify-content: flex-start;
gap: 15px; gap: 15px;
align-items: center; align-items: center;
background: lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-top: 0;
label { label {
flex: 1 1 auto; flex: 1 1 auto;
@ -7886,7 +7879,7 @@ noscript {
.list { .list {
padding: 10px; padding: 10px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
} }
.list__wrapper { .list__wrapper {
@ -8030,7 +8023,7 @@ noscript {
height: 145px; height: 145px;
position: relative; position: relative;
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
img { img {
object-fit: cover; object-fit: cover;
@ -8045,7 +8038,7 @@ noscript {
position: relative; position: relative;
padding: 0 20px; padding: 0 20px;
padding-bottom: 16px; // glitch-soc addition for the different tabs design padding-bottom: 16px; // glitch-soc addition for the different tabs design
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
.avatar { .avatar {
display: block; display: block;
@ -8053,8 +8046,8 @@ noscript {
width: 94px; width: 94px;
.account__avatar { .account__avatar {
background: darken($ui-base-color, 8%); background: var(--background-color);
border: 2px solid $ui-base-color; border: 2px solid var(--background-border-color);
} }
} }
} }
@ -8169,13 +8162,12 @@ noscript {
margin: 0; margin: 0;
margin-top: 16px; margin-top: 16px;
border-radius: 4px; border-radius: 4px;
background: darken($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border: 0;
dl { dl {
display: block; display: block;
padding: 8px 16px; // glitch-soc: padding purposefuly reduced padding: 8px 16px; // glitch-soc: padding purposefuly reduced
border-bottom-color: lighten($ui-base-color, 4%); border-bottom-color: var(--background-border-color);
} }
dd, dd,
@ -8350,7 +8342,7 @@ noscript {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
gap: 15px; gap: 15px;
&:last-child { &:last-child {
@ -8468,7 +8460,7 @@ noscript {
.conversation { .conversation {
display: flex; display: flex;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 5px; padding: 5px;
padding-bottom: 0; padding-bottom: 0;
@ -8829,7 +8821,7 @@ noscript {
.picture-in-picture-placeholder { .picture-in-picture-placeholder {
box-sizing: border-box; box-sizing: border-box;
border: 2px dashed lighten($ui-base-color, 8%); border: 2px dashed var(--background-border-color);
background: $base-shadow-color; background: $base-shadow-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -8857,7 +8849,7 @@ noscript {
.notifications-permission-banner { .notifications-permission-banner {
padding: 30px; padding: 30px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -8927,7 +8919,7 @@ noscript {
color: $primary-text-color; color: $primary-text-color;
text-decoration: none; text-decoration: none;
padding: 15px; padding: 15px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
gap: 15px; gap: 15px;
&:last-child { &:last-child {
@ -9306,7 +9298,6 @@ noscript {
} }
.privacy-policy { .privacy-policy {
background: $ui-base-color;
padding: 20px; padding: 20px;
@media screen and (min-width: $no-gap-breakpoint) { @media screen and (min-width: $no-gap-breakpoint) {
@ -9675,6 +9666,7 @@ noscript {
.about { .about {
padding: 20px; padding: 20px;
border-top: 1px solid var(--background-border-color);
@media screen and (min-width: $no-gap-breakpoint) { @media screen and (min-width: $no-gap-breakpoint) {
border-radius: 4px; border-radius: 4px;
@ -9721,7 +9713,7 @@ noscript {
} }
&__meta { &__meta {
background: lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
margin-bottom: 30px; margin-bottom: 30px;
@ -9737,7 +9729,7 @@ noscript {
width: 0; width: 0;
border: 0; border: 0;
border-style: solid; border-style: solid;
border-color: lighten($ui-base-color, 8%); border-color: var(--background-border-color);
border-left-width: 1px; border-left-width: 1px;
min-height: calc(100% - 60px); min-height: calc(100% - 60px);
flex: 0 0 auto; flex: 0 0 auto;
@ -9845,7 +9837,7 @@ noscript {
line-height: 22px; line-height: 22px;
padding: 20px; padding: 20px;
border-radius: 4px; border-radius: 4px;
background: lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
color: $highlight-text-color; color: $highlight-text-color;
cursor: pointer; cursor: pointer;
} }
@ -9855,7 +9847,7 @@ noscript {
} }
&__body { &__body {
border: 1px solid lighten($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border-top: 0; border-top: 0;
padding: 20px; padding: 20px;
font-size: 15px; font-size: 15px;
@ -9865,18 +9857,17 @@ noscript {
&__domain-blocks { &__domain-blocks {
margin-top: 30px; margin-top: 30px;
background: darken($ui-base-color, 4%); border: 1px solid var(--background-border-color);
border: 1px solid lighten($ui-base-color, 4%);
border-radius: 4px; border-radius: 4px;
&__domain { &__domain {
border-bottom: 1px solid lighten($ui-base-color, 4%); border-bottom: 1px solid var(--background-border-color);
padding: 10px; padding: 10px;
font-size: 15px; font-size: 15px;
color: $darker-text-color; color: $darker-text-color;
&:nth-child(2n) { &:nth-child(2n) {
background: darken($ui-base-color, 2%); background: darken($ui-base-color, 4%);
} }
&:last-child { &:last-child {
@ -9972,7 +9963,7 @@ noscript {
} }
.hashtag-header { .hashtag-header {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid var(--background-border-color);
padding: 15px; padding: 15px;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
@ -10034,8 +10025,8 @@ noscript {
gap: 12px; gap: 12px;
padding: 16px 0; padding: 16px 0;
padding-bottom: 0; padding-bottom: 0;
border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%); border-bottom: 1px solid var(--background-border-color);
background: mix($ui-base-color, $ui-highlight-color, 95%); background: rgba($ui-highlight-color, 0.05);
&__header { &__header {
display: flex; display: flex;
@ -10119,8 +10110,8 @@ noscript {
overflow-x: scroll; overflow-x: scroll;
&__card { &__card {
background: darken($ui-base-color, 4%); background: var(--background-color);
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -10157,7 +10148,7 @@ noscript {
.account__avatar { .account__avatar {
flex-shrink: 0; flex-shrink: 0;
align-self: flex-end; align-self: flex-end;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid var(--background-border-color);
background-color: $ui-base-color; background-color: $ui-base-color;
} }

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

@ -21,25 +21,6 @@ html {
} }
// Change default background colors of columns // Change default background colors of columns
.column > .scrollable,
.getting-started,
.column-inline-form,
.regeneration-indicator {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border-top: 0;
}
.error-column {
border: 1px solid lighten($ui-base-color, 8%);
}
.column > .scrollable.about {
border-top: 1px solid lighten($ui-base-color, 8%);
}
.about__meta,
.about__section__title,
.interaction-modal { .interaction-modal {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
@ -53,37 +34,10 @@ html {
background: lighten($ui-base-color, 12%); background: lighten($ui-base-color, 12%);
} }
.filter-form {
background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.column-back-button,
.column-header {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 0;
}
&--slim-button {
top: -50px;
right: 0;
}
}
.column-header__back-button,
.column-header__button,
.column-header__button.active,
.account__header { .account__header {
background: $white; background: $white;
} }
.column-header {
border-bottom: 0;
}
.column-header__button.active { .column-header__button.active {
color: $ui-highlight-color; color: $ui-highlight-color;
@ -91,7 +45,6 @@ html {
&:active, &:active,
&:focus { &:focus {
color: $ui-highlight-color; color: $ui-highlight-color;
background: $white;
} }
} }
@ -117,25 +70,6 @@ html {
} }
} }
.column-subheading {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.getting-started,
.scrollable {
.column-link {
background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%);
&:hover,
&:active,
&:focus {
background: $ui-base-color;
}
}
}
.getting-started .navigation-bar { .getting-started .navigation-bar {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -168,23 +102,6 @@ html {
border-bottom: 0; border-bottom: 0;
} }
.notification__filter-bar {
border: 1px solid lighten($ui-base-color, 8%);
border-top: 0;
}
.drawer__header,
.drawer__inner {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
}
.drawer__inner__mastodon {
background: $white
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
no-repeat bottom / 100% auto;
}
.upload-progress__backdrop { .upload-progress__backdrop {
background: $ui-base-color; background: $ui-base-color;
} }
@ -194,11 +111,6 @@ html {
background: lighten($white, 4%); background: lighten($white, 4%);
} }
.detailed-status,
.detailed-status__action-bar {
background: $white;
}
// Change the background colors of status__content__spoiler-link // Change the background colors of status__content__spoiler-link
.reply-indicator__content .status__content__spoiler-link, .reply-indicator__content .status__content__spoiler-link,
.status__content .status__content__spoiler-link { .status__content .status__content__spoiler-link {

4
app/javascript/flavours/glitch/styles/mastodon-light/variables.scss
View File

@ -59,4 +59,8 @@ $emojis-requiring-inversion: 'chains';
.theme-mastodon-light { .theme-mastodon-light {
--dropdown-border-color: #d9e1e8; --dropdown-border-color: #d9e1e8;
--dropdown-background-color: #fff; --dropdown-background-color: #fff;
--background-border-color: #d9e1e8;
--background-color: #fff;
--background-color-tint: rgba(255, 255, 255, 90%);
--background-filter: blur(10px);
} }

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

@ -100,10 +100,14 @@ $ui-avatar-border-size: 8%;
$dismiss-overlay-width: 4rem; $dismiss-overlay-width: 4rem;
:root { :root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)}; --dropdown-border-color: #{lighten($ui-base-color, 4%)};
--dropdown-background-color: #{lighten($ui-base-color, 4%)}; --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{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-background-color: #{darken($ui-base-color, 4%)};
--modal-border-color: #{lighten($ui-base-color, 4%)}; --modal-border-color: #{lighten($ui-base-color, 4%)};
--background-border-color: #{lighten($ui-base-color, 4%)};
--background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
--background-color: #{darken($ui-base-color, 8%)};
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
} }