Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-13 03:26:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Slight style realignment to post carousels

Browse source
This commit is contained in:
Lim Chee Aun 2023-12-03 20:27:49 +08:00
parent f98306ed18
commit 012e944a53
2 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app.css
View file

@ -946,8 +946,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
position: absolute; position: absolute;
left: 0; left: 0;
font-size: 10px; font-size: 10px;
color: var(--carousel-color); color: var(--text-insignificant-color);
padding: 8px; padding: 6px;
} }
.ui-state { .ui-state {
@ -966,9 +966,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
animation: appear 0.2s ease-out; animation: appear 0.2s ease-out;
border: 1px solid var(--outline-color); border: 1px solid var(--outline-color);
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
border-radius: 8px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px var(--bg-color); box-shadow: 0 1px var(--bg-color);
&:has(.status-badge:not(:empty)) {
border-top-right-radius: 8px;
}
.status-carousel.boosts-carousel & {
border-top-left-radius: 8px;
}
} }
.status-carousel-link::focus { .status-carousel-link::focus {
background-color: var(--link-bg-hover-color); background-color: var(--link-bg-hover-color);

19
src/components/status.css
View file

@ -684,6 +684,24 @@
/* min-height: 0 !important; */ /* min-height: 0 !important; */
max-height: none !important; max-height: none !important;
} }
.status-carousel .status .media-container {
margin-inline: -16px;
max-width: calc(100% + 16px + 16px) !important;
figure figcaption {
padding-inline: 16px !important;
}
&:not(.media-figure-multiple .media-container) {
margin-bottom: -16px;
}
.media {
--media-radius: 0;
--media-radius-inner: 0;
box-sizing: border-box;
}
}
.status:not(.large):not(.status-carousel .status) .status:not(.large):not(.status-carousel .status)
.media-container.media-eq1:has([data-orientation='portrait']) { .media-container.media-eq1:has([data-orientation='portrait']) {
width: 85%; width: 85%;
@ -708,6 +726,7 @@
overflow: hidden; overflow: hidden;
min-height: 80px; min-height: 80px;
border: var(--media-border-width) solid var(--outline-color); border: var(--media-border-width) solid var(--outline-color);
vertical-align: top;
} }
.status .media-container:not(.media-eq1) .media { .status .media-container:not(.media-eq1) .media {
aspect-ratio: auto !important; aspect-ratio: auto !important;