mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-16 07:11:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Spruce up buttons in media modal

Browse source
This commit is contained in:
Lim Chee Aun 2023-08-14 20:32:09 +08:00
parent ac8a4c7fbf
commit 8141513fa9
3 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app.css
View file

@ -1097,6 +1097,25 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
button.carousel-dot {
pointer-events: auto;
font-weight: bold;
color: var(--text-color);
background-color: var(--bg-faded-blur-color);
border: var(--hairline-width) solid var(--outline-color);
box-shadow: 0 4px 32px var(--drop-shadow-color);
transition: all 0.2s ease-out;
}
button.carousel-dot {
background-color: transparent;
}
.carousel-controls :is(.button, button).carousel-button {
background-color: var(--bg-blur-color);
}
.carousel-controls
:is(.button, button).carousel-button:is(:hover, :focus):not(:active) {
background-color: var(--bg-color);
transform: scale(1.2);
}
.carousel-controls :is(.button, button).carousel-button:active {
transition-duration: 0s;
}
.carousel-top-controls .szh-menu-container {
pointer-events: auto;
@ -1108,10 +1127,15 @@ button.carousel-dot {
}
.carousel-dots {
border-radius: 999px;
backdrop-filter: blur(12px) invert(0.25);
background-color: var(--bg-faded-blur-color);
border: 1px solid var(--outline-color);
box-shadow: 0 4px 32px var(--drop-shadow-color);
/* backdrop-filter: blur(12px) invert(0.25); */
}
button.carousel-dot {
backdrop-filter: none !important;
border: none;
box-shadow: none;
}
button.carousel-dot[disabled] {
pointer-events: none;

18
src/components/media-modal.jsx
View file

@ -135,7 +135,7 @@ function MediaModal({
{!!media.description && (
<button
type="button"
class="plain2 media-alt"
class="media-alt"
hidden={!showControls}
onClick={() => {
setShowMediaAlt(media.description);
@ -154,7 +154,7 @@ function MediaModal({
<span>
<button
type="button"
class="carousel-button plain3"
class="carousel-button"
onClick={() => onClose()}
>
<Icon icon="x" />
@ -167,9 +167,7 @@ function MediaModal({
key={media.id}
type="button"
disabled={i === currentIndex}
class={`plain3 carousel-dot ${
i === currentIndex ? 'active' : ''
}`}
class={`carousel-dot ${i === currentIndex ? 'active' : ''}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -196,7 +194,7 @@ function MediaModal({
gap={4}
menuClassName="glass-menu"
menuButton={
<button type="button" class="carousel-button plain3">
<button type="button" class="carousel-button">
<Icon icon="more" alt="More" />
</button>
}
@ -206,7 +204,7 @@ function MediaModal({
mediaAttachments[currentIndex]?.remoteUrl ||
mediaAttachments[currentIndex]?.url
}
class="carousel-button plain3"
class="carousel-button"
target="_blank"
title="Open original media in new window"
>
@ -220,7 +218,7 @@ function MediaModal({
? `?media=${currentIndex + 1}`
: ''
}`}
class="button carousel-button media-post-link plain3"
class="button carousel-button media-post-link"
// onClick={() => {
// // if small screen (not media query min-width 40em + 350px), run onClose
// if (
@ -238,7 +236,7 @@ function MediaModal({
<div class="carousel-controls" hidden={!showControls}>
<button
type="button"
class="carousel-button plain3"
class="carousel-button"
hidden={currentIndex === 0}
onClick={(e) => {
e.preventDefault();
@ -254,7 +252,7 @@ function MediaModal({
</button>
<button
type="button"
class="carousel-button plain3"
class="carousel-button"
hidden={currentIndex === mediaAttachments.length - 1}
onClick={(e) => {
e.preventDefault();

4
src/components/status.css
View file

@ -874,8 +874,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 8px;
color: var(--text-color);
padding: 4px 8px;
background-color: var(--bg-blur-color);
border: var(--hairline-width) solid var(--bg-blur-color);
background-color: var(--bg-faded-color);
border: 1px solid var(--outline-color);
box-shadow: 0 4px 16px var(--drop-shadow-color);
max-width: min(var(--main-width), calc(100% - 32px));
display: flex;