winsdominoes
/
winscloud-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update responsive navbar

This commit is contained in:
WinsDominoes 2024-05-08 15:20:35 +07:00
parent 4bb87b3dc6
commit cee20fb7e0
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/style.css
View File

@ -89,25 +89,28 @@ header {
.nav > .nav-list { .nav > .nav-list {
display: flex; display: flex;
margin: 0 1rem 0 auto; margin: 0 1rem 0 auto;
gap: 2rem; gap: 0.5rem;
padding-left: 0; padding-left: 0;
} }
.nav > .nav-list > a { .nav > .nav-list > a {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
width: 80px;
text-align: center;
border-radius: 7px;
padding: 0.5rem 0 0.5rem 0;
}
.nav > .nav-list > a:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
} }
.nav > .nav-list > a > li { .nav > .nav-list > a > li {
list-style-type: none; list-style-type: none;
} }
.nav > .nav-list > a > li:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
padding: 0.5rem 0.75rem 0.5rem 0.75rem;
border-radius: 7px;
}
.nav > #nav-check { .nav > #nav-check {
display: none; display: none;
} }
@ -146,7 +149,7 @@ header {
position: fixed; position: fixed;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0.25rem;
width: 100%; width: 100%;
height: 0; height: 0;
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
@ -156,13 +159,13 @@ header {
background-color: light-dark(var(--light-nav-bg-color), var(--dark-nav-bg-color)); background-color: light-dark(var(--light-nav-bg-color), var(--dark-nav-bg-color));
} }
.nav > .nav-list > a > li { .nav > .nav-list > a {
width: 100%;
text-align: start;
padding: 0.5rem 0.75rem 0.5rem 0.75rem; padding: 0.5rem 0.75rem 0.5rem 0.75rem;
margin-bottom: 0.35rem;
border-radius: 7px;
} }
.nav > .nav-list > a > li:hover { .nav > .nav-list > a:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05)); background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
} }