Gearheads: update Bird UI theme (1.5.8 ➔ 1.6.4)
parent
767aa3d66f
commit
f14ac87522
|
|
@ -1,5 +1,5 @@
|
|||
/* Mastodon Bird UI by @rolle@mementomori.social
|
||||
1.5.8 */
|
||||
1.6.4 */
|
||||
|
||||
/* CSS variables */
|
||||
:root {
|
||||
|
|
@ -338,6 +338,7 @@ body.layout-multiple-columns {
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .ui__header__logo img,
|
||||
.layout-multiple-columns .ui__header__logo svg {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -361,10 +362,10 @@ body.layout-multiple-columns {
|
|||
|
||||
/* Things that should have the mid font-size */
|
||||
.layout-multiple-columns .account__header__extra__links,
|
||||
.layout-multiple-columns .account__header__account-note textarea,
|
||||
.layout-multiple-columns .columns-area__panels__pane--compositional .account__header__account-note textarea,
|
||||
.layout-multiple-columns .account__header__content,
|
||||
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-multiple-columns .compose-form .spoiler-input__input {
|
||||
.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-multiple-columns .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
|
||||
font-size: var(--font-size-mid);
|
||||
line-height: var(--line-height-mid);
|
||||
}
|
||||
|
|
@ -407,35 +408,6 @@ body.layout-multiple-columns {
|
|||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Modal buttons */
|
||||
.layout-multiple-columns .media-modal__navigation button,
|
||||
.layout-multiple-columns .image-loader button {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
/* It's inlined so we have to use !important */
|
||||
/* stylelint-disable-next-line */
|
||||
color: var(--color-light-text) !important;
|
||||
display: inline-flex;
|
||||
|
||||
/* It's inlined so we have to use !important */
|
||||
/* stylelint-disable-next-line */
|
||||
font-size: var(--font-size-heading) !important;
|
||||
/* stylelint-disable-next-line */
|
||||
height: 36px !important;
|
||||
justify-content: center;
|
||||
/* stylelint-disable-next-line */
|
||||
margin: 4px !important;
|
||||
/* stylelint-disable-next-line */
|
||||
top: 2px !important;
|
||||
/* stylelint-disable-next-line */
|
||||
width: 36px !important;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .media-modal__navigation button {
|
||||
/* stylelint-disable-next-line */
|
||||
top: 5px !important;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .media-modal__navigation .fa-times::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -501,35 +473,42 @@ body.layout-multiple-columns {
|
|||
top: -2px;
|
||||
}
|
||||
|
||||
/* Default to full-width images in link previews
|
||||
Needs implementation from the source below
|
||||
|
||||
@source https://github.com/mastodon/mastodon/issues/21874#issuecomment-1332556018
|
||||
*/
|
||||
|
||||
.layout-multiple-columns a.status-card,
|
||||
.layout-multiple-columns a.status-card.compact {
|
||||
/* Bigger preview cards */
|
||||
.layout-multiple-columns .status-card,
|
||||
.layout-multiple-columns .status-card.compact {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
display: block;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
/* Hide empty YouTube description */
|
||||
.layout-multiple-columns .status-card__description:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .status-card:focus,
|
||||
.layout-multiple-columns .status-card:hover {
|
||||
background-color: rgba(255 255 255 / .03);
|
||||
}
|
||||
|
||||
.layout-multiple-columns .fa-file-text::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.layout-multiple-columns a.status-card .status-card__image-image,
|
||||
.layout-multiple-columns a.status-card .status-card__image-image.compact {
|
||||
.layout-multiple-columns .status-card .status-card__image-image,
|
||||
.layout-multiple-columns .status-card .status-card__image-image.compact {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layout-multiple-columns a.status-card .status-card__content,
|
||||
.layout-multiple-columns a.status-card.compact .status-card__content {
|
||||
.layout-multiple-columns .status-card .status-card__content,
|
||||
.layout-multiple-columns .status-card.compact .status-card__content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.layout-multiple-columns a.status-card .status-card__title,
|
||||
.layout-multiple-columns a.status-card.compact .status-card__title {
|
||||
.layout-multiple-columns .status-card .status-card__title,
|
||||
.layout-multiple-columns .status-card.compact .status-card__title {
|
||||
color: var(--color-fg);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
|
@ -538,8 +517,8 @@ body.layout-multiple-columns {
|
|||
white-space: inherit;
|
||||
}
|
||||
|
||||
a.status-card .status-card__host,
|
||||
a.status-card.compact .status-card__host {
|
||||
.layout-multiple-columns .status-card .status-card__host,
|
||||
.layout-multiple-columns .status-card.compact .status-card__host {
|
||||
color: var(--color-dim);
|
||||
font-size: var(--font-size-mid);
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -941,7 +920,8 @@ body.embed .status__content a,
|
|||
.layout-multiple-columns .muted .status__content,
|
||||
.layout-multiple-columns .muted .status__content a,
|
||||
.layout-multiple-columns .muted .status__content p,
|
||||
.layout-multiple-columns .muted .status__display-name strong {
|
||||
.layout-multiple-columns .muted .status__display-name strong,
|
||||
.layout-multiple-columns .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
|
||||
color: var(--color-dim);
|
||||
}
|
||||
|
||||
|
|
@ -1015,6 +995,9 @@ body.embed .status__content a,
|
|||
.layout-multiple-columns .report-dialog-modal__lead,
|
||||
.layout-multiple-columns .detailed-status__display-name strong,
|
||||
.layout-multiple-columns .dismissable-banner__message,
|
||||
.layout-multiple-columns .privacy-dropdown__option.active,
|
||||
.layout-multiple-columns .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-multiple-columns .privacy-dropdown__option:focus .privacy-dropdown__option__content,
|
||||
.layout-multiple-columns .privacy-dropdown__option,
|
||||
.layout-multiple-columns .privacy-dropdown__option__content strong,
|
||||
.layout-multiple-columns .status__info .display-name strong.display-name__html,
|
||||
|
|
@ -1062,7 +1045,12 @@ body.embed .status__content a,
|
|||
height: calc(var(--gap-default) * 2);
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--gap-default) / 2);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Status action bar */
|
||||
.layout-multiple-columns .status__action-bar {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Display name */
|
||||
|
|
@ -1879,6 +1867,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .list-adder__lists .fa-times::before,
|
||||
.layout-multiple-columns .account__wrapper .account__relationship .icon-button.active .fa::before,
|
||||
.layout-multiple-columns .explore__search-results .account__relationship .icon-button.active .fa::before,
|
||||
.layout-multiple-columns .notification .account__relationship .icon-button.active .fa::before {
|
||||
|
|
@ -1887,6 +1876,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
|
|||
opacity: .75;
|
||||
}
|
||||
|
||||
.layout-multiple-columns .list-adder__lists .fa-times:hover::before,
|
||||
.layout-multiple-columns .explore__search-results .icon-button.active:hover .fa::before,
|
||||
.layout-multiple-columns .notification .account__relationship .icon-button.active:hover .fa::before {
|
||||
/* stylelint-disable-next-line */
|
||||
|
|
@ -3200,8 +3190,8 @@ body.embed .button.logo-button:hover,
|
|||
.layout-multiple-columns .video-player,
|
||||
.layout-multiple-columns .media-gallery__gifv,
|
||||
.layout-multiple-columns .media-gallery__preview {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
outline: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Mastodon Bird UI by @rolle@mementomori.social
|
||||
1.5.8 */
|
||||
1.6.4 */
|
||||
|
||||
/* CSS variables */
|
||||
:root {
|
||||
|
|
@ -346,6 +346,7 @@ body.layout-single-column {
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
.layout-single-column .ui__header__logo img,
|
||||
.layout-single-column .ui__header__logo svg {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -369,10 +370,10 @@ body.layout-single-column {
|
|||
|
||||
/* Things that should have the mid font-size */
|
||||
.layout-single-column .account__header__extra__links,
|
||||
.layout-single-column .account__header__account-note textarea,
|
||||
.layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea,
|
||||
.layout-single-column .account__header__content,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-single-column .compose-form .spoiler-input__input {
|
||||
.layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input {
|
||||
font-size: var(--font-size-mid);
|
||||
line-height: var(--line-height-mid);
|
||||
}
|
||||
|
|
@ -421,35 +422,6 @@ body.layout-single-column {
|
|||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Modal buttons */
|
||||
.layout-single-column .media-modal__navigation button,
|
||||
.layout-single-column .image-loader button {
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
/* It's inlined so we have to use !important */
|
||||
/* stylelint-disable-next-line */
|
||||
color: var(--color-light-text) !important;
|
||||
display: inline-flex;
|
||||
|
||||
/* It's inlined so we have to use !important */
|
||||
/* stylelint-disable-next-line */
|
||||
font-size: var(--font-size-heading) !important;
|
||||
/* stylelint-disable-next-line */
|
||||
height: 36px !important;
|
||||
justify-content: center;
|
||||
/* stylelint-disable-next-line */
|
||||
margin: 4px !important;
|
||||
/* stylelint-disable-next-line */
|
||||
top: 2px !important;
|
||||
/* stylelint-disable-next-line */
|
||||
width: 36px !important;
|
||||
}
|
||||
|
||||
.layout-single-column .media-modal__navigation button {
|
||||
/* stylelint-disable-next-line */
|
||||
top: 5px !important;
|
||||
}
|
||||
|
||||
.layout-single-column .media-modal__navigation .fa-times::before {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(247 249 249)' aria-hidden='true' class='r-jwli3a r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'%3E%3Cg%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -504,35 +476,42 @@ body.layout-single-column {
|
|||
top: -2px;
|
||||
}
|
||||
|
||||
/* Default to full-width images in link previews
|
||||
Needs implementation from the source below
|
||||
|
||||
@source https://github.com/mastodon/mastodon/issues/21874#issuecomment-1332556018
|
||||
*/
|
||||
|
||||
.layout-single-column a.status-card,
|
||||
.layout-single-column a.status-card.compact {
|
||||
/* Bigger preview cards */
|
||||
.layout-single-column .status-card,
|
||||
.layout-single-column .status-card.compact {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
display: block;
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
/* Hide empty YouTube description */
|
||||
.layout-single-column .status-card__description:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-single-column .status-card:focus,
|
||||
.layout-single-column .status-card:hover {
|
||||
background-color: rgba(255 255 255 / .03);
|
||||
}
|
||||
|
||||
.layout-single-column .fa-file-text::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.layout-single-column a.status-card .status-card__image-image,
|
||||
.layout-single-column a.status-card .status-card__image-image.compact {
|
||||
.layout-single-column .status-card .status-card__image-image,
|
||||
.layout-single-column .status-card .status-card__image-image.compact {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.layout-single-column a.status-card .status-card__content,
|
||||
.layout-single-column a.status-card.compact .status-card__content {
|
||||
.layout-single-column .status-card .status-card__content,
|
||||
.layout-single-column .status-card.compact .status-card__content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.layout-single-column a.status-card .status-card__title,
|
||||
.layout-single-column a.status-card.compact .status-card__title {
|
||||
.layout-single-column .status-card .status-card__title,
|
||||
.layout-single-column .status-card.compact .status-card__title {
|
||||
color: var(--color-fg);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
|
|
@ -541,8 +520,8 @@ body.layout-single-column {
|
|||
white-space: inherit;
|
||||
}
|
||||
|
||||
a.status-card .status-card__host,
|
||||
a.status-card.compact .status-card__host {
|
||||
.layout-single-column .status-card .status-card__host,
|
||||
.layout-single-column .status-card.compact .status-card__host {
|
||||
color: var(--color-dim);
|
||||
font-size: var(--font-size-mid);
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -914,7 +893,8 @@ body.embed .status__content a,
|
|||
.layout-single-column .muted .status__content,
|
||||
.layout-single-column .muted .status__content a,
|
||||
.layout-single-column .muted .status__content p,
|
||||
.layout-single-column .muted .status__display-name strong {
|
||||
.layout-single-column .muted .status__display-name strong,
|
||||
.layout-single-column .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content {
|
||||
color: var(--color-dim);
|
||||
}
|
||||
|
||||
|
|
@ -988,6 +968,9 @@ body.embed .status__content a,
|
|||
.layout-single-column .report-dialog-modal__lead,
|
||||
.layout-single-column .detailed-status__display-name strong,
|
||||
.layout-single-column .dismissable-banner__message,
|
||||
.layout-single-column .privacy-dropdown__option.active,
|
||||
.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option:focus .privacy-dropdown__option__content,
|
||||
.layout-single-column .privacy-dropdown__option,
|
||||
.layout-single-column .privacy-dropdown__option__content strong,
|
||||
.layout-single-column .status__info .display-name strong.display-name__html,
|
||||
|
|
@ -1035,7 +1018,12 @@ body.embed .status__content a,
|
|||
height: calc(var(--gap-default) * 2);
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--gap-default) / 2);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* Status action bar */
|
||||
.layout-single-column .status__action-bar {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Display name */
|
||||
|
|
@ -1264,7 +1252,7 @@ body.embed .detailed-status,
|
|||
|
||||
/* Rtl version */
|
||||
[dir="rtl"] .layout-single-column .status__action-bar,
|
||||
[dir="rtl"] .layout-single-column .attachment-list
|
||||
[dir="rtl"] .layout-single-column .attachment-list,
|
||||
[dir="rtl"] .layout-single-column .status__content__read-more-button,
|
||||
[dir="rtl"] .layout-single-column .status .status__content {
|
||||
padding-left: 0;
|
||||
|
|
@ -1862,6 +1850,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.layout-single-column .list-adder__lists .fa-times::before,
|
||||
.layout-single-column .account__wrapper .account__relationship .icon-button.active .fa::before,
|
||||
.layout-single-column .explore__search-results .account__relationship .icon-button.active .fa::before,
|
||||
.layout-single-column .notification .account__relationship .icon-button.active .fa::before {
|
||||
|
|
@ -1870,6 +1859,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
|
|||
opacity: .75;
|
||||
}
|
||||
|
||||
.layout-single-column .list-adder__lists .fa-times:hover::before,
|
||||
.layout-single-column .explore__search-results .icon-button.active:hover .fa::before,
|
||||
.layout-single-column .notification .account__relationship .icon-button.active:hover .fa::before {
|
||||
/* stylelint-disable-next-line */
|
||||
|
|
@ -3166,8 +3156,8 @@ body.embed .button.logo-button:hover,
|
|||
.layout-single-column .video-player,
|
||||
.layout-single-column .media-gallery__gifv,
|
||||
.layout-single-column .media-gallery__preview {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
outline: 1px solid var(--color-border);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue