Foundry/taf
1
0
Fork 0
Code Issues 13 Pull requests Releases 9 Wiki Activity Actions

Update the QueryStatus app theme (closes #61)

Browse source
This commit is contained in:
Oliver 2026-05-01 15:26:57 -06:00
parent 6723e0d25f
commit 749d442bd8
3 changed files with 56 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

39
styles/Apps/QueryStatus.css
View file

@ -1,4 +1,9 @@
.taf.QueryStatus { .taf.QueryStatus {
> .window-content {
color: var(--query-status-colour);
background: var(--query-status-background);
}
.user-list { .user-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -11,7 +16,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
border: 1px solid rebeccapurple; color: var(--query-status-user-colour);
background: var(--query-status-user-background);
border-radius: 4px; border-radius: 4px;
padding: 4px 8px; padding: 4px 8px;
@ -22,6 +28,19 @@
/* Same height as the icons used for loading/disconnected */ /* Same height as the icons used for loading/disconnected */
height: 35px; height: 35px;
} }
button {
color: var(--query-status-user-button-colour);
background: var(--query-status-user-button-background);
&:hover {
background: var(--query-status-user-button-hover-background);
}
&:focus-visible {
border-color: var(--query-status-user-button-focus);
}
}
} }
} }
@ -29,5 +48,23 @@
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1rem;
button {
color: var(--query-status-control-colour);
background: var(--query-status-control-background);
&:hover {
background: var(--query-status-control-hover-background);
}
&:focus-visible {
border-color: var(--query-status-control-focus);
}
}
}
button {
border: 2px solid transparent;
outline: none;
} }
} }

1
styles/elements/div.css
View file

@ -3,7 +3,6 @@
display: inline flex; display: inline flex;
color: var(--chip-colour); color: var(--chip-colour);
background: var(--chip-background); background: var(--chip-background);
border: 1px solid var(--chip-border-colour);
border-radius: 4px; border-radius: 4px;
.key { .key {

23
styles/themes/dark.css
View file

@ -81,10 +81,23 @@
--attribute-sheet-toggle-slider-enabled-colour: var(--item-sheet-toggle-slider-enabled-colour); --attribute-sheet-toggle-slider-enabled-colour: var(--item-sheet-toggle-slider-enabled-colour);
--attribute-sheet-toggle-slider-disabled-colour: var(--item-sheet-toggle-slider-disabled-colour); --attribute-sheet-toggle-slider-disabled-colour: var(--item-sheet-toggle-slider-disabled-colour);
/* Query Status App Variables */
--query-status-colour: var(--steel-100);
--query-status-background: var(--steel-800);
--query-status-user-colour: var(--steel-100);
--query-status-user-background: var(--steel-700);
--query-status-user-button-colour: var(--steel-100);
--query-status-user-button-background: var(--steel-600);
--query-status-user-button-focus: var(--zinc-100);
--query-status-user-button-hover-background: var(--steel-650);
--query-status-control-colour: var(--steel-100);
--query-status-control-background: var(--steel-600);
--query-status-control-focus: var(--zinc-100);
--query-status-control-hover-background: var(--steel-650);
/* Chip Variables */ /* Chip Variables */
--chip-colour: #fff7ed; --chip-colour: var(--steel-100);
--chip-background: #2b3642; --chip-background: var(--steel-600);
--chip-value-colour: #fff7ed; --chip-value-colour: var(--steel-100);
--chip-value-background: #10161d; --chip-value-background: var(--steel-500);
--chip-border-colour: var(--chip-value-background);
} }