Proper cube transition background colors via base CSS mixing in theme bg.
This commit is contained in:
@@ -1026,11 +1026,11 @@ footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Rotating-cube page transition, adapted from termotohtori.fi.
|
||||
FRAGILE: do not tweak; the view-transition pseudo-tree is picky. */
|
||||
/* Rotating-cube page transition. */
|
||||
::view-transition {
|
||||
perspective: 1000px;
|
||||
inset: 0;
|
||||
background: color-mix(var(--bg) 50%, black 50%);
|
||||
}
|
||||
|
||||
::view-transition-group(root),
|
||||
|
||||
@@ -140,7 +140,3 @@ pre {
|
||||
img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@@ -206,7 +206,3 @@ pre {
|
||||
img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@@ -91,7 +91,3 @@ blockquote {
|
||||
pre {
|
||||
--code-bg: var(--surface);
|
||||
}
|
||||
|
||||
::view-transition {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
/* Every color is sampled (or text-darkened) from banner.svg. */
|
||||
--bg: #e6f4cf;
|
||||
--sky: #d9f1ff;
|
||||
/* pale meadow — the banner fades into this */
|
||||
--surface: #f8fbf0;
|
||||
--text: #2c4a2f;
|
||||
@@ -260,8 +261,7 @@ figcaption,
|
||||
background: linear-gradient(160deg, #eef7dd, #d9eec5);
|
||||
}
|
||||
|
||||
/* The page transition exposes summer color around the rotating
|
||||
snapshots. */
|
||||
::view-transition {
|
||||
background: var(--bg);
|
||||
/* Override to mid sky shade instead of the darker --bg we otherwise get */
|
||||
background: var(--sky);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user