diff --git a/CSS/themes/bitwarden/bitwarden-base.css b/CSS/themes/bitwarden/bitwarden-base.css index a62566af..beccbe1b 100644 --- a/CSS/themes/bitwarden/bitwarden-base.css +++ b/CSS/themes/bitwarden/bitwarden-base.css @@ -10,108 +10,180 @@ /* Made by @gilbN */ /* https://github.com/gilbN/theme.park */ +* { + outline: none; +} + img.logo { filter: invert(100); } -body.layout_frontend,body { + +body.layout_frontend, +body { background: var(--main-bg-color); color: var(--text); } + /* LINKS */ a { color: var(--link-color); } + a:hover { color: var(--link-color); opacity: .8; } + /* TEXT */ -.text-muted,.form-check-block .form-check-label > small,.modal-header small, .table { +.text-muted, +.form-check-block .form-check-label>small, +.modal-header small, +.table, +.text-body { color: var(--text) !important; opacity: .8; } + .table-hover tbody tr:hover { color: var(--text-hover); background-color: rgba(255, 255, 255, .08); } + h3 { - color:white !important; + color: white !important; } /* NAVBAR */ .navbar { background-color: rgb(0 0 0 / 25%) !important; } + /* CARDS */ .card { - background-color: rgba(255,255,255,0.07); + 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 { + +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); } -body > app-root > app-user-layout > app-tools > div > div > div.col-9 > app-password-generator > div.card.card-password.bg-light.my-4 { + +body>app-root>app-user-layout>app-tools>div>div>div.col-9>app-password-generator>div.card.card-password.bg-light.my-4 { background-color: rgb(0 0 0 / 15%) !important; } + .password-number { color: var(--accent-color); } + /* MODALS */ -.modal-content,.modal-footer { +.modal-content, +.modal-footer { background: var(--modal-bg-color); } -.close, .close:hover { + +.close, +.close:hover { color: #fff; } + .close:focus { outline: none; } +.swal2-popup { + background-color: var(--modal-bg-color); + color: var(--text); + border: transparent; +} + +.swal2-popup .swal2-title { + color: var(--text); +} + +.swal2-popup .swal2-content { + color: var(--text); +} + +.swal2-popup .swal2-actions { + background-color: var(--modal-bg-color); +} + +.btn-primary, +.swal2-popup .swal2-actions button.swal2-confirm { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); +} + +.btn-primary:hover, +.swal2-popup .swal2-actions button.swal2-confirm:hover { + color: var(--text-hover); + background-color: var(--button-color-hover); + border-color: var(--button-color-hover); +} + /* FORMS */ .form-control:focus { box-shadow: none; border-color: transparent; } + .form-control { color: var(--text); background-color: rgb(0 0 0 / 0.25); border: 1px solid transparent; } -.form-control:disabled, .form-control[readonly] { + +.form-control:disabled, +.form-control[readonly] { background-color: rgb(255 255 255 / 50%); opacity: 1; } + /* DROPDOWN MENU */ .dropdown-menu { background: var(--modal-bg-color); border: 1px solid transparent; box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); } -.dropdown-item,.dropdown-item-text { + +.dropdown-item, +.dropdown-item-text { color: var(--text); } -.dropdown-item:hover, .dropdown-item:focus { + +.dropdown-item:hover, +.dropdown-item:focus { color: var(--text-hover); text-decoration: none; background-color: rgb(255 255 255 / 0.08); } -a.text-danger:hover, a.text-danger:focus { + +a.text-danger:hover, +a.text-danger:focus { color: #dd4b39 !important; background-color: rgb(255 255 255 / 0.08) !important; } + .dropdown-menu .text-danger { font-weight: bold !important; background: rgb(0 0 0 / 20%) !important; } + /* SETTINGS */ .list-group-item.active { color: var(--text); background-color: rgb(255 255 255 / 10%); border-left: 3px solid var(--accent-color); } + .callout { background-color: rgb(255 255 255 / 15%); } @@ -120,57 +192,199 @@ a.text-danger:hover, a.text-danger:focus { background-color: rgb(0 0 0 / 25%); border: 1px solid rgb(255 255 255 / 8%); } + /* BUTTONS */ .btn-link { color: var(--button-color); } -.btn-link:hover { + +.btn-link:hover { color: var(--button-color); opacity: .8; transition: 0.15s; } + .btn-primary { background-color: var(--button-color); border-color: var(--button-color); } -.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active { + +.btn-primary:hover, +.btn-primary:not(:disabled):not(.disabled):active { background-color: var(--button-color); opacity: .8; transition: 0.15s; border-color: var(--button-color) } -.btn-primary:focus, .swal2-popup .swal2-actions button.swal2-confirm:focus, .btn-primary.focus, .swal2-popup .swal2-actions button.focus.swal2-confirm, -.btn-primary:not(:disabled):not(.disabled):active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus, .swal2-popup .swal2-actions .show > button.dropdown-toggle.swal2-confirm:focus{ + +.btn-primary:focus, +.swal2-popup .swal2-actions button.swal2-confirm:focus, +.btn-primary.focus, +.swal2-popup .swal2-actions button.focus.swal2-confirm, +.btn-primary:not(:disabled):not(.disabled):active:focus, +.swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, +.swal2-popup .swal2-actions button.swal2-confirm:not(:disabled):not(.disabled).active:focus, +.show>.btn-primary.dropdown-toggle:focus, +.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-confirm:focus { box-shadow: none; } -.btn[class*="btn-outline-"]:not(:hover), .swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) { + +.btn[class*="btn-outline-"]:not(:hover), +.swal2-popup .swal2-actions button[class*="btn-outline-"]:not(:hover) { border-color: var(--button-color); background-color: var(--button-color); color: var(--text-hover); } -.btn-outline-secondary:hover, .swal2-popup .swal2-actions button.swal2-cancel:hover { + +.btn-outline-secondary:hover, +.swal2-popup .swal2-actions button.swal2-cancel:hover { color: var(--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) { + +.btn-outline-secondary:hover:not(:disabled), +.swal2-popup .swal2-actions button.swal2-cancel:hover:not(:disabled) { color: var(--text-hover); } + .btn-outline-primary:hover { color: var(--text-hover); background-color: var(--button-color-hover); border-color: var(--button-color-hover); } -.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { + +.btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, +.show>.btn-outline-primary.dropdown-toggle { color: #fff; 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 { + +.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; } -.btn-outline-secondary:not(:disabled):not(.disabled):active, .swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .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 { + +.btn-outline-secondary:not(:disabled):not(.disabled):active, +.swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, +.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); background-color: var(--button-color-hover); border-color: var(--button-color-hover); +} + +.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, +.swal2-popup .swal2-actions button.swal2-cancel:not(:disabled):not(.disabled).active:focus, +.show>.btn-outline-secondary.dropdown-toggle:focus, +.swal2-popup .swal2-actions .show>button.dropdown-toggle.swal2-cancel:focus { + box-shadow: none; +} + +.btn-primary.disabled, +.swal2-popup .swal2-actions button.disabled.swal2-confirm, +.btn-primary:disabled, +.swal2-popup .swal2-actions button.swal2-confirm:disabled { + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); + opacity: .8; +} + +/* Org */ +.org-nav { + background-color: var(--main-bg-color); +} + +.org-nav .nav-tabs a { + color: var(--text); +} + +.org-nav .nav-tabs a.active { + border-top: 3px solid var(--accent-color); +} + +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { + color: var(--text); + background-color: rgb(255 255 255 / 25%); + 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 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 { + font-weight: bold; + color: var(--accent-color); +} + +/* PLACEHOLDER TEXT */ +::placeholder { + color: var(--text) !important; + opacity: .5; +} + +:-moz-placeholder { + color: var(--text) !important; + opacity: .5; +} + +:-ms-input-placeholder { + color: var(--text) !important; + opacity: .5; +} + +::-webkit-input-placeholder { + color: var(--text) !important; + opacity: .5; +} + +/* ADMIN PAGE */ + +.bg-light { + background: var(--main-bg-color) !important; +} + +.bg-light .navbar { + background-color: var(--main-bg-color) !important; +} + +/* Cards */ +.bg-secondary { + background-color: rgb(255 255 255 / 10%) !important; +} + +.bg-white { + background-color: rgba(255, 255, 255, 0.1) !important; +} + +/* Pagination */ + +.page-item.active .page-link { + z-index: 3; + color: #fff; + background-color: var(--button-color); + border-color: var(--button-color); +} + +.page-item.disabled .page-link { + color: var(--text); + pointer-events: none; + cursor: auto; + background-color: rgb(0 0 0 / 10%); + border-color: rgb(0 0 0 / 10%); } \ No newline at end of file