From 569a9d0a737838f23e0e4ea98927501feb8e07c4 Mon Sep 17 00:00:00 2001 From: Marius <24592972+gilbN@users.noreply.github.com> Date: Sun, 4 Jul 2021 19:27:45 +0200 Subject: [PATCH] =?UTF-8?q?bitwarden=20=F0=9F=A7=9B=20and=20varables=20upd?= =?UTF-8?q?ate?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CSS/themes/bitwarden/aquamarine.css | 12 +-- CSS/themes/bitwarden/bitwarden-base.css | 121 ++++++++++++++---------- CSS/themes/bitwarden/dark.css | 12 +-- CSS/themes/bitwarden/dracula.css | 16 ++++ CSS/themes/bitwarden/hotline.css | 12 +-- CSS/themes/bitwarden/organizr-dark.css | 12 +-- CSS/themes/bitwarden/plex.css | 12 +-- CSS/themes/bitwarden/space-gray.css | 12 +-- 8 files changed, 94 insertions(+), 115 deletions(-) create mode 100644 CSS/themes/bitwarden/dracula.css diff --git a/CSS/themes/bitwarden/aquamarine.css b/CSS/themes/bitwarden/aquamarine.css index 520dfc10..db8f3b83 100644 --- a/CSS/themes/bitwarden/aquamarine.css +++ b/CSS/themes/bitwarden/aquamarine.css @@ -13,14 +13,4 @@ /* BITWARDEN AQUAMARINE THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: #009688; - --button-color-hover: #12afa0; - --accent-color: #12afa0; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #12afa0; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/aquamarine.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/bitwarden-base.css b/CSS/themes/bitwarden/bitwarden-base.css index ad803a89..aa5b3da0 100644 --- a/CSS/themes/bitwarden/bitwarden-base.css +++ b/CSS/themes/bitwarden/bitwarden-base.css @@ -25,13 +25,21 @@ body { } /* LINKS */ -a { +a, +app-vault-groupings .card .card-body a, +app-org-vault-groupings .card .card-body a, +.groupings .card .card-body a { color: var(--link-color); } -a:hover { - color: var(--link-color); - opacity: .8; +a:hover, +app-vault-groupings .card li.active>a:first-of-type, +app-vault-groupings .card li.active>div a:first-of-type, +app-org-vault-groupings .card li.active>a:first-of-type, +app-org-vault-groupings .card li.active>div a:first-of-type, +.groupings .card li.active>a:first-of-type, +.groupings .card li.active>div a:first-of-type { + color: var(--link-color-hover) !important; } /* TEXT */ @@ -40,8 +48,7 @@ a:hover { .modal-header small, .table, .text-body { - color: var(--text) !important; - opacity: .8; + color: var(--text-muted) !important; } .table-hover tbody tr:hover { @@ -49,28 +56,29 @@ a:hover { background-color: rgba(255, 255, 255, .08); } -h3 { - color: white !important; +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,label,label:not(.form-check-label):not(.btn), label.bold +.card-header:first-child, +.card-header, .modal-header { + color: var(--text-hover) !important; } /* NAVBAR */ .navbar { background-color: rgb(0 0 0 / 25%) !important; } +.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { + color: rgb(var(--accent-color)); +} /* CARDS */ .card { background-color: rgba(255, 255, 255, 0.07); } -app-vault-groupings .card .card-body a { - color: var(--text); -} - app-vault-groupings .card li.active>a:first-of-type, app-vault-groupings .card li.active>div a:first-of-type, app-vault-groupings .card li.active>div>.fa { - color: var(--accent-color); + color: rgb(var(--accent-color)); } body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4 { @@ -78,7 +86,7 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator } .password-number { - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* MODALS */ @@ -143,7 +151,7 @@ body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator .form-control:disabled, .form-control[readonly] { - background-color: rgb(255 255 255 / 50%); + background-color: rgb(255 255 255 / 25%); opacity: 1; } @@ -181,7 +189,7 @@ a.text-danger:focus { .list-group-item.active { color: var(--text); background-color: rgb(255 255 255 / 10%); - border-left: 3px solid var(--accent-color); + border-left: 3px solid rgb(var(--accent-color)); } .callout { @@ -196,25 +204,27 @@ a.text-danger:focus { /* BUTTONS */ .btn-link { color: var(--button-color); + color: var(--button-text); } .btn-link:hover { - color: var(--button-color); - opacity: .8; + color: var(--button-color-hover); + color: var(--button-text-hover); transition: 0.15s; } .btn-primary { background-color: var(--button-color); border-color: var(--button-color); + color: var(--button-text); } .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active { - background-color: var(--button-color); - opacity: .8; + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); + color: var(--button-text-hover); transition: 0.15s; - border-color: var(--button-color) } .btn-primary:focus, @@ -231,26 +241,27 @@ a.text-danger:focus { } .btn[class*="btn-outline-"]:not(:hover), -.swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) { +.swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover), +.swal2-popup .swal2-actions button.swal2-cancel { border-color: var(--button-color); background-color: var(--button-color); - color: var(--text-hover); + color: var(--button-text); } .btn-outline-secondary:hover, .swal2-popup .swal2-actions button.swal2-cancel:hover { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } .btn-outline-secondary:hover:not(:disabled), .swal2-popup .swal2-actions button.swal2-cancel:hover:not(:disabled) { - color: var(--text-hover); + color: var(--button-text-hover); } .btn-outline-primary:hover { - color: var(--text-hover); + color: var(--button-text-hover) !important; background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -258,15 +269,20 @@ a.text-danger:focus { .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, -.show>.btn-outline-primary.dropdown-toggle:focus { - box-shadow: none; +.show>.btn-outline-primary.dropdown-toggle:focus, +.btn-outline-secondary:focus, +.swal2-popup .swal2-actions button.swal2-cancel:focus, +.btn-outline-secondary.focus, +.swal2-popup .swal2-actions button.focus.swal2-cancel, +.btn-outline-primary:focus, .btn-outline-primary.focus { + box-shadow: 0 0 0 0.2rem rgb(var(--accent-color),.5); } .btn-outline-secondary:not(:disabled):not(.disabled):active, @@ -275,7 +291,7 @@ a.text-danger:focus { .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled).active, .show>.btn-outline-secondary.dropdown-toggle, .swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-cancel { - color: var(--text-hover); + color: var(--button-text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } @@ -293,7 +309,7 @@ a.text-danger:focus { .swal2-popup .swal2-actions button.disabled.swal2-confirm, .btn-primary:disabled, .swal2-popup .swal2-actions button.swal2-confirm:disabled { - color: #fff; + color: var(--button-text-hover); background-color: var(--button-color); border-color: var(--button-color); opacity: .8; @@ -309,7 +325,7 @@ a.text-danger:focus { } .org-nav .nav-tabs a.active { - border-top: 3px solid var(--accent-color); + border-top: 3px solid rgb(var(--accent-color)); } .nav-tabs .nav-link.active, @@ -319,10 +335,6 @@ a.text-danger:focus { border-color: transparent; } -app-vault-groupings .card .card-body a, -app-org-vault-groupings .card .card-body a { - color: var(--text); -} app-vault-groupings .card .card-body a:hover.text-muted { color: #fff !important; opacity: 1 !important; @@ -332,28 +344,39 @@ app-vault-groupings .card li.active>div a:first-of-type, app-org-vault-groupings .card li.active>a:first-of-type, app-org-vault-groupings .card li.active>div a:first-of-type { font-weight: bold; - color: var(--accent-color); + color: rgb(var(--accent-color)); } /* PLACEHOLDER TEXT */ -::placeholder { - color: var(--text) !important; - opacity: .5; +input::-webkit-input-placeholder { + color: var(--text); +} +input:focus::-webkit-input-placeholder { + color: #000; } -:-moz-placeholder { - color: var(--text) !important; - opacity: .5; +/* Firefox < 19 */ +input:-moz-placeholder { + color: var(--text); +} +input:focus:-moz-placeholder { + color: #000; } -:-ms-input-placeholder { - color: var(--text) !important; - opacity: .5; +/* Firefox > 19 */ +input::-moz-placeholder { + color: var(--text); +} +input:focus::-moz-placeholder { + color: #000; } -::-webkit-input-placeholder { - color: var(--text) !important; - opacity: .5; +/* Internet Explorer 10 */ +input:-ms-input-placeholder { + color: var(--text); +} +input:focus:-ms-input-placeholder { + color: #000; } /* ADMIN PAGE */ diff --git a/CSS/themes/bitwarden/dark.css b/CSS/themes/bitwarden/dark.css index f3bca1c7..45ba38f1 100644 --- a/CSS/themes/bitwarden/dark.css +++ b/CSS/themes/bitwarden/dark.css @@ -13,14 +13,4 @@ /* BITWARDEN DARK THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(circle , #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #fff; - --accent-color-hover: rgba(255, 255, 255, 0.45); - --text: #eee; - --text-hover: #fff; - --link-hover: rgba(255, 255, 255, 0.45); -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/dark.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/dracula.css b/CSS/themes/bitwarden/dracula.css new file mode 100644 index 00000000..32a2f3cd --- /dev/null +++ b/CSS/themes/bitwarden/dracula.css @@ -0,0 +1,16 @@ + +/* dP dP dP */ +/* 88 88 88 */ +/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ +/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ +/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ +/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ +/* 88 */ +/* dP */ + +/* Made by @gilbN */ +/* https://github.com/gilbN/theme.park */ + +/* BITWARDEN DRACULA THEME */ +@import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); +@import url(https://theme-park.dev/CSS/variables/dracula.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/hotline.css b/CSS/themes/bitwarden/hotline.css index ab65903a..092befbb 100644 --- a/CSS/themes/bitwarden/hotline.css +++ b/CSS/themes/bitwarden/hotline.css @@ -13,14 +13,4 @@ /* BITWARDEN HOTLINE THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient(ellipse at top, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; - --button-color: hsla(0,0%,100%,.15); - --button-color-hover: hsla(0,0%,100%,.30); - --accent-color: #F44336; - --accent-color-hover: #0b3161; - --text: #eee; - --text-hover: #fff; - --link-hover: #F44336; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/hotline.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/organizr-dark.css b/CSS/themes/bitwarden/organizr-dark.css index 8b5891ee..8bb152c7 100644 --- a/CSS/themes/bitwarden/organizr-dark.css +++ b/CSS/themes/bitwarden/organizr-dark.css @@ -13,14 +13,4 @@ /* BITWARDEN ORGANIZR-DARK THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: #1f1f1f; - --modal-bg-color: #1b1b1b; - --button-color: #2cabe3; - --button-color-hover: rgb(44 171 227 / .8); - --accent-color:#2cabe3; - --accent-color-hover: #fff; - --text: #eee; - --text-hover: #fff; - --link-color: #2cabe3; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/organizr-dark.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/plex.css b/CSS/themes/bitwarden/plex.css index 90a451d0..a1f207fc 100644 --- a/CSS/themes/bitwarden/plex.css +++ b/CSS/themes/bitwarden/plex.css @@ -13,14 +13,4 @@ /* BITWARDEN PLEX THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; - --modal-bg-color: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-dark2.png") center center/cover no-repeat fixed; - --button-color: #cc7b19; - --button-color-hover: #e59029; - --accent-color: #e5a00d; - --accent-color-hover: #ffc107; - --text: #eee; - --text-hover: #fff; - --link-color:#fff; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/plex.css); \ No newline at end of file diff --git a/CSS/themes/bitwarden/space-gray.css b/CSS/themes/bitwarden/space-gray.css index f5b4b7af..2ac5dd59 100644 --- a/CSS/themes/bitwarden/space-gray.css +++ b/CSS/themes/bitwarden/space-gray.css @@ -13,14 +13,4 @@ /* BITWARDEN SPACE GRAY THEME */ @import url(https://theme-park.dev/CSS/themes/bitwarden/bitwarden-base.css); -:root { - --main-bg-color: radial-gradient( ellipse at center, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --modal-bg-color: radial-gradient( ellipse at top, rgba(87,108,117,1) 0%, rgba(37,50,55,1) 100.2% ) center center/cover no-repeat fixed; - --button-color: #607D8B; - --button-color-hover: #81a6b7; - --accent-color: #81a6b7; - --accent-color-hover: #81a6b7; - --text: #eee; - --text-hover: #fff; - --link-color: #81a6b7; -} \ No newline at end of file +@import url(https://theme-park.dev/CSS/variables/space-gray.css); \ No newline at end of file