Rename root CSS names

This commit is contained in:
varjolintu 2020-03-22 11:43:12 +02:00
parent 4b5eb73e37
commit 7c9b73f271
8 changed files with 152 additions and 152 deletions

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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;
}
}

View file

@ -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": {

View file

@ -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);
}
}

View file

@ -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);
}
}

View file

@ -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;
}
}