diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 3e49e9b62..7fde167ad 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -188,6 +188,8 @@ --color-terminal-bg: var(--color-ink-lightest); --color-terminal-text: var(--color-ink); --color-terminal-text-light: var(--color-ink-lighter); + --lch-golden: 89.1% 0.178 95.7; + --lch-golden-dark: 70% 0.48 95.7; /* Colors: Cards */ --color-card-default: oklch(var(--lch-blue-dark)); diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index bfd482135..69db06be3 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -295,7 +295,7 @@ background-color: color-mix(in srgb, var(--card-bg-color), transparent 10%); border-radius: 0.2em; border: 0.5ch solid var(--stamp-color); - color: var(--color-ink-medium); + color: var(--color-ink-dark); display: flex; flex-direction: column; font-weight: bold; @@ -308,10 +308,6 @@ rotate: 5deg; transform-origin: top right; - @media (prefers-color-scheme: dark) { - mix-blend-mode: screen; - } - .card:has(&), .card-perma:has(&) { --card-color: var(--color-card-complete) !important; @@ -344,20 +340,38 @@ /* ------------------------------------------------------------------------ */ .card--golden:is(.card--doing, .card--considering) { - --lch-golden: 89.1% 0.178 95.7; - background-color: var(--color-canvas); background-image: linear-gradient(60deg, - oklch(var(--lch-golden) / 0.5) 0%, - oklch(var(--lch-golden) / 0.15) 33%, - oklch(var(--lch-golden) / 0.05) 66%, - oklch(var(--lch-golden) / 0.5) 100% + oklch(var(--lch-golden) / 25%) 0%, + oklch(var(--lch-golden) / 10%) 33%, + oklch(var(--lch-golden) / 5%) 66%, + oklch(var(--lch-golden) / 25%) 100% ); box-shadow: 0 0 0 1px oklch(var(--lch-golden) / 75%), 0 0 0.5em 0.2em oklch(var(--lch-golden) / 25%), 0 0 1em 0.8em oklch(var(--lch-golden) / 25%) !important; + /* Cool wavy line pattern */ + @supports(mask: radial-gradient(red)) { + &:before { + /* background: green; */ + background: linear-gradient(60deg, + oklch(var(--lch-golden-dark) / 65%) 0%, + oklch(var(--lch-golden-dark) / 5%) 33%, + oklch(var(--lch-golden-dark) / 20%) 66%, + oklch(var(--lch-golden-dark) / 100%) 100% + ); + content: ""; + inset: 0; + mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px, + radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px; + opacity: 0.2; + position: absolute; + z-index: -1; + } + } + @media (prefers-color-scheme: dark) { --lch-golden: var(--lch-blue-medium); } diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index e14212609..cd0682e10 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -239,8 +239,6 @@ } .event--golden { - --lch-golden: 89.1% 0.178 95.7; - background-color: var(--color-canvas) !important; background-image: linear-gradient(60deg, oklch(var(--lch-golden) / 0.5) 0%,