Spaces:
Sleeping
Sleeping
Commit ·
7616c7a
1
Parent(s): bff40f8
Blend dropdown with nav using glassmorphism, no separate background
Browse files- static/css/style.css +12 -11
static/css/style.css
CHANGED
|
@@ -387,16 +387,17 @@ input:focus, select:focus, textarea:focus {
|
|
| 387 |
border-color: rgba(255,255,255,0.5);
|
| 388 |
}
|
| 389 |
|
| 390 |
-
/* Dropdown */
|
| 391 |
.nav-dropdown {
|
| 392 |
position: absolute;
|
| 393 |
top: calc(100% + 0.5rem);
|
| 394 |
right: 0;
|
| 395 |
-
min-width:
|
| 396 |
-
background:
|
| 397 |
-
|
|
|
|
|
|
|
| 398 |
border-radius: var(--radius-sm);
|
| 399 |
-
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
|
| 400 |
padding: 0.5rem 0;
|
| 401 |
animation: dropIn 0.15s ease;
|
| 402 |
z-index: 200;
|
|
@@ -407,13 +408,13 @@ input:focus, select:focus, textarea:focus {
|
|
| 407 |
}
|
| 408 |
.nav-dropdown-email {
|
| 409 |
padding: 0.6rem 1rem;
|
| 410 |
-
font-size: 0.
|
| 411 |
-
color:
|
| 412 |
word-break: break-all;
|
| 413 |
}
|
| 414 |
.nav-dropdown-divider {
|
| 415 |
height: 1px;
|
| 416 |
-
background:
|
| 417 |
margin: 0.25rem 0;
|
| 418 |
}
|
| 419 |
.nav-dropdown-item {
|
|
@@ -424,16 +425,16 @@ input:focus, select:focus, textarea:focus {
|
|
| 424 |
padding: 0.55rem 1rem;
|
| 425 |
border: none;
|
| 426 |
background: none;
|
| 427 |
-
color:
|
| 428 |
font-family: var(--font-sans);
|
| 429 |
font-size: 0.85rem;
|
| 430 |
cursor: pointer;
|
| 431 |
transition: background var(--transition);
|
| 432 |
}
|
| 433 |
.nav-dropdown-item:hover {
|
| 434 |
-
background:
|
| 435 |
}
|
| 436 |
-
.nav-dropdown-item svg { color:
|
| 437 |
|
| 438 |
/* ---- Page header ---- */
|
| 439 |
.page-header { margin-bottom: 1.75rem; }
|
|
|
|
| 387 |
border-color: rgba(255,255,255,0.5);
|
| 388 |
}
|
| 389 |
|
| 390 |
+
/* Dropdown — blends with nav gradient */
|
| 391 |
.nav-dropdown {
|
| 392 |
position: absolute;
|
| 393 |
top: calc(100% + 0.5rem);
|
| 394 |
right: 0;
|
| 395 |
+
min-width: 210px;
|
| 396 |
+
background: rgba(255,255,255,0.12);
|
| 397 |
+
backdrop-filter: blur(16px);
|
| 398 |
+
-webkit-backdrop-filter: blur(16px);
|
| 399 |
+
border: 1px solid rgba(255,255,255,0.18);
|
| 400 |
border-radius: var(--radius-sm);
|
|
|
|
| 401 |
padding: 0.5rem 0;
|
| 402 |
animation: dropIn 0.15s ease;
|
| 403 |
z-index: 200;
|
|
|
|
| 408 |
}
|
| 409 |
.nav-dropdown-email {
|
| 410 |
padding: 0.6rem 1rem;
|
| 411 |
+
font-size: 0.8rem;
|
| 412 |
+
color: rgba(255,255,255,0.7);
|
| 413 |
word-break: break-all;
|
| 414 |
}
|
| 415 |
.nav-dropdown-divider {
|
| 416 |
height: 1px;
|
| 417 |
+
background: rgba(255,255,255,0.12);
|
| 418 |
margin: 0.25rem 0;
|
| 419 |
}
|
| 420 |
.nav-dropdown-item {
|
|
|
|
| 425 |
padding: 0.55rem 1rem;
|
| 426 |
border: none;
|
| 427 |
background: none;
|
| 428 |
+
color: rgba(255,255,255,0.9);
|
| 429 |
font-family: var(--font-sans);
|
| 430 |
font-size: 0.85rem;
|
| 431 |
cursor: pointer;
|
| 432 |
transition: background var(--transition);
|
| 433 |
}
|
| 434 |
.nav-dropdown-item:hover {
|
| 435 |
+
background: rgba(255,255,255,0.1);
|
| 436 |
}
|
| 437 |
+
.nav-dropdown-item svg { color: rgba(255,255,255,0.6); }
|
| 438 |
|
| 439 |
/* ---- Page header ---- */
|
| 440 |
.page-header { margin-bottom: 1.75rem; }
|