Promote to main: Feed browser luxury redesign #7
@@ -16,6 +16,8 @@
|
|||||||
--ink-2: #BFBDB8;
|
--ink-2: #BFBDB8;
|
||||||
--ink-3: #95938E;
|
--ink-3: #95938E;
|
||||||
--accent: #C8141C;
|
--accent: #C8141C;
|
||||||
|
/* Crimson for small text (like counts): plain crimson is 3.2:1 on the dark tiles. */
|
||||||
|
--accent-text: color-mix(in srgb, #C8141C, white 40%);
|
||||||
--danger: #FF6B70;
|
--danger: #FF6B70;
|
||||||
--glass: rgba(18,18,21,.72);
|
--glass: rgba(18,18,21,.72);
|
||||||
--shadow-pop: 0 10px 28px rgba(0,0,0,.5);
|
--shadow-pop: 0 10px 28px rgba(0,0,0,.5);
|
||||||
@@ -41,6 +43,7 @@
|
|||||||
--ink-2: #46484D;
|
--ink-2: #46484D;
|
||||||
--ink-3: #686A70;
|
--ink-3: #686A70;
|
||||||
--accent: #C8141C;
|
--accent: #C8141C;
|
||||||
|
--accent-text: #C8141C;
|
||||||
--danger: #B3121A;
|
--danger: #B3121A;
|
||||||
--glass: rgba(251,250,248,.74);
|
--glass: rgba(251,250,248,.74);
|
||||||
--shadow-pop: 0 10px 28px rgba(26,28,31,.14);
|
--shadow-pop: 0 10px 28px rgba(26,28,31,.14);
|
||||||
|
|||||||
@@ -234,6 +234,8 @@
|
|||||||
padding: 70px 0 110px;
|
padding: 70px 0 110px;
|
||||||
background: radial-gradient(90% 55% at 50% 46%, color-mix(in oklab, var(--accent), transparent 84%), transparent 70%), var(--bg);
|
background: radial-gradient(90% 55% at 50% 46%, color-mix(in oklab, var(--accent), transparent 84%), transparent 70%), var(--bg);
|
||||||
}
|
}
|
||||||
|
/* The crimson glow tints the light page enough to drop --ink-3 meta below 4.5:1. */
|
||||||
|
[data-theme="light"] .slide-featured { --ink-3: var(--ink-2); }
|
||||||
.slide-feat-title {
|
.slide-feat-title {
|
||||||
margin: 10px 24px 0;
|
margin: 10px 24px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -362,7 +364,8 @@
|
|||||||
.dk svg { width: 22px; height: 22px; flex: none; }
|
.dk svg { width: 22px; height: 22px; flex: none; }
|
||||||
@media (hover: hover) { .dk:hover:not(:disabled) { background: var(--tile-3); } }
|
@media (hover: hover) { .dk:hover:not(:disabled) { background: var(--tile-3); } }
|
||||||
.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
||||||
.dk.dk-like-on { color: var(--accent); }
|
.dk.dk-like-on { color: var(--accent-text); }
|
||||||
|
.dk.dk-like-on svg { color: var(--accent); }
|
||||||
.dk-beat svg { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); }
|
.dk-beat svg { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); }
|
||||||
.dk:disabled { opacity: 1; color: var(--ink-3); cursor: default; }
|
.dk:disabled { opacity: 1; color: var(--ink-3); cursor: default; }
|
||||||
.btn-spark.btn-spark-fab.dk-plus { flex: 0 0 64px; width: 64px; height: 52px; }
|
.btn-spark.btn-spark-fab.dk-plus { flex: 0 0 64px; width: 64px; height: 52px; }
|
||||||
|
|||||||
+3
-1
@@ -122,7 +122,9 @@
|
|||||||
.post-act:hover:not(:disabled) { background: var(--post-soft); color: var(--ink); }
|
.post-act:hover:not(:disabled) { background: var(--post-soft); color: var(--ink); }
|
||||||
.post-act:disabled { cursor: default; }
|
.post-act:disabled { cursor: default; }
|
||||||
.post-like:hover:not(:disabled),
|
.post-like:hover:not(:disabled),
|
||||||
.post-like-on { color: var(--accent); }
|
.post-like-on { color: var(--accent-text); }
|
||||||
|
.post-like:hover:not(:disabled) .post-heart,
|
||||||
|
.post-like-on .post-heart { color: var(--accent); }
|
||||||
.post-like-beat .post-heart { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); }
|
.post-like-beat .post-heart { animation: post-beat .5s cubic-bezier(.2,.9,.3,1.4); }
|
||||||
.post-act-open { color: var(--ink); background: var(--post-soft); }
|
.post-act-open { color: var(--ink); background: var(--post-soft); }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user