Rivista UI

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

@@ -1,21 +1,43 @@
 .navbar {
-    background: var(--mud-palette-surface);
+    background: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 1001;
-    border-top: 1px solid var(--card-border-color); 
+    padding-bottom: 1rem;
+    padding-top: 0 !important;
 }
 
-.navbar-expand { padding: 0 !important; }
+.container-navbar {
+    background: var(--mud-palette-surface);
+    border-radius: 15px;
+    box-shadow: var(--custom-box-shadow);
+}
 
 .nav-item { font-size: 0.9rem; }
 
+.nav-item.plus-button {
+    position: relative;
+    bottom: 15px;
+}
+
+.nav-item ::deep .custom-plus-button .mud-icon-root {
+    transition: .513s;
+    transform: rotate(0);
+    font-size: 2rem;
+}
+
+    .nav-item ::deep .custom-plus-button:focus .mud-icon-root {
+        transform: rotate(225deg);
+    }
+
 .nav-item ::deep a {
     display: flex;
     align-items: center;
     line-height: 1.2;
     justify-content: center;
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
 }
 
 .nav-item ::deep a > div {
@@ -24,7 +46,7 @@
     min-width: 60px;
 }
 
-.nav-item ::deep a.active > div { color: var(--mud-palette-secondary-darken); }
+.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);*/
@@ -33,9 +55,11 @@
 
 .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:not(.active) > div {
+        color: var(--mud-palette-text-primary);
+    }
 
-.nav-item ::deep a i { font-size: 1.5rem; }
+.nav-item ::deep a i { font-size: 1.65rem; }
 
 .nav-item ::deep a span {
     font-size: 0.8rem;