Change background color in web UI (#29522)
This commit is contained in:
Eugen Rochko
GitHub
parent
af4e44e30a
commit
5b60d4b696
8 changed files with 147 additions and 233 deletions
|
|
@ -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>
|
||||
|
||||
<div className='about__domain-blocks'>
|
||||
{domainBlocks.get('items').map(block => (
|
||||
<div className='about__domain-blocks__domain' key={block.get('domain')}>
|
||||
<div className='about__domain-blocks__domain__header'>
|
||||
<h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
|
||||
<span className='about__domain-blocks__domain__type' title={intl.formatMessage(severityMessages[block.get('severity')].explanation)}>{intl.formatMessage(severityMessages[block.get('severity')].title)}</span>
|
||||
</div>
|
||||
{domainBlocks.get('items').size > 0 && (
|
||||
<div className='about__domain-blocks'>
|
||||
{domainBlocks.get('items').map(block => (
|
||||
<div className='about__domain-blocks__domain' key={block.get('domain')}>
|
||||
<div className='about__domain-blocks__domain__header'>
|
||||
<h6><span title={`SHA-256: ${block.get('digest')}`}>{block.get('domain')}</span></h6>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p>{(block.get('comment') || '').length > 0 ? block.get('comment') : <FormattedMessage id='about.domain_blocks.no_reason_available' defaultMessage='Reason not available' />}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p><FormattedMessage id='about.not_available' defaultMessage='This information has not been made available on this server.' /></p>
|
||||
|
|
|
|||
|
|
@ -21,25 +21,6 @@ html {
|
|||
}
|
||||
|
||||
// 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 {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
|
|
@ -53,37 +34,10 @@ html {
|
|||
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 {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.column-header__button.active {
|
||||
color: $ui-highlight-color;
|
||||
|
||||
|
|
@ -91,7 +45,6 @@ html {
|
|||
&:active,
|
||||
&:focus {
|
||||
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 {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
|
@ -168,23 +102,6 @@ html {
|
|||
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 {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
|
@ -194,11 +111,6 @@ html {
|
|||
background: lighten($white, 4%);
|
||||
}
|
||||
|
||||
.detailed-status,
|
||||
.detailed-status__action-bar {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
// Change the background colors of status__content__spoiler-link
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content .status__content__spoiler-link {
|
||||
|
|
|
|||
|
|
@ -59,4 +59,8 @@ $emojis-requiring-inversion: 'chains';
|
|||
.theme-mastodon-light {
|
||||
--dropdown-border-color: #d9e1e8;
|
||||
--dropdown-background-color: #fff;
|
||||
--background-border-color: #d9e1e8;
|
||||
--background-color: #fff;
|
||||
--background-color-tint: rgba(255, 255, 255, 90%);
|
||||
--background-filter: blur(10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ $fluid-breakpoint: $maximum-width + 20px;
|
|||
|
||||
li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 1em 1.75em;
|
||||
padding-inline-start: 3em;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -1378,8 +1378,8 @@ a.sparkline {
|
|||
}
|
||||
|
||||
.account-card {
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
&__permalink {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
body {
|
||||
font-family: $font-sans-serif, sans-serif;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
|
|
|
|||
|
|
@ -1311,7 +1311,7 @@ body > [data-popper-placement] {
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__button {
|
||||
display: inline;
|
||||
|
|
@ -1332,19 +1332,14 @@ body > [data-popper-placement] {
|
|||
.focusable {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
.detailed-status,
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 16px;
|
||||
min-height: 54px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
cursor: auto;
|
||||
|
||||
@keyframes fade {
|
||||
|
|
@ -1588,10 +1583,10 @@ body > [data-popper-placement] {
|
|||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
background: mix($ui-base-color, $ui-highlight-color, 95%);
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
|
||||
&:focus {
|
||||
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
}
|
||||
|
||||
.status__prepend {
|
||||
|
|
@ -1616,9 +1611,8 @@ body > [data-popper-placement] {
|
|||
}
|
||||
|
||||
.detailed-status {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 16px;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
|
|
@ -1678,9 +1672,8 @@ body > [data-popper-placement] {
|
|||
}
|
||||
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
|
|
@ -1735,7 +1728,7 @@ body > [data-popper-placement] {
|
|||
|
||||
.domain {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.domain__domain-name {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -1759,7 +1752,7 @@ body > [data-popper-placement] {
|
|||
|
||||
.account {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -2017,7 +2010,7 @@ a.account__display-name {
|
|||
|
||||
.notification__report {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
|
|
@ -2276,6 +2269,7 @@ a.account__display-name {
|
|||
|
||||
.dropdown-menu {
|
||||
background: var(--dropdown-background-color);
|
||||
backdrop-filter: var(--background-filter);
|
||||
border: 1px solid var(--dropdown-border-color);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -2466,6 +2460,7 @@ $ui-header-height: 55px;
|
|||
z-index: 3;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: var(--background-filter);
|
||||
|
||||
&__logo {
|
||||
display: inline-flex;
|
||||
|
|
@ -2514,7 +2509,8 @@ $ui-header-height: 55px;
|
|||
}
|
||||
|
||||
.tabs-bar__wrapper {
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: var(--background-color-tint);
|
||||
backdrop-filter: var(--background-filter);
|
||||
position: sticky;
|
||||
top: $ui-header-height;
|
||||
z-index: 2;
|
||||
|
|
@ -2550,8 +2546,15 @@ $ui-header-height: 55px;
|
|||
flex-direction: column;
|
||||
|
||||
> .scrollable {
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
||||
&.about,
|
||||
&.privacy-policy {
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2581,7 +2584,6 @@ $ui-header-height: 55px;
|
|||
font-size: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.column,
|
||||
|
|
@ -2710,8 +2712,7 @@ $ui-header-height: 55px;
|
|||
|
||||
.navigation-panel {
|
||||
margin: 0;
|
||||
background: $ui-base-color;
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -2729,8 +2730,15 @@ $ui-header-height: 55px;
|
|||
|
||||
.layout-single-column .ui__header {
|
||||
display: flex;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: var(--background-color-tint);
|
||||
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,
|
||||
|
|
@ -2788,7 +2796,7 @@ $ui-header-height: 55px;
|
|||
inset-inline-start: 9px;
|
||||
top: -13px;
|
||||
background: $ui-highlight-color;
|
||||
border: 2px solid lighten($ui-base-color, 8%);
|
||||
border: 2px solid var(--background-color);
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
|
|
@ -2810,7 +2818,7 @@ $ui-header-height: 55px;
|
|||
}
|
||||
|
||||
.column-link--transparent .icon-with-badge__badge {
|
||||
border-color: darken($ui-base-color, 8%);
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.column-title {
|
||||
|
|
@ -3160,7 +3168,7 @@ $ui-header-height: 55px;
|
|||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
|
|
@ -3177,13 +3185,14 @@ $ui-header-height: 55px;
|
|||
overflow: hidden;
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.drawer__inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -3192,15 +3201,11 @@ $ui-header-height: 55px;
|
|||
overflow-y: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&.darker {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: darken($ui-base-color, 4%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
|
||||
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(darken($ui-base-color, 4%))}"/></svg>')
|
||||
no-repeat bottom / 100% auto;
|
||||
flex: 1;
|
||||
min-height: 47px;
|
||||
|
|
@ -3224,7 +3229,7 @@ $ui-header-height: 55px;
|
|||
.drawer__header {
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -3234,7 +3239,7 @@ $ui-header-height: 55px;
|
|||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
background: $ui-base-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3279,15 +3284,14 @@ $ui-header-height: 55px;
|
|||
.column-back-button {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
background: transparent;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: $highlight-text-color;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
line-height: inherit;
|
||||
border: 0;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
text-align: unset;
|
||||
padding: 13px;
|
||||
margin: 0;
|
||||
|
|
@ -3300,13 +3304,17 @@ $ui-header-height: 55px;
|
|||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: $ui-base-color;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-family: inherit;
|
||||
color: $highlight-text-color;
|
||||
|
|
@ -3412,8 +3420,6 @@ $ui-header-height: 55px;
|
|||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $primary-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
|
@ -3423,12 +3429,18 @@ $ui-header-height: 55px;
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: $secondary-text-color;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 11%);
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -3440,22 +3452,6 @@ $ui-header-height: 55px;
|
|||
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 {
|
||||
background: transparent;
|
||||
padding: 10px;
|
||||
|
|
@ -3480,8 +3476,8 @@ $ui-header-height: 55px;
|
|||
}
|
||||
|
||||
.column-subheading {
|
||||
background: $ui-base-color;
|
||||
color: $dark-text-color;
|
||||
background: darken($ui-base-color, 4%);
|
||||
color: $darker-text-color;
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
|
@ -3489,12 +3485,6 @@ $ui-header-height: 55px;
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.getting-started__wrapper,
|
||||
.getting-started,
|
||||
.flex-spacer {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
.getting-started__wrapper {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
|
@ -3506,6 +3496,8 @@ $ui-header-height: 55px;
|
|||
.getting-started {
|
||||
color: $dark-text-color;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
|
||||
&__trends {
|
||||
flex: 0 1 auto;
|
||||
|
|
@ -3514,7 +3506,7 @@ $ui-header-height: 55px;
|
|||
margin-top: 10px;
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -3636,7 +3628,7 @@ $ui-header-height: 55px;
|
|||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 8px;
|
||||
|
||||
&__actions {
|
||||
|
|
@ -3893,7 +3885,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.load-gap {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.timeline-hint {
|
||||
|
|
@ -3926,7 +3918,8 @@ a.status-card {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: $dark-text-color;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -4002,8 +3995,7 @@ a.status-card {
|
|||
.column-header {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
|
|
@ -4070,6 +4062,10 @@ a.status-card {
|
|||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__buttons {
|
||||
|
|
@ -4089,9 +4085,9 @@ a.status-card {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $ui-base-color;
|
||||
border: 0;
|
||||
color: $darker-text-color;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 0 15px;
|
||||
|
|
@ -4110,7 +4106,6 @@ a.status-card {
|
|||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
|
|
@ -4127,7 +4122,6 @@ a.status-card {
|
|||
max-height: 70vh;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
color: $darker-text-color;
|
||||
transition:
|
||||
max-height 150ms ease-in-out,
|
||||
|
|
@ -4149,13 +4143,14 @@ a.status-card {
|
|||
height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.column-header__setting-btn {
|
||||
|
|
@ -4401,9 +4396,8 @@ a.status-card {
|
|||
}
|
||||
|
||||
.account--panel {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
|
|
@ -4609,7 +4603,6 @@ a.status-card {
|
|||
.empty-column-indicator,
|
||||
.follow_requests-unlocked_explanation {
|
||||
color: $dark-text-color;
|
||||
background: $ui-base-color;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 15px;
|
||||
|
|
@ -4636,14 +4629,14 @@ a.status-card {
|
|||
|
||||
.follow_requests-unlocked_explanation {
|
||||
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;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.error-column {
|
||||
padding: 20px;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -4858,7 +4851,7 @@ a.status-card {
|
|||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
@ -5280,7 +5273,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.search-results__section {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
|
@ -5288,7 +5281,7 @@ a.status-card {
|
|||
|
||||
&__header {
|
||||
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;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
|
|
@ -6335,7 +6328,7 @@ a.status-card {
|
|||
.attachment-list {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
|
|
@ -6345,7 +6338,7 @@ a.status-card {
|
|||
color: $dark-text-color;
|
||||
padding: 8px 18px;
|
||||
cursor: default;
|
||||
border-inline-end: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-end: 1px solid var(--background-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -6497,7 +6490,7 @@ a.status-card {
|
|||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-radius: 8px;
|
||||
padding-bottom: 44px;
|
||||
width: 100%;
|
||||
|
|
@ -6893,7 +6886,6 @@ a.status-card {
|
|||
|
||||
.scrollable .account-card {
|
||||
margin: 10px;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.scrollable .account-card__title__avatar {
|
||||
|
|
@ -6904,11 +6896,7 @@ a.status-card {
|
|||
}
|
||||
|
||||
.scrollable .account-card__bio::after {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
lighten($ui-base-color, 8%),
|
||||
transparent
|
||||
);
|
||||
background: linear-gradient(to left, var(--background-color), transparent);
|
||||
}
|
||||
|
||||
.account-gallery__container {
|
||||
|
|
@ -6937,8 +6925,8 @@ a.status-card {
|
|||
|
||||
.notification__filter-bar,
|
||||
.account__section-headline {
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -6979,10 +6967,15 @@ a.status-card {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable & {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__column {
|
||||
display: flex;
|
||||
|
|
@ -7200,7 +7193,8 @@ noscript {
|
|||
justify-content: flex-start;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
|
||||
label {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -7301,7 +7295,7 @@ noscript {
|
|||
|
||||
.list {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.list__wrapper {
|
||||
|
|
@ -7445,7 +7439,7 @@ noscript {
|
|||
height: 145px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
|
|
@ -7459,7 +7453,7 @@ noscript {
|
|||
&__bar {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
|
|
@ -7467,8 +7461,8 @@ noscript {
|
|||
width: 94px;
|
||||
|
||||
.account__avatar {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border: 2px solid $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border: 2px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7583,13 +7577,12 @@ noscript {
|
|||
margin: 0;
|
||||
margin-top: 16px;
|
||||
border-radius: 4px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
dl {
|
||||
display: block;
|
||||
padding: 11px 16px;
|
||||
border-bottom-color: lighten($ui-base-color, 4%);
|
||||
border-bottom-color: var(--background-border-color);
|
||||
}
|
||||
|
||||
dd,
|
||||
|
|
@ -7764,7 +7757,7 @@ noscript {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
gap: 15px;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -7882,7 +7875,7 @@ noscript {
|
|||
|
||||
.conversation {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 5px;
|
||||
padding-bottom: 0;
|
||||
|
||||
|
|
@ -8237,7 +8230,7 @@ noscript {
|
|||
|
||||
.picture-in-picture-placeholder {
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed lighten($ui-base-color, 8%);
|
||||
border: 2px dashed var(--background-border-color);
|
||||
background: $base-shadow-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -8265,7 +8258,7 @@ noscript {
|
|||
|
||||
.notifications-permission-banner {
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -8335,7 +8328,7 @@ noscript {
|
|||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
gap: 15px;
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -8714,7 +8707,6 @@ noscript {
|
|||
}
|
||||
|
||||
.privacy-policy {
|
||||
background: $ui-base-color;
|
||||
padding: 20px;
|
||||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
|
|
@ -9083,6 +9075,7 @@ noscript {
|
|||
|
||||
.about {
|
||||
padding: 20px;
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (min-width: $no-gap-breakpoint) {
|
||||
border-radius: 4px;
|
||||
|
|
@ -9129,7 +9122,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__meta {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -9145,7 +9138,7 @@ noscript {
|
|||
width: 0;
|
||||
border: 0;
|
||||
border-style: solid;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
border-color: var(--background-border-color);
|
||||
border-left-width: 1px;
|
||||
min-height: calc(100% - 60px);
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -9253,7 +9246,7 @@ noscript {
|
|||
line-height: 22px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $highlight-text-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -9263,7 +9256,7 @@ noscript {
|
|||
}
|
||||
|
||||
&__body {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
padding: 20px;
|
||||
font-size: 15px;
|
||||
|
|
@ -9273,18 +9266,17 @@ noscript {
|
|||
|
||||
&__domain-blocks {
|
||||
margin-top: 30px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
&__domain {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: darken($ui-base-color, 2%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -9380,7 +9372,7 @@ noscript {
|
|||
}
|
||||
|
||||
.hashtag-header {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
|
|
@ -9442,8 +9434,8 @@ noscript {
|
|||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%);
|
||||
background: mix($ui-base-color, $ui-highlight-color, 95%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
background: rgba($ui-highlight-color, 0.05);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
|
|
@ -9527,8 +9519,8 @@ noscript {
|
|||
overflow-x: scroll;
|
||||
|
||||
&__card {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -9565,7 +9557,7 @@ noscript {
|
|||
.account__avatar {
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
background-color: $ui-base-color;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -94,10 +94,14 @@ $font-display: 'mastodon-font-display' !default;
|
|||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
|
||||
:root {
|
||||
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
|
||||
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
|
||||
--dropdown-border-color: #{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)},
|
||||
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
|
||||
--modal-background-color: #{darken($ui-base-color, 4%)};
|
||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
||||
--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)};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue