rework of navigation UI

This commit is contained in:
ari melody 2025-07-10 22:32:54 +01:00
parent 0a563e6121
commit c402f329a7
Signed by: ari
GPG key ID: CF99829C92678188
5 changed files with 20 additions and 22 deletions

View file

@ -48,10 +48,9 @@
<style>
button {
/* min-width: 64px; */
width: 100%;
height: 54px;
padding: 16px;
height: fit-content;
padding: .7em .8em;
display: flex;
flex-direction: row;
align-items: center;
@ -62,12 +61,10 @@
text-align: left;
border-radius: 8px;
border-width: 2px;
border-style: solid;
border: 2px solid var(--bg-700);
background-color: var(--bg-700);
background-color: transparent;
color: var(--text);
border-color: transparent;
transition-property: border-color, background-color, color;
transition-timing-function: ease-out;
@ -82,13 +79,11 @@
}
button:hover {
background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
background-color: color-mix(in srgb, transparent, var(--bg-700) 50%);
}
button:active {
background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
background-color: var(--bg-700);
}
button.active {
@ -127,7 +122,6 @@
}
button.disabled {
background-color: var(--bg-700);
color: var(--text);
opacity: .5;
border-color: transparent;
@ -135,13 +129,15 @@
}
button.disabled:hover {
background-color: transparent;
}
button.disabled:active {
background-color: transparent;
}
.icon:not(:empty) {
height: 150%;
height: 1.8em;
margin-right: 8px;
}