feat(ui): Minimalist top navigation bar with Drawer slider, Pause & Speed controls
This commit is contained in:
+19
-25
@@ -28,19 +28,19 @@ body {
|
||||
max-width: 98vw;
|
||||
}
|
||||
|
||||
/* Clean Flexbox Top Navigation Bar (Adaptive & Responsive) */
|
||||
/* Minimalist Clean Top Navigation Bar */
|
||||
.top-nav-bar {
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, #3e2723, #2a160c);
|
||||
border: 3px solid #5d4037;
|
||||
border-bottom: 2px solid #231209;
|
||||
border-radius: 10px 10px 0 0;
|
||||
padding: 4px 8px;
|
||||
padding: 4px 10px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
@@ -50,23 +50,27 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.desktop-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
.btn-menu-main {
|
||||
background: linear-gradient(135deg, #e65100, #bf360c) !important;
|
||||
color: #fff !important;
|
||||
border-color: #ffb74d !important;
|
||||
font-size: 12px !important;
|
||||
padding: 5px 12px !important;
|
||||
box-shadow: 0 2px 6px rgba(230, 81, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.btn-drawer-toggle {
|
||||
display: none;
|
||||
background: #ff8f00;
|
||||
color: #fff;
|
||||
border-color: #ffd54f;
|
||||
.btn-menu-main:hover {
|
||||
background: linear-gradient(135deg, #f57c00, #d84315) !important;
|
||||
border-color: #ffe082 !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-drawer-toggle:hover {
|
||||
background: #ffa000;
|
||||
|
||||
.btn-icon-nav {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
@@ -93,16 +97,6 @@ body {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.btn-bug-nav {
|
||||
border-color: #4fc3f7;
|
||||
color: #e1f5fe;
|
||||
}
|
||||
|
||||
.btn-bug-nav:hover {
|
||||
background: #0277bd;
|
||||
border-color: #81d4fa;
|
||||
}
|
||||
|
||||
/* User Profile Badge */
|
||||
.profile-badge {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user