Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: use hover effects only when supported

Browse source
This commit is contained in:
wukko 2024-06-17 01:12:59 +06:00
parent 95aeec3380
commit 5390415aa7
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/save/buttons/DownloadButton.svelte
View file

@ -121,19 +121,20 @@
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
} }
#download-button:hover {
background: var(--button-hover-transparent);
}
#download-button:disabled { #download-button:disabled {
cursor: unset; cursor: unset;
} }
#download-button:disabled:hover {
background: none;
}
:global(#input-container.focused) #download-button { :global(#input-container.focused) #download-button {
border-left: 2px var(--secondary) solid; border-left: 2px var(--secondary) solid;
} }
@media (hover: hover) {
#download-button:hover {
background: var(--button-hover-transparent);
}
#download-button:disabled:hover {
background: none;
}
}
</style> </style>

10
web/src/components/sidebar/SidebarTab.svelte
View file

@ -63,10 +63,6 @@
opacity: 1; opacity: 1;
} }
.sidebar-tab:hover {
opacity: 1;
}
.sidebar-tab:focus-visible { .sidebar-tab:focus-visible {
box-shadow: 0 0 0 3px var(--blue) inset; box-shadow: 0 0 0 3px var(--blue) inset;
outline: none; outline: none;
@ -78,6 +74,12 @@
color: var(--sidebar-highlight); color: var(--sidebar-highlight);
} }
@media (hover: hover) {
.sidebar-tab:hover {
opacity: 1;
}
}
@media screen and (max-width: 535px) { @media screen and (max-width: 535px) {
.sidebar-tab { .sidebar-tab {
padding: 5px var(--padding); padding: 5px var(--padding);

2
web/src/routes/+layout.svelte
View file

@ -130,10 +130,12 @@
transform: scale(0.95); transform: scale(0.95);
} }
@media (hover: hover) {
:global(button:hover) { :global(button:hover) {
background-color: var(--button-hover); background-color: var(--button-hover);
z-index: 1; z-index: 1;
} }
}
:global(.center-column-container) { :global(.center-column-container) {
display: flex; display: flex;