simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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 { button.carousel-dot {
pointer-events: auto; pointer-events: auto;
font-weight: bold; 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 { .carousel-top-controls .szh-menu-container {
pointer-events: auto; pointer-events: auto;
@ -1108,10 +1127,15 @@ button.carousel-dot {
} }
.carousel-dots { .carousel-dots {
border-radius: 999px; 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 { button.carousel-dot {
backdrop-filter: none !important; backdrop-filter: none !important;
border: none;
box-shadow: none;
} }
button.carousel-dot[disabled] { button.carousel-dot[disabled] {
pointer-events: none; pointer-events: none;

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

@ -135,7 +135,7 @@ function MediaModal({
{!!media.description && ( {!!media.description && (
<button <button
type="button" type="button"
class="plain2 media-alt" class="media-alt"
hidden={!showControls} hidden={!showControls}
onClick={() => { onClick={() => {
setShowMediaAlt(media.description); setShowMediaAlt(media.description);
@ -154,7 +154,7 @@ function MediaModal({
<span> <span>
<button <button
type="button" type="button"
class="carousel-button plain3" class="carousel-button"
onClick={() => onClose()} onClick={() => onClose()}
> >
<Icon icon="x" /> <Icon icon="x" />
@ -167,9 +167,7 @@ function MediaModal({
key={media.id} key={media.id}
type="button" type="button"
disabled={i === currentIndex} disabled={i === currentIndex}
class={`plain3 carousel-dot ${ class={`carousel-dot ${i === currentIndex ? 'active' : ''}`}
i === currentIndex ? 'active' : ''
}`}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -196,7 +194,7 @@ function MediaModal({
gap={4} gap={4}
menuClassName="glass-menu" menuClassName="glass-menu"
menuButton={ menuButton={
<button type="button" class="carousel-button plain3"> <button type="button" class="carousel-button">
<Icon icon="more" alt="More" /> <Icon icon="more" alt="More" />
</button> </button>
} }
@ -206,7 +204,7 @@ function MediaModal({
mediaAttachments[currentIndex]?.remoteUrl || mediaAttachments[currentIndex]?.remoteUrl ||
mediaAttachments[currentIndex]?.url mediaAttachments[currentIndex]?.url
} }
class="carousel-button plain3" class="carousel-button"
target="_blank" target="_blank"
title="Open original media in new window" title="Open original media in new window"
> >
@ -220,7 +218,7 @@ function MediaModal({
? `?media=${currentIndex + 1}` ? `?media=${currentIndex + 1}`
: '' : ''
}`} }`}
class="button carousel-button media-post-link plain3" class="button carousel-button media-post-link"
// onClick={() => { // onClick={() => {
// // if small screen (not media query min-width 40em + 350px), run onClose // // if small screen (not media query min-width 40em + 350px), run onClose
// if ( // if (
@ -238,7 +236,7 @@ function MediaModal({
<div class="carousel-controls" hidden={!showControls}> <div class="carousel-controls" hidden={!showControls}>
<button <button
type="button" type="button"
class="carousel-button plain3" class="carousel-button"
hidden={currentIndex === 0} hidden={currentIndex === 0}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
@ -254,7 +252,7 @@ function MediaModal({
</button> </button>
<button <button
type="button" type="button"
class="carousel-button plain3" class="carousel-button"
hidden={currentIndex === mediaAttachments.length - 1} hidden={currentIndex === mediaAttachments.length - 1}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); 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; border-radius: 8px;
color: var(--text-color); color: var(--text-color);
padding: 4px 8px; padding: 4px 8px;
background-color: var(--bg-blur-color); background-color: var(--bg-faded-color);
border: var(--hairline-width) solid var(--bg-blur-color); border: 1px solid var(--outline-color);
box-shadow: 0 4px 16px var(--drop-shadow-color); box-shadow: 0 4px 16px var(--drop-shadow-color);
max-width: min(var(--main-width), calc(100% - 32px)); max-width: min(var(--main-width), calc(100% - 32px));
display: flex; display: flex;