Aesthetic patch.

Author: Maikuolan

assets/bluemetal/frontend.css

@@ -83,15 +83,15 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;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}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:center;position:relative;top:2px;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.caret-down::before{animation:forRotate .3s ease-in 1;animation-fill-mode:both}
+.caret-up::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
-@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
-.navicon,a.showlink[onclick]::before,a.shownlink[onclick]::before,a.unshownlink[onclick]::before{display:inline-block;filter:invert(85%) saturate(1074%) hue-rotate(-154deg) brightness(100%) contrast(87%);position:relative;top:1px;width:16px;height:16px}
+@keyframes forRotate{0%{{caretTransformBefore} invert(90%) sepia(8%) saturate(574%) hue-rotate(174deg) brightness(98%) contrast(90%)}100%{{caretTransformAfter} invert(90%) sepia(8%) saturate(574%) hue-rotate(174deg) brightness(98%) contrast(90%)}}
+@keyframes revRotate{0%{{caretTransformAfter} invert(90%) sepia(8%) saturate(574%) hue-rotate(174deg) brightness(98%) contrast(90%)}100%{{caretTransformBefore} invert(90%) sepia(8%) saturate(574%) hue-rotate(174deg) brightness(98%) contrast(90%)}}
+.navicon{display:inline-block;background-repeat:no-repeat;filter:invert(85%) saturate(1074%) hue-rotate(-154deg) brightness(100%) contrast(87%);position:relative;top:1px;width:16px;height:16px}
 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}
@@ -122,9 +122,8 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(127,191,251,.35),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:#fca;background:linear-gradient({90deg},rgba(0,128,192,0) 0,rgba(0,128,192,.8) 20% 80%,rgba(0,128,192,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
-.shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
-.unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
+.shownlink::before{animation:forRotate .5s ease-in 1;animation-fill-mode:both}
+.unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 .subNav{text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(204,221,238,.6);text-shadow:2px 2px 1px rgba(255,255,255,.2)}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#fca}
 input[type=button].reset:hover,input[type=button].reset:active{color:#ffc}
@@ -148,6 +147,7 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#ffc}
 .txtRd::selection,.txtRd>*:not(.txtGn,.txtOe)::selection{color:#fcc}
 .flexrow{display:flex}
 .flexin{margin-{FE_Align}:-1px;margin-{FE_Align_Reverse}:1px;width:auto;flex-grow:1}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{filter:invert(90%) sepia(8%) saturate(574%) hue-rotate(174deg) brightness(98%) contrast(90%)}
 .navSoftCnr{border-radius:0 12px 0 0}
 .capitalize{text-transform:capitalize}
 input[type=checkbox],input[type=radio]{accent-color:#89b}

assets/default/frontend.css

@@ -87,15 +87,15 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;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}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:center;position:relative;top:2px;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.caret-down::before{animation:forRotate .3s ease-in 1;animation-fill-mode:both}
+.caret-up::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
-@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
-.navicon,a.showlink[onclick]::before,a.shownlink[onclick]::before,a.unshownlink[onclick]::before{display:inline-block;filter:invert(12%) sepia(91%) saturate(1979%) hue-rotate(222deg) brightness(107%) contrast(94%);position:relative;top:1px;width:16px;height:16px}
+@keyframes forRotate{0%{{caretTransformBefore} invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}100%{{caretTransformAfter} invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}}
+@keyframes revRotate{0%{{caretTransformAfter} invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}100%{{caretTransformBefore} invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}}
+.navicon{display:inline-block;background-repeat:no-repeat;filter:invert(12%) sepia(91%) saturate(1979%) hue-rotate(222deg) brightness(107%) contrast(94%);position:relative;top:1px;width:16px;height:16px}
 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}
@@ -126,9 +126,8 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(251,191,127,.7),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:red;background:linear-gradient({90deg},rgba(255,192,0,0) 0,rgba(255,192,0,.8) 20% 80%,rgba(255,192,0,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
-.shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
-.unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
+.shownlink::before{animation:forRotate .5s ease-in 1;animation-fill-mode:both}
+.unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 .subNav{text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(0,51,51,.6);text-shadow:2px 2px 1px rgba(0,0,0,.2)}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:red}
 input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
@@ -153,6 +152,7 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#f88}
 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}
 .flexrow{display:flex}
 .flexin{margin-{FE_Align}:-1px;margin-{FE_Align_Reverse}:1px;width:auto;flex-grow:1}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{filter:invert(14%) sepia(55%) saturate(1277%) hue-rotate(142deg) brightness(94%) contrast(101%)}
 .navSoftCnr{border-radius:0 12px 0 0}
 .capitalize{text-transform:capitalize}
 input[type=checkbox],input[type=radio]{accent-color:#900}

assets/fullmoon/frontend.css

@@ -78,14 +78,14 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;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}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:center;position:relative;top:2px;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.caret-down::before{animation:forRotate .3s ease-in 1;animation-fill-mode:both}
+.caret-up::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
-@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
+@keyframes forRotate{0%{{caretTransformBefore} invert(79%) sepia(28%) saturate(328%) hue-rotate(13deg) brightness(90%) contrast(89%)}100%{{caretTransformAfter} invert(79%) sepia(28%) saturate(328%) hue-rotate(13deg) brightness(90%) contrast(89%)}}
+@keyframes revRotate{0%{{caretTransformAfter} invert(79%) sepia(28%) saturate(328%) hue-rotate(13deg) brightness(90%) contrast(89%)}100%{{caretTransformBefore} invert(79%) sepia(28%) saturate(328%) hue-rotate(13deg) brightness(90%) contrast(89%)}}
 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=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}
@@ -115,9 +115,8 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(251,191,127,.35),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:#e7ab7d;background:linear-gradient({90deg},rgba(128,92,0,0) 0,rgba(128,92,0,.8) 20% 80%,rgba(128,92,0,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
-.shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
-.unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
+.shownlink::before{animation:forRotate .5s ease-in 1;animation-fill-mode:both}
+.unshownlink::before{animation:revRotate .5s linear 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#e7ab7d}
 input[type=button].reset:hover,input[type=button].reset:active{color:#fcefcf}
 .tablend{margin-top:-2px}
@@ -128,5 +127,6 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#fcefcf}
 .txtRd::selection,.txtRd>*:not(.txtGn,.txtOe)::selection{color:#fcc}
 .flexrow{display:flex}
 .flexin{margin-{FE_Align}:-1px;margin-{FE_Align_Reverse}:1px;width:auto;flex-grow:1}
+.comCat::before,.showlink::before,.shownlink::before,.unshownlink::before{display:inline-block;background-repeat:no-repeat;filter:invert(79%) sepia(28%) saturate(328%) hue-rotate(13deg) brightness(90%) contrast(89%);position:relative;top:1px;width:16px;height:16px}
 .capitalize{text-transform:capitalize}
 input[type=checkbox],input[type=radio]{accent-color:#cca}