diff --git a/styles/Apps/GenericItemSheet.css b/styles/Apps/GenericItemSheet.css index bfb50de..0c2263a 100644 --- a/styles/Apps/GenericItemSheet.css +++ b/styles/Apps/GenericItemSheet.css @@ -1,7 +1,8 @@ .taf.GenericItemSheet { - .bordered { - border-radius: 8px; - border: 1px solid rebeccapurple; + > .window-content { + padding: 0; + color: var(--item-sheet-color); + background: var(--item-sheet-background); } .sheet-header { @@ -9,7 +10,8 @@ grid-template-columns: auto 1fr min-content 75px; gap: 4px; align-items: center; - padding: 4px; + padding: 0.5rem; + border-bottom: 1px solid var(--item-sheet-divider-color); img { border-radius: 4px; @@ -17,7 +19,11 @@ } .content { - display: contents; + display: flex; + flex-direction: column; + flex-grow: 1; + gap: inherit; + padding: 0.5rem; } .property { @@ -35,6 +41,7 @@ .description { flex-grow: 1; overflow: hidden; + border-radius: 8px; --table-row-color-odd: var(--table-header-bg-color); &:not(:has(> prose-mirror)) { @@ -44,10 +51,28 @@ prose-mirror { height: 100%; + background: var(--item-sheet-description-content-background); + --divider-color: currentColor; menu { border-bottom-left-radius: 0; border-bottom-right-radius: 0; + background: var(--item-sheet-description-menu-background); + + button { + color: var(--item-sheet-description-menu-color); + } } } + + input { + color: var(--item-sheet-input-color); + background: var(--item-sheet-input-background); + } + + taf-toggle { + --toggle-background: var(--item-sheet-input-background); + --slider-checked-colour: var(--item-sheet-toggle-slider-enabled-color); + --slider-unchecked-colour: var(--item-sheet-toggle-slider-disabled-color) + } } diff --git a/styles/elements/hr.css b/styles/elements/hr.css index 1cffab7..b505b8b 100644 --- a/styles/elements/hr.css +++ b/styles/elements/hr.css @@ -1,7 +1,8 @@ .taf > .window-content hr { + color: inherit; display: block; height: 1px; - background: rebeccapurple; + background: var(--divider-color, rebeccapurple); border-radius: 0; margin: 0; padding: 0; diff --git a/styles/main.css b/styles/main.css index 21045c4..6d897ac 100644 --- a/styles/main.css +++ b/styles/main.css @@ -7,6 +7,7 @@ @import url("./resets/tabs.css") layer(resets); /* Themes */ +@import url("./palettes/forgejo.css") layer(themes); @import url("./themes/dark.css") layer(themes); @import url("./themes/light.css") layer(themes); diff --git a/styles/palettes/forgejo.css b/styles/palettes/forgejo.css new file mode 100644 index 0000000..c491479 --- /dev/null +++ b/styles/palettes/forgejo.css @@ -0,0 +1,49 @@ +/* +Most of this file comes from a combination of Forgejo's themes + +- https://codeberg.org/forgejo/forgejo/src/commit/b68caa311fe5e3b7118130c2894c5b396b319681/web_src/css/themes/theme-forgejo-dark.css +- https://codeberg.org/forgejo/forgejo/src/commit/b68caa311fe5e3b7118130c2894c5b396b319681/web_src/css/themes/theme-forgejo-light.css + +Licensed under the GNU GPL v3 +*/ + +:root { + /* Steel */ + --steel-900: #10161d; + --steel-850: #131a21; + --steel-800: #171e26; + --steel-750: #1d262f; + --steel-700: #242d38; + --steel-650: #2b3642; + --steel-600: #374351; + --steel-550: #445161; + --steel-500: #515f70; + --steel-450: #5f6e80; + --steel-400: #6d7d8f; + --steel-350: #7c8c9f; + --steel-300: #8c9caf; + --steel-250: #9dadc0; + --steel-200: #aebed0; + --steel-150: #c0cfe0; + --steel-100: #d2e0f0; + + /* Zinc */ + --zinc-50: #fafafa; + --zinc-100: #f4f4f5; + --zinc-150: #ececee; + --zinc-200: #e4e4e7; + --zinc-250: #dcdce0; + --zinc-300: #d4d4d8; + --zinc-350: #babac1; + --zinc-400: #a1a1aa; + --zinc-450: #898992; + --zinc-500: #71717a; + --zinc-550: #61616a; + --zinc-600: #52525b; + --zinc-650: #484850; + --zinc-700: #3f3f46; + --zinc-750: #333338; + --zinc-800: #27272a; + --zinc-850: #1f1f23; + --zinc-900: #18181b; +} \ No newline at end of file diff --git a/styles/themes/dark.css b/styles/themes/dark.css index ddd01e9..f8b683b 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -11,14 +11,16 @@ --tab-button-active-border: rebeccapurple; --tab-button-hover-bg: var(--color-cool-3); + /* Actor Sheet Variables */ + /* Use --steel-850 as the main sheet background */ --inventory-summary-background: #171e26; --inventory-summary-colour: white; --inventory-input-background: #2b3642; --inventory-input-colour: white; --inventory-input-disabled-colour: gray; - --item-list-header-background: #171e26; --item-list-header-color: white; + --item-card-background: #1d262f; --item-card-color: white; --item-card-header-background: #242d38; @@ -27,6 +29,18 @@ --item-card-header-input-colour: white; --item-card-header-disabled-input-colour: gray; + /* Item Sheet Variables */ + --item-sheet-color: var(--steel-100); + --item-sheet-background: var(--steel-800); + --item-sheet-divider-color: var(--steel-700); + --item-sheet-input-color: var(--steel-100); + --item-sheet-input-background: var(--steel-650); + --item-sheet-toggle-slider-enabled-color: green; + --item-sheet-toggle-slider-disabled-color: maroon; + --item-sheet-description-menu-color: var(--steel-100); + --item-sheet-description-menu-background: var(--steel-700); + --item-sheet-description-content-background: var(--steel-650); + /* Chip Variables */ --chip-color: #fff7ed; --chip-background: #2b3642;