ham/hamview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Checkpoint

Browse Source
This commit is contained in:
maze
2026-03-08 22:22:51 +01:00
parent 247c827291
commit 9053ec65a6
65 changed files with 5874 additions and 708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
ui/src/styles/ProtocolBriefing.scss Normal file
View File

@@ -0,0 +1,277 @@
// Shared briefing styles for protocol landing pages (APRS, MeshCore, etc.)
.protocol-briefing {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0.5rem;
}
.protocol-briefing-hero {
position: relative;
overflow: hidden;
border: 1px solid rgba(173, 205, 255, 0.28);
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(64, 169, 255, 0.12), rgba(147, 197, 253, 0.04));
pointer-events: none;
}
.card-body {
position: relative;
z-index: 1;
}
h2 {
color: var(--app-text);
font-size: 1.5rem;
letter-spacing: 0.01em;
}
}
.protocol-briefing-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
}
.protocol-briefing-hero-content {
min-width: 0;
}
.protocol-briefing-hero-logo-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 220px;
}
.protocol-briefing-hero-logo {
width: 100%;
max-width: 180px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: 12px;
border: 1px solid rgba(173, 205, 255, 0.28);
background: rgba(9, 31, 66, 0.55);
padding: 0.55rem;
box-shadow: 0 10px 20px rgba(2, 10, 26, 0.35);
}
.protocol-briefing-hero-logo-label {
color: var(--app-text-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.protocol-briefing-signal-row {
margin-top: 0.85rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.protocol-briefing-signal-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border: 1px solid rgba(173, 205, 255, 0.25);
border-radius: 999px;
padding: 0.35rem 0.6rem;
background: rgba(11, 39, 82, 0.38);
color: var(--app-text-muted);
font-size: 0.82rem;
}
.protocol-briefing-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.75rem;
}
.protocol-briefing-kpi-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
border-left: 3px solid rgba(64, 169, 255, 0.75);
background: linear-gradient(180deg, rgba(13, 36, 82, 0.42), rgba(13, 36, 82, 0.14));
}
.protocol-briefing-kpis .data-table-card:nth-child(2) .protocol-briefing-kpi-card {
border-left-color: rgba(115, 209, 61, 0.8);
}
.protocol-briefing-kpis .data-table-card:nth-child(3) .protocol-briefing-kpi-card {
border-left-color: rgba(250, 173, 20, 0.82);
}
.protocol-briefing-kpis .data-table-card:nth-child(4) .protocol-briefing-kpi-card {
border-left-color: rgba(146, 84, 222, 0.82);
}
.protocol-briefing-kpi-label {
color: var(--app-text-muted);
font-size: 0.78rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.protocol-briefing-kpi-value {
font-size: 1.35rem;
font-weight: 700;
color: var(--app-text);
line-height: 1.2;
margin: 0.2rem 0 0.35rem;
}
.protocol-briefing-radio-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0.55rem;
}
.protocol-briefing-radio-item {
border: 1px solid rgba(173, 205, 255, 0.22);
border-radius: 8px;
padding: 0.5rem 0.6rem;
background: rgba(11, 39, 82, 0.22);
}
.protocol-briefing-radio-item--clickable {
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
&:hover,
&:focus-visible {
border-color: rgba(173, 205, 255, 0.55);
background: rgba(11, 39, 82, 0.38);
transform: translateY(-1px);
}
}
.protocol-briefing-radio-main {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--app-text);
min-width: 0;
.badge {
margin-left: 0.4rem;
flex: 0 0 auto;
}
}
.protocol-briefing-radio-image {
width: 3.2rem;
height: 3.2rem;
border-radius: 6px;
object-fit: contain;
border: 1px solid rgba(173, 205, 255, 0.25);
background: rgba(9, 31, 66, 0.45);
padding: 0.35rem;
flex: 0 0 auto;
}
.protocol-briefing-radio-title {
display: flex;
flex-direction: column;
min-width: 0;
gap: 0.05rem;
flex: 1 1 auto;
strong {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.protocol-briefing-radio-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
flex: 0 0 auto;
&.is-online {
background: #73d13d;
box-shadow: 0 0 0 2px rgba(115, 209, 61, 0.2);
}
&.is-offline {
background: #8c8c8c;
box-shadow: 0 0 0 2px rgba(140, 140, 140, 0.2);
}
}
.protocol-briefing-radio-meta {
font-size: 0.82rem;
line-height: 1.3;
color: var(--app-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.protocol-briefing-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 0.75rem;
}
.protocol-briefing-list {
color: var(--app-text-muted);
padding-left: 1.1rem;
margin: 0;
li {
margin-bottom: 0.45rem;
}
li + li {
margin-top: 0.35rem;
}
strong {
color: var(--app-text);
}
}
@media (max-width: 1200px) {
.protocol-briefing-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.protocol-briefing-hero-layout {
grid-template-columns: minmax(0, 1fr);
}
.protocol-briefing-hero-logo-wrap {
align-items: flex-start;
min-width: 0;
}
.protocol-briefing-columns {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 768px) {
.protocol-briefing {
padding: 0;
}
.protocol-briefing-kpis {
grid-template-columns: minmax(0, 1fr);
}
}

18
ui/src/styles/_theme.scss
View File

@@ -2,11 +2,13 @@
THEME STYLES - Reusable Typography & Colors
============================================ */
@import './theme/typography';
@import './theme/buttons';
@import './theme/badges';
@import './theme/tags';
@import './theme/forms';
@import './theme/code';
@import './theme/tables';
@import './theme/utilities';
@use './theme/typography' as *;
@use './theme/buttons' as *;
@use './theme/badges' as *;
@use './theme/tags' as *;
@use './theme/forms' as *;
@use './theme/code' as *;
@use './theme/tables' as *;
@use './theme/utilities' as *;
@use './theme/charts' as *;
@use './theme/bootstrap-overrides' as *;

69
ui/src/styles/theme/_bootstrap-overrides.scss Normal file
View File

@@ -0,0 +1,69 @@
// Bootstrap font size overrides for smaller default text
html, body {
font-size: 14px;
}
// Optionally, adjust headings and other elements if needed
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.83rem; }
h6 { font-size: 0.67rem; }
// Bootstrap utility classes
.small, .text-small, .form-text, .form-label, .form-control, .btn, .nav-link, .dropdown-item {
font-size: 0.92em;
}
// Bootstrap table color variable overrides for dark blue theme
:root, .table {
--bs-table-bg: #162447;
--bs-table-striped-bg: #1f4068;
--bs-table-striped-color: #f8f9fa;
--bs-table-active-bg: #23395d;
--bs-table-active-color: #f8f9fa;
--bs-table-hover-bg: #23395d;
--bs-table-hover-color: #f8f9fa;
--bs-table-border-color: #23395d;
--bs-table-color: #f8f9fa;
}
// Default table style for dark blue theme
table {
background-color: #162447;
color: #f8f9fa;
}
th, td {
background-color: inherit;
color: inherit;
}
thead {
background-color: #1f4068;
}
tbody tr {
border-bottom: 1px solid #23395d;
}
// Make bootstrap monospace utility and code elements slightly smaller
.font-monospace,
code,
kbd,
samp {
font-size: 0.75rem;
line-height: 1;
vertical-align: middle;
color: var(--app-accent);
}
pre {
font-size: 0.75rem;
line-height: 1.2;
}
.main-content a {
color: var(--app-accent-yellow) !important;
}

47
ui/src/styles/theme/_charts.scss Normal file
View File

@@ -0,0 +1,47 @@
/* ============================================
CHARTS - Global defaults for MUI X Charts
============================================ */
.MuiChartsSurface-root,
.MuiChartsWrapper-root {
color: var(--app-text-muted) !important;
}
.MuiChartsAxis-line,
.MuiChartsAxis-tick,
.MuiChartsGrid-line {
stroke: rgba(173, 205, 255, 0.32) !important;
}
.MuiChartsAxis-tickLabel,
.MuiChartsLegend-label,
.MuiChartsAxis-label,
.MuiChartsLabel-root {
fill: var(--app-text-muted) !important;
}
.MuiChartsTooltip-root,
.MuiChartsTooltip-paper,
.MuiChartsTooltip-table,
.MuiChartsTooltip-row,
.MuiChartsTooltip-cell,
.MuiChartsTooltip-labelCell,
.MuiChartsTooltip-valueCell,
.MuiChartsTooltip-axisValueCell {
color: var(--app-text-muted) !important;
}
.MuiChartsLegend-root {
background: rgba(11, 39, 82, 0.45);
border: 1px solid rgba(173, 205, 255, 0.2);
border-radius: 8px;
padding: 0.35rem 0.5rem;
}
.MuiChartsLegend-series {
margin-right: 0.75rem;
}
.MuiChartsLegend-mark {
filter: drop-shadow(0 0 3px rgba(2, 10, 26, 0.6));
}

39
ui/src/styles/theme/_tables.scss
View File

@@ -32,42 +32,5 @@
}
.data-table {
color: var(--app-text);
thead th {
position: sticky;
top: 0;
z-index: 2;
background: rgba(13, 36, 82, 0.95);
border-color: rgba(173, 205, 255, 0.18);
color: var(--app-text);
}
td {
border-color: rgba(173, 205, 255, 0.12);
vertical-align: middle;
cursor: pointer;
}
tr.is-selected td {
background: rgba(102, 157, 255, 0.34);
color: #f2f7ff;
}
tr.is-selected a,
tr.is-selected a:hover {
color: var(--app-accent-yellow);
}
tr:hover td {
background: rgba(102, 157, 255, 0.08);
color: var(--app-text);
}
tr:hover .callsign {
color: var(--app-accent-yellow);
background-color: var(--app-blue-dark);
border-color: var(--app-accent-yellow);
}
/* Color and background overrides removed to use default/inherited styles */
}