style(ui): update gradients, borders, and scrollbars

This commit is contained in:
2025-09-26 17:20:34 -06:00
parent 63e1b5c30b
commit dae25e9112

View File

@@ -41,7 +41,14 @@ a { color: inherit; }
border: 1px solid transparent; border: 1px solid transparent;
background: background:
linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box, linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
linear-gradient(135deg, #ff9fcb, #ff7fbb) border-box; linear-gradient(135deg,
rgba(255, 159, 203, 0.95) 0%,
rgba(255, 159, 203, 0.60) 10%,
rgba(255, 127, 187, 0.45) 18%,
rgba(0, 0, 0, 0.20) 28%,
rgba(0, 0, 0, 0.06) 50%,
rgba(0, 0, 0, 0.00) 70%
) border-box;
} }
:root:not(.light) .topbar { :root:not(.light) .topbar {
background: background:
@@ -54,7 +61,7 @@ a { color: inherit; }
rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0.10) 50%,
rgba(0, 0, 0, 0.00) 70% rgba(0, 0, 0, 0.00) 70%
) border-box; ) border-box;
box-shadow: 0 0 18px rgba(255, 46, 134, 0.25), 0 0 6px rgba(255, 107, 176, 0.2); border-width: 0.5px; /* borde más delgado en dark */
} }
.title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; } .title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; }
.actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@@ -65,29 +72,14 @@ a { color: inherit; }
/* Layout */ /* Layout */
.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; } .shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; }
.panel { border: 1px solid transparent; background: rgba(var(--card)); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)); overflow: hidden; display: flex; flex-direction: column; min-height: 0; .panel {
background: border: 1px solid #ffcfe4; /* light más claro */
linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box, background: linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box;
radial-gradient(140% 140% at 50% 100%, border-radius: var(--radius);
rgba(255, 159, 203, 0.95) 0%, backdrop-filter: blur(var(--glass-blur));
rgba(255, 127, 187, 0.70) 12%, overflow: hidden; display: flex; flex-direction: column; min-height: 0;
rgba(255, 127, 187, 0.28) 24%,
rgba(255, 127, 187, 0.00) 50%
) border-box;
}
:root:not(.light) .panel {
background:
linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
radial-gradient(140% 140% at 50% 100%,
rgba(255, 46, 134, 0.95) 0%,
rgba(255, 46, 134, 0.60) 10%,
rgba(255, 107, 176, 0.45) 18%,
rgba(0, 0, 0, 0.28) 28%,
rgba(0, 0, 0, 0.10) 50%,
rgba(0, 0, 0, 0.00) 70%
) border-box;
box-shadow: 0 0 22px rgba(255, 46, 134, 0.18), 0 0 8px rgba(255, 107, 176, 0.15);
} }
:root:not(.light) .panel { border-color: #ff2e86; border-width: 0.5px; /* borde más delgado en dark */ }
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(var(--border)); } .panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(var(--border)); }
.panel-title { font-weight: 600; } .panel-title { font-weight: 600; }
.panel-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; } .panel-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }