diff --git a/styles/generic.scss b/styles/generic.scss index e855497..00a474a 100644 --- a/styles/generic.scss +++ b/styles/generic.scss @@ -12,6 +12,7 @@ specificity to allow easier overriding without artificially increasing it. --scrollbar-width: 5px; --scrollbar-handle-color: #782e22; --scrollbar-handle-border-color: var(--color-border-highlight); + --color-checkbox-checked: inherit; ::-webkit-scrollbar { width: var(--scrollbar-width); } diff --git a/styles/sheets/actor/char-sheet/v2/themes/dark.scss b/styles/sheets/actor/char-sheet/v2/themes/dark.scss index c921fbc..f32ffce 100644 --- a/styles/sheets/actor/char-sheet/v2/themes/dark.scss +++ b/styles/sheets/actor/char-sheet/v2/themes/dark.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + $t: transparent; $background: #0a0a0a; @@ -22,8 +24,10 @@ $body-font: sans-serif; --tab-font: #{$title-font}; --input-font: #{$body-font}; + // Foundry overrides --scrollbar-handle-color: #{$primary}; --scrollbar-handle-border-color: color-mix(in lab, white 40%, var(--scrollbar-handle-color)); + --color-checkbox-checked: #{color.adjust($primary, $lightness: 25%)}; /* Elevation backgrounds to following Material design */ --elevation-0dp-bg: #{$surface}; diff --git a/styles/sheets/actor/char-sheet/v2/v2.scss b/styles/sheets/actor/char-sheet/v2/v2.scss index 1b4b0c0..4f18741 100644 --- a/styles/sheets/actor/char-sheet/v2/v2.scss +++ b/styles/sheets/actor/char-sheet/v2/v2.scss @@ -66,6 +66,29 @@ opacity: 60%; } + input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 2px; + margin: 0; + cursor: pointer; + + background: var(--elevation-8dp-bg); + position: relative; + &:checked::before { + content: ""; + background: var(--color-checkbox-checked); + border-radius: 3px; + $margin: 4px; + top: $margin; + bottom: $margin; + left: $margin; + right: $margin; + position: absolute; + } + } + .page-content { padding: 16px; padding-bottom: 69px;