Fretux/anomaly-front-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement overhaul of design, add tooltips to certain attributes, update styling and ARIA support.

Browse Source
This commit is contained in:
fretuks
2025-12-16 11:50:58 +01:00
parent c709deb6ab
commit 68402e789b
8 changed files with 615 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+203 -32
View File
@@ -27,7 +27,7 @@ input[type="text"] {
}
body {
background-image: url("static/img/trlbg1.jpg");
background-image: url("/static/img/trlbg1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
@@ -68,7 +68,7 @@ table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
overflow: hidden;
overflow: visible;
background-color: rgba(255, 255, 255, 0.8);
}
@@ -124,9 +124,9 @@ main {
margin-top: 8vh;
padding: 24px 32px 32px 32px;
border-radius: 16px;
border: 1px solid rgba(0,0,0,0.08);
border: 1px solid rgba(0, 0, 0, 0.08);
overflow: auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
backdrop-filter: blur(8px);
}
@@ -495,19 +495,13 @@ body.menu-open {
}
#weapon-form {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px 0;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 2500;
inset: 0;
overflow-y: auto;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
z-index: 3000;
}
#weapon-form.show {
@@ -517,13 +511,12 @@ body.menu-open {
#weapon-form > div {
background: #fff;
padding: 24px;
border-radius: 8px;
border-radius: 12px;
width: 90%;
max-width: 480px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
position: relative;
max-height: calc(100vh - 40px);
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
#weapon-form h2 {
@@ -791,7 +784,7 @@ body::before {
content: "";
position: fixed;
inset: 0;
background: linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.25)) , var(--bg-tint);
background: linear-gradient(180deg, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.25)), var(--bg-tint);
pointer-events: none;
z-index: 0;
}
@@ -816,7 +809,9 @@ a {
text-decoration: none;
}
a:hover { text-decoration: underline; }
a:hover {
text-decoration: underline;
}
/* Inputs */
input[type="text"], input[type="number"], textarea, select, #search {
@@ -838,26 +833,33 @@ button, .button1, #weapon-create, #weapon-edit, #copy-stats, #weapon-form form b
padding: 10px 16px;
box-shadow: 0 2px 6px rgba(2, 6, 23, 0.15);
}
button:hover, .button1:hover, #weapon-create:hover, #weapon-edit:hover, #copy-stats:hover, #weapon-form form button[type="submit"]:hover {
background-color: var(--primary-700);
}
/* Table modernization */
table {
background: rgba(255,255,255,0.85);
background: rgba(255, 255, 255, 0.85);
border-radius: 12px;
overflow: hidden;
/* Avoid clipping tooltips or other positioned content inside table cells */
overflow: visible;
}
thead th {
position: sticky;
top: 0;
background: rgba(255,255,255,0.95);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
}
tbody tr:nth-child(odd) { background: #fafafa; }
tbody tr:hover { background: #f1f5f9; }
tbody tr:nth-child(odd) {
background: #fafafa;
}
tbody tr:hover {
background: #f1f5f9;
}
th, td {
border-color: var(--border);
@@ -868,24 +870,193 @@ th, td {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(6px);
}
.nav-menu {
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
}
.nav-menu a {
color: var(--text-900);
}
.nav-menu a:hover {
color: var(--primary);
}
/* Success/error text */
#successMessage { color: var(--success); }
#copy-message.success { color: var(--success); }
#copy-message.error { color: var(--primary); }
#successMessage {
color: var(--success);
}
#copy-message.success {
color: var(--success);
}
#copy-message.error {
color: var(--primary);
}
/* Responsive table spacing */
@media (max-width: 768px) {
th, td { padding: 12px; }
main { padding: 20px; }
}
th, td {
padding: 12px;
}
main {
padding: 20px;
}
}
/* Screen-reader only utility */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.tooltip-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
.tooltip-trigger {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
font-weight: 700;
line-height: 1;
padding: 0;
color: black;
}
.tooltip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 220px;
max-width: min(320px, calc(100vw - 24px));
padding: 10px 12px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.95);
color: #fff;
font-size: 0.9rem;
line-height: 1.35;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
backdrop-filter: saturate(120%) blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 999999;
}
.tooltip::after {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(15, 23, 42, 0.95);
}
.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus-visible + .tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.tooltip-trigger:hover,
.tooltip-trigger:focus-visible {
border-color: rgba(15, 23, 42, 0.35);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.tooltip {
transition: opacity 0.001s linear, transform 0.001s linear;
}
}
@media (max-width: 600px) {
.tooltip {
inset: calc(100% + 8px) auto auto 50%;
transform: translate(-50%, 6px);
text-align: left;
}
.tooltip::after {
left: 50%;
top: -6px;
transform: translateX(-50%);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: none;
border-bottom: 6px solid rgba(15, 23, 42, 0.95);
}
.tooltip-trigger:hover + .tooltip,
.tooltip-trigger:focus + .tooltip {
transform: translate(-50%, 0);
}
}
@media screen and (max-width: 600px) {
.weapon-stats-table.horizontal-table {
border-collapse: separate;
border-spacing: 0;
}
.weapon-stats-table.horizontal-table tr:first-child {
display: none;
}
.weapon-stats-table.horizontal-table tr {
display: block;
margin-bottom: 14px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
overflow: visible;
background: rgba(255, 255, 255, 0.9);
}
.weapon-stats-table.horizontal-table td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 12px 14px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
text-align: right;
}
.weapon-stats-table.horizontal-table td:last-child {
border-bottom: none;
}
.weapon-stats-table.horizontal-table td::before {
content: attr(data-label);
font-weight: 700;
text-align: left;
color: rgba(15, 23, 42, 0.9);
flex: 1;
}
}