|
@@ -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 {
|