mirror of
https://github.com/euzu/tuliprox.git
synced 2026-10-10 01:42:30 +02:00
euzuandGitHub
ed7f680829
New Features
Log consoles now support consistent theming across all available visual themes, including severity and target colors.
Filtering and actions use shared controls with improved accessibility hints and visual states.
Logs are expanded by default, with playlist updates displayed under a dedicated “Playlist Update” section.
Bug Fixes
Improved radio-button group borders and selected-state layering.
Refined stats panel sizing and styling for more consistent layouts.
246 lines
5.8 KiB
SCSS
246 lines
5.8 KiB
SCSS
@use "../../../size";
|
|
|
|
.tp__log-console {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
&__toolbar {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--gap-default);
|
|
padding: var(--padding-small) var(--padding-default);
|
|
background-color: var(--tertiary-background-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
&__filters {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
gap: var(--gap-mini);
|
|
|
|
.tp__radio-button-group__selected {
|
|
&:nth-child(2) {
|
|
background-color: var(--log-console-error-background-color);
|
|
color: var(--log-console-error-color);
|
|
border-color: var(--log-console-error-color);
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
background-color: var(--log-console-warn-background-color);
|
|
color: var(--log-console-warn-color);
|
|
border-color: var(--log-console-warn-color);
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
background-color: var(--log-console-info-background-color);
|
|
color: var(--log-console-info-color);
|
|
border-color: var(--log-console-info-color);
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
background-color: var(--log-console-debug-background-color);
|
|
color: var(--log-console-debug-color);
|
|
border-color: var(--log-console-debug-color);
|
|
}
|
|
|
|
&:nth-child(6) {
|
|
background-color: var(--log-console-trace-background-color);
|
|
color: var(--log-console-trace-color);
|
|
border-color: var(--log-console-trace-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
gap: var(--gap-default);
|
|
}
|
|
|
|
&__search {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--gap-mini);
|
|
}
|
|
|
|
&__action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--gap-small);
|
|
padding: var(--padding-micro) var(--padding-mini);
|
|
font-size: var(--font-size-xs);
|
|
border-radius: var(--border-radius-small);
|
|
border: 1px solid var(--border-color);
|
|
background-color: var(--text-button-background-color);
|
|
color: var(--text-button-color);
|
|
fill: var(--text-button-color);
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease;
|
|
|
|
&:hover {
|
|
background-color: var(--text-button-background-color);
|
|
}
|
|
|
|
&--active,
|
|
&--active:focus {
|
|
background-color: var(--text-button-active-background-color);
|
|
color: var(--text-button-active-color);
|
|
fill: var(--text-button-active-color);
|
|
border-color: var(--text-button-active-border-color);
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
|
|
&__status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--gap-small);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--modest-text-color);
|
|
|
|
&-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--log-console-muted-color);
|
|
|
|
&--connected {
|
|
background-color: var(--log-console-success-color);
|
|
box-shadow: 0 0 4px var(--log-console-success-color);
|
|
}
|
|
|
|
&--disconnected {
|
|
background-color: var(--log-console-error-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__output {
|
|
height: 670px;
|
|
max-height: 800px;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
background-color: var(--log-console-background-color);
|
|
color: var(--log-console-text-color);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 0.78rem;
|
|
line-height: 1.4;
|
|
padding: var(--padding-small);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
scrollbar-width: thin;
|
|
user-select: text;
|
|
}
|
|
|
|
&__row {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: flex-start;
|
|
gap: var(--gap-default);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
padding: 1px 0;
|
|
border-bottom: 1px solid var(--log-console-row-border-color);
|
|
|
|
&:hover {
|
|
background-color: var(--log-console-row-hover-background-color);
|
|
}
|
|
}
|
|
|
|
&__timestamp {
|
|
color: var(--log-console-muted-color);
|
|
flex-shrink: 0;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
&__level {
|
|
flex-shrink: 0;
|
|
padding: 0 var(--padding-micro);
|
|
border-radius: 3px;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
min-width: 44px;
|
|
|
|
&--trace {
|
|
background-color: var(--log-console-trace-background-color);
|
|
color: var(--log-console-trace-color);
|
|
}
|
|
|
|
&--debug {
|
|
background-color: var(--log-console-debug-background-color);
|
|
color: var(--log-console-debug-color);
|
|
}
|
|
|
|
&--info {
|
|
background-color: var(--log-console-info-background-color);
|
|
color: var(--log-console-info-color);
|
|
}
|
|
|
|
&--warn {
|
|
background-color: var(--log-console-warn-background-color);
|
|
color: var(--log-console-warn-color);
|
|
}
|
|
|
|
&--error {
|
|
background-color: var(--log-console-error-background-color);
|
|
color: var(--log-console-error-color);
|
|
}
|
|
}
|
|
|
|
&__target {
|
|
color: var(--log-console-target-color);
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
|
|
&::after {
|
|
content: ":";
|
|
color: var(--log-console-muted-color);
|
|
}
|
|
}
|
|
|
|
&__message {
|
|
color: var(--log-console-text-color);
|
|
flex: 1 1 auto;
|
|
|
|
&--error {
|
|
color: var(--log-console-error-color);
|
|
}
|
|
|
|
&--warn {
|
|
color: var(--log-console-warn-color);
|
|
}
|
|
}
|
|
|
|
&__empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: var(--log-console-muted-color);
|
|
font-style: italic;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
}
|