feat: redesign color system to monochrome palette with sharp corners
This commit is contained in:
zwitschi committed
1 parent
69df0e51b8
commit
17ac04856b
1 file changed
+46
-57
+46
-57
@@ -6,17 +6,17 @@
|
||||
--font-display: "Space Grotesk", "Segoe UI", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", Consolas, monospace;
|
||||
|
||||
--bg-0: #32292f;
|
||||
--bg-1: #3d3238;
|
||||
--bg-2: #2a2027;
|
||||
--bg-0: #000000;
|
||||
--bg-1: #0a0a0a;
|
||||
--bg-2: #000000;
|
||||
--ink-0: #ede8e6;
|
||||
--ink-1: #c4bdb9;
|
||||
--ink-soft: #8a827e;
|
||||
--ink-1: #b0a8a4;
|
||||
--ink-soft: #78706c;
|
||||
|
||||
--panel: #362d33;
|
||||
--panel-2: #3f343b;
|
||||
--line: #4a3f46;
|
||||
--line-soft: #42373e;
|
||||
--panel: #111111;
|
||||
--panel-2: #1a1a1a;
|
||||
--line: #2a2a2a;
|
||||
--line-soft: #1f1f1f;
|
||||
|
||||
--brand: #587792;
|
||||
--brand-strong: #4a6780;
|
||||
@@ -24,29 +24,29 @@
|
||||
--ok: #04650d;
|
||||
--warn: #d49624;
|
||||
--danger: #c44a5e;
|
||||
--danger-soft: #3a2328;
|
||||
--danger-soft: #1f1216;
|
||||
|
||||
--focus: #2ebfa5;
|
||||
--shadow-1: 0 14px 30px rgba(0, 0, 0, 0.34);
|
||||
--shadow-2: 0 22px 44px rgba(0, 0, 0, 0.45);
|
||||
--shadow-1: 0 14px 30px rgba(0, 0, 0, 0.5);
|
||||
--shadow-2: 0 22px 44px rgba(0, 0, 0, 0.6);
|
||||
|
||||
--bg-grad-a: #392e35;
|
||||
--bg-grad-b: var(--bg-0);
|
||||
--bg-grad-c: var(--bg-2);
|
||||
--bg-grad-a: #000000;
|
||||
--bg-grad-b: #000000;
|
||||
--bg-grad-c: #000000;
|
||||
|
||||
--live-dot: #ff6b6b;
|
||||
--overlay-bg: rgba(26, 20, 23, 0.84);
|
||||
--overlay-bg: rgba(0, 0, 0, 0.88);
|
||||
|
||||
--input-bg: #2d2429;
|
||||
--input-bg: #0d0d0d;
|
||||
--input-border: var(--line-soft);
|
||||
--placeholder: #7a7270;
|
||||
--placeholder: #6a6260;
|
||||
|
||||
--badge-start: #2ebfa5;
|
||||
--badge-end: #1a8c78;
|
||||
|
||||
--radius-1: 0.6rem;
|
||||
--radius-2: 1rem;
|
||||
--radius-3: 1.6rem;
|
||||
--radius-1: 0;
|
||||
--radius-2: 0;
|
||||
--radius-3: 0;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
@@ -63,17 +63,17 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--bg-0: #b4c4ae;
|
||||
--bg-1: #a3b59c;
|
||||
--bg-2: #c5d1c0;
|
||||
--ink-0: #1a1f18;
|
||||
--ink-1: #3a4037;
|
||||
--ink-soft: #5c6358;
|
||||
--bg-0: #e8e8e8;
|
||||
--bg-1: #dcdcdc;
|
||||
--bg-2: #f0f0f0;
|
||||
--ink-0: #0d0d0d;
|
||||
--ink-1: #2a2a2a;
|
||||
--ink-soft: #555555;
|
||||
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f4f8f0;
|
||||
--line: #9aad93;
|
||||
--line-soft: #bcc8b5;
|
||||
--panel-2: #f5f5f5;
|
||||
--line: #cccccc;
|
||||
--line-soft: #dddddd;
|
||||
|
||||
--brand: #587792;
|
||||
--brand-strong: #4a6780;
|
||||
@@ -84,19 +84,19 @@
|
||||
--danger-soft: #fff3f6;
|
||||
|
||||
--focus: #2ebfa5;
|
||||
--shadow-1: 0 14px 30px rgba(50, 41, 47, 0.1);
|
||||
--shadow-2: 0 22px 44px rgba(50, 41, 47, 0.16);
|
||||
--shadow-1: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
--shadow-2: 0 16px 36px rgba(0, 0, 0, 0.12);
|
||||
|
||||
--bg-grad-a: #c5d1c0;
|
||||
--bg-grad-a: #e8e8e8;
|
||||
--bg-grad-b: var(--bg-0);
|
||||
--bg-grad-c: #d5e0d0;
|
||||
--bg-grad-c: #f0f0f0;
|
||||
|
||||
--live-dot: #cb271a;
|
||||
--overlay-bg: rgba(26, 20, 23, 0.84);
|
||||
--overlay-bg: rgba(0, 0, 0, 0.88);
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-border: #bcc8b5;
|
||||
--placeholder: #7a8274;
|
||||
--input-border: #cccccc;
|
||||
--placeholder: #888888;
|
||||
|
||||
--badge-start: #2ebfa5;
|
||||
--badge-end: #1a8c78;
|
||||
@@ -375,7 +375,7 @@ select {
|
||||
}
|
||||
|
||||
.viewer-header {
|
||||
padding: var(--space-5);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -392,7 +392,7 @@ select {
|
||||
.brand-badge {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.9rem;
|
||||
border-radius: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 800;
|
||||
@@ -424,7 +424,7 @@ select {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
border-radius: 999px;
|
||||
border-radius: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink-1);
|
||||
@@ -447,7 +447,7 @@ select {
|
||||
.player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 1.1rem;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--line-soft);
|
||||
background: #000;
|
||||
box-shadow: var(--shadow-1);
|
||||
@@ -467,14 +467,14 @@ select {
|
||||
background: var(--overlay-bg);
|
||||
color: #f0fffb;
|
||||
padding: 0.44rem 0.72rem;
|
||||
border-radius: 999px;
|
||||
border-radius: 0;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
.live-label {
|
||||
background: var(--live-dot);
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
border-radius: 0;
|
||||
padding: 0.1rem 0.45rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
@@ -542,7 +542,7 @@ select {
|
||||
|
||||
.message-bubble {
|
||||
max-width: 83%;
|
||||
border-radius: 1rem;
|
||||
border-radius: 0;
|
||||
padding: 0.58rem 0.72rem;
|
||||
box-shadow: var(--shadow-1);
|
||||
animation: messageIn var(--fast);
|
||||
@@ -563,7 +563,7 @@ select {
|
||||
color: var(--ink-1);
|
||||
background: color-mix(in srgb, var(--brand) 22%, var(--panel-2));
|
||||
border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
|
||||
border-radius: 999px;
|
||||
border-radius: 0;
|
||||
padding: 0.24rem 0.68rem;
|
||||
animation: messageIn var(--fast);
|
||||
}
|
||||
@@ -609,18 +609,7 @@ select {
|
||||
.admin-body {
|
||||
min-height: 100vh;
|
||||
padding: var(--space-4);
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 82% 12%,
|
||||
rgba(20, 48, 54, 0.5) 0%,
|
||||
transparent 44%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 16% 85%,
|
||||
rgba(8, 28, 34, 0.55) 0%,
|
||||
transparent 40%
|
||||
),
|
||||
var(--bg-0);
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
|
||||
Reference in new issue
Block a user