Aesthetic patch.

Author: Maikuolan

assets/bluemetal/frontend.css

@@ -10,28 +10,28 @@ body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-
 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}
 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,input[type=file]::file-selector-button,select,option,textarea{background-color:rgba(51,68,85,.8);border:none;color:#ccc;margin:2px;padding:2px;transition:all .3s ease-out}
 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:min(150px, 25%)}
+input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:min(150px,25%)}
 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=file]::file-selector-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}
 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)}
-select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1)}
+select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1.5)}
 .headbox,.footbox,.mainbox{display:flex;flex-direction:row;gap:auto;flex-basis:100%;justify-content:center;align-items:stretch}
 .mainbox{gap:24px}
 .start{text-align:{FE_Align};justify-self:start;flex-shrink:1;flex-grow:2}
 .end{text-align:{FE_Align_Reverse};justify-self:end;flex-shrink:2;flex-grow:1}
 .headbox{height:64px}
 .headbox>.start{flex-basis:80%}
-.headbox>.end{flex-basis:20%;border:0;border-left:1px solid #89b}
+.headbox>.end{flex-basis:20%;border:0;border-{FE_Align}:1px solid #89b}
 .footbox{letter-spacing:0;white-space:nowrap}
 .footbox>.start,.footbox>.end{flex-basis:50%}
 nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;font-size:calc((14px * {magnification}) + .03vw);flex-basis:20%;flex-shrink:2;flex-grow:1;letter-spacing:calc(1px + .03vw)}
@@ -48,7 +48,7 @@ textarea{width:calc(100% - 10px)}
 a:link,a:visited{color:#def}
 a:hover,a:active,a:focus,.txtRd{color:#fca}
 .spanner{text-align:{FE_Align_Reverse}}
-.headbox,.footbox,.cat,.exp,nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea{font-weight:700}
+.headbox,.footbox,.cat,.exp,nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea,.vrte,.vrto{font-weight:700}
 .ci,.co,.center{margin:auto}
 .ci,.co,.ng1:not(.quad .ng1,.duo .ng1,.col .ng1,nav .ng1),.ng2:not(.quad .ng2,.duo .ng2,.col .ng2,nav .ng2){width:calc(100% - 32px)}
 .ci{background-color:rgba(102,119,136,.5);text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
@@ -61,10 +61,10 @@ td.h1,td.h1f,td.h2,td.h2f,td.r,td.rf{width:25%}
 .h1,.h3,.spanner{background-color:rgba(102,119,136,.5)}
 .h2,.h4{background-color:rgba(85,102,119,.5)}
 td.h3,td.h3f,td.h4,td.h4f{width:50%}
-.ng1,.h1f,.h3f{background:linear-gradient({90deg},rgba(102,119,136,.5),#89a)}
-.ng2,.h2f,.h4f{background:linear-gradient({90deg},rgba(85,102,119,.5),#789)}
+.ng1,.h1f,.h3f{background:linear-gradient({90deg},rgba(102,119,136,.5),rgba(136,153,170,.5))}
+.ng2,.h2f,.h4f{background:linear-gradient({90deg},rgba(85,102,119,.5),rgba(119,136,153,.5))}
 .hFd:hover,.r{background-color:rgba(153,102,51,.6)}
-.rf{background:linear-gradient({90deg},rgba(153,102,51,.6),#c96)}
+.rf{background:linear-gradient({90deg},rgba(153,102,51,.6),rgba(204,153,102,.5))}
 .branchline{border-style:none none solid none;border-width:1px;border-color:#89b}
 .txtBl{color:#eee}
 .txtGn{color:#9c7}
@@ -74,7 +74,7 @@ td.h3,td.h3f,td.h4,td.h4f{width:50%}
 @media only all and (max-width:230px) {
   .ufts{width:calc(100% - 10px)}
 }
-@keyframes idxAn{0%{background:#603}100%{background:#ddd}}
+@keyframes idxAn{0%{filter:saturate(2) hue-rotate(90deg) brightness(3)}100%{filter:saturate(1) hue-rotate(0) brightness(1)}}
 @keyframes UplT{0%{opacity:0}100%{opacity:1}}
 .mob{display:none}
 input#logoutbutton{border-top-{FE_Align}-radius:0;border-bottom-{FE_Align}-radius:0;padding-{FE_Align}:18px;margin-{FE_Align}:-1px;background-position:top 1px {FE_Align} 4px,top 1px {FE_Align} 4px;background-image:url(data:image/png;base64,{Base64Encode}{Asset:lock_bl_o.png}{/Base64Encode}),url(data:image/png;base64,{Base64Encode}{Asset:lock_bl_c.png}{/Base64Encode})}
@@ -111,15 +111,13 @@ select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
 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}
-input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxitem input+strong{vertical-align:-2px;cursor:pointer}
+input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxitem input+strong{cursor:pointer}
 .gridHA:not(.gridVA,.gridVB,.gridboxstretch),.gridHB:not(.gridVA,.gridVB,.gridboxstretch){white-space:nowrap}
 .configMatrixLabel,.vrte,.gridboxcheckcell{text-align:center}
 .gridboxitem,.gridboxcheckcell{height:19px}
 .gridboxstretch{height:100%;white-space:normal}
 .configMatrixLabel{height:auto;line-height:19px;font-weight:700}
-.vrte,.vrto{vertical-align:-3px;font-weight:700}
-.gridboxcheckcell{vertical-align:middle;margin:0;padding:auto}
+.gridboxcheckcell{margin:0;padding:auto}
 .gridboxcheckcell>input[type=checkbox],.gridboxcheckcell>input[type=radio],.gridlabel>input[type=checkbox],.gridlabel>input[type=radio]{position:relative;top:1px}
 .gridlabel{display:block;height:100%;width:100%}
 .gridlabel:hover{background-color:rgba(255,255,255,.25);transition:all .2s ease-out;filter:brightness(1.25)}
@@ -174,3 +172,4 @@ input[type=hidden],script{display:none}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px;margin-{FE_Align_Reverse}:1px}
 .reverse{text-align:{FE_Align_Reverse}}
 .stickybox{position:sticky;top:2px}
+.gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}

assets/default/frontend.css

@@ -10,28 +10,28 @@ body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-
 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)}
 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,input[type=file]::file-selector-button,select,option,textarea{background-color:#ffe;border:1px solid #900;color:#033;margin:2px;padding:2px;transition:all .3s ease-out}
 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:min(150px, 25%)}
+input[type=submit]:not(.auto),input[type=button]:not(.auto){width:auto;min-width:min(150px,25%)}
 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=file]::file-selector-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}
 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)}
-select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1)}
+select:focus,textarea:focus,input:focus,select:hover,textarea:hover:not([readonly]),input:hover{filter:grayscale(0) brightness(1.02)}
 .headbox,.footbox,.mainbox{display:flex;flex-direction:row;gap:auto;flex-basis:100%;justify-content:center;align-items:stretch}
 .mainbox{gap:24px}
 .start{text-align:{FE_Align};justify-self:start;flex-shrink:1;flex-grow:2}
 .end{text-align:{FE_Align_Reverse};justify-self:end;flex-shrink:2;flex-grow:1}
 .headbox{height:64px}
 .headbox>.start{flex-basis:80%}
-.headbox>.end{flex-basis:20%;border:0;border-left:1px solid rgba(153,0,0,.6)}
+.headbox>.end{flex-basis:20%;border:0;border-{FE_Align}:1px solid rgba(153,0,0,.6)}
 .footbox{letter-spacing:0;white-space:nowrap}
 .footbox>.start,.footbox>.end{flex-basis:50%}
 nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;font-size:calc((14px * {magnification}) + .03vw);flex-basis:20%;flex-shrink:2;flex-grow:1;letter-spacing:calc(1px + .03vw)}
@@ -49,7 +49,7 @@ a:link,a:visited{color:#238}
 a:hover{color:#46f}
 a:active,a:focus{color:red}
 .spanner{text-align:{FE_Align_Reverse}}
-.headbox,.footbox,.cat,.exp,nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea{font-weight:700}
+.headbox,.footbox,.cat,.exp,nav,.s,.txtGn,.txtOe,.txtRd,.spanner,a,input,input[type=file]::file-selector-button,select,textarea,.vrte,.vrto{font-weight:700}
 .ci,.co,.center{margin:auto}
 .ci,.co,.ng1:not(.quad .ng1,.duo .ng1,.col .ng1,nav .ng1),.ng2:not(.quad .ng2,.duo .ng2,.col .ng2,nav .ng2){width:calc(100% - 32px)}
 .ci{background-color:#fff;border-style:solid;border-width:1px;border-color:#aaa;text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
@@ -115,15 +115,13 @@ select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
 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}
-input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxitem input+strong{vertical-align:-2px;cursor:pointer}
+input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxitem input+strong{cursor:pointer}
 .gridHA:not(.gridVA,.gridVB,.gridboxstretch),.gridHB:not(.gridVA,.gridVB,.gridboxstretch){white-space:nowrap}
 .configMatrixLabel,.vrte,.gridboxcheckcell{text-align:center}
 .gridboxitem,.gridboxcheckcell{height:19px}
 .gridboxstretch{height:100%;white-space:normal}
 .configMatrixLabel{height:auto;line-height:19px;font-weight:700}
-.vrte,.vrto{vertical-align:-3px;font-weight:700}
-.gridboxcheckcell{vertical-align:middle;margin:0;padding:auto}
+.gridboxcheckcell{margin:0;padding:auto}
 .gridboxcheckcell>input[type=checkbox],.gridboxcheckcell>input[type=radio],.gridlabel>input[type=checkbox],.gridlabel>input[type=radio]{position:relative;top:1px}
 .gridlabel{display:block;height:100%;width:100%}
 .gridlabel:hover{background-color:rgba(255,255,255,.25);transition:all .2s ease-out;filter:brightness(1.25)}
@@ -178,3 +176,4 @@ input[type=hidden],script{display:none}
 .col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px;margin-{FE_Align_Reverse}:1px}
 .reverse{text-align:{FE_Align_Reverse}}
 .stickybox{position:sticky;top:2px}
+.gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}