ryan/pictshare-browse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance mobile button usability; adjust padding, opacity, and disable hover effects for better touch interaction
All checks were successful
CI / build (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Ryan Hamilton
2025-07-25 17:39:23 +00:00
parent 769ebef719
commit 38d3014104
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/style.css
View File

@@ -156,9 +156,14 @@ h1 {
.theme-toggle { .theme-toggle {
top: 12px; top: 12px;
right: 12px; right: 12px;
padding: 6px 10px; padding: 12px 16px;
font-size: 0.8rem; font-size: 0.8rem;
border-radius: 6px; border-radius: 6px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
} }
} }
@@ -265,9 +270,10 @@ h1 {
@media (max-width: 480px) { @media (max-width: 480px) {
.copy-btn, .copy-btn,
.open-btn { .open-btn {
padding: 3px 6px; padding: 8px 12px;
font-size: 0.75rem; font-size: 0.75rem;
top: 6px; top: 6px;
border-radius: 8px;
} }
.copy-btn { .copy-btn {
@@ -278,16 +284,21 @@ h1 {
right: 6px; right: 6px;
} }
/* Show buttons on mobile since hover doesn't work well */ /* Show buttons more prominently on mobile since hover doesn't work well */
.image-container .copy-btn, .image-container .copy-btn,
.image-container .open-btn { .image-container .open-btn {
opacity: 0.7; opacity: 0.9;
} }
.image-container:hover .copy-btn, .image-container:hover .copy-btn,
.image-container:hover .open-btn { .image-container:hover .open-btn {
opacity: 1; opacity: 1;
} }
/* Disable hover scale effect on touch devices */
.image-container:hover {
transform: none;
}
} }
/* Desktop hover behavior - only applies when not on mobile */ /* Desktop hover behavior - only applies when not on mobile */