Aesthetic patch.

Changelog excerpt: - Restyled file inputs.
phpMussel · Nov 19, 2023 · ad53c17 · ad53c17
1 parent c3fc2bf
commit ad53c17
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 56 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -163,3 +163,7 @@ __*Why "v3.0.0" instead of "v1.0.0?"*__ Prior to phpMussel v3, the "phpMussel Co
 [2023.09.16~18; Maikuolan]: Significantly refactored all L10N data.
 
 [2023.09~10; Maikuolan]: Added L10N for Afrikaans and Romanian.
+
+### v3.4.2
+
+[2023.11.19; Maikuolan]: Restyled file inputs.
diff --git a/assets/bluemetal/frontend.css b/assets/bluemetal/frontend.css
@@ -5,17 +5,18 @@ body{font-family:'Tahoma','Verdana','Arial';letter-spacing:1px;text-decoration:n
 code{background-color:rgba(85,85,85,.5);color:#eee;vertical-align:0;display:inline-block;height:calc(1em + 2px)}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:#89b}
 img.ico{width:16px;height:16px;border:0;filter:hue-rotate(180deg) brightness(.8)}
-input,select,option,textarea{background-color:#345;border:none;color:#ccc;margin:2px;padding:2px}
+input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
+input,input[type="file"]::file-selector-button,select,option,textarea{background-color:#345;border:none;color:#ccc;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
 input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:150px}
-input.auto,select.auto{width:auto;padding-left:10px;padding-right:10px}
+input.auto,input[type="file"]::file-selector-button,select.auto{width:auto;padding-left:10px;padding-right:10px}
 input[type=image]{width:inherit;border:inherit}
 input[type=password]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_key_blue.gif}{/Base64Encode})}
 input[type=text]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_blue.gif}{/Base64Encode})}
 input[type=text][pattern]:valid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_blue_valid.gif}{/Base64Encode})}
 input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_blue_invalid.gif}{/Base64Encode})}
 input{border-radius:0}
-input[type=button],input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
+input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
 select,option,input,textarea{filter:grayscale(.1) brightness(.94)}
 select:active,textarea:active:not([readonly]),input:active{filter:grayscale(0) brightness(1)}
 select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.5)}
@@ -29,7 +30,7 @@ a:link,a:visited{color:#def}
 a:hover,a:active,a:focus,.txtRd{color:#fca}
 .bNav,.gen,.spanner{text-align:{FE_Align_Reverse}}
 .bNav{height:64px}
-.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,select,textarea{font-weight:700}
+.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type="file"]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
 .ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
 .idx{width:calc(100% - 10px)}
@@ -81,7 +82,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .fW{word-break:break-all}
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
-li>span.comCat:first-child{cursor:pointer}
+li>span.comCat:first-child,input[type="file"]::file-selector-button{cursor:pointer}
 .comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
@@ -94,7 +95,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(91%) sepia(87%) saturate(611%) hue-rotate(-62deg) brightness(100%) contrast(109%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
-select,input[type=submit],input[type=reset],input[type=button],input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
+select,input[type=submit],input[type=reset],input[type=button],input[type="file"]::file-selector-button,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
 #pgrad{width:16px;height:16px;display:inline-block;border-radius:16px;filter:blur(2px)}
 td code~input,td code~select{vertical-align:middle}
 .trEase{transition:all .5s ease-out}

diff --git a/assets/default/folder.svg b/assets/default/folder.svg
diff --git a/assets/default/frontend.css b/assets/default/frontend.css
@@ -5,17 +5,18 @@ body{font-family:'Tahoma','Verdana','Arial';letter-spacing:1px;text-decoration:n
 code{vertical-align:0;display:inline-block;height:calc(1em + 2px)}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:rgba(153,0,0,.6)}
 img.ico{width:16px;height:16px;border:0}
-input,select,option,textarea{background-color:#ffe;border:1px solid #900;color:#033;margin:2px;padding:2px}
+input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
+input,input[type="file"]::file-selector-button,select,option,textarea{background-color:#ffe;border:1px solid #900;color:#033;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
 input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:150px}
-input.auto,select.auto{width:auto;padding-left:10px;padding-right:10px}
+input.auto,input[type="file"]::file-selector-button,select.auto{width:auto;padding-left:10px;padding-right:10px}
 input[type=image]{width:inherit;border:inherit}
 input[type=password]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_key_red.gif}{/Base64Encode})}
 input[type=text]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red.gif}{/Base64Encode})}
 input[type=text][pattern]:valid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red_valid.gif}{/Base64Encode})}
 input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red_invalid.gif}{/Base64Encode})}
 input{border-radius:0}
-input[type=button],input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
+input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
 select,option,input,textarea{filter:grayscale(.1) brightness(.94)}
 select:active,textarea:active:not([readonly]),input:active{filter:grayscale(0) brightness(1)}
 select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.5)}
@@ -30,7 +31,7 @@ a:hover{color:#46f}
 a:active,a:focus{color:red}
 .bNav,.gen,.spanner{text-align:{FE_Align_Reverse}}
 .bNav{height:64px}
-.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,select,textarea{font-weight:700}
+.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type="file"]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
 .ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
 .idx{width:calc(100% - 10px)}
@@ -85,7 +86,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .fW{word-break:break-all}
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
-li>span.comCat:first-child{cursor:pointer}
+li>span.comCat:first-child,input[type="file"]::file-selector-button{cursor:pointer}
 .comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
@@ -98,7 +99,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(33%) sepia(54%) saturate(1938%) hue-rotate(212deg) brightness(103%) contrast(108%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
-select,input[type=submit],input[type=reset],input[type=button],input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
+select,input[type=submit],input[type=reset],input[type=button],input[type="file"]::file-selector-button,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
 #pgrad{width:16px;height:16px;display:inline-block;border-radius:16px;filter:blur(2px)}
 td code~input,td code~select{vertical-align:middle}
 .trEase{transition:all .5s ease-out}
@@ -148,3 +149,4 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
 .txtGn::selection,.txtGn>*:not(.txtOe,.txtRd)::selection{color:#dfc}
 .txtOe::selection,.txtOe>*:not(.txtGn,.txtRd)::selection{color:#fec}
 .txtRd::selection,.txtRd>*:not(.txtGn,.txtOe)::selection{color:#fcc}
+input[type="file"]::file-selector-button{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:folder.svg}{/Base64Encode});padding-{FE_Align}:20px;background-repeat:no-repeat;background-position:top 1px {FE_Align} 4px}
diff --git a/assets/fullmoon/frontend.css b/assets/fullmoon/frontend.css
@@ -4,17 +4,18 @@ body,input,select,textarea{font-size:calc((12px * {magnification}) + .03vw);back
 body{font-family:'Tahoma','Verdana','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#36393b;color:#c5bc8e;background-image:url('?phpmussel-asset=moon.jpg&theme={theme}');background-attachment:fixed;background-position:center center}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:#aaa}
 img.ico{width:16px;height:16px;border:0}
-input,select,option,textarea{background-color:rgba(54,57,59,.7);border:1px solid #aaa;color:#c5bc8e;margin:2px;padding:2px}
+input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
+input,input[type="file"]::file-selector-button,select,option,textarea{background-color:rgba(54,57,59,.7);border:1px solid #aaa;color:#c5bc8e;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
 input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:150px}
-input.auto,select.auto{width:auto;padding-left:10px;padding-right:10px}
+input.auto,input[type="file"]::file-selector-button,select.auto{width:auto;padding-left:10px;padding-right:10px}
 input[type=image]{width:inherit;border:inherit}
 input[type=password]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_key_silver.gif}{/Base64Encode})}
 input[type=text]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_silver.gif}{/Base64Encode})}
 input[type=text][pattern]:valid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_silver_valid.gif}{/Base64Encode})}
 input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_silver_invalid.gif}{/Base64Encode})}
 input{border-radius:0}
-input[type=button],input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
+input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
 select,option,input,textarea{filter:grayscale(.1) brightness(.94)}
 select:active,textarea:active:not([readonly]),input:active{filter:grayscale(0) brightness(1)}
 select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.5)}
@@ -26,7 +27,7 @@ textarea.half{height:75px}
 textarea{width:calc(100% - 10px)}
 a:link,a:visited{color:#eee6ab}
 a:hover,a:active,a:focus{color:#fff7bc}
-.cat,.exp,.gen,.nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,select,textarea{font-weight:700}
+.cat,.exp,.gen,.nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type="file"]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
 .ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
 .idx{width:calc(100% - 10px)}
@@ -76,7 +77,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .fW{word-break:break-all}
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
-li>span.comCat:first-child{cursor:pointer}
+li>span.comCat:first-child,input[type="file"]::file-selector-button{cursor:pointer}
 .comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
@@ -87,7 +88,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
 @keyframes revRotate{0%{transform:rotate({45deg})}100%{transform:rotate(0)}}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
-select,input[type=submit],input[type=reset],input[type=button],input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
+select,input[type=submit],input[type=reset],input[type=button],input[type="file"]::file-selector-button,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
 #pgrad{width:16px;height:16px;display:inline-block;border-radius:16px;filter:blur(2px)}
 td code~input,td code~select{vertical-align:middle}
 .trEase{transition:all .5s ease-out}

diff --git a/assets/moss/frontend.css b/assets/moss/frontend.css
@@ -5,17 +5,18 @@ body{font-family:'Tahoma','Verdana','Arial';letter-spacing:1px;text-decoration:n
 code{vertical-align:0;display:inline-block;height:calc(1em + 2px)}
 hr{border-style:solid none none;border-width:1px;margin:5px 2px 0;padding:2px;color:#604848}
 img.ico{width:16px;height:16px;border:0;filter:hue-rotate(45deg) brightness(.9)}
-input,select,option,textarea{background-color:#d0ff70;border:1px solid #604848;color:#303c24;margin:2px;padding:2px}
+input[type=file]{margin:0;padding:0;border:none;background:none;width:auto}
+input,input[type="file"]::file-selector-button,select,option,textarea{background-color:#d0ff70;border:1px solid #604848;color:#303c24;margin:2px;padding:2px}
 input,select{width:150px;background-repeat:no-repeat;background-position:top {FE_Align_Reverse}}
 input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:150px}
-input.auto,select.auto{width:auto;padding-left:10px;padding-right:10px}
+input.auto,input[type="file"]::file-selector-button,select.auto{width:auto;padding-left:10px;padding-right:10px}
 input[type=image]{width:inherit;border:inherit}
 input[type=password]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_key_red.gif}{/Base64Encode})}
 input[type=text]{background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red.gif}{/Base64Encode})}
 input[type=text][pattern]:valid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red_valid.gif}{/Base64Encode})}
 input[type=text][pattern]:invalid:not(input[type=text]:placeholder-shown){background-image:url(data:image/gif;base64,{Base64Encode}{Asset:pip_{Text Direction}_red_invalid.gif}{/Base64Encode})}
 input{border-radius:0}
-input[type=button],input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
+input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset]{border-radius:18px;transition:all .3s ease-out}
 select,option,input,textarea{filter:grayscale(.1) brightness(.94)}
 select:active,textarea:active:not([readonly]),input:active{filter:grayscale(0) brightness(1)}
 select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.5)}
@@ -29,7 +30,7 @@ a:link,a:visited{color:#604848}
 a:hover,a:active,a:focus{color:#866}
 .bNav,.gen,.spanner{text-align:{FE_Align_Reverse}}
 .bNav{height:64px}
-.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,select,textarea{font-weight:700}
+.cat,.exp,.bNav,.gen,.nav,.s,.tip,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type="file"]::file-selector-button,select,textarea{font-weight:700}
 .ci,.co,.gen,.center{margin:auto}
 .ci,.co,.ng1,.ng2{width:calc(100% - 32px)}
 .idx{width:calc(100% - 10px)}
@@ -82,7 +83,7 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .fW{word-break:break-all}
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
-li>span.comCat:first-child{cursor:pointer}
+li>span.comCat:first-child,input[type="file"]::file-selector-button{cursor:pointer}
 .comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
@@ -95,7 +96,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(40%) sepia(6%) saturate(1564%) hue-rotate(-46deg) brightness(103%) contrast(87%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
-select,input[type=submit],input[type=reset],input[type=button],input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
+select,input[type=submit],input[type=reset],input[type=button],input[type="file"]::file-selector-button,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
 #pgrad{width:16px;height:16px;display:inline-block;border-radius:16px;filter:blur(2px)}
 td code~input,td code~select{vertical-align:middle}
 .trEase{transition:all .5s ease-out}
@@ -145,3 +146,4 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#b77}
 .txtGn::selection,.txtGn>*:not(.txtOe,.txtRd)::selection{color:#dfc}
 .txtOe::selection,.txtOe>*:not(.txtGn,.txtRd)::selection{color:#fec}
 .txtRd::selection,.txtRd>*:not(.txtGn,.txtOe)::selection{color:#fcc}
+input[type="file"]::file-selector-button{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:folder.svg}{/Base64Encode});padding-{FE_Align}:20px;background-repeat:no-repeat;background-position:top 1px {FE_Align} 4px}