diff --git a/Changelog.md b/Changelog.md index e517b2a..bbb69c5 100644 --- 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 index 3b170bb..bde257d 100644 --- 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 new file mode 100644 index 0000000..d1b27e0 --- /dev/null +++ b/assets/default/folder.svg @@ -0,0 +1 @@ + diff --git a/assets/default/frontend.css b/assets/default/frontend.css index 42c5641..82d5cc9 100644 --- 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 index e722849..5597d05 100644 --- 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 index 0dfcf03..e511a51 100644 --- 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} diff --git a/assets/primer/frontend.css b/assets/primer/frontend.css index 88fcd98..7e6724b 100644 --- a/assets/primer/frontend.css +++ b/assets/primer/frontend.css @@ -1,12 +1,13 @@ :root{color-scheme:light} *{vertical-align:text-top} body,input,select,textarea,code,.idx{font-size:calc((12px * {magnification}) + .03vw)} -body,input,select{font-family:BlinkMacSystemFont,"Segoe UI",Helvetica,'Arial',sans-serif;letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#f6f8fa;color:#24292e} +body,input,input[type="file"]::file-selector-button,select{font-family:BlinkMacSystemFont,"Segoe UI",Helvetica,'Arial',sans-serif;letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#f6f8fa;color:#24292e} code{background-color:rgba(164,128,102,.5);vertical-align:0;display:inline-block;height:calc(1em + 2px)} .branchline,hr{box-sizing:content-box;height:0;overflow:visible;height:0;margin:15px 0;overflow:hidden;background:0 0;border:0;border-bottom:1px solid #dadde1} .branchline,hr::after{display:table;clear:both;content:""} .branchline,hr::before{display:table;content:""} img.ico{width:16px;height:16px;border:0} +input[type=file]{margin:0;padding:0;border:none;background:none;width:auto} label{font-weight:600} table{table-layout:fixed} table,.spanner{width:100%} @@ -55,15 +56,15 @@ a:active,a:focus{color:#cb2431} @keyframes idxAn{0%{background:rgba(246,192,153,.5)}100%{background:rgba(164,128,102,.5)}} @keyframes UplT{0%{opacity:.0}100%{opacity:1.0}} .mob{display:none} -input,textarea{padding:0 8px 0 8px;font-weight:600;border-radius:6px} +input,textarea,input[type="file"]::file-selector-button{padding:0 8px 0 8px;font-weight:600;border-radius:6px} select,option{padding:0;font-weight:700;border-radius:0} -select,option,input:not([type=checkbox]):not([type=radio]),textarea{margin:2px;border-color:rgba(27,31,35,.4);border-style:solid;border-width:1px;box-shadow:0 1px 0 rgba(27,31,35,.04),inset 0 1px 0 rgba(255,255,255,.25);transition:background-color .2s cubic-bezier(.3,0,.5,1);filter:grayscale(.3) brightness(.9)} -select:active,textarea:active:not([readonly]),input:active{box-shadow:inset 0 1px 0 rgba(225,228,232,.2);filter:grayscale(0) brightness(1)} +select,option,input:not([type=checkbox]):not([type=radio]),textarea,input[type="file"]::file-selector-button{margin:2px;border-color:rgba(27,31,35,.4);border-style:solid;border-width:1px;box-shadow:0 1px 0 rgba(27,31,35,.04),inset 0 1px 0 rgba(255,255,255,.25);transition:background-color .2s cubic-bezier(.3,0,.5,1);filter:grayscale(.3) brightness(.9)} +select:active,textarea:active:not([readonly]),input:active,input[type="file"]::file-selector-button{box-shadow:inset 0 1px 0 rgba(225,228,232,.2);filter:grayscale(0) brightness(1)} select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.3)} -select:focus,textarea:focus,input:focus{outline:1px dotted transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(3,102,214,.3);filter:grayscale(0) brightness(1)} -select:hover,textarea:hover:not([readonly]),input:hover{text-decoration:none;filter:grayscale(0) brightness(1)} +select:focus,textarea:focus,input:focus,input[type="file"]::file-selector-button:focus{outline:1px dotted transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(3,102,214,.3);filter:grayscale(0) brightness(1)} +select:hover,textarea:hover:not([readonly]),input:hover,input[type="file"]::file-selector-button:hover{text-decoration:none;filter:grayscale(0) brightness(1)} select,option,textarea,input{color:#000;background-color:#fff} -input[type=button],input[type=submit]{color:#fff;background-color:#22863a} +input[type=button],input[type="file"]::file-selector-button,input[type=submit]{color:#fff;background-color:#22863a} input[type=reset]{color:#fff;background-color:#cb2431} input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,button:hover{transition:all .2s ease-out;filter:grayscale(0) brightness(1.2)} .h1f,.h2f,.h3f,.h4f,.rf{white-space:nowrap} @@ -79,7 +80,7 @@ input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,button .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} @@ -96,7 +97,7 @@ sub,sup{font-size:.7em;line-height:0;position:relative;vertical-align:baseline} .auto{width:auto;padding-left:8px;padding-right:8px} input:not([type=submit]):not([type=reset]):not([type=button]){border:none;height:20px} textarea{border:none} -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} @@ -150,3 +151,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{position:relative;top:-2px} diff --git a/assets/primerdark/frontend.css b/assets/primerdark/frontend.css index f453e39..65fb545 100644 --- a/assets/primerdark/frontend.css +++ b/assets/primerdark/frontend.css @@ -1,13 +1,14 @@ :root{color-scheme:dark} *{vertical-align:text-top} body,input,select,textarea,code,.idx{font-size:calc((12px * {magnification}) + .03vw)} -body,input,select{font-family:BlinkMacSystemFont,"Segoe UI",Helvetica,'Arial',sans-serif;letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;color:#e4e6eb} +body,input,input[type="file"]::file-selector-button,select{font-family:BlinkMacSystemFont,"Segoe UI",Helvetica,'Arial',sans-serif;letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;color:#e4e6eb} body{background-color:#18191a} code{background-color:rgba(255,153,102,.3);vertical-align:0;display:inline-block;height:calc(1em + 2px)} .branchline,hr{box-sizing:content-box;height:0;overflow:visible;height:0;margin:15px 0;overflow:hidden;background:0 0;border:0;border-bottom:1px solid #3a3b3c} .branchline,hr::after{display:table;clear:both;content:""} .branchline,hr::before{display:table;content:""} img.ico{width:16px;height:16px;border:0} +input[type=file]{margin:0;padding:0;border:none;background:none;width:auto} label{font-weight:600} table{table-layout:fixed} table,.spanner{width:100%} @@ -59,16 +60,16 @@ code.txtRd,code>.txtRd{color:#f77} input,textarea,select,option{background-color:#3a3b3c} input,textarea{padding:0 8px 0 8px;font-weight:600} select,option{padding:0;font-weight:700} -select,option,input:not([type=checkbox]):not([type=radio]),textarea{margin:2px;border-style:none;border-radius:6px} -input[type=button],input[type=submit],input[type=reset]{border-color:rgba(27,31,35,.4);border-style:solid;border-width:1px;box-shadow:0 1px 0 rgba(27,31,35,.04),inset 0 1px 0 rgba(255,255,255,.25);transition:background-color .2s cubic-bezier(.3,0,.5,1);filter:grayscale(.3) brightness(.9)} -select:active,textarea:active:not([readonly]),input:active{box-shadow:inset 0 1px 0 rgba(225,228,232,.2);filter:grayscale(0) brightness(1)} +select,option,input:not([type=checkbox]):not([type=radio]),textarea,input[type="file"]::file-selector-button{margin:2px;border-style:none;border-radius:6px} +input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset],input[type="file"]::file-selector-button{border-color:rgba(27,31,35,.4);border-style:solid;border-width:1px;box-shadow:0 1px 0 rgba(27,31,35,.04),inset 0 1px 0 rgba(255,255,255,.25);transition:background-color .2s cubic-bezier(.3,0,.5,1);filter:grayscale(.3) brightness(.9)} +select:active,textarea:active:not([readonly]),input:active,input[type="file"]::file-selector-button{box-shadow:inset 0 1px 0 rgba(225,228,232,.2);filter:grayscale(0) brightness(1)} select:disabled,textarea:disabled,input:disabled{filter:grayscale(1) brightness(.3)} -select:focus,textarea:focus,input:focus{outline:1px dotted transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(3,102,214,.3);filter:grayscale(0) brightness(1)} -select:hover,textarea:hover:not([readonly]),input:hover{text-decoration:none;filter:grayscale(0) brightness(1)} +select:focus,textarea:focus,input:focus,input[type="file"]::file-selector-button:focus{outline:1px dotted transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(3,102,214,.3);filter:grayscale(0) brightness(1)} +select:hover,textarea:hover:not([readonly]),input:hover,input[type="file"]::file-selector-button:hover{text-decoration:none;filter:grayscale(0) brightness(1)} select,option,textarea,input{color:#fff;background-color:#585960} -input[type=button],input[type=submit]{color:#fff;background-color:#595} +input[type=button],input[type="file"]::file-selector-button,input[type=submit]{color:#fff;background-color:#595} input[type=reset]{color:#fff;background-color:#955} -input[type=button],input[type=submit],input[type=reset],button{transition:all .2s ease-out} +input[type=button],input[type="file"]::file-selector-button,input[type=submit],input[type=reset],button{transition:all .2s ease-out} .h1f,.h2f,.h3f,.h4f,.rf{white-space:nowrap} @media only all and (max-width:968px) { .big,.dt{display:none} @@ -77,12 +78,12 @@ input[type=button],input[type=submit],input[type=reset],button{transition:all .2 .h1,.h1f,.h2,.h2f,.r,.rf{width:50%} .extend{width:100%} } -.hB{background-color:rgba(255,255,255.125)} +.hB{background-color:rgba(255,255,255,.125)} .hW{background-color:rgba(0,0,0,0,.125)} .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} @@ -99,7 +100,7 @@ sub,sup{font-size:.7em;line-height:0;position:relative;vertical-align:baseline} .auto{width:auto;padding-left:8px;padding-right:8px} input:not([type=submit]):not([type=reset]):not([type=button]){border:none;height:20px} textarea{border:none} -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} @@ -153,3 +154,4 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#eaa} .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{position:relative;top:-2px} diff --git a/assets/rbi/frontend.css b/assets/rbi/frontend.css index d18be51..ea3b427 100644 --- a/assets/rbi/frontend.css +++ b/assets/rbi/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(0,0,153,.2)} img.ico{width:16px;height:16px;border:0} -input,select,option,textarea{background-color:#eff;border:1px solid rgba(0,0,153,.2);color:#330;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:#eff;border:1px solid rgba(0,0,153,.2);color:#330;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:#f64} 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(43%) sepia(59%) saturate(1235%) hue-rotate(-30deg) brightness(115%) contrast(119%)} 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/slate/frontend.css b/assets/slate/frontend.css index 6457abf..21a2c64 100644 --- a/assets/slate/frontend.css +++ b/assets/slate/frontend.css @@ -5,18 +5,19 @@ body{font-family:sans-serif,'Tahoma','Verdana','Arial';letter-spacing:1px;text-d 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:#999} img.ico{width:16px;height:16px;border:0;filter:grayscale(60%) hue-rotate(45deg) brightness(.8)} -select,input,textarea{background:linear-gradient({45deg},rgba(47,47,47,1),rgba(255,255,255,.1));border:1px solid #999;color:#ccc;margin:2px;padding:2px;transition:all .3s ease-out} +input[type=file]{margin:0;padding:0;border:none;background:none;width:auto} +select,input,input[type="file"]::file-selector-button,textarea{background:linear-gradient({45deg},rgba(47,47,47,1),rgba(255,255,255,.1));border:1px solid #999;color:#ccc;margin:2px;padding:2px;transition:all .3s ease-out} option{background-color:#2f2f2f} 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,textarea,input{filter:brightness(.94)} select:active,textarea:active:not([readonly]),input:active{filter:brightness(1)} select:disabled,textarea:disabled,input:disabled{filter:brightness(.5)} @@ -30,7 +31,7 @@ a:link,a:visited{color:#f90} a:hover,a:active,a:focus{color:#fc6} .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)} @@ -83,7 +84,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} @@ -96,7 +97,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0} a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(77%) sepia(50%) saturate(469%) hue-rotate(-13deg) brightness(100%) contrast(102%)} 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} @@ -146,3 +147,4 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#fa7} .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}