diff --git a/styles/Apps/Ask.css b/styles/Apps/Ask.css index f7bb78e..4aca7cc 100644 --- a/styles/Apps/Ask.css +++ b/styles/Apps/Ask.css @@ -23,10 +23,6 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; - - button { - flex-grow: 1; - } } label { diff --git a/styles/Apps/QueryStatus.css b/styles/Apps/QueryStatus.css index 5532505..4f45ff4 100644 --- a/styles/Apps/QueryStatus.css +++ b/styles/Apps/QueryStatus.css @@ -11,7 +11,7 @@ display: flex; flex-direction: column; margin: 0; - border: 1px solid yellowgreen; + border: 1px solid rebeccapurple; border-radius: 4px; padding: 4px 8px; @@ -19,7 +19,15 @@ display: flex; flex-direction: row; align-items: center; + /* Same height as the icons used for loading/disconnected */ + height: 35px; } } } + + .control-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + } } diff --git a/styles/elements/div.css b/styles/elements/div.css new file mode 100644 index 0000000..69ebd5e --- /dev/null +++ b/styles/elements/div.css @@ -0,0 +1,20 @@ +.taf > .window-content div { + &.chip { + display: inline flex; + color: var(--chip-color); + background: var(--chip-background); + border: 1px solid var(--chip-border-color); + border-radius: 4px; + + .key { + padding: 2px 4px; + } + + .value { + padding: 2px 4px; + border-radius: 0 4px 4px 0; + color: var(--chip-value-color); + background: var(--chip-value-background); + } + } +} diff --git a/styles/elements/span.css b/styles/elements/span.css index 1ce99fe..c4fdbcb 100644 --- a/styles/elements/span.css +++ b/styles/elements/span.css @@ -18,7 +18,7 @@ .taf > .window-content span { &.loader { - --size: 40px; + --size: 35px; width: var(--size); height: var(--size); border-radius: 50%; diff --git a/styles/main.css b/styles/main.css index 6994e85..a4c4a2c 100644 --- a/styles/main.css +++ b/styles/main.css @@ -3,6 +3,7 @@ /* Resets */ @import url("./resets/hr.css") layer(resets); @import url("./resets/inputs.css") layer(resets); +@import url("./resets/button.css") layer(resets); /* Themes */ @import url("./themes/dark.css") layer(themes); @@ -10,6 +11,7 @@ /* Elements */ @import url("./elements/utils.css") layer(elements); +@import url("./elements/div.css") layer(elements); @import url("./elements/headers.css") layer(elements); @import url("./elements/hr.css") layer(elements); @import url("./elements/input.css") layer(elements); diff --git a/styles/resets/button.css b/styles/resets/button.css new file mode 100644 index 0000000..d04ae6e --- /dev/null +++ b/styles/resets/button.css @@ -0,0 +1,3 @@ +.taf > .window-content button { + height: initial; +} diff --git a/styles/themes/dark.css b/styles/themes/dark.css index 85103f7..1695d32 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -1,3 +1,10 @@ .theme-dark { --prosemirror-background: var(--color-cool-5); + + /* Chip Variables */ + --chip-color: #fff7ed; + --chip-background: #2b3642; + --chip-value-color: #fff7ed; + --chip-value-background: #10161d; + --chip-border-color: var(--chip-value-background); } diff --git a/templates/QueryStatus/controls.hbs b/templates/QueryStatus/controls.hbs index 363c828..65985fc 100644 --- a/templates/QueryStatus/controls.hbs +++ b/templates/QueryStatus/controls.hbs @@ -1,8 +1,8 @@ -
- -
diff --git a/templates/QueryStatus/users.hbs b/templates/QueryStatus/users.hbs index 4ade68d..bf863ea 100644 --- a/templates/QueryStatus/users.hbs +++ b/templates/QueryStatus/users.hbs @@ -16,7 +16,7 @@ @@ -32,14 +32,14 @@ {{#if (eq user.status "finished")}}
{{#each user.answers as | answer |}} - +
{{ @key }} {{ answer }} - +
{{/each}}
{{/if}}