coderuday21 commited on
Commit
7616c7a
·
1 Parent(s): bff40f8

Blend dropdown with nav using glassmorphism, no separate background

Browse files
Files changed (1) hide show
  1. 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: 220px;
396
- background: var(--bg-card);
397
- border: 1px solid var(--border);
 
 
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.82rem;
411
- color: var(--text-muted);
412
  word-break: break-all;
413
  }
414
  .nav-dropdown-divider {
415
  height: 1px;
416
- background: var(--border);
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: var(--text);
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: var(--bg-elevated);
435
  }
436
- .nav-dropdown-item svg { color: var(--text-dim); }
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; }