rework of navigation UI
This commit is contained in:
parent
0a563e6121
commit
c402f329a7
5 changed files with 20 additions and 22 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue