mirror of
https://github.com/keepassxreboot/keepassxc-browser.git
synced 2026-03-11 08:54:43 +00:00
Try to simplify the options CSS
This commit is contained in:
varjolintu
parent
ce48830d88
commit
f8dab77bf2
3 changed files with 126 additions and 124 deletions
|
|
@ -1,12 +1,39 @@
|
|||
body {
|
||||
background-color: var(--kpxc-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
font-size: 14px;
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--kpxc-link-color);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--kpxc-link-hover-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--kpxc-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
main {
|
||||
background: var(--kpxc-background-color);
|
||||
}
|
||||
|
||||
input,
|
||||
input[type="checkbox"] {
|
||||
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(--kpxc-input-active-border-color);
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
|
@ -19,6 +46,38 @@ footer {
|
|||
bottom: 1rem;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: var(--kpxc-input-background-color) !important;
|
||||
color: var(--kpxc-text-color) !important;
|
||||
}
|
||||
|
||||
select option {
|
||||
background-color: var(--kpxc-input-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table,
|
||||
tbody,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-color: var(--kpxc-table-border-color) !important;
|
||||
}
|
||||
|
||||
.table > caption {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table > thead,
|
||||
tbody {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: var(--kpxc-table-odd-color);
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -33,11 +92,39 @@ table td:last-of-type {
|
|||
width: 1px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--kpxc-card-background-color);
|
||||
border-color: var(--kpxc-card-border-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--kpxc-card-header-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: var(--kpxc-card-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: var(--kpxc-link-color);
|
||||
}
|
||||
|
||||
.invalid-feedback code {
|
||||
color: var(--kpxc-link-hover-color) !important;
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: var(--kpxc-sidebar-background-color) !important;
|
||||
height: 50px;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
|
|
@ -49,6 +136,10 @@ table td:last-of-type {
|
|||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: var(--kpxc-sidebar-background-color) !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
.nav-item,
|
||||
.sidebar-heading {
|
||||
|
|
@ -68,6 +159,11 @@ h1,
|
|||
font-size: 95% !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--kpxc-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
height: auto;
|
||||
|
|
@ -79,103 +175,3 @@ h1,
|
|||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
|
||||
a {
|
||||
color: var(--kpxc-link-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--kpxc-link-hover-color);
|
||||
}
|
||||
|
||||
body,
|
||||
pre {
|
||||
background-color: var(--kpxc-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
main {
|
||||
background: var(--kpxc-background-color);
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
.sidebar {
|
||||
background-color: var(--kpxc-sidebar-background-color) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
input[type="checkbox"] {
|
||||
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(--kpxc-input-active-border-color);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--kpxc-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: var(--kpxc-input-background-color) !important;
|
||||
color: var(--kpxc-text-color) !important;
|
||||
}
|
||||
|
||||
select option {
|
||||
background-color: var(--kpxc-input-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table,
|
||||
tbody,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-color: var(--kpxc-table-border-color) !important;
|
||||
}
|
||||
|
||||
.table > caption {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table > thead,
|
||||
tbody {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: var(--kpxc-table-odd-color);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--kpxc-card-background-color);
|
||||
border-color: var(--kpxc-card-border-color);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--kpxc-card-header-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: var(--kpxc-card-background-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.invalid-feedback code {
|
||||
color: var(--kpxc-link-hover-color) !important;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: var(--kpxc-link-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
body {
|
||||
background: var(--kpxc-input-background-color) !important;
|
||||
color: var(--kpxc-text-color);
|
||||
font-size: .875rem;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--kpxc-input-background-color);
|
||||
border: var(--kpxc-input-border);
|
||||
border-color: var(--kpxc-input-border-color);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
input:active {
|
||||
border-color: var(--kpxc-input-active-border-color);
|
||||
}
|
||||
|
||||
.conf-container {
|
||||
margin: 0 auto;
|
||||
width: 680px;
|
||||
|
|
@ -11,6 +24,7 @@ body {
|
|||
border: var(--kpxc-container-border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
.conf-container .conf-title {
|
||||
|
|
@ -57,25 +71,4 @@ body {
|
|||
.bg-danger {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--kpxc-input-background-color) !important;
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: var(--kpxc-input-background-color);
|
||||
border: var(--kpxc-input-border);
|
||||
border-color: var(--kpxc-input-border-color);
|
||||
}
|
||||
|
||||
input:active {
|
||||
border-color: var(--kpxc-input-active-border-color);
|
||||
}
|
||||
|
||||
.conf-container {
|
||||
background: var(--kpxc-background-color);
|
||||
border: var(--kpxc-container-border);
|
||||
color: var(--kpxc-text-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,22 @@
|
|||
const tempArray = [];
|
||||
let keyArray = [];
|
||||
|
||||
document.querySelectorAll('input').forEach((b) => {
|
||||
b.addEventListener('keydown', e => handleKeyDown(e));
|
||||
b.addEventListener('keyup', e => handleKeyUp(e));
|
||||
$(async function() {
|
||||
try {
|
||||
const settings = await browser.runtime.sendMessage({ action: 'load_settings' });
|
||||
if (settings['colorTheme'] === undefined) {
|
||||
document.body.removeAttribute('data-color-theme');
|
||||
} else {
|
||||
document.body.setAttribute('data-color-theme', settings['colorTheme']);
|
||||
}
|
||||
|
||||
document.querySelectorAll('input').forEach((b) => {
|
||||
b.addEventListener('keydown', e => handleKeyDown(e));
|
||||
b.addEventListener('keyup', e => handleKeyUp(e));
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Error loading options page: ' + err);
|
||||
}
|
||||
});
|
||||
|
||||
const saveButtons = document.querySelectorAll('.btn-primary');
|
||||
|
|
|
|||
Loading…
Reference in a new issue