From 727133b6ed9953a8fd3ed2fbb33ba380a26a1fdd Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 6 Sep 2021 14:22:36 +0100 Subject: [PATCH] [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. --- public/assets/css/base.css | 68 ++++++++++++++-------------------- public/assets/css/reset.css | 9 ++++- public/assets/icons/drop.svg | 5 +-- public/assets/images/menu.png | Bin 5579 -> 0 bytes 4 files changed, 37 insertions(+), 45 deletions(-) delete mode 100644 public/assets/images/menu.png diff --git a/public/assets/css/base.css b/public/assets/css/base.css index c96db9dda5..16f442bdbe 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -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); } diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 19c9c96457..bc5a886e8d 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -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; diff --git a/public/assets/icons/drop.svg b/public/assets/icons/drop.svg index 561ef0427b..7d1262813b 100644 --- a/public/assets/icons/drop.svg +++ b/public/assets/icons/drop.svg @@ -1,6 +1,5 @@ @@ -51,7 +48,7 @@ drop diff --git a/public/assets/images/menu.png b/public/assets/images/menu.png deleted file mode 100644 index 692fee32d3cee9b44a1ae19de23fde5079e6889a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5579 zcmchbdsGwG+QxT4L`8}9Ml845QxEl0Fj^}Y5v_XEV+AiH0U>}!L5tjsArMH2QcJA? zYOP|Gi&jyY0fHh#fk3Ppv}n-c$W4++(CB~(iUX1WIeVZz{rCIU_pN3vR+v3|_I~%y zexKj_%#qFh>!wWla1sDu%7*o8wgO-U|Fr@W#>207NsmqNYhwKRU@idmx5z(Aeca_; zuyOW*wLu5A#YGCEf7eH~o5Qxv=Vsv}m@m2!sb)Gb`P*6l1VP7wg*8>@OuL9H zxKv3i*v>k8XObef?;N%pJC9}rQV~PV<2MxT&^(0_LZ(MZF>47d-vks2KeTH?zEtBFp!GK3oau*n_xY#U|;dK4KF+KvFRE}2a{r7O(= z{IgB-0axXLh)PZ0H%+kuxj%LzuE|hI8b~$Gp2D|O{AYsOdkF% zS7ojkZeQb;20Xb>uLz#!_MPc3Z<_Z2K4Mh&-?QAbh3BwXT|DxDrgI3`tvfzToM&qe zW&6JUJe>ki-bP{yN22j;{nl+EjJgkLW?6cEI0WwyMfeqt#Lwr^zuc;AwHf>0+KS8X zu@P3Imr?LbW|oijB7JITdmVkbF`i2Sc1du2$1K_YMyoPzhs7BavQA6_K{ui@>7r!m z%=+qay|=sutre|?-}0i~KUKXZe?dFc7?k`8h`s!_5lJO4vv| zq${hl!jjI+hI@7km4+>z3CgzW86KXA&tf9Mi`=>};qX?t_iLYq`tFguQFqv^Bb%w0 zYhwq$0*deR!hMY|ZPtZbUH?T`<1_(yqRV6S6YH>;fcF96t7#x&_CS%lX80;&sXld= z`kgJ%S6woQTJk7KL#Gb`(2(3|$mp<&ZymiDT*p;4O509z)#n87PFqtz!}XfVDBu#r zzNTIX6kpa}ue1}Nv49Bf^6N7IX!(5IB!%^pGu9yJ;qZ%GeH??&=1&6=^z&6o3zh*Z z#l2{B$-7mx4S=Inv1pa3V;u5;=hgcVFZw(gea8u85APwV8h5PD? zsDleW1998KXMu=0tW0{Ouo4XIAey@yU{@_x?OKT>wkZ}g&$0zU71_)>x%v4^8KrjL zAi0%cOO@C64m2FITBJ;hB9s+ttN`=X6Fe#_tc-Vmye0X@Xs0F0_eak=NI0@n+}c9H zyPd~?n32*&(=}#?#rI5JiPcG8EKUaEndTFmfRT!N*pl1lfW&PlPuz)8)Mc^qz2eG( z{?nApuY<*DL3_!AIHC)4vv~VcXq?mwf<$*4plHQ${8F~;ZPF5uNe>Gdems8~1uP)W z;jcK7kSy8F`~lDd&%_mz9B-g{(LmXU%UI#QO3!CUM_`U@uINLwZmedPor^%k(nzAj z&1bNA!=#nYH(a$xFf(-ye85}dr+iv;Cf z0C*bv&daz>eooM`f=pVN8c=FB4wN_5P9j$oi%FT;8e=U~4O0;B4o$agpjtPNZROcU z)48_Qx@iYvG0G*{dvD;MBYn>&p^W7+2*cQd(fTtR&L0a>ULa%Hml+Y1rq=_nEgo z?0q;%QR<~1MvNu-!E8Z`&RX&9sTj+hwB5wFbmh6)0{uffMQL9BgtQpmS^~rJn7oC+ zGh;}D&%~q>x>|;$7Z(Gk7*(tZL{5z6k>v&cfFr46cPfs~ z5X*a(2WVGeLi8wlbpP}@KwsJz*vxX3u6Wdc#3FYSa9sZ`bdAn)XS<~F|K!(sQ$F5~ZXErgP{bjVUg}j$38)4=UlD%iO>e&HvsTQP zmzuI5y8Qn@R|d;3+_&>UIslitj$>(vC{>csy~@@r9`bNSxv3Rb**aST&oUIflucie z^h4eN8>+4Y!y-4C(w(LP&(B?pM+lnkGjm5mI7u~GrPMF=`5)}UmekYgstWQd{du?G zSwUqlx~L%PM<1s26j#(PO7t!y<=z*S1ya3N!mJ@8iCns}vEVnQ+h^o*+eFKs-3st< z0A)L6*MtEIX~Di*(;?Ix`iByEgL7=G0kgXa)A{$mQylNG{)0MQDlGa%u3M_7CLs#O zn!~8umdC$)6Ns@CHt`c(`84`@J{f5s z=sTn6I@%^W?+W4*&AIs6l#=Tmb79Pms9UM`2cYb`5Y)qoQ=@x%SoSmAGEuVs2#9xY zMW8JG+I}B`*|LuC$ocm;u(0zaUXVo}+0Vauj9j#y5fHp?K8Pq(b)Pbuvuel1ueD9` zT?FEpNhZ~F5!yaWe5qv4WKbqaVPubSYv}iyS5%sE;72W=DSufh! zMrMj(SZ8$WDM@_d6%h&7@U|Z*ft|3BW~cEWNQn`xZj>;&@*|*FyuuT52Lh{RZ{`ki zzbec-WMC+P$R~D@58@rv5U8KQ@|`gWkU3^Eo>?89C34g@w28c@f_OtRM$_H31KBgg zuz*1{VH-)}#1@J0mo_2w`+EP;u$vqv+9&O$D?O`Yrz&|9(Q@ZwDD0o39ax17-g%xJ&{}I|eY*LHr*JGGS@hMm6x>N_FJK>(D5D z)IktmX)3{^{sfq)+$2TU!;X(N42`GK)8H#iQCpWqtCCl>drT5Mo?{EsM|TmQ$dSl$ z_ngt1yo;TF}iOt!pr_|otc%1zh!61vD|CeBvHg}5AH*+&k ze0?7`*V8P|1NolMe1XhSsA?=xZx-GgrP!OF@pdJxuB;%>fA9E+W}423G{7f;LLj^# zcq@X;ZnWCGRQW!M=)woF2X3uSASlzXsCJ*^jWWHb#z@{g#gV{`$O)eS6hFomi>{jx zx-y08eYe&?X=%vq8^Uj3cIeRn{&JwbURs*JOzHXBua;Clh-|4~74ZPe8$(zrL|9VC zjwwldY$BRf9yTLvA`|PNrlf+Fsj|R0q|}KMN_qkTrKN(qSGxh5i8Tj0l;S}k-hNPn zHJ~iR@{FjtOeV;x?DIe9A$6C!Z1cTPWt>(&Uc98m4dpZ9P&F*OmG2);vkkiddUli6 z<1DVm)?#xpwvX0hI?zt$-`ZkXu~i-g%K+kE@WlRoAI~TW&p8R6144nXfH58Ru>fu8 zfsMQlRb4k4T~BjmvrergtM(fF15Ah1GpR)`oAYG1N#_OO#>NVmELO9GzM}HK=#u7d z@hz(Pw7*r`DKQz|0ZLU3TAX77FXAdH=RO_*n?hh>W(9%vP%MfqRA8gNyjnh#|hA?>g(Yxb{vHqlO@iW|~A z?(c(hFVSRT&tdN6?>SGxt21|qqTRQ@9>=(<>VnaHg!D*m4{-8+?q~zME4xvtGv~gX zX$U5<#x!0wRQwtN6HnMp(-o$ac&ft(JXBu`Jjzd!IQ|1Z&&Zu~@dD zqBAiEw#6at;k=JQ#0N4a)sZuF=aF6966o=Uz9(Y{y~>blTgG@+TWM-5ghlYt>xF{5 zG+jrvT^0#7*C5|y=OQ3J;Vl&y9@#;9^-An}1rb17+cA>SgkZ9$CE(Vn>9mhmU>M9Ww~bPn_Cd~;6IGl z9<(ZnMA=%>bzK{CU1~%XJ_-|ueR-*lKpT1<2KawGKoY#UNKW*eKI^h*J0{hXk$ ztVRP$mf3-_A7reUOnPjoy6VLu$SrkffpD4@i=GUjr?cir_*j&kf)PELbZ2)5MUY{8 z30C(#c(;o|Ixr=zTrk+y2>{yv4Cg1-ISqfI$f+1U@Db2H?fagtjDk(`0Iau*!|G11 z2a5R}TZi90va8H$)gB&W7?j)U?65^7#0D?oZ$}|^AetznE5n`Sy)CoFh%qh&0l?Ed z{QDI*OWS!Mp^p>`UX60il!4p!Z%?S+2pD7;%V!RR?)Vf$RMhe$SM;t#3fl^r`YU+r zVDLvEwArl0mTpNoH;{nMf;L|ALY(U;+q=! zRG?ZTV>Y^ShPsLj@xP{ktfl%IRy%*@ik$^y`FOoZ&`;ByFt@(?DH0^Y;R4yr;l|+} zTlktL19f{n&=qc8NV=_VM2hBX61xF7$=^iuLVX#1=K~!d9V)~Y-ztH5l@h)k>}tZ& zF1yrmv(*QCx?RL_s2ZDnrKV%}k4?^0;91(t&_D_8ZgPHk4SFdry&N^7`PG<~1iq#81^^4qr%eB>}i?}+&cLmt@U1K1$`Ox&qZ@CPSKFmv>j7>+Q0xcis z*aGdY*b+5U{)^x_O?M0Re)!uY#iPXE6gic{(|?6FtjM6D#C