Polish up the Layers panel design

This commit is contained in:
Keavon Chambers
2024-04-01 02:09:01 -07:00
parent 5bab38e173
commit 938a688fa0
17 changed files with 217 additions and 28 deletions
+11
View File
@@ -69,6 +69,7 @@
:root {
// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
// Specifically, support for the relative syntax is needed: `color(from var(--color-0-black) srgb r g b / 0.5)` to convert black to 50% alpha
--color-0-black: #000;
--color-0-black-rgb: 0, 0, 0;
--color-1-nearblack: #111;
@@ -138,6 +139,16 @@
--color-transparent-checkered-background-size: 16px 16px;
--color-transparent-checkered-background-position: 0 0, 8px 8px;
--background-inactive-stripes: repeating-linear-gradient(
-45deg,
transparent 0px,
transparent calc((3px * sqrt(2) / 2) - 0.5px),
var(--color-5-dullgray) calc((3px * sqrt(2) / 2) - 0.5px),
var(--color-5-dullgray) calc((3px * sqrt(2) / 2) + 0.5px),
transparent calc((3px * sqrt(2) / 2) + 0.5px),
transparent calc(6px * sqrt(2) / 2)
);
// Arrow triangle (#eee fill)
--icon-expand-collapse-arrow: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><polygon fill="%23eee" points="3,0 1,0 5,4 1,8 3,8 7,4" /></svg>\