Skip to content

Commit cc6e2f5

Browse files
LucHeartLucHeart
committed
refactor: scope LogsTab styles via CSS isolation, use theme palette
Move the LogsTab console styles from a global <style> block into a scoped LogsTab.razor.css (Blazor CSS isolation) so the generic class names can no longer collide with other components. Replace the hardcoded dark colors with MudBlazor --mud-palette-* variables so the console follows the active theme. Reference the scoped-styles bundle from the Photino/Web host pages.
1 parent fb03ad6 commit cc6e2f5

4 files changed

Lines changed: 100 additions & 89 deletions

File tree

‎Desktop/Ui/Pages/Dash/Tabs/LogsTab.razor‎

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -125,92 +125,3 @@
125125
}
126126
}
127127

128-
<style>
129-
.console-toolbar {
130-
display: flex;
131-
align-items: center;
132-
gap: 4px;
133-
padding: 6px 8px;
134-
background: #14171a;
135-
border: 1px solid #2a2d31;
136-
border-bottom: none;
137-
border-radius: 4px 4px 0 0;
138-
font-family: 'Cascadia Code', 'Consolas', monospace;
139-
}
140-
141-
.toolbar-spacer { flex: 1; }
142-
143-
.level-chip, .term-btn {
144-
background: transparent;
145-
border: 1px solid #2e3338;
146-
color: #9aa0a6;
147-
font-family: inherit;
148-
font-size: 11px;
149-
padding: 2px 8px;
150-
border-radius: 3px;
151-
cursor: pointer;
152-
line-height: 1.4;
153-
}
154-
155-
.term-btn:hover, .level-chip:hover { border-color: #4a4f55; color: #e6e6e6; }
156-
157-
.level-chip.off { opacity: 0.35; text-decoration: line-through; }
158-
.level-chip.level-verbose.on { color: #6c7177; }
159-
.level-chip.level-debug.on { color: #9aa0a6; }
160-
.level-chip.level-information.on { color: #6cb6ff; }
161-
.level-chip.level-warning.on { color: #ffd166; }
162-
.level-chip.level-error.on { color: #ff6b6b; }
163-
.level-chip.level-fatal.on { color: #fff; background: #b22; border-color: #b22; }
164-
165-
.console {
166-
height: calc(100vh - 140px);
167-
overflow: auto;
168-
background: #0b0d0e;
169-
border: 1px solid #2a2d31;
170-
border-radius: 0 0 4px 4px;
171-
padding: 6px 0;
172-
font-family: 'Cascadia Code', 'Consolas', 'Menlo', monospace;
173-
font-size: 12.5px;
174-
line-height: 1.5;
175-
color: #d4d4d4;
176-
}
177-
178-
.log-line {
179-
padding: 0 12px;
180-
white-space: nowrap;
181-
overflow: hidden;
182-
text-overflow: ellipsis;
183-
cursor: pointer;
184-
}
185-
186-
.log-line:hover { background: rgba(255,255,255,0.04); }
187-
.log-line.expanded { background: rgba(255,255,255,0.06); }
188-
189-
.log-time { color: #5a6066; margin-right: 10px; }
190-
.log-level { display: inline-block; width: 30px; font-weight: 600; margin-right: 8px; }
191-
.log-source { color: #b48ead; margin-right: 10px; }
192-
.log-message { color: #d4d4d4; }
193-
194-
.log-level.level-verbose { color: #6c7177; }
195-
.log-level.level-debug { color: #9aa0a6; }
196-
.log-level.level-information { color: #6cb6ff; }
197-
.log-level.level-warning { color: #ffd166; }
198-
.log-level.level-error { color: #ff6b6b; }
199-
.log-level.level-fatal { color: #fff; background: #b22; padding: 0 2px; border-radius: 2px; }
200-
201-
.log-line.level-warning .log-message { color: #ffe2a3; }
202-
.log-line.level-error .log-message { color: #ffb3b3; }
203-
.log-line.level-fatal .log-message { color: #ffd4d4; }
204-
205-
.log-expanded {
206-
margin: 0;
207-
padding: 6px 12px 8px 12px;
208-
background: rgba(255,255,255,0.03);
209-
color: #cfd2d6;
210-
white-space: pre-wrap;
211-
word-break: break-word;
212-
font-family: inherit;
213-
font-size: 12px;
214-
border-left: 2px solid #2a2d31;
215-
}
216-
</style>

‎Desktop/Ui/Pages/Dash/Tabs/LogsTab.razor.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/* Scoped to LogsTab via Blazor CSS isolation. Colors derive from the MudBlazor
2+
theme palette so the console follows light/dark themes. */
3+
4+
.console-toolbar {
5+
display: flex;
6+
align-items: center;
7+
gap: 4px;
8+
padding: 6px 8px;
9+
background: var(--mud-palette-surface);
10+
border: 1px solid var(--mud-palette-lines-default);
11+
border-bottom: none;
12+
border-radius: 4px 4px 0 0;
13+
font-family: 'Cascadia Code', 'Consolas', monospace;
14+
}
15+
16+
.toolbar-spacer { flex: 1; }
17+
18+
.level-chip, .term-btn {
19+
background: transparent;
20+
border: 1px solid var(--mud-palette-lines-default);
21+
color: var(--mud-palette-text-secondary);
22+
font-family: inherit;
23+
font-size: 11px;
24+
padding: 2px 8px;
25+
border-radius: 3px;
26+
cursor: pointer;
27+
line-height: 1.4;
28+
}
29+
30+
.term-btn:hover, .level-chip:hover {
31+
border-color: var(--mud-palette-text-secondary);
32+
color: var(--mud-palette-text-primary);
33+
}
34+
35+
.level-chip.off { opacity: 0.35; text-decoration: line-through; }
36+
.level-chip.level-verbose.on { color: var(--mud-palette-text-disabled); }
37+
.level-chip.level-debug.on { color: var(--mud-palette-text-secondary); }
38+
.level-chip.level-information.on { color: var(--mud-palette-info); }
39+
.level-chip.level-warning.on { color: var(--mud-palette-warning); }
40+
.level-chip.level-error.on { color: var(--mud-palette-error); }
41+
.level-chip.level-fatal.on {
42+
color: var(--mud-palette-error-text);
43+
background: var(--mud-palette-error);
44+
border-color: var(--mud-palette-error);
45+
}
46+
47+
.console {
48+
height: calc(100vh - 140px);
49+
overflow: auto;
50+
background: var(--mud-palette-background);
51+
border: 1px solid var(--mud-palette-lines-default);
52+
border-radius: 0 0 4px 4px;
53+
padding: 6px 0;
54+
font-family: 'Cascadia Code', 'Consolas', 'Menlo', monospace;
55+
font-size: 12.5px;
56+
line-height: 1.5;
57+
color: var(--mud-palette-text-primary);
58+
}
59+
60+
.log-line {
61+
padding: 0 12px;
62+
white-space: nowrap;
63+
overflow: hidden;
64+
text-overflow: ellipsis;
65+
cursor: pointer;
66+
}
67+
68+
.log-line:hover { background: var(--mud-palette-action-default-hover); }
69+
.log-line.expanded { background: var(--mud-palette-action-default-hover); }
70+
71+
.log-time { color: var(--mud-palette-text-disabled); margin-right: 10px; }
72+
.log-level { display: inline-block; width: 30px; font-weight: 600; margin-right: 8px; }
73+
.log-source { color: var(--mud-palette-secondary); margin-right: 10px; }
74+
.log-message { color: var(--mud-palette-text-primary); }
75+
76+
.log-level.level-verbose { color: var(--mud-palette-text-disabled); }
77+
.log-level.level-debug { color: var(--mud-palette-text-secondary); }
78+
.log-level.level-information { color: var(--mud-palette-info); }
79+
.log-level.level-warning { color: var(--mud-palette-warning); }
80+
.log-level.level-error { color: var(--mud-palette-error); }
81+
.log-level.level-fatal {
82+
color: var(--mud-palette-error-text);
83+
background: var(--mud-palette-error);
84+
padding: 0 2px;
85+
border-radius: 2px;
86+
}
87+
88+
.log-expanded {
89+
margin: 0;
90+
padding: 6px 12px 8px 12px;
91+
background: var(--mud-palette-action-default-hover);
92+
color: var(--mud-palette-text-primary);
93+
white-space: pre-wrap;
94+
word-break: break-word;
95+
font-family: inherit;
96+
font-size: 12px;
97+
border-left: 2px solid var(--mud-palette-lines-default);
98+
}

‎Desktop/wwwroot/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="css/OpenShock.min.css"/>
1010
<link rel="icon" type="image/png" href="images/Icon64.png"/>
1111
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
12+
<link href="OpenShock.Desktop.styles.css" rel="stylesheet"/>
1213
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
1314
<script src="js/tailwindcss-browser.js"></script>
1415
<script src="js/openshock.js"></script>

‎Desktop/wwwroot/photino.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="css/OpenShock.min.css"/>
1010
<link rel="icon" type="image/png" href="images/Icon64.png"/>
1111
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
12+
<link href="OpenShock.Desktop.styles.css" rel="stylesheet"/>
1213
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
1314
<script src="js/tailwindcss-browser.js"></script>
1415
<script src="js/openshock.js"></script>

0 commit comments

Comments
 (0)
⚡