From cadd53efe44a6c1d4d586e7c5b66a717c3a1525d Mon Sep 17 00:00:00 2001 From: kraktus Date: Wed, 3 Jul 2024 19:28:40 +0200 Subject: [PATCH 1/3] format --- src/config.ts | 2 +- src/interfaces.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/config.ts b/src/config.ts index 295dd5a..beea665 100644 --- a/src/config.ts +++ b/src/config.ts @@ -22,7 +22,7 @@ const defaults: Opts = { }, analysisBoard: { enabled: true, - } + }, }, lichess: 'https://lichess.org', // support for Lichess games, with links to the game and players. Set to false to disable. classes: undefined, // CSS classes to set on the root element. Defaults to the element classes before being replaced by LPV. diff --git a/src/interfaces.ts b/src/interfaces.ts index f9a869c..e916f38 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -98,7 +98,7 @@ export interface Opts { }; analysisBoard?: { enabled?: boolean; - } + }; }; lichess: Lichess; classes?: string; From 8687ec2db6c73dfff242fd29bf6f8da7e9461f52 Mon Sep 17 00:00:00 2001 From: kraktus Date: Wed, 3 Jul 2024 19:39:22 +0200 Subject: [PATCH 2/3] Better scope and fix scrollbar styling The scrollbar styling was applied to the whole body, and the css-variable override was missing --- scss/_scrollbar.scss | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/scss/_scrollbar.scss b/scss/_scrollbar.scss index 72642ce..ae00a4a 100644 --- a/scss/_scrollbar.scss +++ b/scss/_scrollbar.scss @@ -1,14 +1,16 @@ -body ::-webkit-scrollbar, -body ::-webkit-scrollbar-corner { - width: 0.5rem; - background: $lpv-bg; -} +.lpv { + *::-webkit-scrollbar, + *::-webkit-scrollbar-corner { + width: 0.5rem; + background: var(--c-lpv-bg, $lpv-bg); + } -body ::-webkit-scrollbar-thumb { - background: var(--c-lpv-font-bg, $lpv-font-bg); -} + *::-webkit-scrollbar-thumb { + background: var(--c-lpv-font-bg, $lpv-font-bg); + } -body ::-webkit-scrollbar-thumb:hover, -body ::-webkit-scrollbar-thumb:active { - background: $lpv-font-shy; + *::-webkit-scrollbar-thumb:hover, + *::-webkit-scrollbar-thumb:active { + background: var(--c-lpv-font-shy, $lpv-font-shy); + } } From 9fdeb9f65135d46182bb6b2934de13c1c0de4685 Mon Sep 17 00:00:00 2001 From: kraktus Date: Wed, 3 Jul 2024 20:19:30 +0200 Subject: [PATCH 3/3] Demo: very basic light mode selector based on lila extracts `lila/ui/common/css/theme/_light.scss` ``` $c-bg: hsl(0, 0%, 100%); // alias for $c-bg-high $c-bg-page: hsl(37, 10%, 92%); $c-bg-low: hsl(0, 0%, 89%); $c-bg-zebra: hsl(37, 12%, 96.5%); $c-bg-zebra2: hsl(37, 12%, 92%); $c-bg-popup: hsl(0, 0%, 100%); // alias for $c-bg $c-body-gradient: hsl(37, 12%, 84%); $c-font: hsl(0, 0%, 30%); $c-primary: hsl(209, 77%, 46%); $c-brag: hsl(37, 74%, 48%); $c-shade: hsl(0, 0%, 84%); $c-inaccuracy: hsl(202, 78%, 40%); $c-mistake: hsl(41, 100%, 35%); $c-blunder: hsl(0, 68%, 50%); $c-good: $c-secondary; $c-brilliant: hsl(129, 71%, 30%); $c-interesting: hsl(307, 80%, 59%); $c-dimmer: #fff; $c-clearer: #000; ``` `lila/ui/common/css/component/_lichess-pgn-viewer.scss` ``` --c-lpv-accent: #{$c-primary}; --c-lpv-bg: #{$c-bg-zebra}; --c-lpv-bg-player: var(--c-lpv-bg); --c-lpv-bg-controls: var(--c-lpv-bg); --c-lpv-bg-movelist: var(--c-lpv-bg); --c-lpv-bg-variation: #{$c-bg-zebra2}; --c-lpv-bg-pane: #{$m-bg-zebra2--fade-1}; --c-lpv-pgn-text: #{$c-bg-zebra2}; --c-lpv-font: #{$c-font}; --c-lpv-font-shy: #{$c-font-dim}; --c-lpv-accent-over: #{$c-over}; --c-lpv-fbt-hover: #{$m-primary_bg--mix-75}; --c-lpv-font-bg: #{$m-font_bg--mix-20}; --c-lpv-current-move: #{$m-primary_bg--mix-70}; --c-lpv-move-hover: #{$m-primary_bg--mix-30}; --c-lpv-border: #{$c-border}; --c-lpv-side-border: hsl(37deg, 5%, 13%); //#{$c-border-page}; --c-lpv-inaccuracy: #{$c-inaccuracy}; --c-lpv-mistake: #{$c-mistake}; --c-lpv-blunder: #{$c-blunder}; --c-lpv-good-move: #{$c-good}; --c-lpv-brilliant: #{$c-brilliant}; --c-lpv-interesting: #{$c-interesting}; --c-lpv-bg-inaccuracy-hover: #{$m-inaccuracy_bg--mix-30}; --c-lpv-bg-mistake-hover: #{$m-mistake_bg--mix-30}; --c-lpv-bg-blunder-hover: #{$m-blunder_bg--mix-30}; --c-lpv-bg-good-hover: #{$m-good_bg--mix-30}; --c-lpv-bg-brilliant-hover: #{$m-brilliant_bg--mix-30}; --c-lpv-bg-interesting-hover: #{$m-interesting_bg--mix-30}; ``` --- demo/demo.js | 20 ++++++++++++++++++++ demo/index.html | 1 + demo/lichess-pgn-viewer.demo.css | 2 +- 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/demo/demo.js b/demo/demo.js index 73d8ce2..c706384 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -189,3 +189,23 @@ You can find the book here for an absurdly low price: https://www.amazon.com/Mam ].forEach((cfg, i) => LichessPgnViewer(document.querySelector(`.viewers > div:nth-child(${i + 1}) > div`), cfg), ); + +const lightColors = { + "--c-lpv-accent": "hsl(209, 77%, 46%)", + "--c-lpv-bg": "--c-lpv-bg", + "--c-lpv-bg-player": "--c-lpv-bg", + "--c-lpv-bg-controls": "--c-lpv-bg", + "--c-lpv-bg-movelist": "--c-lpv-bg", + "--c-lpv-bg-variation": "hsl(37, 12%, 92%)", + "--c-lpv-pgn-text": "hsl(37, 12%, 92%)", + "--c-lpv-font": "color(srgb 0.3019 0.302 0.302)", + "--c-lpv-font-bg": "color(srgb 0.8392 0.8392 0.8393)", + "--demo-bg": 'color(srgb 0.9272 0.9173 0.9047)' +} + +document.getElementById('light-mode-selector').addEventListener('change', (e) => { + Object.entries(lightColors).forEach(([key, color],_) => { + console.log(key, color); + document.documentElement.style.setProperty(key, e.target.checked ? color : "unset"); + })}); + diff --git a/demo/index.html b/demo/index.html index 856a3fe..9a9efb2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,6 +10,7 @@ Lichess PGN Viewer +
diff --git a/demo/lichess-pgn-viewer.demo.css b/demo/lichess-pgn-viewer.demo.css index 34ca7aa..fa902ae 100644 --- a/demo/lichess-pgn-viewer.demo.css +++ b/demo/lichess-pgn-viewer.demo.css @@ -1,5 +1,5 @@ body { - background: #161512; + background: var(--demo-bg, #161512); font-family: 'Noto Sans'; --board-color: #886f46; margin: 0;