improve dark mode for credential add/edit

Signed-off-by: binsky <timo@binsky.org>
This commit is contained in:
binsky 2023-01-03 20:47:52 +01:00
parent 9162e5a298
commit ed84f457a2
4 changed files with 36 additions and 43 deletions

View file

@ -217,16 +217,10 @@
.pw-gen input {
width: calc(100% - 76px) !important;
float: left;
background: #fff;
color: #555;
cursor: text;
font-family: inherit;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
margin: 3px 3px 3px 0;
padding: 7px 6px 5px;
font-size: 13px;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
@ -241,8 +235,7 @@
padding: 5px;
display: inline-block;
font-size: 14px;
border: 1px solid #ddd;
background-color: #eaeaea;
border: 1px solid var(--color-border-maxcontrast);
cursor: pointer; }
.pw-gen .generate_pw .cell:hover {
color: #0066ff; }
@ -696,7 +689,7 @@
#app-content #app-content-wrapper .tags {
float: right; }
#app-content #app-content-wrapper .tags .tag {
background-color: rgba(240, 240, 240, 0.9);
background-color: var(--color-placeholder-dark);
padding: 4px;
font-size: 12px;
margin-right: 3px;
@ -777,7 +770,14 @@
padding: 4px;
font-size: 11px; }
#app-content #app-content-wrapper .edit_credential tags-input .tags {
width: 100%; }
width: 100%;
background-color: var(--color-main-background);
border: 2px solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
box-shadow: unset; }
#app-content #app-content-wrapper .edit_credential tags-input .tags .input {
background-color: var(--color-background-darker);
font-size: var(--default-font-size); }
#app-content #app-content-wrapper .edit_credential .credential_textarea {
width: 100%;
height: 100px; }
@ -907,7 +907,7 @@
margin-bottom: 15px;
float: none; }
#app-content #app-content-wrapper .app_sidebar .credential-data .tags .tag {
background-color: rgba(240, 240, 240, 0.9);
background-color: var(--color-placeholder-dark);
padding: 4px;
margin-right: 3px; }
@ -981,7 +981,7 @@
.inputfile + label {
font-size: 1.25em;
background-color: rgba(240, 240, 240, 0.9);
background-color: var(--color-background-darker);
margin-top: 4px;
padding: 5px;
margin-right: 4px;
@ -989,7 +989,7 @@
.inputfile:focus + label,
.inputfile + label:hover {
background-color: #c9c9c9; }
background-color: var(--color-background-dark); }
.inputfile + label {
cursor: pointer;
@ -1004,16 +1004,11 @@
display: flex; }
.icon-label input {
float: left;
background: #fff;
color: #555;
cursor: text;
font-family: inherit;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
margin: 3px 0 3px 0;
padding: 7px 6px 5px;
font-size: 13px;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
@ -1023,11 +1018,11 @@
float: left;
margin-top: 3px; }
.icon-label .icon-picker .cell {
height: 32px;
height: 92%;
padding: 7px 12px 2px 12px;
font-size: 14px;
border: 1px solid #ddd;
background-color: #eaeaea;
border: 2px solid var(--color-border-maxcontrast);
background-color: var(--color-background-dark);
cursor: pointer;
-webkit-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;

File diff suppressed because one or more lines are too long

View file

@ -287,7 +287,7 @@
.tags {
float: right;
.tag {
background-color: rgba(240, 240, 240, .9);
background-color: var(--color-placeholder-dark);
padding: 4px;
font-size: 12px;
margin-right: 3px;
@ -398,7 +398,17 @@
tags-input {
.tags {
width: 100%;
background-color: var(--color-main-background);
border: 2px solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
box-shadow: unset;
.input {
background-color: var(--color-background-darker);
font-size: var(--default-font-size);
}
.tag-item {
}
}
}
@ -579,7 +589,7 @@
margin-bottom: 15px;
float: none;
.tag {
background-color: rgba(240, 240, 240, .9);
background-color: var(--color-placeholder-dark);
padding: 4px;
margin-right: 3px;
}
@ -678,7 +688,7 @@
.inputfile + label {
font-size: 1.25em;
background-color: rgba(240, 240, 240, .9);
background-color: var(--color-background-darker);
margin-top: 4px;
padding: 5px;
margin-right: 4px;
@ -687,7 +697,7 @@
.inputfile:focus + label,
.inputfile + label:hover {
background-color: #c9c9c9;
background-color: var(--color-background-dark);
}
.inputfile + label {
@ -707,27 +717,22 @@
//width: 100% !important;
//width: inherit !important;
float: left;
background: #fff;
color: #555;
cursor: text;
font-family: inherit;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
margin: 3px 0 3px 0;
padding: 7px 6px 5px;
font-size: 13px;
@include border-left-radius(0)
}
.icon-picker {
float: left;
margin-top: 3px;
.cell {
height: 32px;
height: 92%;
padding: 7px 12px 2px 12px;
font-size: 14px;
border: 1px solid #ddd;
background-color: lighten(#ddd, 5%);
border: 2px solid var(--color-border-maxcontrast);
background-color: var(--color-background-dark);
cursor: pointer;
@include border-left-radius(6px);
}

View file

@ -25,16 +25,10 @@
input{
width: calc(100% - 76px) !important;
float: left;
background: #fff;
color: #555;
cursor: text;
font-family: inherit;
border: 1px solid #ddd;
outline: none;
border-radius: 3px;
margin: 3px 3px 3px 0;
padding: 7px 6px 5px;
font-size: 13px;
@include border-right-radius(0)
}
.generate_pw{
@ -46,8 +40,7 @@
padding: 5px;
display: inline-block;
font-size: 14px;
border: 1px solid #ddd;
background-color: lighten(#ddd, 5%);
border: 1px solid var(--color-border-maxcontrast);
cursor: pointer;
}
.cell:hover{
@ -57,4 +50,4 @@
@include border-right-radius(3px);
}
}
}
}