From 838167f5e398c25329df67c850da9282898dbab4 Mon Sep 17 00:00:00 2001 From: mystie Date: Sat, 28 Sep 2024 00:37:13 +0300 Subject: [PATCH] improve styles --- static/css/style.css | 76 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 64 insertions(+), 12 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 378d289..4fe56f3 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -26,22 +26,26 @@ --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, black); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, black); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), black); + --bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, black); } [data-bs-theme=dark] { --bs-body-bg: #202020; --bs-body-bg-rgb: 32, 32, 32; - --bs-primary: #7f62f0; + --bs-primary: #7259d9; --bs-primary-rgb: 127,98,240; --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, transparent); + --bs-danger: #e06672; + --bs-danger-rgb: 224, 102, 114; --bs-danger-bg-subtle: #2c0b0e; - --bs-link-color: color-mix(in srgb, var(--bs-primary) 65%, white); + --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-body-bg) 95%, white); --bs-basic-btn-hover-bg-strong: color-mix(in srgb, var(--bs-body-bg) 90%, white); --bs-basic-btn-active-bg: color-mix(in srgb, var(--bs-body-bg) 92%, white); --bs-basic-btn-active-bg-strong: color-mix(in srgb, var(--bs-body-bg) 87%, white); --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary), white); + --bs-secondary-bg: color-mix(in srgb, var(--bs-primary-bg-subtle) 95%, white); } [data-bs-theme=light] .light-invert, @@ -59,6 +63,11 @@ --bs-btn-border-color: var(--bs-basic-btn-active-bg-strong); } +.btn-outline-danger { + --bs-btn-color: var(--bs-danger); + --bs-btn-border-color: var(--bs-danger); +} + .btn { --bs-btn-border-radius: .5rem; } @@ -67,7 +76,7 @@ } [data-bs-theme=light] .btn-primary { - --bs-btn-bg: var(--bs-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); @@ -93,17 +102,25 @@ padding: 7px 13px; } -.btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger,.btn-outline-danger):hover, .btn:not(.btn-primary, .btn-success, .btn-secondary, .btn-outline-warning, .btn-danger,.btn-outline-danger):focus { +.btn-outline-secondary { + --bs-btn-hover-border-color: var(--bs-basic-btn-hover-bg); + --bs-btn-hover-bg: var(--bs-basic-btn-hover-bg); + --bs-btn-active-bg: var(--bs-basic-btn-active-bg); + --bs-btn-hover-color: var(--bs-body-color); + --bs-btn-active-color: var(--bs-body-color); +} + +.btn-basic:hover, .btn-basic:focus { background-color: var(--bs-basic-btn-hover-bg); } -.btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger,.btn-outline-danger):active { +.btn-basic:active { background-color: var(--bs-basic-btn-active-bg); } -.card-footer .btn:not(.btn-primary, .btn-outline-warning, .btn-success, .btn-secondary, .btn-danger, .btn-outline-danger):hover, .card-footer .btn:not(.btn-primary, .btn-success, .btn-outline-warning, .btn-secondary, .btn-danger,.btn-outline-danger):focus { +.card-footer .btn-basic:hover, .card-footer .btn-basic:focus { background-color: var(--bs-basic-btn-hover-bg-strong) !important; color: var(--bs-body-color) !important; } -.card-footer .btn:not(.btn-primary, .btn-outline-warning, .btn-secondary, .btn-success, .btn-danger, .btn-outline-danger):active { +.card-footer .btn-basic:active { background-color: var(--bs-basic-btn-active-bg-strong) !important; } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { @@ -128,12 +145,12 @@ a:hover { [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: var(--bs-primary); + --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, black); } [data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .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%, white); + --bs-dropdown-link-hover-color: color-mix(in srgb, var(--bs-primary) 60%, white); } .dropdown-item.active, .dropdown-item:active { @@ -144,9 +161,15 @@ a:hover { padding: .5em; } .dropdown-toggle::after { - border-top: .275em solid; - border-right: .275em solid transparent; - border-left: .275em solid transparent; + content: '\f282'; + font-family: bootstrap-icons; + font-size: .75rem; + color: var(--bs-body-color); + font-weight: bold; + vertical-align: unset; + border-top: 0; + border-right: 0; + border-left: 0; } .dropdown-menu, .dropdown-item { border-radius: var(--bs-border-radius); @@ -230,3 +253,32 @@ a:hover { font-weight: bold; font-size: 1.5em; } + +.collapse { + transition: 0 !important; +} + +.icon-link > .bi { + height: revert; +} + +.clr-field button { + background-image: none !important; + border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; +} + +.nav-pills { + --bs-nav-link-padding-x: .6rem; + --bs-nav-link-padding-y: .2rem; + --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle); + --bs-nav-pills-link-active-color: var(--bs-dropdown-link-hover-color); +} + +.nav-pills .nav-link:not(.active):hover { + background-color: color-mix(in srgb, var(--bs-primary-bg-subtle) 80%, var(--bs-body-bg)); + color: var(--bs-link-color); +} + +.text-bg-primary { + background-color: var(--bs-primary) !important; +}