diff --git a/keepassxc-browser/css/autocomplete.css b/keepassxc-browser/css/autocomplete.css index f81d13b..a532e1e 100644 --- a/keepassxc-browser/css/autocomplete.css +++ b/keepassxc-browser/css/autocomplete.css @@ -5,11 +5,11 @@ .kpxcAutocomplete-items div { padding: 5px; cursor: pointer; - background-color: var(--background-color); + background-color: var(--kpxc-background-color); border: 1px solid rgba(0,0,0,.125) !important; border-top-width: 0px !important; width: auto; - color: var(--text-color); + color: var(--kpxc-text-color); font-size: .9em !important; } @@ -35,14 +35,14 @@ @media (prefers-color-scheme: dark) { .kpxcAutocomplete-items { - background: var(--background-color); - color: var(--text-color); + background: var(--kpxc-background-color); + color: var(--kpxc-text-color); } .kpxc-pwgen-input { - background-color: var(--input-background-color) !important; - border: var(--input-border); - border-color: var(--input-border-color); - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + border: var(--kpxc-input-border); + border-color: var(--kpxc-input-border-color); + color: var(--kpxc-text-color) !important; } } diff --git a/keepassxc-browser/css/banner.css b/keepassxc-browser/css/banner.css index 301e23a..647df09 100644 --- a/keepassxc-browser/css/banner.css +++ b/keepassxc-browser/css/banner.css @@ -1,11 +1,11 @@ div.kpxc-banner { animation-duration: 0.2s; animation-name: slidein; - background-color: var(--background-color); + background-color: var(--kpxc-background-color); border-bottom: 1px solid #38383d !important; box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important; box-sizing: border-box !important; - color: var(--text-color) !important; + color: var(--kpxc-text-color) !important; font-size: 1em !important; height: auto !important; left: 0px !important; @@ -88,9 +88,9 @@ div.kpxc-banner-dialog { width: 680px; max-height: 600px; max-width: 460px; - background-color: var(--background-color); - color: var(--text-color); - border: var(--container-border); + background-color: var(--kpxc-background-color); + color: var(--kpxc-text-color); + border: var(--kpxc-container-border); border-radius: 0 0 4px 4px; box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); padding: 8px; @@ -113,10 +113,10 @@ div.kpxc-banner-dialog .list-group { } div.kpxc-banner-dialog .list-group-item { - background-color: var(--input-background-color) !important; + background-color: var(--kpxc-input-background-color) !important; border: 1px solid rgba(0,0,0,.125) !important; border-bottom: 0px !important; - color: var(--text-color) !important; + color: var(--kpxc-text-color) !important; display: block !important; padding: 7px 14px; position: relative !important; @@ -138,22 +138,22 @@ div.kpxc-banner-dialog .list-group-item:last-child { div.kpxc-banner-dialog .list-group-item:hover { cursor: pointer !important; - background-color: var(--table-hover-color) !important; + background-color: var(--kpxc-table-hover-color) !important; } @media (prefers-color-scheme: dark) { div.kpxc-banner, div.kpxc-banner-dialog { - background-color: var(--input-background-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + color: var(--kpxc-text-color) !important; } div.kpxc-banner-dialog .list-group-item:hover { - background-color: var(--table-hover-color) !important; + background-color: var(--kpxc-table-hover-color) !important; color: #000; } div.kpxc-banner-dialog .list-group-item { - background-color: var(--input-background-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + color: var(--kpxc-text-color) !important; } } diff --git a/keepassxc-browser/css/colors.css b/keepassxc-browser/css/colors.css index 190065b..c22dcf7 100644 --- a/keepassxc-browser/css/colors.css +++ b/keepassxc-browser/css/colors.css @@ -1,79 +1,79 @@ :root { - --background-color: #fff; - --card-background-color: #fff; - --card-border-color: rgba(0,0,0,.125); - --card-header-color: #fafafa; - --container-border: 1px solid #ccc; - --input-active-border-color: #2b4d1a; - --input-background-color: #fff; - --input-border: 1px solid #2b4d1a; - --input-border-color: #292a2a; - --input-main-border-color: rgba(0,0,0,.125); - --link-color: #3a8233; - --link-hover-color: #429f14; - --sidebar-background-color: #27272a; - --table-border-color: rgb(222, 226, 230); - --table-hover-color: #f2f2f2; - --table-odd-color: #f2f2f2; - --text-color: #000; + --kpxc-background-color: #fff; + --kpxc-card-background-color: #fff; + --kpxc-card-border-color: rgba(0,0,0,.125); + --kpxc-card-header-color: #fafafa; + --kpxc-container-border: 1px solid #ccc; + --kpxc-input-active-border-color: #2b4d1a; + --kpxc-input-background-color: #fff; + --kpxc-input-border: 1px solid #2b4d1a; + --kpxc-input-border-color: #292a2a; + --kpxc-input-main-border-color: rgba(0,0,0,.125); + --kpxc-link-color: #3a8233; + --kpxc-link-hover-color: #429f14; + --kpxc-sidebar-background-color: #27272a; + --kpxc-table-border-color: rgb(222, 226, 230); + --kpxc-table-hover-color: #f2f2f2; + --kpxc-table-odd-color: #f2f2f2; + --kpxc-text-color: #000; } @media (prefers-color-scheme: dark) { :root { - --background-color: #3b3b3d; - --card-background-color: #2b2a2a; - --card-border-color: #292a2a; - --card-header-color: #27272a; - --container-border: 1px solid #000; - --input-active-border-color: #2b4d1a; - --input-background-color: #27272a; - --input-border: 1px solid #2b4d1a; - --input-border-color: #292a2a; - --input-main-border-color: #3b3d3c; - --link-color: #6cac4d; - --link-hover-color: #429f14; - --table-border-color: #a0a0a0; - --table-hover-color: #474948; - --table-odd-color: #3b3d3c; - --text-color: #cbcfcb; + --kpxc-background-color: #3b3b3d; + --kpxc-card-background-color: #2b2a2a; + --kpxc-card-border-color: #292a2a; + --kpxc-card-header-color: #27272a; + --kpxc-container-border: 1px solid #000; + --kpxc-input-active-border-color: #2b4d1a; + --kpxc-input-background-color: #27272a; + --kpxc-input-border: 1px solid #2b4d1a; + --kpxc-input-border-color: #292a2a; + --kpxc-input-main-border-color: #3b3d3c; + --kpxc-link-color: #6cac4d; + --kpxc-link-hover-color: #429f14; + --kpxc-table-border-color: #a0a0a0; + --kpxc-table-hover-color: #474948; + --kpxc-table-odd-color: #3b3d3c; + --kpxc-text-color: #cbcfcb; } } /* Same colors for manual switching */ [data-color-theme='dark'] { - --background-color: #3b3b3d; - --card-background-color: #2b2a2a; - --card-border-color: #292a2a; - --card-header-color: #27272a; - --container-border: 1px solid #000; - --input-active-border-color: #2b4d1a; - --input-background-color: #27272a; - --input-border: 1px solid #2b4d1a; - --input-border-color: #292a2a; - --input-main-border-color: #3b3d3c; - --link-color: #6cac4d; - --link-hover-color: #429f14; - --table-border-color: #a0a0a0; - --table-hover-color: #474948; - --table-odd-color: #3b3b3d; - --text-color: #cbcfcb; + --kpxc-background-color: #3b3b3d; + --kpxc-card-background-color: #2b2a2a; + --kpxc-card-border-color: #292a2a; + --kpxc-card-header-color: #27272a; + --kpxc-container-border: 1px solid #000; + --kpxc-input-active-border-color: #2b4d1a; + --kpxc-input-background-color: #27272a; + --kpxc-input-border: 1px solid #2b4d1a; + --kpxc-input-border-color: #292a2a; + --kpxc-input-main-border-color: #3b3d3c; + --kpxc-link-color: #6cac4d; + --kpxc-link-hover-color: #429f14; + --kpxc-table-border-color: #a0a0a0; + --kpxc-table-hover-color: #474948; + --kpxc-table-odd-color: #3b3b3d; + --kpxc-text-color: #cbcfcb; } [data-color-theme='light'] { - --background-color: #fff; - --card-background-color: #fff; - --card-border-color: rgba(0,0,0,.125); - --card-header-color: #fafafa; - --container-border: 1px solid #ccc; - --input-active-border-color: #2b4d1a; - --input-background-color: #fff; - --input-border: 1px solid #2b4d1a; - --input-border-color: #292a2a; - --input-main-border-color: rgba(0,0,0,.125); - --link-color: #3a8233; - --link-hover-color: #429f14; - --table-border-color: rgb(222, 226, 230); - --table-hover-color: #f2f2f2; - --table-odd-color: #f2f2f2; - --text-color: #000; + --kpxc-background-color: #fff; + --kpxc-card-background-color: #fff; + --kpxc-card-border-color: rgba(0,0,0,.125); + --kpxc-card-header-color: #fafafa; + --kpxc-container-border: 1px solid #ccc; + --kpxc-input-active-border-color: #2b4d1a; + --kpxc-input-background-color: #fff; + --kpxc-input-border: 1px solid #2b4d1a; + --kpxc-input-border-color: #292a2a; + --kpxc-input-main-border-color: rgba(0,0,0,.125); + --kpxc-link-color: #3a8233; + --kpxc-link-hover-color: #429f14; + --kpxc-table-border-color: rgb(222, 226, 230); + --kpxc-table-hover-color: #f2f2f2; + --kpxc-table-odd-color: #f2f2f2; + --kpxc-text-color: #000; } diff --git a/keepassxc-browser/css/pwgen.css b/keepassxc-browser/css/pwgen.css index 92d2bb6..6b46d04 100644 --- a/keepassxc-browser/css/pwgen.css +++ b/keepassxc-browser/css/pwgen.css @@ -1,9 +1,9 @@ .kpxc-pwgen-dialog { - background-color: var(--background-color); + background-color: var(--kpxc-background-color); border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); - color: var(--text-color); + color: var(--kpxc-text-color); font-family: 'Lato', sans-serif !important; min-height: 80px; padding: .1em .2em .1em .2em; @@ -57,7 +57,7 @@ .kpxc-pwgen-input { background: none !important; border-radius: 4px !important; - color: var(--text-color) !important; + color: var(--kpxc-text-color) !important; font-size: 12px !important; font-weight: normal !important; height: auto !important; @@ -66,7 +66,7 @@ } .kpxc #kpxc-pwgen-error { - color: var(--text-color); + color: var(--kpxc-text-color); font-size: 12px !important; font-style: normal !important; font-weight: normal !important; @@ -91,18 +91,18 @@ @media (prefers-color-scheme: dark) { .kpxc-pwgen-dialog { - background: var(--background-color) !important; - color: var(--text-color) !important; + background: var(--kpxc-background-color) !important; + color: var(--kpxc-text-color) !important; } .kpxc-pwgen-input { - background-color: var(--input-background-color) !important; - border: var(--input-border); - border-color: var(--input-border-color); - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + border: var(--kpxc-input-border); + border-color: var(--kpxc-input-border-color); + color: var(--kpxc-text-color) !important; } .kpxc #kpxc-pwgen-error { - color: var(--text-color) !important; + color: var(--kpxc-text-color) !important; } } diff --git a/keepassxc-browser/manifest.json b/keepassxc-browser/manifest.json index fe2afed..cace091 100755 --- a/keepassxc-browser/manifest.json +++ b/keepassxc-browser/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 2, "name": "KeePassXC-Browser", - "version": "1.6.0", - "version_name": "1.6.0", + "version": "1.6.1", + "version_name": "1.6.1", "description": "__MSG_extensionDescription__", "author": "KeePassXC Team", "icons": { diff --git a/keepassxc-browser/options/options.css b/keepassxc-browser/options/options.css index 5982523..a6aba82 100644 --- a/keepassxc-browser/options/options.css +++ b/keepassxc-browser/options/options.css @@ -82,52 +82,52 @@ h1, @media (prefers-color-scheme: dark), (prefers-color-scheme: light) { a { - color: var(--link-color); + color: var(--kpxc-link-color); } a:hover { - color: var(--link-hover-color); + color: var(--kpxc-link-hover-color); } body, pre { - background-color: var(--background-color); - color: var(--text-color); + background-color: var(--kpxc-background-color); + color: var(--kpxc-text-color); } main { - background: var(--background-color); + background: var(--kpxc-background-color); } #sidebar, .sidebar { - background-color: var(--sidebar-background-color) !important; + background-color: var(--kpxc-sidebar-background-color) !important; } input, input[type="checkbox"] { - background-color: var(--background-color) !important; - border-color: var(--input-main-border-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-background-color) !important; + border-color: var(--kpxc-input-main-border-color) !important; + color: var(--kpxc-text-color) !important; } input:active { - border-color: var(--input-active-border-color); + border-color: var(--kpxc-input-active-border-color); } .modal-content { - background: var(--background-color); - color: var(--text-color); + background: var(--kpxc-background-color); + color: var(--kpxc-text-color); } select { - background-color: var(--input-background-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + color: var(--kpxc-text-color) !important; } select option { - background-color: var(--input-background-color); - color: var(--text-color); + background-color: var(--kpxc-input-background-color); + color: var(--kpxc-text-color); } .table, @@ -136,46 +136,46 @@ h1, tr, th, td { - border-color: var(--table-border-color) !important; + border-color: var(--kpxc-table-border-color) !important; } .table > caption { - color: var(--text-color); + color: var(--kpxc-text-color); } .table > thead, tbody { - color: var(--text-color); + color: var(--kpxc-text-color); } .table-striped > tbody > tr:nth-of-type(odd) { - background-color: var(--table-odd-color); + background-color: var(--kpxc-table-odd-color); } .close { - color: var(--text-color); + color: var(--kpxc-text-color); } .card { - background-color: var(--card-background-color); - border-color: var(--card-border-color); + background-color: var(--kpxc-card-background-color); + border-color: var(--kpxc-card-border-color); } .card-header { - background-color: var(--card-header-color); - color: var(--text-color); + background-color: var(--kpxc-card-header-color); + color: var(--kpxc-text-color); } .card-body { - background-color: var(--card-background-color); - color: var(--text-color); + background-color: var(--kpxc-card-background-color); + color: var(--kpxc-text-color); } .invalid-feedback code { - color: var(--link-hover-color) !important; + color: var(--kpxc-link-hover-color) !important; } .invalid-feedback { - color: var(--link-color); + color: var(--kpxc-link-color); } } diff --git a/keepassxc-browser/options/shortcuts.css b/keepassxc-browser/options/shortcuts.css index 889ba71..0613180 100644 --- a/keepassxc-browser/options/shortcuts.css +++ b/keepassxc-browser/options/shortcuts.css @@ -7,8 +7,8 @@ body { margin: 0 auto; width: 680px; max-height: 315px; - background-color: var(--background-color); - border: var(--container-border); + background-color: var(--kpxc-background-color); + border: var(--kpxc-container-border); border-radius: 4px; box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2); } @@ -59,23 +59,23 @@ body { } body { - background: var(--input-background-color) !important; - color: var(--text-color); + background: var(--kpxc-input-background-color) !important; + color: var(--kpxc-text-color); } input { - background-color: var(--input-background-color); - border: var(--input-border); - border-color: var(--input-border-color); + background-color: var(--kpxc-input-background-color); + border: var(--kpxc-input-border); + border-color: var(--kpxc-input-border-color); } input:active { - border-color: var(--input-active-border-color); + border-color: var(--kpxc-input-active-border-color); } .conf-container { - background: var(--background-color); - border: var(--container-border); - color: var(--text-color); + background: var(--kpxc-background-color); + border: var(--kpxc-container-border); + color: var(--kpxc-text-color); } } diff --git a/keepassxc-browser/popups/popup.css b/keepassxc-browser/popups/popup.css index fe915ff..af8f57e 100644 --- a/keepassxc-browser/popups/popup.css +++ b/keepassxc-browser/popups/popup.css @@ -1,8 +1,8 @@ body { font-family: sans-serif; overflow-x: hidden; - background-color: var(--background-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-background-color) !important; + color: var(--kpxc-text-color) !important; font-size: 14px !important; padding: 8px; min-width: 440px; @@ -119,31 +119,31 @@ code { @media (prefers-color-scheme: dark), (prefers-color-scheme: light) { body { - background: var(--background-color) !important; - color: var(--text-color) !important; + background: var(--kpxc-background-color) !important; + color: var(--kpxc-text-color) !important; } input, input[type="checkbox"] { - background-color: var(--input-background-color) !important; - border: var(--input-border); - border-color: var(--input-border-color); + background-color: var(--kpxc-input-background-color) !important; + border: var(--kpxc-input-border); + border-color: var(--kpxc-input-border-color); } .list-group-item { - background-color: var(--input-background-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-input-background-color) !important; + color: var(--kpxc-text-color) !important; } .list-group-item:hover { - background-color: var(--table-hover-color) !important; + background-color: var(--kpxc-table-hover-color) !important; } span.bg-success { - background-color: var(--table-hover-color) !important; - color: var(--text-color) !important; + background-color: var(--kpxc-table-hover-color) !important; + color: var(--kpxc-text-color) !important; } #login-filter { - color: var(--text-color) !important; + color: var(--kpxc-text-color) !important; } }