blog/2025
1
Fork 0
Code Issues Activity

Amélioration des boutons tablette

Browse Source
This commit is contained in:
Richard Dern
2025-09-17 10:01:03 +02:00
parent ef938b46ba
commit 92ad1acfa1
2 changed files with 56 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
themes/default/assets/css/header.css
View File

@@ -91,56 +91,65 @@ main>header {
.tablet-links {
display: flex;
flex-wrap: wrap;
gap: .5rem;
>a,
summary {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
display: flex;
.tablet-link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: var(--surface-elevated);
color: var(--text-light);
font-size: 1rem;
text-decoration: none;
border: none;
outline: none;
transition: background 0.2s ease, color 0.2s ease;
border: 1px solid transparent;
font-size: 0.85rem;
line-height: 1;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
>a:hover,
summary:hover {
.tablet-link:hover,
.tablet-link:focus-visible {
background-color: var(--surface-elevated-hover);
color: var(--text-white);
}
summary {
list-style: none;
cursor: pointer;
padding: 0;
margin: 0;
.tablet-link:focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 3px;
border-color: transparent;
}
details[open] summary {
.tablet-link:focus:not(:focus-visible) {
outline: none;
}
.tablet-link-icon {
font-size: 1rem;
line-height: 1;
}
.tablet-menu {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
.tablet-menu[open] .tablet-link {
background-color: var(--border-dark);
color: var(--text-white);
}
/* Empêche l'effet de flèche par défaut dans WebKit */
summary::-webkit-details-marker {
display: none;
.tablet-menu summary {
list-style: none;
cursor: pointer;
}
summary::marker {
content: "";
.tablet-menu summary::-webkit-details-marker,
.tablet-menu summary::marker {
display: none;
}
}