Slightly rework front-end themes.

Author: Maikuolan

Changelog.md

@@ -209,3 +209,7 @@ __*Why "v3.0.0" instead of "v1.0.0?"*__ Prior to phpMussel v3, the "phpMussel Co
 - [2025.07.08]: Added the ability to route all outbound requests through a proxy, and two new configuration directives, `request_proxy` and `request_proxyauth`.
 - [2025.08.01]: Slightly improved the navigation SVGs.
 - [2025.08.08]: Added the ability to change the "mode" of the configured theme, thus enabling any singular theme to have some slight variation in its potential presentation. Two new configuration directives have been added to facilitate this (look for `theme_mode` under `frontend` and `web` respectively, directly under the existing `theme` configuration directives). For now, the available "modes" are just "normal" and "inverted" (the latter inverting the tone of the colours/lighting used by the theme).
+
+### v3.7.1
+
+- [2025.08.31]: Slightly reworked the various front-end themes.

assets/bluemetal/frontend.css

@@ -4,15 +4,16 @@
   :root{scroll-behavior:auto}
 }
 .scrollTrans{transition:all .5s ease-in-out}
-body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw);max-width:100%}
-body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#333;color:#cde;background-image:url(data:image/gif;base64,R0lGODdhAwADAIACADMzM1VicCwAAAAAAwADAAACBIQRBwUAOw==);background-attachment:fixed}
+body,input,select,textarea{max-width:100%}
+body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)}
+body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#333;color:#cde;background-image:url(data:image/png;base64,{Base64Encode}{Asset:texture.png}{/Base64Encode});background-attachment:fixed}
 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[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[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})}
@@ -25,6 +26,11 @@ 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)}
+.mainbox{display:flex;flex-direction:row;gap:auto;justify-content:center;align-items:start}
+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)}
+nav a:not(.idx a){display:block}
+main{flex-basis:80%;flex-shrink:1;flex-grow:2}
+.subNav{display:block;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)}
 table{table-layout:fixed}
 table,.spanner{width:100%}
 textarea{height:150px}
@@ -34,10 +40,9 @@ 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,input[type=file]::file-selector-button,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)}
 .ci{background-color:rgba(102,119,136,.5);text-align:{FE_Align};border-top-{FE_Align_Reverse}-radius:24px;padding:12px}
 .co,body,.center{text-align:center}
 .co,body{padding:0}
@@ -50,13 +55,11 @@ a:hover,a:active,a:focus,.txtRd{color:#fca}
 .h1,.h3,.spanner{background-color:rgba(102,119,136,.5)}
 .h2,.h4{background-color:rgba(85,102,119,.5)}
 .h3,.h3f,.h4,.h4f{width:50%}
-.nav{font-size:calc((14px * {magnification}) + .03vw);width:20%;letter-spacing:calc(1px + .03vw)}
 .nav:lang(ja){letter-spacing:-1px}
 .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)}
 .hFd:hover,.r{background-color:rgba(153,102,51,.6)}
 .rf{background:linear-gradient({90deg},rgba(153,102,51,.6),#c96)}
-.right{padding:20px;width:80%}
 .branchline{border-style:none none solid none;border-width:1px;border-color:#89b}
 .txtBl{color:#eee}
 .txtGn{color:#9c7}
@@ -75,18 +78,18 @@ input[id=logoutbutton]:hover,input[id=logoutbutton]:active,input[id=logoutbutton
 input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Align_Reverse}-radius:0;margin-{FE_Align_Reverse}:0}
 .h1f,.h2f,.h3f,.h4f,.rf{white-space:nowrap}
 @media only all and (max-width:968px) {
+  .extend{flex-basis:100%}
   .big,.dt{display:none}
   .mob{display:block}
   .tip,.bNav,.gen{float:none;height:auto;text-align:center}
   .h1,.h1f,.h2,.h2f,.r,.rf{width:50%}
-  .extend{width:100%}
 }
 .hB{background-color:rgba(0,0,0,.125)}
 .hW{background-color:rgba(255,255,255,.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,input[type=file]::file-selector-button{cursor:pointer}
+li>span.comCat:first-child,input[type=button],input[type=file]::file-selector-button,input[type=checkbox],input[type=checkbox]+label,input[type=radio],input[type=radio]+label,input[type=reset],input[type=submit],span>span[onclick],li>span[onclick],.navicon[onclick]{cursor:pointer}
 .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}
@@ -96,7 +99,7 @@ blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
 @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%)}
+a:hover>.navicon,a:active>.navicon,a:focus>.navicon,.navicon[onclick]:hover,.navicon[onclick]:active,.navicon[onclick]:focus{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=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}
@@ -123,7 +126,6 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .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%}
 .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}
 .tablend{margin-top:-2px}
@@ -144,9 +146,14 @@ input[type=button].reset:hover,input[type=button].reset:active{color:#ffc}
 .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}
-.flexrow{display:flex}
+.flexrow{display:flex;flex-direction:row}
 .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:{cnrRadius} 0 0}
 .capitalize{text-transform:capitalize}
 input[type=checkbox],input[type=radio]{accent-color:#89b}
+.clockBlock{display:inline-block;width:16px;height:16px;transition:none}
+.clockHours{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockhours.svg}{/Base64Encode});position:relative;inset:0 0}
+.clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
+.clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
+.clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}

assets/bluemetal/texture.png

@@ -1,8 +1,8 @@
-<table>
-<tr>
-  <td class="nav big">
-{nav}  </td>
-  <td class="right extend">
+<div class="mainbox">
+  <nav class="big">
+{nav}
+  </nav>
+  <main class="extend">
     <div class="s" id="stateMsg">{state_msg}</div>
     <table>
       <tr>
@@ -29,6 +29,5 @@
       </tr>
 {Accounts}
     </table>
-  </td>
-</tr>
-</table>
+  </main>
+</div>

assets/default/_accounts.html

@@ -1,9 +1,8 @@
-<table>
-<tr>
-  <td class="nav big">
-{nav}  </td>
-  <td class="right extend">
+<div class="mainbox">
+  <nav class="big">
+{nav}
+  </nav>
+  <main class="extend">
     {CacheData}
-  </td>
-</tr>
-</table>
+  </main>
+</div>

assets/default/_cache.html

@@ -1,28 +1,26 @@
-<table>
-<tr>
-  <td class="nav big">
-{nav}      <hr />
-    <div class="ng1 idx" translate="no">{Indexes}</div>
-  </td>
-  <td class="right extend">
+<div class="mainbox">
+  <nav class="big">
+{nav}
+  <div class="ng1 idx" translate="no">{Indexes}</div>
+  </nav>
+  <main class="extend">
     <div class="s">{state_msg}</div>
-      <form action="?phpmussel-page=config" method="POST">
-        <input type="hidden" name="updatingConfig" value="1" />
-        <table>
-          <tr><td class="ng2"><div class="s">{link.Configuration}</div></td></tr>
-          <tr>
-            <td class="ng1">
-              <div class="s">{tip.See the documentation}<hr /><em>{label.Active configuration file} <span class="txtRd">{ActiveConfigFile}</span></em><hr /></div>
-              <div class="bNav">
-                <input type="submit" value="{field.Update}" /><br />
-                <br />
-                <input type="checkbox" name="orphaned" id="orphaned" class="auto" /><label class="s" for="orphaned">{checkbox.Delete orphaned values}</label>
-              </div>
-            </td>
-          </tr>
-        </table>
+    <form action="?phpmussel-page=config" method="POST">
+      <input type="hidden" name="updatingConfig" value="1" />
+      <table>
+        <tr><td class="ng2"><div class="s">{link.Configuration}</div></td></tr>
+        <tr>
+          <td class="ng1">
+            <div class="s">{tip.See the documentation}<hr /><em>{label.Active configuration file} <span class="txtRd">{ActiveConfigFile}</span></em><hr /></div>
+            <div class="bNav">
+              <input type="submit" value="{field.Update}" /><br />
+              <br />
+              <input type="checkbox" name="orphaned" id="orphaned" class="auto" /><label class="s" for="orphaned">{checkbox.Delete orphaned values}</label>
+            </div>
+          </td>
+        </tr>
+      </table>
 {ConfigFields}
-      </form>
-    </td>
-</tr>
-</table>
+    </form>
+  </main>
+</div>

assets/default/_config.html

@@ -1,9 +1,8 @@
-<table>
-<tr>
-  <td class="nav extend">
-{nav}  </td>
-  <td class="right big"><div class="s">
-    <hr />
+<div class="mainbox">
+  <nav class="extend">
+{nav}
+  </nav>
+  <main class="big"><div class="s">
     {Some useful links}
     <hr />
     {label.System information}<br />
@@ -34,6 +33,5 @@
     </ul>
     <hr />
     <input type="button" value="{label.Copy to clipboard}" class="auto" onclick="javascript:if(navigator.clipboard){var doCopy='{HomeCopyData}';navigator.clipboard.writeText(doCopy);alert(doCopy)}else{alert('{response.Failed}')}" />
-  </div></td>
-</tr>
-</table>
+  </div></main>
+</div>

assets/default/_home.html

@@ -1,14 +1,12 @@
-<table>
-<tr>
-  <td class="nav{mod_class_nav}"><div class="big">
-{nav}    <hr /></div>
-    <div class="ng1 idx">{LogFiles}    </div>
-  </td>
-  <td class="right{mod_class_right}">
+<div class="mainbox">
+  <nav class="big">
+{nav}
+    <div class="ng1 idx" translate="no">{LogFiles}    </div>
+  </nav>
+  <main class="extend{mod_class_right}">
   <div class="ng1 s flong mob">{LogFiles}  </div>
   <span class="s">{TextModeSwitchLink}{ProcessTime}</span>
   <hr />
 {logfileData}
-  </td>
-</tr>
-</table>
+  </main>
+</div>

assets/default/_logs.html

@@ -1,26 +1,18 @@
-    <nav><table>
-      <tr>
-        <td class="ng2 big navSoftCnr">
-          <a href="?phpmussel-page"><span class="navicon home"></span>{link.Home}</a>
-        </td>
-      </tr>
-      <tr>
-        <td class="ng1">
-          <a href="?phpmussel-page=accounts"><span class="navicon accounts"></span>{link.Accounts}</a><br />
-          <a href="?phpmussel-page=cache-data"><span class="navicon cache"></span>{link.Cache Data}</a><br />
-          <a href="?phpmussel-page=config"><span class="navicon configuration"></span>{link.Configuration}</a><br />
-          <a href="?phpmussel-page=quarantine"><span class="navicon quarantine"></span>{link.Quarantine}</a><br />
-          <a href="?phpmussel-page=siginfo"><span class="navicon siginfo"></span>{link.Signature Information}</a><br />
-          <a href="?phpmussel-page=statistics"><span class="navicon statistics"></span>{link.Statistics}</a><br />
-          <a href="?phpmussel-page=upload-test"><span class="navicon test"></span>{link.Upload Testing}</a><br />
-          <a href="?phpmussel-page=logs"><span class="navicon logs"></span>{link.Logs}</a>
-        </td>
-      </tr>
-      <tr>
-        <td class="ng2">
-          <div class="subNav">{label.External}</div>
-          <a href="{Links.Documentation}" hreflang="en-US" rel="noopener external"><span class="navicon documentation"></span>{link.Documentation}</a><br />
-          {Links.Website}
-        </td>
-      </tr>
-    </table></nav>
+    <div class="ng2 big navSoftCnr">
+      <a href="?phpmussel-page"><span class="navicon home"></span>{link.Home}</a>
+    </div>
+    <div class="ng1">
+      <a href="?phpmussel-page=accounts"><span class="navicon accounts"></span>{link.Accounts}</a>
+      <a href="?phpmussel-page=cache-data"><span class="navicon cache"></span>{link.Cache Data}</a>
+      <a href="?phpmussel-page=config"><span class="navicon configuration"></span>{link.Configuration}</a>
+      <a href="?phpmussel-page=quarantine"><span class="navicon quarantine"></span>{link.Quarantine}</a>
+      <a href="?phpmussel-page=siginfo"><span class="navicon siginfo"></span>{link.Signature Information}</a>
+      <a href="?phpmussel-page=statistics"><span class="navicon statistics"></span>{link.Statistics}</a>
+      <a href="?phpmussel-page=upload-test"><span class="navicon test"></span>{link.Upload Testing}</a>
+      <a href="?phpmussel-page=logs"><span class="navicon logs"></span>{link.Logs}</a>
+    </div>
+    <div class="ng2">
+      <div class="subNav">{label.External}</div>
+      <a href="{Links.Documentation}" hreflang="en-US" rel="noopener external"><span class="navicon documentation"></span>{link.Documentation}</a>
+      {Links.Website}
+    </div>

assets/default/_nav_complete_access.html

@@ -1,19 +1,11 @@
-    <nav><table>
-      <tr>
-        <td class="ng2 big navSoftCnr">
-          <a href="?phpmussel-page"><span class="navicon home"></span>{link.Home}</a>
-        </td>
-      </tr>
-      <tr>
-        <td class="ng1">
-          <a href="?phpmussel-page=logs"><span class="navicon logs"></span>{link.Logs}</a>
-        </td>
-      </tr>
-      <tr>
-        <td class="ng2">
-          <div class="subNav">{label.External}</div>
-          <a href="{Links.Documentation}" hreflang="en-US" rel="noopener external"><span class="navicon documentation"></span>{link.Documentation}</a><br />
-          {Links.Website}
-        </td>
-      </tr>
-    </table></nav>
+    <div class="ng2 big navSoftCnr">
+      <a href="?phpmussel-page"><span class="navicon home"></span>{link.Home}</a>
+    </div>
+    <div class="ng1">
+      <a href="?phpmussel-page=logs"><span class="navicon logs"></span>{link.Logs}</a>
+    </div>
+    <div class="ng2">
+      <div class="subNav">{label.External}</div>
+      <a href="{Links.Documentation}" hreflang="en-US" rel="noopener external"><span class="navicon documentation"></span>{link.Documentation}</a><br />
+      {Links.Website}
+    </div>