From 0135ca1124b1f0581d98651e55464c0eeb4236c2 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Fri, 11 Apr 2025 21:06:40 -0600 Subject: [PATCH] Update the system CSS to use sub-layers This is so I have more granular control over interactions between resets and intentional styles --- system.json | 6 ++-- templates/Apps/apps.css | 19 +++++++++++++ templates/{css => Apps}/popover.css | 0 templates/css/common.css | 38 ------------------------- templates/css/elements/button.css | 1 - templates/css/elements/input.css | 1 - templates/css/elements/prose-mirror.css | 2 +- templates/css/elements/select.css | 1 - templates/css/elements/table.css | 6 ---- templates/css/main.css | 25 ++++++++++++++++ templates/css/resets/inputs.css | 5 ++++ templates/css/resets/tables.css | 7 +++++ templates/css/themes/light.css | 14 --------- 13 files changed, 61 insertions(+), 64 deletions(-) rename templates/{css => Apps}/popover.css (100%) delete mode 100644 templates/css/common.css create mode 100644 templates/css/main.css create mode 100644 templates/css/resets/inputs.css create mode 100644 templates/css/resets/tables.css delete mode 100644 templates/css/themes/light.css diff --git a/system.json b/system.json index 06aecb9..1fe6d62 100644 --- a/system.json +++ b/system.json @@ -18,8 +18,10 @@ "module/main.mjs" ], "styles": [ - "templates/css/common.css", - "templates/Apps/apps.css" + { + "src": "templates/css/main.css", + "layer": "system" + } ], "languages": [ { diff --git a/templates/Apps/apps.css b/templates/Apps/apps.css index 728dfb9..2003308 100644 --- a/templates/Apps/apps.css +++ b/templates/Apps/apps.css @@ -7,4 +7,23 @@ @import url("./HeroSkillsCardV1/style.css"); @import url("./RichEditor/style.css"); +@import url("./popover.css"); @import url("./popovers/AmmoTracker/style.css"); + +.ripcrypt { + .window-content { + flex: initial; + padding: 0; + margin: 0; + } + + .HeroSummaryCardV1, + .HeroSkillsCardV1, + .HeroCraftCardV1 { + padding: 8px; + /* height: 270px; */ + width: 680px; + --col-gap: 2px; + --row-gap: 4px; + } +} diff --git a/templates/css/popover.css b/templates/Apps/popover.css similarity index 100% rename from templates/css/popover.css rename to templates/Apps/popover.css diff --git a/templates/css/common.css b/templates/css/common.css deleted file mode 100644 index 1b2758e..0000000 --- a/templates/css/common.css +++ /dev/null @@ -1,38 +0,0 @@ -@layer exceptions; - -@import url("./vars.css"); - -@import url("./popover.css"); - -@import url("./elements/button.css"); -@import url("./elements/input.css"); -@import url("./elements/lists.css"); -@import url("./elements/p.css"); -@import url("./elements/pill-bar.css"); -@import url("./elements/prose-mirror.css") layer(exceptions); -@import url("./elements/select.css"); -@import url("./elements/span.css"); -@import url("./elements/string-tags.css"); -@import url("./elements/table.css"); - -.ripcrypt { - .window-content { - flex: initial; - padding: 0; - margin: 0; - } - - .HeroSummaryCardV1, - .HeroSkillsCardV1, - .HeroCraftCardV1 { - padding: 8px; - /* height: 270px; */ - width: 680px; - --col-gap: 2px; - --row-gap: 4px; - } - - label, input, select { - cursor: pointer; - } -} diff --git a/templates/css/elements/button.css b/templates/css/elements/button.css index 62431e7..7ab1590 100644 --- a/templates/css/elements/button.css +++ b/templates/css/elements/button.css @@ -1,6 +1,5 @@ .ripcrypt:where(.popover.frameless, .hud) button, .ripcrypt > .window-content button { - all: revert; display: flex; justify-content: center; align-items: center; diff --git a/templates/css/elements/input.css b/templates/css/elements/input.css index bdf6c7f..b12e45e 100644 --- a/templates/css/elements/input.css +++ b/templates/css/elements/input.css @@ -2,7 +2,6 @@ .ripcrypt.hud, .ripcrypt > .window-content { input, .input { - all: revert; box-sizing: border-box; border: none; outline: none; diff --git a/templates/css/elements/prose-mirror.css b/templates/css/elements/prose-mirror.css index 7c508db..7aaa978 100644 --- a/templates/css/elements/prose-mirror.css +++ b/templates/css/elements/prose-mirror.css @@ -1,3 +1,3 @@ .ripcrypt prose-mirror * { - all: revert-layer !important; + all: revert-layer; } diff --git a/templates/css/elements/select.css b/templates/css/elements/select.css index be51dbb..519c06e 100644 --- a/templates/css/elements/select.css +++ b/templates/css/elements/select.css @@ -1,7 +1,6 @@ .ripcrypt.popover.frameless select, .ripcrypt.hud select, .ripcrypt > .window-content select { - all: revert; appearance: auto; box-sizing: border-box; border: none; diff --git a/templates/css/elements/table.css b/templates/css/elements/table.css index e06668c..fc44c35 100644 --- a/templates/css/elements/table.css +++ b/templates/css/elements/table.css @@ -1,16 +1,10 @@ .ripcrypt.popover.frameless table, .ripcrypt.hud table, .ripcrypt > .window-content table { - all: revert; box-sizing: border-box; border-collapse: collapse; - thead, tbody, tr { - all: revert; - } - td, th { - all: revert; padding: 2px 4px; font-weight: initial; text-align: left; diff --git a/templates/css/main.css b/templates/css/main.css new file mode 100644 index 0000000..5621f33 --- /dev/null +++ b/templates/css/main.css @@ -0,0 +1,25 @@ +@layer resets, themes, elements, components, apps, exceptions; + +/* Resets */ +@import url("./resets/inputs.css") layer(resets); +@import url("./resets/tables.css") layer(resets); + +/* Themes */ +@import url("./themes/dark.css") layer(themes); + +/* Elements */ +@import url("./elements/button.css") layer(elements); +@import url("./elements/input.css") layer(elements); +@import url("./elements/lists.css") layer(elements); +@import url("./elements/p.css") layer(elements); +@import url("./elements/pill-bar.css") layer(elements); +@import url("./elements/select.css") layer(elements); +@import url("./elements/span.css") layer(elements); +@import url("./elements/string-tags.css") layer(elements); +@import url("./elements/table.css") layer(elements); + +/* Applications */ +@import url("../Apps/apps.css") layer(apps); + +/* Exceptions */ +@import url("./elements/prose-mirror.css") layer(exceptions); diff --git a/templates/css/resets/inputs.css b/templates/css/resets/inputs.css new file mode 100644 index 0000000..1206755 --- /dev/null +++ b/templates/css/resets/inputs.css @@ -0,0 +1,5 @@ +.ripcrypt { + button, input, select { + all: initial; + } +} diff --git a/templates/css/resets/tables.css b/templates/css/resets/tables.css new file mode 100644 index 0000000..06ee6b0 --- /dev/null +++ b/templates/css/resets/tables.css @@ -0,0 +1,7 @@ +.ripcrypt.popover.frameless, +.ripcrypt.hud, +.ripcrypt > .window-content { + table, thead, tbody, th, tr, td { + all: revert; + } +} diff --git a/templates/css/themes/light.css b/templates/css/themes/light.css deleted file mode 100644 index ebc1127..0000000 --- a/templates/css/themes/light.css +++ /dev/null @@ -1,14 +0,0 @@ -.theme-rc-light, -.theme-light { - --header-text: white; - --header-background: black; - - --section-header-text: white; - --section-header-background: black; - - --alt-row-text: black; - --alt-row-background: rgba(0,0,0, 0.3); - - --base-text: black; - --base-background: white; -}