diff --git a/src/styles.css b/src/styles.css index c73ff47..c655140 100644 --- a/src/styles.css +++ b/src/styles.css @@ -89,62 +89,56 @@ button:hover:not(:disabled) { } .app-shell { min-height: 100vh; - background: linear-gradient( - 135deg, - var(--ed-bg), - color-mix(in srgb, var(--ed-bg) 90%, var(--ed-accent)) - ); + background: var(--ed-bg); } .app-bar { - height: 54px; + height: 42px; display: flex; align-items: center; - gap: 24px; - padding: 0 18px; + gap: 28px; + padding: 0 16px; border-bottom: 1px solid var(--ui-divider); - background: var(--ed-panel); + background: var(--ed-bg); } .brand { display: flex; align-items: center; gap: 9px; - min-width: 170px; - font: 600 18px var(--font-display); - letter-spacing: 0.12em; + min-width: 188px; + color: var(--ed-accent); + font: 600 15px var(--font-data); + letter-spacing: 0.22em; } .brand-mark { - display: grid; - place-items: center; - width: 26px; - height: 26px; - color: var(--ed-bg); - background: var(--ed-accent); - font-weight: 700; + color: var(--ed-accent); + font-size: 16px; } .top-nav { display: flex; align-self: stretch; - gap: 4px; + gap: 24px; } .nav-item { position: relative; - padding: 0 14px; + padding: 0; border: 0; border-radius: 0; color: var(--ed-dim); background: transparent; - font: 600 13px var(--font-display); + font: 10px var(--font-data); + letter-spacing: 0.16em; + text-transform: uppercase; } .nav-item:hover, .nav-item.active { color: var(--ed-fg); - background: var(--ui-surface); + background: transparent; } .nav-item.active::after { position: absolute; - right: 10px; + right: 0; bottom: 0; - left: 10px; + left: 0; height: 2px; background: var(--ed-accent); content: ''; @@ -176,8 +170,9 @@ button:hover:not(:disabled) { } .workspace { display: grid; - grid-template-columns: 220px 1fr; - min-height: calc(100vh - 54px); + grid-template-columns: 214px 1fr; + min-height: calc(100vh - 42px); + border-top: 1px solid var(--ui-divider); } .side-panel { border-right: 1px solid var(--ui-divider); @@ -187,12 +182,13 @@ button:hover:not(:disabled) { display: flex; align-items: center; justify-content: space-between; - min-height: 34px; + min-height: 32px; padding: 0 10px; border-bottom: 1px solid var(--ui-divider); color: var(--ed-fg); - font: 600 13px var(--font-display); - letter-spacing: 0.04em; + font: 10px var(--font-data); + letter-spacing: 0.16em; + text-transform: uppercase; } .panel-kicker, .micro { @@ -202,7 +198,7 @@ button:hover:not(:disabled) { } .server-card, .side-section { - padding: 16px 12px; + padding: 12px 10px; border-bottom: 1px solid var(--ui-divider); } .server-status { @@ -260,7 +256,7 @@ label { } .content-area { min-width: 0; - padding: 16px; + padding: 8px; } .content-heading { display: flex; @@ -269,21 +265,24 @@ label { margin-bottom: 12px; } .content-heading h1 { - margin: 4px 0 0; - font: 600 24px var(--font-display); + margin: 3px 0 0; + color: var(--ed-fg); + font: 600 18px var(--font-display); + letter-spacing: 0.08em; + text-transform: uppercase; } .dashboard-grid { display: grid; - grid-template-columns: 1.25fr 1fr 1fr; - grid-template-rows: minmax(280px, 1fr) 180px; - gap: 10px; - min-height: calc(100vh - 110px); + grid-template-columns: 1.3fr 1fr 1fr; + grid-template-rows: minmax(250px, 1fr) 190px; + gap: 7px; + min-height: calc(100vh - 96px); } .panel { min-width: 0; border: 1px solid var(--ui-line-soft); border-radius: var(--panel-radius); - background: var(--ed-panel); + background: var(--ed-bg); } .preview-panel { grid-column: span 2; @@ -296,11 +295,7 @@ label { place-content: center; min-height: 220px; border-bottom: 1px solid var(--ui-divider); - background: radial-gradient( - circle, - color-mix(in srgb, var(--ed-accent) 10%, var(--ed-panel)), - var(--ed-bg) 70% - ); + background: color-mix(in srgb, var(--ed-accent) 3%, var(--ed-bg)); text-align: center; } .offline-mark {