From 3be416f9c67b9512cadb9f4a7e3d1e6f6fdaedab Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Sat, 6 May 2023 12:48:43 +0200 Subject: [PATCH] Various theming fixes --- .../dist/css/tabulator_fast.min.css | 6 +- panel/template/material/material.css | 4 + panel/theme/css/bootstrap.css | 7 +- panel/theme/css/fast.css | 97 ++++++++++++++++++- panel/theme/css/material.css | 60 ++++++++++-- 5 files changed, 160 insertions(+), 14 deletions(-) diff --git a/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css b/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css index 72e53fd0f9..6410a00046 100644 --- a/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css +++ b/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css @@ -20,7 +20,7 @@ position: relative; box-sizing: border-box; width: 100%; - border-bottom: 1px solid var(--neutral-stroke-divider-rest); + border-bottom: 2px solid var(--accent-fill-rest); background-color: var(--fill-color); color: var(--neutral-foreground-rest); font-weight: bold; @@ -339,9 +339,11 @@ background-color: var(--neutral-fill-rest); } .tabulator-row.tabulator-selectable:hover { background-color: var(--accent-fill-hover); + color: var(--foreground-on-accent-hover); cursor: pointer; } .tabulator-row.tabulator-selected { - background-color: var(--accent-fill-active); } + background-color: var(--accent-fill-active); + color: var(--foreground-on-accent-rest); } .tabulator-row.tabulator-selected:hover { background-color: var(--accent-fill-hover); cursor: pointer; } diff --git a/panel/template/material/material.css b/panel/template/material/material.css index f825e0985b..d8c96a3b31 100644 --- a/panel/template/material/material.css +++ b/panel/template/material/material.css @@ -40,6 +40,10 @@ html { background-color: var(--mdc-theme-surface); } +::-webkit-scrollbar-corner { + background-color: var(--mdc-theme-surface); +} + body { background-color: var(--mdc-theme-background); color: var(--mdc-theme-on-background); diff --git a/panel/theme/css/bootstrap.css b/panel/theme/css/bootstrap.css index 0c5770d12c..166677fbfa 100644 --- a/panel/theme/css/bootstrap.css +++ b/panel/theme/css/bootstrap.css @@ -255,6 +255,10 @@ input.bk-input, textarea.bk-input { /* Button widgets */ +.bk-btn-group .bk-btn:hover { + border-color: var(--bs-btn-border-color); +} + .bk-btn { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.375rem; @@ -315,7 +319,7 @@ input.bk-input, textarea.bk-input { .bk-btn.bk-active { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); - border-color: var(--bs-btn-active-border-color); + border-color: var(--bs-btn-border-color); box-shadow: var(--bs-btn-active-shadow); } @@ -504,6 +508,7 @@ select.bk-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; + margin: 0px; } .form-control:focus, .choices__inner:focus { diff --git a/panel/theme/css/fast.css b/panel/theme/css/fast.css index 64bcc8fe50..8c63a24f89 100644 --- a/panel/theme/css/fast.css +++ b/panel/theme/css/fast.css @@ -17,8 +17,30 @@ /* Track */ +::-webkit-scrollbar-button { + background-color: var(--neutral-fill-rest); +} + ::-webkit-scrollbar-track { - background: #f1f1f1; + background-color: var(--neutral-fill-rest); +} + +::-webkit-scrollbar-track-piece { + background-color: var(--background-color); +} + +::-webkit-scrollbar-thumb { + height: 50px; + background-color: var(--neutral-fill-rest); + border-radius: var(--corner-radius); +} + +::-webkit-scrollbar-corner { + background-color: var(--neutral-fill-rest); +} + +::-webkit-resizer { + background-color: var(--neutral-fill-rest); } /* Separator */ @@ -417,14 +439,16 @@ input[type=file]:active { /* Buttons */ .bk-btn { + background-color: transparent; border-radius: calc(var(--control-corner-radius) * 1px); line-height: var(--type-ramp-base-line-height); min-width: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px); } .bk-btn.bk-btn-default { - background-color: var(--neutral-fill-rest); - color: var(--neutral-foreground-rest); + background-color: transparent; + border: 1px solid var(--accent-fill-rest); + color: var(--accent-fill-rest); } .bk-btn.bk-btn-default:hover { @@ -432,10 +456,61 @@ input[type=file]:active { } .bk-btn.bk-btn-default.bk-active { + background-color: var(--accent-fill-active); + color: var(--foreground-on-accent-rest); box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%); - filter: brightness(0.9); } +.bk-btn-primary { + color: #3276b1; +} + +.bk-btn-primary.bk-active,.bk-btn-primary:hover { + color: var(--secondary-text-color); +} + +.bk-btn-secondary { + color: var(--secondary-bg-color); +} + +.bk-btn-secondary.bk-active, .bk-btn-secondary:hover { + color: var(--secondary-text-color); +} + +.bk-btn-success { + color: var(--success-bg-color); +} + +.bk-btn-success.bk-active, .bk-btn-success:hover { + color: var(--success-text-color); +} + +.bk-btn-warning { + color: var(--warning-bg-color); +} + +.bk-btn-warning.bk-active, .bk-btn-warning:hover { + color: var(--warning-text-color); +} + +.bk-btn-danger { + color: var(--danger-bg-color); +} + +.bk-btn-danger.bk-active, .bk-btn-danger:hover { + color: var(--danger-text-color); +} + +.bk-btn-light { + border-color: var(--light-bg-color); + color: var(--neutral-foreground-rest); +} + +.bk-btn-light.bk-active, .bk-btn-light:hover { + color: var(--light-text-color); +} + + .bk-btn[disabled], .bk-btn[disabled]:hover, .bk-btn[disabled]:focus, @@ -462,6 +537,12 @@ input[type=file]:active { color: var(--foreground-on-accent-hover); } +/* Select */ + +select:not([type="file"]).bk-input { + margin: 0; +} + /* Checkbox/Radio */ .bk-input-group input[type="checkbox"], .bk-input-group input[type="radio"] { @@ -544,6 +625,14 @@ input[type=file]:active { opacity: var(--disabled-opacity); } +.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-down:before { + border-top: 5px solid var(--accent-fill-rest); +} + +.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-up:before { + border-bottom: 5px solid var(--accent-fill-rest); +} + /* Switch */ :host(.bk-Switch) .body { diff --git a/panel/theme/css/material.css b/panel/theme/css/material.css index 074f14a5ce..e40a803670 100644 --- a/panel/theme/css/material.css +++ b/panel/theme/css/material.css @@ -1,15 +1,28 @@ /* Variables */ :host { - --handle-width: 20px; - --handle-height: 20px; - --switch-size: 20px; + --handle-width: 16px; + --handle-height: 16px; + --switch-size: 16px; --slider-size: 4px; --padding-vertical: 10px; --mdc-on-surface: inherit; } :host-context(.mdc-top-app-bar) .bk-menu { - color: black; + color: var(--mdc-theme-on-surface); +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background-color: var(--mdc-theme-background); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner { + background-color: var(--mdc-theme-surface); } /* Card layout */ @@ -189,7 +202,7 @@ button.mdc-button.mdc-card-button { padding: 4px 10px; } -textarea.bk-input { +textarea.bk-input:not([type="file"]) { padding: 12px 10px; } @@ -226,12 +239,24 @@ textarea.bk-input { margin: -2px 0; } +.bk-input-group > label:has(+ select) { + margin: 6px 0; +} + /* Number input */ .bk-input-group > .bk-spin-wrapper > .bk-spin-btn { color: var(--mdc-theme-on-background); } +.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-down:before { + border-top: 5px solid var(--mdc-theme-on-background); +} + +.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-up:before { + border-bottom: 5px solid var(--mdc-theme-on-background); +} + /* Select widgets */ select:not([multiple]).bk-input, select:not([size]).bk-input { @@ -248,6 +273,11 @@ select.bk-input:focus { box-shadow: unset; } +select[multiple].bk-input option:checked { + background-color: var(--mdc-theme-primary); + color: var(--mdc-theme-on-primary); +} + /* MultiChoice */ .choices__inner { @@ -266,6 +296,15 @@ select.bk-input:focus { background-color: unset; } +.choices__list--dropdown, .choices__list[aria-expanded] { + background-color: var(--mdc-theme-surface); +} + +.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { + background-color: var(--mdc-theme-primary); + color: var(--mdc-theme-on-primary); +} + .bk-input-group > label:has(+ div.choices) { background-color: var(--mdc-theme-background); position: absolute; @@ -312,10 +351,17 @@ select.bk-input:focus { } .bk-menu { - color: var(--mdc-theme-primary); - border: 1px solid var(--mdc-theme-primary); + background-color: var(--mdc-theme-surface); + color: var(--mdc-theme-on-surface); + border: 1px solid var(--mdc-theme-on-primary); +} + +.bk-menu > :not(.bk-divider):hover, .bk-menu > :not(.bk-divider).bk-active { + background-color: var(--panel-primary-color); + color: var(--panel-on-primary-color); } + /* Checkbox */ input[type="checkbox"] {