Update the item sheet styling to use Forgejo colours in dark mode
This commit is contained in:
parent
c9ad0d8a4e
commit
66d2452d1d
5 changed files with 97 additions and 7 deletions
|
|
@ -1,7 +1,8 @@
|
||||||
.taf.GenericItemSheet {
|
.taf.GenericItemSheet {
|
||||||
.bordered {
|
> .window-content {
|
||||||
border-radius: 8px;
|
padding: 0;
|
||||||
border: 1px solid rebeccapurple;
|
color: var(--item-sheet-color);
|
||||||
|
background: var(--item-sheet-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sheet-header {
|
.sheet-header {
|
||||||
|
|
@ -9,7 +10,8 @@
|
||||||
grid-template-columns: auto 1fr min-content 75px;
|
grid-template-columns: auto 1fr min-content 75px;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 4px;
|
padding: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--item-sheet-divider-color);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -17,7 +19,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: contents;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
gap: inherit;
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.property {
|
.property {
|
||||||
|
|
@ -35,6 +41,7 @@
|
||||||
.description {
|
.description {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
--table-row-color-odd: var(--table-header-bg-color);
|
--table-row-color-odd: var(--table-header-bg-color);
|
||||||
|
|
||||||
&:not(:has(> prose-mirror)) {
|
&:not(:has(> prose-mirror)) {
|
||||||
|
|
@ -44,10 +51,28 @@
|
||||||
|
|
||||||
prose-mirror {
|
prose-mirror {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: var(--item-sheet-description-content-background);
|
||||||
|
--divider-color: currentColor;
|
||||||
|
|
||||||
menu {
|
menu {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
.taf > .window-content hr {
|
.taf > .window-content hr {
|
||||||
|
color: inherit;
|
||||||
display: block;
|
display: block;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: rebeccapurple;
|
background: var(--divider-color, rebeccapurple);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
@import url("./resets/tabs.css") layer(resets);
|
@import url("./resets/tabs.css") layer(resets);
|
||||||
|
|
||||||
/* Themes */
|
/* Themes */
|
||||||
|
@import url("./palettes/forgejo.css") layer(themes);
|
||||||
@import url("./themes/dark.css") layer(themes);
|
@import url("./themes/dark.css") layer(themes);
|
||||||
@import url("./themes/light.css") layer(themes);
|
@import url("./themes/light.css") layer(themes);
|
||||||
|
|
||||||
|
|
|
||||||
49
styles/palettes/forgejo.css
Normal file
49
styles/palettes/forgejo.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -11,14 +11,16 @@
|
||||||
--tab-button-active-border: rebeccapurple;
|
--tab-button-active-border: rebeccapurple;
|
||||||
--tab-button-hover-bg: var(--color-cool-3);
|
--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-background: #171e26;
|
||||||
--inventory-summary-colour: white;
|
--inventory-summary-colour: white;
|
||||||
--inventory-input-background: #2b3642;
|
--inventory-input-background: #2b3642;
|
||||||
--inventory-input-colour: white;
|
--inventory-input-colour: white;
|
||||||
--inventory-input-disabled-colour: gray;
|
--inventory-input-disabled-colour: gray;
|
||||||
|
|
||||||
--item-list-header-background: #171e26;
|
--item-list-header-background: #171e26;
|
||||||
--item-list-header-color: white;
|
--item-list-header-color: white;
|
||||||
|
|
||||||
--item-card-background: #1d262f;
|
--item-card-background: #1d262f;
|
||||||
--item-card-color: white;
|
--item-card-color: white;
|
||||||
--item-card-header-background: #242d38;
|
--item-card-header-background: #242d38;
|
||||||
|
|
@ -27,6 +29,18 @@
|
||||||
--item-card-header-input-colour: white;
|
--item-card-header-input-colour: white;
|
||||||
--item-card-header-disabled-input-colour: gray;
|
--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 Variables */
|
||||||
--chip-color: #fff7ed;
|
--chip-color: #fff7ed;
|
||||||
--chip-background: #2b3642;
|
--chip-background: #2b3642;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue