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

Checkpoint
Some checks failed
Test and build / Test and lint (push) Failing after 36s
Details
Test and build / Build collector (push) Failing after 43s
Details
Test and build / Build receiver (push) Failing after 42s
Details

Browse Source
This commit is contained in:
maze
2026-03-05 15:38:18 +01:00
parent 3106b2cf45
commit 13afa08e8a
108 changed files with 19509 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/styles/_theme.scss Normal file
View File

@@ -0,0 +1,11 @@
/* ============================================
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/utilities';

41
ui/src/styles/_variables.scss Normal file
View File

@@ -0,0 +1,41 @@
/* ============================================
THEME VARIABLES - Color & Design Tokens
============================================ */
:root {
/* Base Colors */
--app-bg: #071b3a;
--app-bg-elevated: #0b2752;
--app-text: #e8efff;
--app-text-muted: #afc1e6;
--app-text-subtle: #8a99b8;
--app-text-code: #ffd700;
/* Primary Accents */
--app-accent-primary: #8eb4ff;
--app-accent-blue: #5a9eff;
--app-accent-yellow: #ffd700;
--app-accent-yellow-muted: #f0c800;
/* Secondary Blue Tones */
--app-blue-light: #a8c5ff;
--app-blue-dark: #4a7bd4;
/* Status Colors */
--app-status-success: #4ade80;
--app-status-warning: #facc15;
--app-status-error: #ef4444;
--app-status-info: #60a5fa;
/* Interactive Elements */
--app-button-hover: rgba(142, 180, 255, 0.15);
--app-border-color: rgba(142, 180, 255, 0.25);
--app-border-color-active: rgba(142, 180, 255, 0.6);
/* Semantic */
--app-code-bg: rgba(2, 10, 26, 0.6);
--app-divider: rgba(142, 180, 255, 0.1);
/* Legacy (keeping for compatibility) */
--app-accent: #8eb4ff;
}

30
ui/src/styles/theme/_badges.scss Normal file
View File

@@ -0,0 +1,30 @@
/* Badge Styles */
.badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-success {
background: rgba(74, 222, 128, 0.15);
color: var(--app-status-success);
}
.badge-warning {
background: rgba(250, 204, 21, 0.15);
color: var(--app-status-warning);
}
.badge-error {
background: rgba(239, 68, 68, 0.15);
color: var(--app-status-error);
}
.badge-info {
background: rgba(96, 165, 250, 0.15);
color: var(--app-status-info);
}

80
ui/src/styles/theme/_buttons.scss Normal file
View File

@@ -0,0 +1,80 @@
/* Button Styles */
.btn {
padding: 10px 20px;
border-radius: 6px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
&:active {
transform: scale(0.98);
}
&:disabled {
cursor: not-allowed;
}
}
.btn-primary {
background: var(--app-accent-primary);
color: var(--app-bg);
border-color: var(--app-accent-primary);
&:hover:not(:disabled) {
background: var(--app-blue-light);
box-shadow: 0 4px 12px rgba(142, 180, 255, 0.3);
}
&:disabled {
opacity: 0.5;
}
}
.btn-secondary {
background: transparent;
color: var(--app-accent-primary);
border-color: var(--app-accent-primary);
&:hover:not(:disabled) {
background: var(--app-button-hover);
border-color: var(--app-blue-light);
color: var(--app-blue-light);
}
}
.btn-tertiary {
background: transparent;
color: var(--app-text-muted);
border-color: var(--app-border-color);
&:hover:not(:disabled) {
color: var(--app-text);
border-color: var(--app-accent-primary);
background: var(--app-button-hover);
}
}
.btn-danger {
background: rgba(239, 68, 68, 0.12);
color: var(--app-status-error);
border-color: rgba(239, 68, 68, 0.3);
&:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.2);
border-color: var(--app-status-error);
}
}
.btn-success {
background: rgba(74, 222, 128, 0.12);
color: var(--app-status-success);
border-color: rgba(74, 222, 128, 0.3);
&:hover:not(:disabled) {
background: rgba(74, 222, 128, 0.2);
border-color: var(--app-status-success);
}
}

37
ui/src/styles/theme/_code.scss Normal file
View File

@@ -0,0 +1,37 @@
/* Code Styles */
.code-block {
background: var(--app-code-bg);
border: 1px solid var(--app-border-color);
border-radius: 8px;
overflow: auto;
margin-bottom: 20px;
pre {
margin: 0;
padding: 20px;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
color: var(--app-text-code);
overflow-x: auto;
code {
color: inherit;
}
}
}
.inline-code {
font-family: 'Courier New', monospace;
font-size: 13px;
background: rgba(255, 215, 0, 0.1);
color: var(--app-text-code);
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
.highlight-tech {
color: var(--app-accent-yellow);
font-weight: 600;
}

42
ui/src/styles/theme/_forms.scss Normal file
View File

@@ -0,0 +1,42 @@
/* Form Elements */
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--app-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-input,
.form-select {
padding: 10px 12px;
background: var(--app-bg);
border: 1px solid var(--app-border-color);
border-radius: 6px;
color: var(--app-text);
font-size: 14px;
font-family: inherit;
transition: all 0.2s ease;
&:focus {
outline: none;
border-color: var(--app-accent-primary);
box-shadow: 0 0 0 3px rgba(142, 180, 255, 0.1);
}
&::placeholder {
color: var(--app-text-subtle);
}
}
.form-input-search {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23afc1e6' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='5'%3E%3C/circle%3E%3Cpath d='M11 11l4 4'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 36px;
}
.form-input-code {
font-family: 'Courier New', monospace;
color: var(--app-text-code);
}

19
ui/src/styles/theme/_tags.scss Normal file
View File

@@ -0,0 +1,19 @@
/* Tag Styles */
.tag {
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
font-family: 'Courier New', monospace;
}
.tag-blue {
background: rgba(142, 180, 255, 0.15);
color: var(--app-accent-primary);
}
.tag-yellow {
background: rgba(255, 215, 0, 0.15);
color: var(--app-accent-yellow);
}

58
ui/src/styles/theme/_typography.scss Normal file
View File

@@ -0,0 +1,58 @@
/* Typography Styles */
.type-h1 {
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px 0;
color: var(--app-text);
}
.type-h2 {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 12px 0;
color: var(--app-text);
}
.type-h3 {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 12px 0;
color: var(--app-text);
}
.type-body {
font-size: 14px;
font-weight: 400;
line-height: 1.6;
margin: 0 0 12px 0;
color: var(--app-text);
}
.type-small {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
margin: 0 0 12px 0;
color: var(--app-text-muted);
}
.type-code {
font-family: 'Courier New', monospace;
font-size: 13px;
color: var(--app-text-code);
background: var(--app-code-bg);
padding: 8px 12px;
border-radius: 4px;
display: inline-block;
}
.type-meta {
font-size: 12px;
color: var(--app-text-muted);
display: block;
margin-top: 8px;
font-family: 'Courier New', monospace;
}

56
ui/src/styles/theme/_utilities.scss Normal file
View File

@@ -0,0 +1,56 @@
/* Color Utilities */
.text-primary {
color: var(--app-text);
}
.text-muted {
color: var(--app-text-muted);
}
.text-subtle {
color: var(--app-text-subtle);
}
.text-code {
color: var(--app-text-code);
}
.text-accent-primary {
color: var(--app-accent-primary);
}
.text-accent-yellow {
color: var(--app-accent-yellow);
}
.text-success {
color: var(--app-status-success);
}
.text-warning {
color: var(--app-status-warning);
}
.text-error {
color: var(--app-status-error);
}
.text-info {
color: var(--app-status-info);
}
.bg-primary {
background-color: var(--app-bg);
}
.bg-elevated {
background-color: var(--app-bg-elevated);
}
.border-primary {
border-color: var(--app-border-color);
}
.border-active {
border-color: var(--app-border-color-active);
}