Create prime pagine

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -1,19 +1,15 @@
 .navbar {
-    background-color: var(--ligther-color);
-    border-radius: 50px 50px 0 0;
-    border: #eceff2 solid 1px;
+    background: var(--mud-palette-background-gray);
     position: fixed;
     bottom: 0;
     width: 100%;
 }
 
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
+.navbar-expand { padding: 0 !important; }
+
+.nav-item { font-size: 0.9rem; }
 
 .nav-item ::deep a {
-    color: var(--darker-color);
     display: flex;
     align-items: center;
     line-height: 1.4;
@@ -21,30 +17,31 @@
 }
 
 .nav-item ::deep a > div {
-    width: 4.3rem;
-    height: 4.3rem;
-    border-radius: 100px;
-    justify-content: center;
-    padding-bottom: 0.1rem;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
+    -webkit-transition: all .1s ease-out;
+    transition: all .1s ease-out;
+    min-width: 60px;
 }
 
-.nav-item ::deep a.active > div {
-    background-color: var(--primary-color);
-    color: white;
+.nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
+
+.nav-item ::deep a.active > div > i {
+    /*background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);*/
+    border-radius: 10px;
 }
 
-/*.nav-item a:hover :not(.active) {*/
-/*    background-color: rgba(255, 255, 255, 0.1);*/
-/*    color: var(--primary-color);*/
-/*}*/
+.nav-item ::deep a.active > div > span { font-weight: 800; }
 
+.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-drawer-icon); }
 
-.nav-item ::deep a i {
-    font-size: 2rem;
-}
+.nav-item ::deep a i { font-size: 1.5rem; }
 
 .nav-item ::deep a span {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
+    font-weight: 500;
 }
+
+@supports (-webkit-touch-callout: none) {
+    .nav-item { padding-bottom: env(safe-area-inset-bottom) !important; }
+
+    .nav-item ::deep > .nav-link { padding-bottom: 0 !important; }
+}