Update style.scss

This commit is contained in:
stux 2022-06-06 13:17:14 +02:00
parent 26d00238ef
commit 795d921698

View file

@ -7,6 +7,10 @@
--shadow: 0 10px 40px -10px rgba(0,0,0,0.15); --shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
--shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4); --shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
} }
#mastodon .button--block,
.public-layout .button--block {
font-weight: 700;
}
#mastodon .compose-form__upload-thumbnail, #mastodon .compose-form__upload-thumbnail,
.public-layout .compose-form__upload-thumbnail, .public-layout .compose-form__upload-thumbnail,
#mastodon button:not(.column-header__button), #mastodon button:not(.column-header__button),
@ -49,7 +53,11 @@
#mastodon .column-link, #mastodon .column-link,
.public-layout .column-link, .public-layout .column-link,
#mastodon select, #mastodon select,
.public-layout select { .public-layout select,
#mastodon .status-card,
.public-layout .status-card,
#mastodon .audio-player,
.public-layout .audio-player {
transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 3) !important;
} }
#mastodon .media-gallery__item:active, #mastodon .media-gallery__item:active,
@ -57,7 +65,11 @@
#mastodon .column-link:active, #mastodon .column-link:active,
.public-layout .column-link:active, .public-layout .column-link:active,
#mastodon select:active, #mastodon select:active,
.public-layout select:active { .public-layout select:active,
#mastodon .status-card:active,
.public-layout .status-card:active,
#mastodon .audio-player:active,
.public-layout .audio-player:active {
transform: scale(0.99); transform: scale(0.99);
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
} }
@ -173,6 +185,10 @@
.public-layout .compose-form .compose-form__buttons-wrapper { .public-layout .compose-form .compose-form__buttons-wrapper {
border-radius: 0 0 var(--radius) var(--radius) !important; border-radius: 0 0 var(--radius) var(--radius) !important;
} }
#mastodon .compose-form .compose-form__publish-button-wrapper,
.public-layout .compose-form .compose-form__publish-button-wrapper {
overflow: visible !important;
}
@media (min-width: 895px) { @media (min-width: 895px) {
.layout-single-column .getting-started__footer { .layout-single-column .getting-started__footer {
opacity: 0.5; opacity: 0.5;
@ -449,31 +465,31 @@
font-weight: 600; font-weight: 600;
padding-inline: 14px; padding-inline: 14px;
} }
#mastodon .account__section-headline, #mastodon#mastodon .account__section-headline,
.public-layout .account__section-headline { .public-layout#mastodon .account__section-headline {
background: none; background: none;
} }
.with-modals #mastodon .account__section-headline, .with-modals #mastodon#mastodon .account__section-headline,
.with-modals .public-layout .account__section-headline { .with-modals .public-layout#mastodon .account__section-headline {
border: 0 !important; border: 0 !important;
} }
#mastodon .account__section-headline a, #mastodon#mastodon .account__section-headline a,
.public-layout .account__section-headline a, .public-layout#mastodon .account__section-headline a,
#mastodon .account__section-headline button, #mastodon#mastodon .account__section-headline button,
.public-layout .account__section-headline button { .public-layout#mastodon .account__section-headline button {
background: none; background: none;
border-radius: 0 !important; border-radius: 0 !important;
} }
#mastodon .account__section-headline a span, #mastodon#mastodon .account__section-headline a span,
.public-layout .account__section-headline a span, .public-layout#mastodon .account__section-headline a span,
#mastodon .account__section-headline button span, #mastodon#mastodon .account__section-headline button span,
.public-layout .account__section-headline button span { .public-layout#mastodon .account__section-headline button span {
font-weight: 400; font-weight: 400;
} }
#mastodon .account__section-headline a.active span, #mastodon#mastodon .account__section-headline a.active span,
.public-layout .account__section-headline a.active span, .public-layout#mastodon .account__section-headline a.active span,
#mastodon .account__section-headline button.active span, #mastodon#mastodon .account__section-headline button.active span,
.public-layout .account__section-headline button.active span { .public-layout#mastodon .account__section-headline button.active span {
font-weight: 700; font-weight: 700;
} }
#mastodon .notification__filter-bar, #mastodon .notification__filter-bar,
@ -544,6 +560,7 @@
padding-top: 15px !important; padding-top: 15px !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
margin-bottom: -10px !important; margin-bottom: -10px !important;
z-index: 2;
} }
#mastodon .account__avatar-overlay-base, #mastodon .account__avatar-overlay-base,
.public-layout .account__avatar-overlay-base { .public-layout .account__avatar-overlay-base {
@ -566,6 +583,7 @@
.public-layout .status__info .status__avatar { .public-layout .status__info .status__avatar {
top: 15px; top: 15px;
left: 15px !important; left: 15px !important;
z-index: 2;
} }
#mastodon .status__info .display-name strong, #mastodon .status__info .display-name strong,
.public-layout .status__info .display-name strong { .public-layout .status__info .display-name strong {
@ -607,9 +625,13 @@
#mastodon .video-player, #mastodon .video-player,
.public-layout .video-player, .public-layout .video-player,
#mastodon .status-card.horizontal.interactive, #mastodon .status-card.horizontal.interactive,
.public-layout .status-card.horizontal.interactive { .public-layout .status-card.horizontal.interactive,
#mastodon .status-card,
.public-layout .status-card,
#mastodon .audio-player,
.public-layout .audio-player {
margin-left: calc(15px - var(--status-left-padding)); margin-left: calc(15px - var(--status-left-padding));
width: unset; width: unset !important;
box-shadow: var(--shadow-low); box-shadow: var(--shadow-low);
border-radius: var(--radius); border-radius: var(--radius);
margin-block: 15px !important; margin-block: 15px !important;
@ -617,6 +639,47 @@
max-width: unset !important; max-width: unset !important;
max-height: 80vh !important; max-height: 80vh !important;
} }
#mastodon .media-gallery.status-card,
.public-layout .media-gallery.status-card,
#mastodon .video-player.status-card,
.public-layout .video-player.status-card,
#mastodon .status-card.horizontal.interactive.status-card,
.public-layout .status-card.horizontal.interactive.status-card,
#mastodon .status-card.status-card,
.public-layout .status-card.status-card,
#mastodon .audio-player.status-card,
.public-layout .audio-player.status-card {
box-shadow: var(--shadow);
box-shadow: none;
}
#mastodon .media-gallery.status-card .status-card__content,
.public-layout .media-gallery.status-card .status-card__content,
#mastodon .video-player.status-card .status-card__content,
.public-layout .video-player.status-card .status-card__content,
#mastodon .status-card.horizontal.interactive.status-card .status-card__content,
.public-layout .status-card.horizontal.interactive.status-card .status-card__content,
#mastodon .status-card.status-card .status-card__content,
.public-layout .status-card.status-card .status-card__content,
#mastodon .audio-player.status-card .status-card__content,
.public-layout .audio-player.status-card .status-card__content {
padding-inline: 12px;
}
#mastodon .media-gallery.status-card:hover,
.public-layout .media-gallery.status-card:hover,
#mastodon .video-player.status-card:hover,
.public-layout .video-player.status-card:hover,
#mastodon .status-card.horizontal.interactive.status-card:hover,
.public-layout .status-card.horizontal.interactive.status-card:hover,
#mastodon .status-card.status-card:hover,
.public-layout .status-card.status-card:hover,
#mastodon .audio-player.status-card:hover,
.public-layout .audio-player.status-card:hover {
background-color: var(--hover-color);
}
#mastodon .media-gallery__item:not([style*="50%"]),
.public-layout .media-gallery__item:not([style*="50%"]) {
border-radius: var(--radius);
}
#mastodon .detailed-status, #mastodon .detailed-status,
.public-layout .detailed-status { .public-layout .detailed-status {
padding: 15px !important; padding: 15px !important;
@ -693,6 +756,7 @@
height: unset !important; height: unset !important;
flex: 0 1 auto !important; flex: 0 1 auto !important;
min-width: 0; min-width: 0;
border-radius: var(--radius);
} }
#mastodon .status__action-bar .icon-button:last-child, #mastodon .status__action-bar .icon-button:last-child,
.public-layout .status__action-bar .icon-button:last-child, .public-layout .status__action-bar .icon-button:last-child,
@ -702,12 +766,12 @@
.public-layout .picture-in-picture__footer .icon-button:last-child { .public-layout .picture-in-picture__footer .icon-button:last-child {
margin-right: 0 !important; margin-right: 0 !important;
} }
#mastodon .status__action-bar .icon-button::after, #mastodon .status__action-bar .icon-button[aria-label]::after,
.public-layout .status__action-bar .icon-button::after, .public-layout .status__action-bar .icon-button[aria-label]::after,
#mastodon .detailed-status__action-bar .icon-button::after, #mastodon .detailed-status__action-bar .icon-button[aria-label]::after,
.public-layout .detailed-status__action-bar .icon-button::after, .public-layout .detailed-status__action-bar .icon-button[aria-label]::after,
#mastodon .picture-in-picture__footer .icon-button::after, #mastodon .picture-in-picture__footer .icon-button[aria-label]::after,
.public-layout .picture-in-picture__footer .icon-button::after { .public-layout .picture-in-picture__footer .icon-button[aria-label]::after {
content: attr(aria-label); content: attr(aria-label);
font-size: 0.7em; font-size: 0.7em;
margin-left: 0.5em; margin-left: 0.5em;
@ -1043,45 +1107,133 @@
font-size: 1.1em !important; font-size: 1.1em !important;
line-height: 2; line-height: 2;
} }
#mastodon.public-layout .header, #mastodon.public-layout .container:nth-child(2) .grid .column-1,
.public-layout.public-layout .header { .public-layout.public-layout .container:nth-child(2) .grid .column-1 {
border-radius: var(--radius);
margin: 20px 0;
}
#mastodon.public-layout .public-account-header,
.public-layout.public-layout .public-account-header {
border-radius: var(--radius);
--border-color: transparent !important;
border: 0 !important;
margin-bottom: 20px;
}
#mastodon.public-layout .public-account-header .public-account-header__bar::before,
.public-layout.public-layout .public-account-header .public-account-header__bar::before {
border: 0;
}
#mastodon.public-layout .grid,
.public-layout.public-layout .grid {
gap: 20px;
}
#mastodon.public-layout .public-account-header + .grid .column-1,
.public-layout.public-layout .public-account-header + .grid .column-1 {
position: sticky; position: sticky;
align-self: flex-end; align-self: flex-end;
bottom: 0; bottom: 0;
min-height: calc(100vh - 80px); min-height: calc(100vh - 80px);
} }
#mastodon.public-layout .public-account-header + .grid .column-1 > *, #mastodon.public-layout .container:nth-child(2) .grid .column-1 > *,
.public-layout.public-layout .public-account-header + .grid .column-1 > * { .public-layout.public-layout .container:nth-child(2) .grid .column-1 > * {
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
border: 0 !important; border: 0 !important;
} }
#mastodon.public-layout .public-account-header + .grid .column-1 a, #mastodon.public-layout .container:nth-child(2) .grid .column-1 a,
.public-layout.public-layout .public-account-header + .grid .column-1 a, .public-layout.public-layout .container:nth-child(2) .grid .column-1 a,
#mastodon.public-layout .public-account-header + .grid .column-1 .hero-widget__text, #mastodon.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text,
.public-layout.public-layout .public-account-header + .grid .column-1 .hero-widget__text { .public-layout.public-layout .container:nth-child(2) .grid .column-1 .hero-widget__text {
border: 0 !important; border: 0 !important;
} }
@media (min-width: 416px) {
#mastodon.public-layout .grid,
.public-layout.public-layout .grid,
#mastodon.public-layout .grid-4,
.public-layout.public-layout .grid-4 {
gap: 15px;
}
#mastodon.public-layout .header,
.public-layout.public-layout .header {
border-radius: var(--radius);
margin: 15px 0;
}
#mastodon.public-layout .public-account-header,
.public-layout.public-layout .public-account-header {
border-radius: var(--radius);
--border-color: transparent !important;
border: 0 !important;
}
#mastodon.public-layout .public-account-header:not(.public-account-header--no-bar),
.public-layout.public-layout .public-account-header:not(.public-account-header--no-bar) {
margin-bottom: 15px;
}
#mastodon.public-layout .public-account-header .public-account-header__bar::before,
.public-layout.public-layout .public-account-header .public-account-header__bar::before {
border: 0;
}
#mastodon.public-layout .account__section-headline,
.public-layout.public-layout .account__section-headline {
border-radius: var(--radius) var(--radius) 0 0;
border: 0;
}
#mastodon.public-layout .account__section-headline + .activity-stream > .entry:first-child,
.public-layout.public-layout .account__section-headline + .activity-stream > .entry:first-child {
border-radius: 0 !important;
}
#mastodon.public-layout .table-of-contents,
.public-layout.public-layout .table-of-contents {
max-height: calc(100vh - 20px);
min-height: unset !important;
overflow-y: scroll;
display: flex;
flex-direction: column;
position: sticky;
top: 10px;
}
}
@media (max-width: 416px) {
#mastodon.public-layout .contact-widget,
.public-layout.public-layout .contact-widget {
padding: 0 10px;
}
#mastodon.public-layout .grid-4 > div:not(.column-4),
.public-layout.public-layout .grid-4 > div:not(.column-4) {
position: relative;
z-index: 2;
}
#mastodon.public-layout .table-of-contents,
.public-layout.public-layout .table-of-contents {
max-height: 70vh;
max-content: min-content;
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 30px;
box-sizing: border-box;
overflow-x: scroll !important;
scroll-snap-type: x mandatory;
scroll-padding-left: 30px;
gap: 20px 30px;
position: relative;
background: none !important;
border: 0 !important;
scroll-behavior: smooth;
}
#mastodon.public-layout .table-of-contents > li,
.public-layout.public-layout .table-of-contents > li {
width: 70%;
max-height: 80%;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: var(--radius);
scroll-snap-align: start;
box-shadow: var(--shadow);
transition: background-color 0.2s, box-shadow 0.2s;
}
#mastodon.public-layout .table-of-contents > li:hover,
.public-layout.public-layout .table-of-contents > li:hover,
#mastodon.public-layout .table-of-contents > li:focus-within,
.public-layout.public-layout .table-of-contents > li:focus-within {
background-color: var(--hover-color);
}
#mastodon.public-layout .table-of-contents > li ul,
.public-layout.public-layout .table-of-contents > li ul {
border: 0 !important;
}
#mastodon.public-layout .table-of-contents > li > a,
.public-layout.public-layout .table-of-contents > li > a {
border: 0 !important;
}
#mastodon.public-layout .table-of-contents > li:last-child,
.public-layout.public-layout .table-of-contents > li:last-child {
margin-right: 70%;
}
}
#mastodon.public-layout .account-card,
.public-layout.public-layout .account-card,
#mastodon.public-layout .card > a,
.public-layout.public-layout .card > a,
#mastodon.public-layout .page-header, #mastodon.public-layout .page-header,
.public-layout.public-layout .page-header, .public-layout.public-layout .page-header,
#mastodon.public-layout .statuses-grid__item, #mastodon.public-layout .statuses-grid__item,
@ -1101,10 +1253,67 @@
border-radius: var(--radius); border-radius: var(--radius);
overflow: hidden; overflow: hidden;
} }
#mastodon.public-layout .account-card__header,
.public-layout.public-layout .account-card__header {
padding: 0 !important;
padding-bottom: 4px !important;
}
#mastodon.public-layout .account-card__bio,
.public-layout.public-layout .account-card__bio {
margin-top: 0 !important;
}
#mastodon.public-layout .account-card__actions,
.public-layout.public-layout .account-card__actions {
margin-top: auto !important;
}
#mastodon.public-layout .statuses-grid, #mastodon.public-layout .statuses-grid,
.public-layout.public-layout .statuses-grid { .public-layout.public-layout .statuses-grid {
margin: auto; margin: auto;
} }
#mastodon.public-layout .entry,
.public-layout.public-layout .entry,
#mastodon.public-layout .entry ~ .entry,
.public-layout.public-layout .entry ~ .entry {
margin: 0;
}
#mastodon.public-layout .entry:not(:last-child):not(:first-child),
.public-layout.public-layout .entry:not(:last-child):not(:first-child),
#mastodon.public-layout .entry ~ .entry:not(:last-child):not(:first-child),
.public-layout.public-layout .entry ~ .entry:not(:last-child):not(:first-child) {
border-radius: 0 !important;
}
#mastodon.public-layout .entry:not(:first-child:last-child):last-child,
.public-layout.public-layout .entry:not(:first-child:last-child):last-child,
#mastodon.public-layout .entry ~ .entry:not(:first-child:last-child):last-child,
.public-layout.public-layout .entry ~ .entry:not(:first-child:last-child):last-child {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
#mastodon.public-layout .entry:not(:first-child:last-child):first-child,
.public-layout.public-layout .entry:not(:first-child:last-child):first-child,
#mastodon.public-layout .entry ~ .entry:not(:first-child:last-child):first-child,
.public-layout.public-layout .entry ~ .entry:not(:first-child:last-child):first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
#mastodon.public-layout .status-public .status__content,
.public-layout.public-layout .status-public .status__content {
margin-top: 0;
}
#mastodon.public-layout .detailed-status-public,
.public-layout.public-layout .detailed-status-public {
padding: 20px !important;
padding-bottom: 5px !important;
}
#mastodon.public-layout .detailed-status-public .status__content,
.public-layout.public-layout .detailed-status-public .status__content {
margin-top: 0;
}
#mastodon.public-layout .detailed-status-public .detailed-status__meta,
.public-layout.public-layout .detailed-status-public .detailed-status__meta {
margin-top: 15px;
margin-bottom: 10px;
}
#mastodon.public-layout .footer .column-3, #mastodon.public-layout .footer .column-3,
.public-layout.public-layout .footer .column-3, .public-layout.public-layout .footer .column-3,
#mastodon.public-layout .footer .column-4, #mastodon.public-layout .footer .column-4,
@ -1448,9 +1657,8 @@
.layout-multiple-columns #mastodon .columns-area .getting-started__trends { .layout-multiple-columns #mastodon .columns-area .getting-started__trends {
padding: 0px 20px; padding: 0px 20px;
} }
#mastodon .modal-root__container, .modal-root__container {
.public-layout .modal-root__container { animation: bounceIn 0.7s !important;
animation: bounceIn 0.7s;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
@-moz-keyframes bounceIn { @-moz-keyframes bounceIn {