[IMAGES][CSS] Dropdown image added for use in select boxes background. Fixed select box background color from being the one used by the system, dark theme inconsistencies found.

This commit is contained in:
Eliseu Amaro 2021-09-06 14:22:36 +01:00 committed by Hugo Sales
parent e6449bfe96
commit 727133b6ed
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
4 changed files with 37 additions and 45 deletions

View File

@ -351,6 +351,9 @@ summary:focus {
.section-form {
padding: var(--unit-size);
}
.form-group {
margin-bottom: var(--unit-size);
}
.help-text {
font-style: italic;
@ -387,34 +390,24 @@ label {
font-weight: bold;
}
button {
font-size: var(--small-size) !important;
font-family: var(--main-font) !important;
font-weight: bold !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important;
border: solid 2px var(--bg2) !important;
border-radius: var(--unit-size);
}
select,
button,
textarea,
input[type=text],
input[type=password],
input[type=email] {
input {
font-size: inherit !important;
display: block;
position: relative;
color: var(--white);
padding: 5px 10px 5px 10px;
padding: 5px 10px;
border: 2px solid var(--bg2);
border-radius: var(--unit-size);
background-color: var(--translucent);
}
textarea:hover,
textarea:focus {
border-color: var(--bg3) !important;
button {
font-weight: bold !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important;
}
input[type=radio] {
@ -422,11 +415,6 @@ input[type=radio] {
background-color: var(--bg1) !important;
}
input:hover,
input:focus {
border-color: var(--bg3) !important;
}
input[type=radio]:checked {
background-color: var(--white) !important;
}
@ -442,11 +430,6 @@ input[type=checkbox] {
mask-image: url("../icons/check-off.svg") !important;
}
input[type=checkbox]:hover,
input[type=checkbox]:focus {
background-color: var(--bg3) !important;
}
input[type=checkbox]:checked {
background-color: var(--bg3) !important;
-webkit-mask-image: url("../icons/check-on.svg") !important;
@ -455,14 +438,19 @@ input[type=checkbox]:checked {
mask-image: url("../icons/check-on.svg") !important;
}
textarea:hover,
textarea:focus,
button:hover,
button:focus,
input:hover,
input:focus {
border-color: var(--bg3) !important;
border: solid 2px var(--bg3) !important;
color: var(--white) !important;
}
input[type=checkbox]:hover,
input[type=checkbox]:focus {
background-color: var(--bg3) !important;
}
:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
@ -479,11 +467,6 @@ input[type=file] {
border-radius: var(--unit-size);
}
input[type=file]:focus,
input[type=file]:hover {
border: solid 2px var(--bg3) !important;
}
/* button part of file selector */
::file-selector-button {
font-family: var(--main-font) !important;
@ -492,11 +475,16 @@ input[type=file]:hover {
}
select {
font-family: var(--main-font) !important;
font-size: var(--small-size);
font-weight: normal !important;
background: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white);
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("../images/drop.png") !important;
background-repeat: no-repeat;
background-size: 16px;
background-color: var(--bg1) !important;
background-position: center right 5px;
color: var(--white) !important;
border: 2px solid var(--bg2);
border-radius: var(--unit-size);
}

View File

@ -138,6 +138,14 @@ input {
all: unset;
padding: 5px 10px;
}
button,
select,
input:not([type=text]) {
cursor: pointer !important;
}
input:not([type=button], [type=color], [type=checkbox], [type=radio]) {
cursor: auto !important;
}
/*noinspection CssInvalidPseudoSelector*/
*|*::-moz-button-content {
@ -146,7 +154,6 @@ input {
input[type=checkbox] {
all: unset;
cursor: pointer !important;
display: inline-block;
width: 1em;

View File

@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
class="{{ iconClass|default('') }}"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@ -12,8 +11,6 @@
sodipodi:docname="drop.svg"
id="svg6"
viewBox="0 0 32 32"
height="32"
width="32"
version="1.1">
<metadata
id="metadata12">
@ -51,7 +48,7 @@
<title
id="title2">drop</title>
<path
style="fill:#f6f6f6;fill-opacity:1"
style="fill-opacity:1"
id="path4"
d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z" />
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB