mirrors
/
bird-ui-theme-admins
mirror of https://github.com/mstdn/Bird-UI-Theme-Admins.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

1.5.8rc4

This commit is contained in:
Zwiebel 2023-07-05 16:01:42 +02:00
parent 674867960b
commit c68d4e490f
2 changed files with 75 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
mastodon/app/javascript/styles/elephant/layout-multiple-columns.scss
View File

@ -1,5 +1,5 @@
/* Mastodon Bird UI by @rolle@mementomori.social
1.5.8rc3 */
1.5.8rc4-mastodon-4.1.2-stable */
/* CSS variables */
:root {
@ -74,6 +74,9 @@
--width-main-panel: 600px;
--width-side-panel: 260px;
--width-column: 380px;
--border-radius: 16px;
--border-radius-badges: 4px;
--badges-distance-from-edge: 12px;
/* Misc */
--active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@ -255,6 +258,7 @@ body.theme-elephant-light.layout-multiple-columns {
@media (max-width: 500px) {
:root {
--font-size-heading: 17px;
--badges-distance-from-edge: 10px;
}
/* Hide scrollbar on mobile, since we can't pick the handle anyway */
@ -452,7 +456,7 @@ body.layout-multiple-columns {
.layout-multiple-columns a.status-card,
.layout-multiple-columns a.status-card.compact {
background-color: var(--color-bg);
border-radius: 10px;
border-radius: var(--border-radius);
display: block;
}
@ -1321,6 +1325,30 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
color: var(--color-dim);
}
/* Hide/Show media button */
.layout-multiple-columns .spoiler-button.spoiler-button--minified > button {
background-color: var(--color-bg);
border-radius: var(--border-radius-badges);
color: var(--color-ghost-button-text);
opacity: .5;
}
/* Alt badge */
.layout-multiple-columns .media-gallery__item__badges > span {
border-radius: var(--border-radius-badges);
}
/* Distance from the edge */
.layout-multiple-columns .spoiler-button--minified {
inset-inline-start: var(--badges-distance-from-edge);
top: var(--badges-distance-from-edge);
}
.layout-multiple-columns .media-gallery__gifv__label {
bottom: var(--badges-distance-from-edge);
inset-inline-start: var(--badges-distance-from-edge);
}
.layout-multiple-columns .icon-button:hover {
color: var(--color-accent);
}
@ -3097,13 +3125,14 @@ body.embed .button.logo-button:hover,
}
/* Add border radius to media */
.layout-multiple-columns .media-gallery__item-thumbnail img,
.layout-multiple-columns .media-gallery,
.layout-multiple-columns .audio-player,
.layout-multiple-columns .video-player video,
.layout-multiple-columns .media-gallery__gifv video,
.layout-multiple-columns .video-player,
.layout-multiple-columns .media-gallery__gifv,
.layout-multiple-columns .media-gallery__preview {
backface-visibility: hidden;
border-radius: 10px;
border-radius: var(--border-radius);
outline: 1px solid var(--color-border);
overflow: hidden;
}
.layout-multiple-columns .media-gallery__item-thumbnail:has(> img:not([alt]))::after,

49
mastodon/app/javascript/styles/elephant/layout-single-column.scss
View File

@ -1,5 +1,5 @@
/* Mastodon Bird UI by @rolle@mementomori.social
1.5.8rc3 */
1.5.8rc4-mastodon-4.1.2-stable */
/* CSS variables */
:root {
@ -73,6 +73,9 @@
--size-icon-notification: 30px;
--width-main-panel: 600px;
--width-side-panel: 260px;
--border-radius: 16px;
--border-radius-badges: 4px;
--badges-distance-from-edge: 12px;
/* Misc */
--active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@ -254,6 +257,7 @@ body.theme-elephant-light.layout-single-column {
@media (max-width: 500px) {
:root {
--font-size-heading: 17px;
--badges-distance-from-edge: 10px;
}
/* Hide scrollbar on mobile, since we can't pick the handle anyway */
@ -447,7 +451,7 @@ body.layout-single-column {
.layout-single-column a.status-card,
.layout-single-column a.status-card.compact {
background-color: var(--color-bg);
border-radius: 10px;
border-radius: var(--border-radius);
display: block;
}
@ -1288,6 +1292,30 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
color: var(--color-dim);
}
/* Hide/Show media button */
.layout-single-column .spoiler-button.spoiler-button--minified > button {
background-color: var(--color-bg);
border-radius: var(--border-radius-badges);
color: var(--color-ghost-button-text);
opacity: .5;
}
/* Alt badge */
.layout-single-column .media-gallery__item__badges > span {
border-radius: var(--border-radius-badges);
}
/* Distance from the edge */
.layout-single-column .spoiler-button--minified {
inset-inline-start: var(--badges-distance-from-edge);
top: var(--badges-distance-from-edge);
}
.layout-single-column .media-gallery__gifv__label {
bottom: var(--badges-distance-from-edge);
inset-inline-start: var(--badges-distance-from-edge);
}
.layout-single-column .icon-button:hover {
color: var(--color-accent);
}
@ -3056,13 +3084,14 @@ body.embed .button.logo-button:hover,
}
/* Add border radius to media */
.layout-single-column .media-gallery__item-thumbnail img,
.layout-single-column .media-gallery,
.layout-single-column .audio-player,
.layout-single-column .video-player video,
.layout-single-column .media-gallery__gifv video,
.layout-single-column .video-player,
.layout-single-column .media-gallery__gifv,
.layout-single-column .media-gallery__preview {
backface-visibility: hidden;
border-radius: 10px;
border-radius: var(--border-radius);
outline: 1px solid var(--color-border);
overflow: hidden;
}
.layout-single-column .media-gallery__item-thumbnail:has(> img:not([alt]))::after,
@ -3070,8 +3099,8 @@ body.embed .button.logo-button:hover,
.layout-single-column .media-gallery__gifv:has(> video:not([title]))::after {
align-self: flex-end;
background-color: var(--color-bg-75);
border-radius: 4px;
bottom: 4px;
border-radius: var(--border-radius-badges);
bottom: var(--badges-distance-from-edge);
color: var(--color-light-text);
content: 'No alt';
display: flex;
@ -3084,7 +3113,7 @@ body.embed .button.logo-button:hover,
opacity: 1;
padding: 2px 5px;
position: absolute;
right: 4px;
right: var(--badges-distance-from-edge);
text-transform: uppercase;
top: auto;
width: unset;