From 6f51994ffa3d8a305b5e4d7dafa4f52e8101bdcb Mon Sep 17 00:00:00 2001 From: mystie Date: Sat, 28 Sep 2024 00:38:18 +0300 Subject: [PATCH] add tinted styles --- static/css/tinted.css | 93 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 static/css/tinted.css diff --git a/static/css/tinted.css b/static/css/tinted.css new file mode 100644 index 0000000..17674c7 --- /dev/null +++ b/static/css/tinted.css @@ -0,0 +1,93 @@ +[data-bs-theme=light] { + --bs-body-bg-untinted: #fff; + --bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted)); + --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); + --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); + --bs-danger: #dc3545; + --bs-danger-bg-subtle: #f8e6e8; + --bs-link-color: color-mix(in srgb, var(--bs-primary) 75%, black); + --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, black); + --bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); + --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-body-bg)); + --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-body-bg)); + --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-bg)); + --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), black); + --bs-border-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 85%, var(--bs-body-color)); + --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); + --bs-tertiary-bg: var(--bs-primary-bg-subtle); + --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); +} + +[data-bs-theme=dark] { + --bs-body-bg-untinted: #202020; + --bs-body-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg-untinted)); +/* --bs-body-bg-rgb: 32, 32, 32;*/ + --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); + --bs-danger-bg-subtle: #2c0b0e; + --bs-link-color: color-mix(in srgb, var(--bs-primary) 55%, white); + --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, white); + --bs-basic-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg)); + --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-body-bg)); + --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-body-bg)); + --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-bg)); + --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), white); + --bs-border-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 85%, var(--bs-body-color)); + --bs-dropdown-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black); + --bs-tertiary-bg: var(--bs-primary-bg-subtle); + --bs-secondary-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-body-color)); +} + +.btn-check:checked + .btn-secondary, .btn-check:checked + .btn-outline-secondary { + --bs-btn-active-bg: var(--bs-basic-btn-active-bg-strong) !important; + --bs-btn-active-color: var(--bs-body-color); + background-color: var(--bs-btn-active-bg) !important; +} +.btn-outline-secondary { + --bs-btn-color: var(--bs-body-color); + --bs-btn-border-color: var(--bs-basic-btn-active-bg-strong); +} + +.accordion { + --bs-accordion-border-color: var(--bs-border-color); +/* --bs-accordion-active-color: ;*/ +} + +.card { + --bs-card-border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent); + --bs-card-cap-bg: color-mix(in srgb, var(--bs-primary) 5%, transparent); + --bs-card-bg: color-mix(in srgb, var(--bs-primary) 2%, transparent); +} + +.dropdown-menu { + --bs-dropdown-bg: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-body-bg)); + --bs-dropdown-border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent); +} + +[data-bs-theme=light] .btn-primary { + --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 90%, black); + --bs-btn-border-color: var(--bs-btn-bg); + --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); + --bs-btn-hover-border-color: var(--bs-btn-hover-bg); + --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); + --bs-btn-active-border-color: var(--bs-btn-active-bg); + --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, white); +} + +[data-bs-theme=dark] .btn-primary { + --bs-btn-bg: color-mix(in srgb, var(--bs-primary) 55%, black); + --bs-btn-border-color: var(--bs-btn-bg); + --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 90%, black); + --bs-btn-hover-border-color: var(--bs-btn-hover-bg); + --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, black); + --bs-btn-active-border-color: var(--bs-btn-active-bg); + --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 70%, black); +} + +.dropdown-item.active, .dropdown-item:active { + background-color: var(--bs-dropdown-active-bg); +} + +[data-bs-theme="light"] .dropdown-item:hover, [data-bs-theme="light"] .dropdown-item:focus { + --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bs-primary) 10%, transparent); + --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 70%, black); +} \ No newline at end of file