Update the QueryStatus app theme (closes #61)
This commit is contained in:
parent
6723e0d25f
commit
749d442bd8
3 changed files with 56 additions and 7 deletions
|
|
@ -1,4 +1,9 @@
|
|||
.taf.QueryStatus {
|
||||
> .window-content {
|
||||
color: var(--query-status-colour);
|
||||
background: var(--query-status-background);
|
||||
}
|
||||
|
||||
.user-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -11,7 +16,8 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
border: 1px solid rebeccapurple;
|
||||
color: var(--query-status-user-colour);
|
||||
background: var(--query-status-user-background);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
|
||||
|
|
@ -22,6 +28,19 @@
|
|||
/* Same height as the icons used for loading/disconnected */
|
||||
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;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
display: inline flex;
|
||||
color: var(--chip-colour);
|
||||
background: var(--chip-background);
|
||||
border: 1px solid var(--chip-border-colour);
|
||||
border-radius: 4px;
|
||||
|
||||
.key {
|
||||
|
|
|
|||
|
|
@ -81,10 +81,23 @@
|
|||
--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);
|
||||
|
||||
/* 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-colour: #fff7ed;
|
||||
--chip-background: #2b3642;
|
||||
--chip-value-colour: #fff7ed;
|
||||
--chip-value-background: #10161d;
|
||||
--chip-border-colour: var(--chip-value-background);
|
||||
--chip-colour: var(--steel-100);
|
||||
--chip-background: var(--steel-600);
|
||||
--chip-value-colour: var(--steel-100);
|
||||
--chip-value-background: var(--steel-500);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue