PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 19:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

migrate to utopia fluid type and space scales across all CSS

Browse Source
This commit is contained in:
Pontoporeia
2026-04-07 15:13:48 +02:00
parent ad06bbbcaf
commit f6977384b9
9 changed files with 383 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
public/assets/css/system.css
View File

@@ -9,12 +9,12 @@
display: flex;
gap: 0;
border-bottom: 1px solid var(--sys-border);
margin-bottom: 1.75rem;
margin-bottom: var(--space-m);
}
.sys-tab {
display: inline-block;
padding: .55rem 1.1rem;
font-size: 0.92rem;
padding: var(--space-3xs) var(--space-s);
font-size: var(--step--1);
font-weight: 500;
color: var(--sys-text-dim);
text-decoration: none;
@@ -35,23 +35,23 @@
background: var(--sys-bg-panel);
border: 1px solid var(--sys-border);
border-radius: 6px;
padding: 1rem 1.25rem 1.25rem;
margin-bottom: 1.75rem;
padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-m);
}
.sys-status-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
margin-bottom: var(--space-s);
}
.sys-status-toggle {
background: none;
border: 1px solid var(--sys-border);
color: var(--sys-text-dim);
border-radius: 3px;
font-size: 0.79rem;
font-size: var(--step--2);
font-family: inherit;
padding: .2rem .55rem;
padding: var(--space-3xs) var(--space-2xs);
cursor: pointer;
white-space: nowrap;
transition: color .15s, border-color .15s;
@@ -63,9 +63,9 @@
.sys-status-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
gap: var(--space-m) var(--space-l);
margin-top: var(--space-m);
padding-top: var(--space-m);
border-top: 1px solid var(--sys-border-deep);
}
@media (max-width: 700px) {
@@ -76,47 +76,47 @@
.srv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
gap: var(--space-s);
margin-bottom: var(--space-l);
}
.srv-card {
background: var(--sys-bg-surface);
border: 1px solid var(--sys-border);
border-radius: 5px;
padding: 1rem 1.25rem;
padding: var(--space-s) var(--space-m);
}
.srv-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .4rem;
margin-bottom: var(--space-3xs);
}
.srv-card__name {
font-size: 0.9rem;
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: .07em;
color: var(--sys-text-dim);
font-weight: 500;
}
.srv-card__detail {
font-size: 0.88rem;
font-size: var(--step--2);
color: var(--sys-text-dim);
margin-top: .25rem;
margin-top: var(--space-3xs);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.status-ok { color: var(--accent-green); font-weight: 600; font-size: 0.94rem; }
.status-warn { color: var(--warning); font-weight: 600; font-size: 0.94rem; }
.status-err { color: var(--error); font-weight: 600; font-size: 0.94rem; }
.status-unknown { color: var(--text-tertiary); font-weight: 600; font-size: 0.94rem; }
.status-ok { color: var(--accent-green); font-weight: 600; font-size: var(--step--1); }
.status-warn { color: var(--warning); font-weight: 600; font-size: var(--step--1); }
.status-err { color: var(--error); font-weight: 600; font-size: var(--step--1); }
.status-unknown { color: var(--text-tertiary); font-weight: 600; font-size: var(--step--1); }
.srv-section-title {
font-size: 0.9rem;
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: .1em;
color: var(--sys-text-dim);
border-bottom: 1px solid var(--sys-border);
padding-bottom: .4rem;
margin: 0 0 1rem;
padding-bottom: var(--space-3xs);
margin: 0 0 var(--space-s);
font-weight: 500;
}
/* Compact variant: no border, no margin — used inside sys-status-header */
@@ -126,14 +126,14 @@
padding: 0;
}
/* Sub-section variant: tighter bottom margin — used for PHP/disk sub-headings */
.srv-section-title--sub { margin-bottom: .75rem; }
.srv-section-title--sub { margin-bottom: var(--space-xs); }
/* ── PHP info grid ─────────────────────────────────────────────────────── */
.php-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .5rem .75rem;
margin-bottom: 2.5rem;
gap: var(--space-3xs) var(--space-xs);
margin-bottom: var(--space-l);
}
/* Flush variant: no bottom margin — used inside sys-status-meta cell */
.php-grid--flush { margin-bottom: 0; }
@@ -141,19 +141,19 @@
background: var(--sys-bg-surface);
border: 1px solid var(--sys-border);
border-radius: 4px;
padding: .5rem .75rem;
padding: var(--space-3xs) var(--space-xs);
}
.php-item__key {
font-size: 0.83rem;
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sys-text-dim);
}
.php-item__val {
font-size: 1.01rem;
font-size: var(--step--1);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
color: var(--sys-text-bright);
margin-top: .15rem;
margin-top: var(--space-3xs);
}
/* ── Disk bar ──────────────────────────────────────────────────────────── */
@@ -161,13 +161,12 @@
background: var(--sys-border);
border-radius: 3px;
height: 6px;
margin-top: .5rem;
margin-top: var(--space-2xs);
overflow: hidden;
}
.disk-bar {
height: 100%;
border-radius: 3px;
/* width and color driven by PHP via --disk-pct and --disk-color inline vars */
width: var(--disk-pct, 0%);
background: var(--disk-color, var(--accent-green));
transition: width .3s;
@@ -175,14 +174,14 @@
.disk-stats {
display: flex;
justify-content: space-between;
font-size: 0.86rem;
font-size: var(--step--2);
color: var(--sys-text-dim);
margin-top: .25rem;
margin-top: var(--space-3xs);
}
/* ── Tab panel loading state ───────────────────────────────────────────── */
#sys-tab-panel {
min-height: 8rem; /* prevent layout jump while fetching */
min-height: 8rem;
position: relative;
}
#sys-tab-panel.sys-panel-loading {
@@ -215,11 +214,11 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
margin-bottom: 1.25rem;
gap: var(--space-2xs);
margin-bottom: var(--space-m);
}
.log-toolbar label {
font-size: 0.92rem;
font-size: var(--step--1);
color: var(--text-secondary);
}
.log-toolbar select {
@@ -227,19 +226,19 @@
border: 1px solid var(--sys-border);
color: var(--sys-text-bright);
border-radius: 4px;
padding: .4rem .7rem;
font-size: 0.94rem;
padding: var(--space-3xs) var(--space-xs);
font-size: var(--step--1);
font-family: inherit;
}
.log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
.log-meta {
font-size: 0.86rem;
font-size: var(--step--2);
color: var(--sys-text-dim);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
margin-bottom: .75rem;
margin-bottom: var(--space-xs);
display: flex;
gap: 1.5rem;
gap: var(--space-m);
flex-wrap: wrap;
}
.log-meta span::before { content: attr(data-label) ": "; opacity: .6; }
@@ -248,34 +247,34 @@
background: var(--sys-bg-surface);
border: 1px solid var(--sys-border);
border-radius: 4px;
padding: 1.5rem;
padding: var(--space-m);
color: var(--sys-text-dim);
font-size: 0.97rem;
font-size: var(--step--1);
}
.log-unavail-path {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.88rem;
margin-top: .4rem;
font-size: var(--step--2);
margin-top: var(--space-3xs);
opacity: .7;
}
.log-unavail-dev {
margin-top: .6rem;
font-size: 0.88rem;
margin-top: var(--space-2xs);
font-size: var(--step--2);
opacity: .7;
}
.log-empty {
color: var(--sys-text-dim);
font-size: 0.97rem;
padding: 1rem 0;
font-size: var(--step--1);
padding: var(--space-s) 0;
}
.log-output {
background: var(--sys-bg-deep);
border: 1px solid var(--sys-border);
border-radius: 4px;
padding: 1rem;
padding: var(--space-s);
overflow-x: auto;
font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
font-size: 0.84rem;
font-size: var(--step--2);
line-height: 1.55;
max-height: 62vh;
overflow-y: auto;
@@ -284,7 +283,7 @@
.log-line {
display: block;
white-space: pre;
padding: .05rem .1rem;
padding: var(--space-3xs) var(--space-3xs);
border-radius: 2px;
color: var(--sys-text-body);
}
@@ -297,7 +296,7 @@
content: attr(data-n);
display: inline-block;
min-width: 4ch;
margin-right: .75rem;
margin-right: var(--space-xs);
opacity: .3;
text-align: right;
user-select: none;
@@ -306,21 +305,21 @@
background: var(--sys-bg-surface);
border: 1px solid var(--sys-border);
border-radius: 3px;
font-size: 0.84rem;
padding: .15rem .5rem;
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-2xs);
color: var(--sys-text-dim);
font-family: ui-monospace, monospace;
}
.log-copy-btn {
position: absolute;
top: .6rem;
right: .6rem;
top: var(--space-2xs);
right: var(--space-2xs);
background: var(--sys-bg-surface);
border: 1px solid var(--sys-border);
color: var(--sys-text-dim);
border-radius: 4px;
font-size: 0.84rem;
padding: .25rem .6rem;
font-size: var(--step--2);
padding: var(--space-3xs) var(--space-2xs);
cursor: pointer;
font-family: inherit;
transition: color .15s, border-color .15s;
@@ -336,9 +335,9 @@
}
.sys-refresh-note {
font-size: 0.86rem;
font-size: var(--step--2);
color: var(--sys-text-dim);
margin-bottom: 1.25rem;
margin-bottom: var(--space-m);
}
.sys-refresh-note a {
color: var(--accent-primary);
@@ -349,12 +348,12 @@
/* ── Cache freshness badges ────────────────────────────────────────────── */
.sys-cache-badge {
display: inline-block;
font-size: 0.75rem;
font-size: var(--step--2);
font-weight: 400;
font-family: ui-monospace, monospace;
padding: .1rem .45rem;
padding: var(--space-3xs) var(--space-3xs);
border-radius: 3px;
margin-left: .7rem;
margin-left: var(--space-xs);
vertical-align: middle;
line-height: 1.6;
}
@@ -372,11 +371,11 @@
/* ── Nginx config viewer ───────────────────────────────────────────────── */
.nginx-source-badge {
display: inline-block;
font-size: 0.79rem;
font-size: var(--step--2);
font-family: ui-monospace, monospace;
padding: .15rem .55rem;
padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px;
margin-left: .6rem;
margin-left: var(--space-2xs);
vertical-align: middle;
}
.nginx-source-badge--live {