Skip to content

Commit 66ccc19

Browse files
MaikuolanMaikuolan
committed
Aesthetic patch.
1 parent 36b1c51 commit 66ccc19

File tree

18 files changed

+314
-348
lines changed

18 files changed

+314
-348
lines changed

‎assets/bluemetal/frontend.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,7 @@ nav a:not(.idx a){display:block}
4040
nav>div:first-child{border-radius:{cnrRadius} 0 0}
4141
main{flex-basis:80%;flex-shrink:1;flex-grow:2;min-width:0}
4242
.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)}
43-
table{table-layout:fixed}
44-
table,.spanner,.flexstretch{align-self:stretch}
43+
.spanner,.flexstretch{align-self:stretch}
4544
textarea{height:150px}
4645
textarea.half{height:75px}
4746
textarea{width:calc(100% - 10px)}
@@ -83,6 +82,7 @@ input#logoutbutton:hover,input#logoutbutton:active,input#logoutbutton:focus{back
8382
input#homebutton{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Align_Reverse}-radius:0;margin-{FE_Align_Reverse}:0}
8483
.h1f,.h2f,.h3f,.h4f,.rf{white-space:nowrap}
8584
@media only all and (max-width:968px) {
85+
nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:1fr}
8686
.extend{flex-basis:100%}
8787
.headbox,.mainbox,.footbox{flex-direction:column;height:auto}
8888
.footbox>.start{display:none}
@@ -160,17 +160,22 @@ input[type=checkbox],input[type=radio]{accent-color:#89b}
160160
.clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
161161
.clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
162162
.clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
163-
.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
164-
.col>.ng1,.col>.ng2,nav>.ng1,nav>.ng2,.flexstretch,.spanner{width:calc(100% - 10px)}
163+
.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:1fr}
164+
.col>.col{width:100%}
165+
.col>.ng1,.col>.ng2,nav>.ng1,nav>.ng2,.flexstretch:not(.col>.flexstretch),.spanner:not(.col>.spanner){width:calc(100% - 10px)}
165166
.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
166167
.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
167-
.spanner+table,.toggleTable{margin:-2px -2px 0 -2px}
168-
.spanner+table~table{margin:-4px -2px 0 -2px}
169-
.col>form,.quad>form,.duo>form{display:contents}
168+
.col>form,.quad>form,.duo>form,.spanner>form{display:contents}
170169
input[type=hidden],script{display:none}
171170
.quad{display:grid;gap:2px;grid-template-columns:repeat(4,1fr);justify-content:stretch;justify-items:stretch}
172171
.duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
173-
.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}
172+
.col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
174173
.reverse{text-align:{FE_Align_Reverse}}
175174
.stickybox{position:sticky;top:2px}
176175
.gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
176+
@media only all and (max-width:968px) {
177+
.quad:not(.accquad){grid-template-columns:1fr 1fr}
178+
.quad.accquad{grid-template-columns:1fr}
179+
}
180+
@keyframes fmDeleteAnim{0%{opacity:1}100%{filter:brightness(0);opacity:0;display:none}}
181+
.fmDelete{transform-origin:top;animation:fmDeleteAnim .5s cubic-bezier(0,0,.1,1);animation-iteration-count:1;animation-fill-mode:forwards}

‎assets/default/_accounts.html‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,23 @@
11
<div class="mainbox">
22
<nav class="big">
3-
{nav}
4-
</nav>
3+
{nav} </nav>
54
<main class="extend">
65
<div class="col">
76
<div class="s flexstretch" id="stateMsg">{state_msg}</div>
8-
<table>
9-
<tr>
10-
<td class="h2 big"><div class="s">{field.Username}</div></td>
11-
<td class="h2 big"><div class="s">{field.Permissions}</div></td>
12-
<td class="h2 big"><div class="s">{field.Set new password}</div></td>
13-
<td class="h2f extend"><div class="s"><span class="big">{field.Options}</span><span class="mob">{link.Accounts}</span></div></td>
14-
</tr>
15-
<tr>
16-
<form action="?phpmussel-page=accounts" method="POST"><input name="phpmussel-form-target" type="hidden" value="accounts" /><input name="do" type="hidden" value="create-account" />
17-
<td class="h1 big"><input name="username" type="text" placeholder="{field.Username}" autocomplete="username" /></td>
18-
<td class="h1 big"><select name="permissions" title="{field.Permissions}"><option value="1">{label.Complete access}</option><option value="2">{label.Logs access only}</option></select></td>
19-
<td class="h1 big"><input name="password" type="password" placeholder="{field.Password}" autocomplete="new-password" /></td>
20-
<td class="h1f extend">
21-
<div class="s big"><input type="submit" class="auto" value="{field.Create new account}" /></div>
22-
<div class="s mob">
23-
<input name="username_mob" type="text" placeholder="{field.Username}" autocomplete="username" /><br />
24-
<select name="permissions_mob" title="{field.Permissions}"><option value="1">{label.Complete access}</option><option value="2">{label.Logs access only}</option></select><br />
25-
<input name="password_mob" type="password" placeholder="{field.Password}" autocomplete="new-password" /><br />
26-
<input type="submit" value="{field.Create new account}" />
27-
</div>
28-
</td>
29-
</form>
30-
</tr>
7+
</div>
8+
<div class="quad accquad">
9+
<div class="h2f s mob">{link.Accounts}</div>
10+
<div class="h2 s big">{field.Username}</div>
11+
<div class="h2 s big">{field.Permissions}</div>
12+
<div class="h2 s big">{field.Set new password}</div>
13+
<div class="h2f s big">{field.Options}</div>
14+
<form action="?phpmussel-page=accounts" method="POST"><input name="phpmussel-form-target" type="hidden" value="accounts" /><input name="do" type="hidden" value="create-account" />
15+
<div class="h1"><input name="username" type="text" placeholder="{field.Username}" autocomplete="username" /></div>
16+
<div class="h1"><select name="permissions" title="{field.Permissions}"><option value="1">{label.Complete access}</option><option value="2">{label.Logs access only}</option><option value="3">Cronable</option></select></div>
17+
<div class="h1"><input name="password" type="password" placeholder="{field.Password}" autocomplete="new-password" /></div>
18+
<div class="h1f"><input type="submit" class="auto" value="{field.Create new account}" /></div>
19+
</form>
3120
{Accounts}
32-
</table>
3321
</div>
3422
</main>
3523
</div>

‎assets/default/_accounts_row.html‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
1-
<tr id="{AccID}">
2-
<input id="{AccID}username" type="hidden" value="{AccUsername}" />
3-
<td class="h1 big"><div class="s">{AccUsername}</div><small>{AccWarnings}</small></td>
4-
<td class="h1 big"><div class="s">{AccPermissions}</div></td>
5-
<td class="h1 big"><input id="{AccID}password" type="password" placeholder="{field.Password}" autocomplete="new-password" /></td>
6-
<td class="h1f extend">
7-
<div class="s big">
8-
<select id="{AccID}do" class="auto" title="{field.Options}">
9-
<option value="update-password">{field.Set new password}</option><option value="delete-account">{field.Delete account}</option>
10-
</select><input type="button" value="{field.OK}" class="auto" onclick="javascript:acc('{AccID}username','{AccID}password','{AccID}','{AccID}do')" />
11-
</div>
12-
<div class="s mob">
13-
<div class="s">{AccUsername}</div><small>{AccWarnings}</small><br /><em>{AccPermissions}</em><br />
14-
<input id="{AccID}passwordmob" type="password" placeholder="{field.Password}" autocomplete="new-password" /><br />
15-
<select id="{AccID}domob" class="auto" title="{field.Options}"><option value="update-password">{field.Set new password}</option><option value="delete-account">{field.Delete account}</option></select><br />
16-
<input type="button" value="{field.OK}" class="auto" onclick="javascript:acc('{AccID}username','{AccID}passwordmob','{AccID}','{AccID}domob')" />
17-
</div>
18-
</td>
19-
</tr>
1+
<div class="h1 s" id="q1{AccID}"><input id="{AccID}username" type="hidden" value="{AccUsername}" />{AccUsername}<small>{AccWarnings}</small></div>
2+
<div class="h1 s" id="q2{AccID}">{AccPermissions}</div>
3+
<div class="h1 s" id="q3{AccID}"><input id="{AccID}password" type="password" placeholder="{field.Password}" autocomplete="new-password" /></div>
4+
<div class="h1f" id="q4{AccID}">
5+
<select id="{AccID}do" class="auto" title="{field.Options}">
6+
<option value="update-password">{field.Set new password}</option><option value="delete-account">{field.Delete account}</option>
7+
</select><input type="button" value="{field.OK}" class="auto" onclick="javascript:acc('{AccID}username','{AccID}password','{AccID}','{AccID}do')" />
8+
</div>

‎assets/default/_siginfo.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@
99
<select id="infoCatID" class="auto" onchange="javascript:setInfoCat()">{SigInfoMenuOptions}
1010
</select>
1111
</div>
12-
<span class="s placeholder_loading">{label.Loading_}</span>
13-
{InfoRows}
14-
</div>
12+
<div class="s placeholder_loading">{label.Loading_}</div>
13+
{InfoRows} </div>
1514
</main>
1615
</div>
17-
<script type="text/javascript">function setInfoCat(){x=document.getElementById('infoCatID').value,null!==window.yCat&&hide(window.yCat),show(x,'contents'),window.yCat=x}window.yCat='placeholder_loading',setInfoCat()</script>
16+
<script type="text/javascript">function setInfoCat(){x=document.getElementById('infoCatID').value,null!==window.yCat&&hide(window.yCat),hide(window.yCat+'_grid'),show(x,'block'),show(x+'_grid','grid'),window.yCat=x}window.yCat='placeholder_loading',setInfoCat()</script>

‎assets/default/_siginfo_row.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
<tr>
2-
<td class="{x}"><div class="s">{InfoType}</div></td>
3-
<td class="{x}f"><div class="s">{InfoNum}</div></td>
4-
</tr>
1+
<div class="{CellClass} s">{InfoType}</div>
2+
<div class="{CellClass}f s">{InfoNum}</div>

‎assets/default/_statistics.html‎

Lines changed: 37 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div class="mainbox">
22
<nav class="big">
3-
{nav}
4-
</nav>
3+
{nav} </nav>
54
<main class="extend">
65
<div class="col">
76
<div class="s flexstretch">{state_msg}</div>
@@ -12,60 +11,42 @@
1211
<input type="button" value="{field.Clear all}" class="auto" onclick="{Confirm-ClearAll}" />
1312
</form>
1413
</div>
15-
<table>
16-
<tr><td class="center h4f" colspan="2"><div class="s">Web</div></td></tr>
17-
<tr>
18-
<td class="h3"><div class="s">{label.Scan events}</div></td>
19-
<td class="h3f"><div class="s">{Web-Events}</div></td>
20-
</tr>
21-
<tr>
22-
<td class="h3"><div class="s">{label.Uploads scanned}</div></td>
23-
<td class="h3f"><div class="s">{Web-Scanned}</div></td>
24-
</tr>
25-
<tr>
26-
<td class="h3"><div class="s">{label.Uploads blocked}</div></td>
27-
<td class="h3f"><div class="s">{Web-Blocked}</div></td>
28-
</tr>
29-
<tr>
30-
<td class="h3"><div class="s">{label.Uploads quarantined}</div></td>
31-
<td class="h3f"><div class="s">{Web-Quarantined}</div></td>
32-
</tr>
33-
<tr><td class="center h4f" colspan="2"><div class="s">CLI</div></td></tr>
34-
<tr>
35-
<td class="h3"><div class="s">{label.Scan events}</div></td>
36-
<td class="h3f"><div class="s">{CLI-Events}</div></td>
37-
</tr>
38-
<tr>
39-
<td class="h3"><div class="s">{label.Objects scanned}</div></td>
40-
<td class="h3f"><div class="s">{CLI-Scanned}</div></td>
41-
</tr>
42-
<tr>
43-
<td class="h3"><div class="s">{label.Objects flagged}</div></td>
44-
<td class="h3f"><div class="s">{CLI-Flagged}</div></td>
45-
</tr>
46-
<tr><td class="center h4f" colspan="2"><div class="s">API</div></td></tr>
47-
<tr>
48-
<td class="h3"><div class="s">{label.Scan events}</div></td>
49-
<td class="h3f"><div class="s">{API-Events}</div></td>
50-
</tr>
51-
<tr>
52-
<td class="h3"><div class="s">{label.Objects scanned}</div></td>
53-
<td class="h3f"><div class="s">{API-Scanned}</div></td>
54-
</tr>
55-
<tr>
56-
<td class="h3"><div class="s">{label.Objects flagged}</div></td>
57-
<td class="h3f"><div class="s">{API-Flagged}</div></td>
58-
</tr>
59-
<tr><td class="center h4f" colspan="2"><div class="s">{label.Other}</div></td></tr>
60-
<tr>
61-
<td class="h3"><div class="s">{label.Start date}</div></td>
62-
<td class="h3f"><div class="s">{Other-Since}</div></td>
63-
</tr>
64-
<tr>
65-
<td class="h3"><div class="s">{label.Active signature files}</div></td>
66-
<td class="h3f"><div class="{Class-Active}">{Other-Active}</div></td>
67-
</tr>
68-
</table>
14+
<div class="center h2f s flexstretch">Web</div>
15+
<div class="duo flexstretch">
16+
<div class="h1 s">{label.Scan events}</div>
17+
<div class="h1f s">{Web-Events}</div>
18+
<div class="h1 s">{label.Uploads scanned}</div>
19+
<div class="h1f s">{Web-Scanned}</div>
20+
<div class="h1 s">{label.Uploads blocked}</div>
21+
<div class="h1f s">{Web-Blocked}</div>
22+
<div class="h1 s">{label.Uploads quarantined}</div>
23+
<div class="h1f s">{Web-Quarantined}</div>
24+
</div>
25+
<div class="center h2f s flexstretch">CLI</div>
26+
<div class="duo flexstretch">
27+
<div class="h1 s">{label.Scan events}</div>
28+
<div class="h1f s">{CLI-Events}</div>
29+
<div class="h1 s">{label.Objects scanned}</div>
30+
<div class="h1f s">{CLI-Scanned}</div>
31+
<div class="h1 s">{label.Objects flagged}</div>
32+
<div class="h1f s">{CLI-Flagged}</div>
33+
</div>
34+
<div class="center h2f s flexstretch">API</div>
35+
<div class="duo flexstretch">
36+
<div class="h1 s">{label.Scan events}</div>
37+
<div class="h1f s">{API-Events}</div>
38+
<div class="h1 s">{label.Objects scanned}</div>
39+
<div class="h1f s">{API-Scanned}</div>
40+
<div class="h1 s">{label.Objects flagged}</div>
41+
<div class="h1f s">{API-Flagged}</div>
42+
</div>
43+
<div class="center h2f s flexstretch">{label.Other}</div>
44+
<div class="duo flexstretch">
45+
<div class="h1 s">{label.Start date}</div>
46+
<div class="h1f s">{Other-Since}</div>
47+
<div class="h1 s">{label.Active signature files}</div>
48+
<div class="h1f {Class-Active}">{Other-Active}</div>
49+
</div>
6950
</div>
7051
</main>
7152
</div>

‎assets/default/_upload_test.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
{nav}
44
</nav>
55
<main class="extend">
6-
<form enctype="multipart/form-data" name="upload" action="" method="post">
7-
<input type="hidden" name="MAX_FILE_SIZE" value="{MaxFilesize}" />
8-
<div id="upload_fields" class="inline">
6+
<div class="col">
7+
<form id="upload_fields" enctype="multipart/form-data" name="upload" action="" method="post"><input type="hidden" name="MAX_FILE_SIZE" value="{MaxFilesize}" />
98
<div class="spanner">
109
<input type="button" onclick="javascript:more()" value="{field.More fields}" />
1110
<input type="submit" class="auto" value="{field.OK}" />
1211
</div>
1312
<div class="spanner"><input type="file" name="upload_test[]" value="" /></div>
14-
</div>
15-
</form>
13+
</form>
14+
</div>
1615
</main>
1716
</div>

‎assets/default/frontend.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,7 @@ nav a:not(.idx a){display:block}
4040
nav>div:first-child{border-radius:{cnrRadius} 0 0}
4141
main{flex-basis:80%;flex-shrink:1;flex-grow:2;min-width:0}
4242
.subNav{display:block;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)}
43-
table{table-layout:fixed}
44-
table,.spanner,.flexstretch{align-self:stretch}
43+
.spanner,.flexstretch{align-self:stretch}
4544
textarea{height:150px}
4645
textarea.half{height:75px}
4746
textarea{width:calc(100% - 10px)}
@@ -86,6 +85,7 @@ input#logoutbutton:hover,input#logoutbutton:active,input#logoutbutton:focus{back
8685
input#homebutton{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Align_Reverse}-radius:0;margin-{FE_Align_Reverse}:0}
8786
.h1f,.h2f,.h3f,.h4f,.rf{white-space:nowrap}
8887
@media only all and (max-width:968px) {
88+
nav{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:1fr}
8989
.extend{flex-basis:100%}
9090
.headbox,.mainbox,.footbox{flex-direction:column;height:auto}
9191
.footbox>.start{display:none}
@@ -163,17 +163,22 @@ input[type=checkbox],input[type=radio]{accent-color:#900}
163163
.clockMinutes{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockminutes.svg}{/Base64Encode});position:relative;inset:0 -16px}
164164
.clockSeconds{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockseconds.svg}{/Base64Encode});position:relative;inset:0 -32px}
165165
.clockFace{background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:clockface.svg}{/Base64Encode});position:relative;inset:0 -48px}
166-
.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:100%}
167-
.col>.ng1,.col>.ng2,nav>.ng1,nav>.ng2,.flexstretch,.spanner{width:calc(100% - 10px)}
166+
.col{display:flex;flex-direction:column;gap:2px;justify-content:start;align-items:start;flex-basis:100%;width:1fr}
167+
.col>.col{width:100%}
168+
.col>.ng1,.col>.ng2,nav>.ng1,nav>.ng2,.flexstretch:not(.col>.flexstretch),.spanner:not(.col>.spanner){width:calc(100% - 10px)}
168169
.configInitPos{transform:scaleY(0);transform-origin:top center;opacity:0;max-height:0;margin-top:-2px}
169170
.configOpenPos{transform:scaleY(1);transform-origin:top center;opacity:1;max-height:auto}
170-
.spanner+table,.toggleTable{margin:-2px -2px 0 -2px}
171-
.spanner+table~table{margin:-4px -2px 0 -2px}
172-
.col>form,.quad>form,.duo>form{display:contents}
171+
.col>form,.quad>form,.duo>form,.spanner>form{display:contents}
173172
input[type=hidden],script{display:none}
174173
.quad{display:grid;gap:2px;grid-template-columns:repeat(4,1fr);justify-content:stretch;justify-items:stretch}
175174
.duo{display:grid;gap:2px;grid-template-columns:1fr 1fr;justify-content:stretch;justify-items:stretch}
176-
.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}
175+
.col+.col,.col+.quad,.col+.duo,.quad+.col,.quad+.quad,.quad+.duo,.duo+.col,.duo+.quad,.duo+.duo{margin-top:2px}
177176
.reverse{text-align:{FE_Align_Reverse}}
178177
.stickybox{position:sticky;top:2px}
179178
.gridboxitem,.gridboxcheckcell,.gridboxstretch,.va{align-content:center}
179+
@media only all and (max-width:968px) {
180+
.quad:not(.accquad){grid-template-columns:1fr 1fr}
181+
.quad.accquad{grid-template-columns:1fr}
182+
}
183+
@keyframes fmDeleteAnim{0%{opacity:1}100%{filter:brightness(0);opacity:0;display:none}}
184+
.fmDelete{transform-origin:top;animation:fmDeleteAnim .5s cubic-bezier(0,0,.1,1);animation-iteration-count:1;animation-fill-mode:forwards}

0 commit comments

Comments
 (0)