valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu modes presque ok

Browse Source
This commit is contained in:
Valentin
2023-03-27 13:37:00 +02:00
parent 9c11794aaf
commit 6e4dca0d5a
5 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+36 -9
View File
@@ -148,24 +148,21 @@ body {
#buttons_container .mode {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
background-color: white;
margin: 0;
margin-right: 14px;
padding: 7px 15px;
padding-left: 10px;
padding: 10px 12px;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px rgb(110, 110, 110);
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out;
transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
font-weight: 300;
font-size: 1rem;
}
#buttons_container .mode svg {
width: 28px;
height: auto;
margin-right: 10px;
height: 28px;
}
#buttons_container .mode svg .thick {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
@@ -180,11 +177,22 @@ body {
#buttons_container .mode svg .circle-fill {
fill: rgb(110, 110, 110);
}
#buttons_container .mode p {
#buttons_container .mode .mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin-left: 10px;
margin-right: 5px;
max-width: 200px;
}
#buttons_container .mode .mode_container p {
white-space: nowrap;
height: fit-content;
margin-bottom: 3px;
}
#buttons_container .mode.active {
padding: 10px 12px !important;
font-weight: 400;
border: solid 1.2px rgb(0, 0, 0);
color: rgb(0, 0, 0);
@@ -200,7 +208,13 @@ body {
#buttons_container .mode.active svg .circle-fill {
fill: rgb(0, 0, 0);
}
#buttons_container .mode.active .mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
#buttons_container .mode:hover {
padding: 10px 12px !important;
color: rgb(50, 50, 50);
border-color: rgb(50, 50, 50);
}
@@ -210,6 +224,19 @@ body {
#buttons_container .mode:hover svg .circle-fill {
fill: rgb(50, 50, 50);
}
#buttons_container .mode:hover .mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
#buttons_container .mode.collapsed {
padding: 10px 7px;
}
#buttons_container .mode.collapsed .mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
#global_nav {
position: fixed;
@@ -221,7 +248,7 @@ body {
#global_nav h1 {
font-family: "Ortica";
font-size: 1.7em;
margin-bottom: 10px;
margin-bottom: 17px;
margin-left: 5px;
}
#global_nav #menu {