44r0n7
86c4a11321
Pause preview updates when the workspace config is not saveable, surface that state in the Live Preview panel, and treat incomplete threshold color setups as real blocking errors so MangoHud preview never sees the bad intermediate state.
1520 lines
34 KiB
CSS
1520 lines
34 KiB
CSS
/* ── MangoTune design tokens ───────────────────────────────────────────── */
|
|
@define-color mt_bg #0f1117;
|
|
@define-color mt_panel #13151e;
|
|
@define-color mt_panel_alt #1a1d2a;
|
|
@define-color mt_border #1e2130;
|
|
@define-color mt_border_soft #2a2d3e;
|
|
@define-color mt_text #c8cad4;
|
|
@define-color mt_text_dim #7a7e96;
|
|
@define-color mt_text_faint #454860;
|
|
@define-color mt_accent #e8a940;
|
|
@define-color mt_accent_bg #2a1e06;
|
|
@define-color mt_accent_border #3d2d0a;
|
|
@define-color mt_success #4caf7a;
|
|
@define-color mt_success_bg #0e2518;
|
|
@define-color mt_success_border #1a3d29;
|
|
@define-color mt_info #6ea8e7;
|
|
@define-color mt_info_bg #112236;
|
|
@define-color mt_info_border #1d4268;
|
|
@define-color mt_danger #e05555;
|
|
@define-color mt_danger_bg #2a1010;
|
|
@define-color mt_danger_border #3d1818;
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
SHARED BADGE / CHIP PATTERN
|
|
All badges: 2px radius, mono font, 0.72em, no shadow.
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.layer-badge-env,
|
|
.layer-badge-perapp,
|
|
.layer-badge-global,
|
|
.conflict-badge,
|
|
.dashboard-chip,
|
|
.dashboard-preset-badge,
|
|
.tool-chip,
|
|
.tool-section-badge {
|
|
border-radius: 2px;
|
|
padding: 1px 5px;
|
|
min-height: 16px;
|
|
font-size: 0.69em;
|
|
font-weight: 500;
|
|
line-height: 1.0;
|
|
letter-spacing: 0.04em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.layer-badge-env {
|
|
background-color: @mt_danger_bg;
|
|
color: @mt_danger;
|
|
border: 1px solid @mt_danger_border;
|
|
}
|
|
|
|
.layer-badge-perapp {
|
|
background-color: @mt_accent_bg;
|
|
color: @mt_accent;
|
|
border: 1px solid @mt_accent_border;
|
|
}
|
|
|
|
.layer-badge-global {
|
|
background-color: @mt_success_bg;
|
|
color: @mt_success;
|
|
border: 1px solid @mt_success_border;
|
|
}
|
|
|
|
.conflict-badge {
|
|
background-color: @mt_danger_bg;
|
|
color: @mt_danger;
|
|
border: 1px solid @mt_danger_border;
|
|
}
|
|
|
|
.dashboard-chip,
|
|
.dashboard-preset-badge,
|
|
.tool-chip {
|
|
background-color: @mt_accent_bg;
|
|
color: @mt_accent;
|
|
border: 1px solid @mt_accent_border;
|
|
}
|
|
|
|
.tool-chip-row {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.tool-chip-flow {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.tool-page-chip {
|
|
background-color: @mt_accent_bg;
|
|
color: @mt_accent;
|
|
border: 1px solid @mt_accent_border;
|
|
border-radius: 2px;
|
|
padding: 1px 5px;
|
|
min-height: 16px;
|
|
font-size: 0.69em;
|
|
font-weight: 500;
|
|
line-height: 1.0;
|
|
letter-spacing: 0.04em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tool-section-badge {
|
|
background-color: alpha(@mt_accent, 0.08);
|
|
border: 1px solid alpha(@mt_accent, 0.18);
|
|
color: @mt_accent;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.search-target-flash {
|
|
background-color: alpha(@mt_accent, 0.14);
|
|
box-shadow: inset 0 0 0 2px alpha(@mt_accent, 0.75);
|
|
}
|
|
|
|
.control-row.search-target-flash,
|
|
preferencesgroup list row.search-target-flash {
|
|
background: alpha(@mt_accent, 0.14);
|
|
box-shadow: inset 3px 0 0 0 @mt_accent, inset 0 0 0 1px alpha(@mt_accent, 0.65);
|
|
}
|
|
|
|
.control-row.search-target-flash .title,
|
|
.control-row.search-target-flash .subtitle,
|
|
preferencesgroup list row.search-target-flash .title,
|
|
preferencesgroup list row.search-target-flash .subtitle {
|
|
color: @mt_text;
|
|
}
|
|
|
|
preferencesgroup list row.search-target-flash > box,
|
|
preferencesgroup list row.search-target-flash > revealer > box,
|
|
preferencesgroup list row.search-target-flash box {
|
|
background: transparent;
|
|
}
|
|
|
|
.hud-order-list {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.hud-order-row {
|
|
background: @mt_panel;
|
|
border-left: 1px solid @mt_border;
|
|
border-right: 1px solid @mt_border;
|
|
border-top: 1px solid @mt_border;
|
|
border-bottom: 0;
|
|
border-radius: 2px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.hud-order-list > box:last-child.hud-order-row {
|
|
border-bottom: 1px solid @mt_border;
|
|
}
|
|
|
|
.hud-order-row-dragging {
|
|
opacity: 0.72;
|
|
border-color: alpha(@mt_accent, 0.34);
|
|
}
|
|
|
|
.hud-order-row-drop-before {
|
|
box-shadow: inset 0 2px 0 0 alpha(@mt_accent, 0.95);
|
|
}
|
|
|
|
.hud-order-row-drop-after {
|
|
box-shadow: inset 0 -2px 0 0 alpha(@mt_accent, 0.95);
|
|
}
|
|
|
|
.hud-order-index {
|
|
min-width: 18px;
|
|
}
|
|
|
|
.hud-order-key {
|
|
color: @mt_text_dim;
|
|
font-size: 0.76em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
margin-right: 8px;
|
|
min-width: 84px;
|
|
}
|
|
|
|
.hud-order-handle {
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
.config-hint-results-scroll {
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
background: @mt_panel;
|
|
}
|
|
|
|
.config-hint-results {
|
|
padding: 6px;
|
|
}
|
|
|
|
.config-hint-row {
|
|
padding: 6px 8px;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
background: @mt_panel_alt;
|
|
}
|
|
|
|
.config-hint-title {
|
|
color: @mt_text;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.config-hint-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.config-hint-candidates {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.config-hint-candidate {
|
|
min-height: 20px;
|
|
padding: 0 6px;
|
|
border-radius: 2px;
|
|
border: 1px solid @mt_border;
|
|
background: @mt_panel;
|
|
color: @mt_text;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.config-hint-candidate:hover {
|
|
background: alpha(@mt_accent, 0.08);
|
|
border-color: alpha(@mt_accent, 0.32);
|
|
}
|
|
|
|
.config-hint-candidate-primary {
|
|
background: alpha(@mt_accent, 0.09);
|
|
border-color: alpha(@mt_accent, 0.34);
|
|
color: @mt_accent;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
APP SHELL — header bar, config bar, sidebar
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.app-headerbar {
|
|
background: @mt_panel;
|
|
border-bottom: 1px solid @mt_border;
|
|
}
|
|
|
|
.app-window,
|
|
.app-toolbar-view,
|
|
.app-content-shell,
|
|
.app-split-view,
|
|
.app-navigation-view {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.app-toolbar-view > contents,
|
|
.app-content-shell > widget,
|
|
.app-navigation-view > widget {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.shell-window-title .title {
|
|
color: @mt_text;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.shell-window-title .subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.config-bar {
|
|
background-color: @mt_panel;
|
|
border-bottom: 1px solid @mt_border;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.shell-strip {
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.shell-strip-label {
|
|
color: @mt_text_dim;
|
|
font-size: 0.72em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
.shell-status-label {
|
|
color: @mt_text_dim;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.shell-strip-icon,
|
|
.shell-conflict-label {
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
.shell-conflict-active {
|
|
color: @mt_danger;
|
|
}
|
|
|
|
.shell-target-select,
|
|
.shell-strip-button,
|
|
.shell-save-button,
|
|
.shell-menu-button {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.shell-target-select,
|
|
.shell-target-select > button,
|
|
.shell-target-summary,
|
|
.shell-strip-button,
|
|
.shell-save-button > button,
|
|
.shell-menu-button {
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border_soft;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.shell-strip-button:hover,
|
|
.shell-target-select > button:hover,
|
|
.shell-target-summary:hover,
|
|
.shell-save-button > button:hover,
|
|
.shell-menu-button:hover {
|
|
background: @mt_panel_alt;
|
|
border-color: alpha(@mt_accent, 0.34);
|
|
color: @mt_accent;
|
|
}
|
|
|
|
.shell-target-select > button label,
|
|
.shell-target-select > button image,
|
|
.shell-save-button > button label,
|
|
.shell-save-button > button image,
|
|
.shell-menu-button > button image {
|
|
color: inherit;
|
|
}
|
|
|
|
.shell-target-summary {
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
.shell-target-summary-label {
|
|
color: @mt_text;
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
SIDEBAR NAVIGATION
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.navigation-shell {
|
|
background: @mt_panel;
|
|
border-right: 1px solid @mt_border;
|
|
padding: 12px 8px 12px 8px;
|
|
}
|
|
|
|
.navigation-search {
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 3px;
|
|
color: @mt_text;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-size: 0.84em;
|
|
}
|
|
|
|
.navigation-search:focus-within {
|
|
border-color: alpha(@mt_accent, 0.32);
|
|
box-shadow: inset 0 0 0 1px alpha(@mt_accent, 0.18);
|
|
}
|
|
|
|
.navigation-search image,
|
|
.navigation-search placeholder {
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
.navigation-search text {
|
|
color: @mt_text;
|
|
}
|
|
|
|
.navigation-sidebar {
|
|
background: transparent;
|
|
}
|
|
|
|
.navigation-sidebar row,
|
|
.navigation-row,
|
|
.navigation-section-row {
|
|
background: transparent;
|
|
border-radius: 2px;
|
|
margin: 1px 0;
|
|
color: @mt_text_dim;
|
|
transition: background 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
.navigation-sidebar row:hover,
|
|
.navigation-section-row:hover {
|
|
background: @mt_panel_alt;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.navigation-sidebar row:selected,
|
|
.navigation-sidebar row:focus-within {
|
|
background: alpha(@mt_accent, 0.08);
|
|
color: @mt_accent;
|
|
box-shadow: inset 0 0 0 1px alpha(@mt_accent, 0.28);
|
|
}
|
|
|
|
.navigation-row-box,
|
|
.navigation-sidebar row box {
|
|
color: inherit;
|
|
}
|
|
|
|
.navigation-row-label,
|
|
.navigation-row-icon,
|
|
.navigation-sidebar row label,
|
|
.navigation-sidebar row image {
|
|
color: inherit;
|
|
}
|
|
|
|
.navigation-sidebar row:selected label,
|
|
.navigation-sidebar row:selected image,
|
|
.navigation-sidebar row:focus-within label,
|
|
.navigation-sidebar row:focus-within image {
|
|
color: @mt_accent;
|
|
}
|
|
|
|
.navigation-section-button {
|
|
border-radius: 2px;
|
|
color: @mt_text_dim;
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
.navigation-section-button:hover {
|
|
background: @mt_panel_alt;
|
|
color: @mt_text;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
DASHBOARD PAGE
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.dashboard-page {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.dashboard-page-compact {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.dashboard-row > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-primary-card,
|
|
.dashboard-secondary-card,
|
|
.dashboard-position-card,
|
|
.dashboard-footer-card,
|
|
.dashboard-full-width-card,
|
|
.dashboard-stack,
|
|
.dashboard-inline-grid,
|
|
.preview-group,
|
|
.preview-size-row,
|
|
.preview-scene-control,
|
|
.tool-page-clamp {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-inline-grid {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.dashboard-inline-section {
|
|
margin-top: 2px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid @mt_border_soft;
|
|
}
|
|
|
|
.dashboard-profiles-compact > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-profiles-strip > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.profile-action-button {
|
|
min-width: 34px;
|
|
min-height: 34px;
|
|
padding: 0;
|
|
}
|
|
|
|
.dashboard-hero {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.dashboard-hero-title {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.dashboard-hero-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.dashboard-card {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
padding: 8px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dashboard-card-compact {
|
|
border-radius: 2px;
|
|
padding: 6px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dashboard-card-title {
|
|
font-size: 1.0em;
|
|
font-weight: 500;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.dashboard-card-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.dashboard-card > * + *,
|
|
.dashboard-card-compact > * + * {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.dashboard-inline-row {
|
|
min-height: 30px;
|
|
}
|
|
|
|
.dashboard-status-panel {
|
|
border-radius: 2px;
|
|
padding: 6px 8px;
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border;
|
|
}
|
|
|
|
.dashboard-preview-subsection {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.preview-group-body {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.preview-fixed-spin {
|
|
min-width: 132px;
|
|
}
|
|
|
|
.preview-profile-grid {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.preview-profile-button {
|
|
min-height: 30px;
|
|
}
|
|
|
|
.dashboard-status-line {
|
|
font-size: 0.88em;
|
|
font-weight: 500;
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
.dashboard-field-label {
|
|
font-weight: 500;
|
|
font-size: 0.92em;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.dashboard-value-label {
|
|
color: @mt_accent;
|
|
font-weight: 500;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-size: 0.88em;
|
|
min-width: 48px;
|
|
}
|
|
|
|
.dashboard-scale trough {
|
|
min-height: 5px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.dashboard-scale highlight {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.dashboard-toggle {
|
|
background: @mt_panel_alt;
|
|
border: 1px solid @mt_border;
|
|
color: @mt_text;
|
|
border-radius: 2px;
|
|
padding: 1px 5px;
|
|
font-size: 0.86em;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dashboard-toggle:hover {
|
|
background: alpha(@mt_accent, 0.08);
|
|
border-color: alpha(@mt_accent, 0.30);
|
|
color: @mt_text;
|
|
}
|
|
|
|
.dashboard-toggle:checked,
|
|
.dashboard-toggle:active {
|
|
background: @mt_accent_bg;
|
|
border-color: @mt_accent_border;
|
|
color: @mt_accent;
|
|
}
|
|
|
|
.dashboard-toggle:disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.dashboard-toggle label,
|
|
.dashboard-toggle image {
|
|
color: inherit;
|
|
}
|
|
|
|
.metric-toggle {
|
|
min-width: 64px;
|
|
border-radius: 2px;
|
|
min-height: 26px;
|
|
font-size: 0.86em;
|
|
}
|
|
|
|
.metric-group {
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.metric-group-title {
|
|
min-width: 110px;
|
|
}
|
|
|
|
.metric-group-flow {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.dashboard-preset-button {
|
|
background: @mt_panel_alt;
|
|
color: @mt_text;
|
|
border-radius: 2px;
|
|
padding: 6px 8px;
|
|
border: 1px solid @mt_border;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dashboard-preset-button:hover {
|
|
background: @mt_panel_alt;
|
|
border-color: alpha(@mt_accent, 0.30);
|
|
color: @mt_text;
|
|
}
|
|
|
|
.dashboard-preset-button label {
|
|
color: inherit;
|
|
}
|
|
|
|
.dashboard-studio-box {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.dashboard-preview-actions > button {
|
|
min-height: 32px;
|
|
}
|
|
|
|
.dashboard-color-button {
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.page-jump {
|
|
border-radius: 2px;
|
|
font-size: 0.82em;
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
.page-jump:hover {
|
|
color: @mt_accent;
|
|
border-color: alpha(@mt_accent, 0.28);
|
|
}
|
|
|
|
.preview-status {
|
|
padding: 6px 10px;
|
|
border-radius: 2px;
|
|
font-weight: 500;
|
|
font-size: 0.78em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
.preview-status-live {
|
|
background: @mt_success_bg;
|
|
color: @mt_success;
|
|
border: 1px solid @mt_success_border;
|
|
}
|
|
|
|
.preview-status-idle {
|
|
background: @mt_panel_alt;
|
|
color: @mt_text_dim;
|
|
border: 1px solid @mt_border;
|
|
}
|
|
|
|
.preview-status-warning {
|
|
padding: 7px 10px;
|
|
border-radius: 2px;
|
|
background: alpha(@mt_danger, 0.10);
|
|
color: @mt_text;
|
|
border: 1px solid alpha(@mt_danger, 0.28);
|
|
font-size: 0.8em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.position-grid {
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border;
|
|
}
|
|
|
|
.position-grid-compact {
|
|
padding: 6px;
|
|
}
|
|
|
|
.position-node {
|
|
min-width: 38px;
|
|
min-height: 38px;
|
|
border-radius: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-status-strip {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.dashboard-status-summary {
|
|
padding: 7px 10px;
|
|
background: @mt_panel;
|
|
min-width: 0;
|
|
color: @mt_text_dim;
|
|
font-size: 0.80em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.position-node-active {
|
|
background: @mt_accent_bg;
|
|
color: @mt_accent;
|
|
border-color: @mt_accent_border;
|
|
}
|
|
|
|
.position-center {
|
|
color: @mt_text_faint;
|
|
font-weight: 500;
|
|
font-size: 0.78em;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
TOOL PAGES (deep settings: Performance, GPU, CPU, etc.)
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.tool-page {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.tool-page-start {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.tool-page-body {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.tool-page-hero {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
padding: 9px 13px;
|
|
box-shadow: none;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.tool-page-hero-flat {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.tool-page-eyebrow {
|
|
color: @mt_accent;
|
|
font-size: 0.70em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
}
|
|
|
|
.tool-page-title {
|
|
font-size: 1.20em;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: @mt_text;
|
|
}
|
|
|
|
.tool-page-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.90em;
|
|
}
|
|
|
|
.tool-section-shell {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.cascade-scroller {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.tool-section-header {
|
|
padding: 7px 11px 5px;
|
|
border-bottom: 1px solid @mt_border;
|
|
background: @mt_bg;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
.tool-section-title {
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
color: @mt_accent;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tool-section-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.84em;
|
|
}
|
|
|
|
.tool-section-group {
|
|
background: transparent;
|
|
}
|
|
|
|
.tool-callout {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
padding: 9px 11px;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.tool-callout-warning {
|
|
border-color: alpha(@mt_accent, 0.22);
|
|
background: alpha(@mt_accent, 0.06);
|
|
}
|
|
|
|
.tool-callout-title {
|
|
font-weight: 500;
|
|
color: @mt_text;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.tool-callout-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.utility-window-shell {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.utility-window-header {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.utility-window-title {
|
|
color: @mt_text;
|
|
font-size: 1.02em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.utility-window-subtitle {
|
|
color: @mt_text_dim;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.utility-window-body {
|
|
background: transparent;
|
|
}
|
|
|
|
.utility-window-footer {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.utility-window-scroller {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
CONTROL ROWS
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.control-row {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
margin: 0 10px;
|
|
padding: 6px 4px;
|
|
border-top: 1px solid @mt_panel_alt;
|
|
}
|
|
|
|
.control-row.error {
|
|
background: alpha(@mt_danger, 0.05);
|
|
border-top: 1px solid @mt_danger_border;
|
|
}
|
|
|
|
.control-field {
|
|
min-height: 34px;
|
|
background: @mt_bg;
|
|
color: @mt_text;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 2px;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.control-shortcut {
|
|
padding: 6px 10px;
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 2px;
|
|
color: @mt_text;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.control-row entry,
|
|
.control-row text,
|
|
.control-row entry selection {
|
|
color: @mt_text;
|
|
}
|
|
|
|
.control-button {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.control-check {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.control-row spinbutton,
|
|
.control-spin,
|
|
.control-row dropdown > button,
|
|
.control-row combobox > box > button {
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border_soft;
|
|
color: @mt_text;
|
|
border-radius: 2px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.control-row spinbutton entry,
|
|
.control-spin entry,
|
|
.control-row spinbutton text,
|
|
.control-row dropdown > button label,
|
|
.control-row dropdown > button image,
|
|
.control-row combobox > box > button label,
|
|
.control-row combobox > box > button image {
|
|
color: inherit;
|
|
}
|
|
|
|
.threshold-triplet-entry {
|
|
min-width: 64px;
|
|
}
|
|
|
|
.control-row spinbutton button {
|
|
background: @mt_panel_alt;
|
|
border: 1px solid transparent;
|
|
color: @mt_text_dim;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.control-row spinbutton button:hover,
|
|
.control-row dropdown > button:hover,
|
|
.control-row combobox > box > button:hover {
|
|
background: @mt_panel_alt;
|
|
color: @mt_accent;
|
|
border-color: alpha(@mt_accent, 0.28);
|
|
}
|
|
|
|
.control-row switch:checked,
|
|
preferencesgroup list row switch:checked,
|
|
switch:checked {
|
|
background-color: alpha(@mt_accent, 0.18);
|
|
border-color: alpha(@mt_accent, 0.40);
|
|
}
|
|
|
|
.control-row switch slider,
|
|
preferencesgroup list row switch slider,
|
|
switch slider {
|
|
background: @mt_text;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
COLOR CONTROLS
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.color-swatch-button {
|
|
min-width: 26px;
|
|
min-height: 26px;
|
|
border-radius: 2px;
|
|
border: 1px solid @mt_border_soft;
|
|
padding: 0;
|
|
}
|
|
|
|
.color-swatch-unset {
|
|
opacity: 0.55;
|
|
border-color: alpha(@mt_text, 0.14);
|
|
}
|
|
|
|
.color-control {
|
|
min-width: 88px;
|
|
}
|
|
|
|
.stacked-color-editor {
|
|
min-width: 52px;
|
|
}
|
|
|
|
.stacked-color-entry {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.stacked-color-swatch {
|
|
min-width: 50px;
|
|
min-height: 14px;
|
|
}
|
|
|
|
.color-list-editor {
|
|
min-width: 0;
|
|
}
|
|
|
|
.color-list-column {
|
|
min-width: 52px;
|
|
}
|
|
|
|
.color-list-cell-entry {
|
|
min-width: 50px;
|
|
}
|
|
|
|
.color-list-swatch {
|
|
min-width: 50px;
|
|
min-height: 14px;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
MISC UTILITY
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.option-shadowed {
|
|
text-decoration: line-through;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
|
|
/* ════════════════════════════════════════════════════════════════════════
|
|
STOCK GTK / ADWAITA OVERRIDES
|
|
These target widget types that have no custom CSS class hooks in the
|
|
Rust code. Ordered from broadest to most specific.
|
|
════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Toasts ─────────────────────────────────────────────────────────────
|
|
AdwToast renders as .toast inside the overlay. We tighten the timeout
|
|
via CSS appearance (actual duration must be set in Rust with
|
|
toast.set_timeout(2)), but we can at least flatten the corners and
|
|
bring the colours in line with the design language. */
|
|
toast {
|
|
background-color: @mt_panel;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 3px;
|
|
color: @mt_text;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
toast > widget > label {
|
|
color: @mt_text;
|
|
}
|
|
|
|
toast button {
|
|
border-radius: 2px;
|
|
color: @mt_accent;
|
|
}
|
|
|
|
/* ── Context menus / popovers ───────────────────────────────────────────
|
|
Stock GtkPopoverMenu. Flatten corners, darken bg to match panel. */
|
|
popover.menu,
|
|
popover.background.menu {
|
|
background-color: @mt_panel;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 2px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
popover.background > contents,
|
|
popover.menu > contents,
|
|
popover.background.menu > contents {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
popover.menu > arrow,
|
|
popover.background.menu > arrow {
|
|
margin: 0;
|
|
min-width: 8px;
|
|
min-height: 8px;
|
|
}
|
|
|
|
popover.menu > contents > box,
|
|
popover.menu > contents > scrolledwindow,
|
|
popover.menu > contents > scrolledwindow > viewport,
|
|
popover.menu > contents > scrolledwindow > viewport > box,
|
|
popover.background.menu > contents > box,
|
|
popover.background.menu > contents > scrolledwindow,
|
|
popover.background.menu > contents > scrolledwindow > viewport,
|
|
popover.background.menu > contents > scrolledwindow > viewport > box,
|
|
popover.background > contents > box,
|
|
popover.background > contents > scrolledwindow,
|
|
popover.background > contents > scrolledwindow > viewport,
|
|
popover.background > contents > scrolledwindow > viewport > box {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
popover.menu list,
|
|
popover.menu listview,
|
|
popover.background.menu list,
|
|
popover.background.menu listview {
|
|
background: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
popover.menu list > row,
|
|
popover.menu listview > row,
|
|
popover.background.menu list > row,
|
|
popover.background.menu listview > row {
|
|
border-radius: 0;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 1px 2px;
|
|
}
|
|
|
|
popover.menu list > row > box,
|
|
popover.menu listview > row > box,
|
|
popover.background.menu list > row > box,
|
|
popover.background.menu listview > row > box {
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
popover.menu modelbutton,
|
|
popover.background.menu modelbutton {
|
|
border-radius: 0;
|
|
color: @mt_text;
|
|
min-height: 0;
|
|
padding: 0 2px;
|
|
font-size: 0.80em;
|
|
}
|
|
|
|
popover.menu modelbutton:hover,
|
|
popover.background.menu modelbutton:hover {
|
|
background-color: @mt_panel_alt;
|
|
color: @mt_text;
|
|
}
|
|
|
|
popover.menu modelbutton:disabled,
|
|
popover.background.menu modelbutton:disabled {
|
|
color: @mt_text_faint;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
popover.menu separator,
|
|
popover.background.menu separator {
|
|
background-color: @mt_border;
|
|
margin: 0;
|
|
}
|
|
|
|
popover.compact-menu-popover {
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
popover.compact-menu-popover > arrow {
|
|
margin: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
popover.compact-menu-popover > contents {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.compact-menu-box {
|
|
margin: 0;
|
|
padding: 6px;
|
|
background-color: @mt_panel;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 0 1px alpha(@mt_border, 0.85);
|
|
}
|
|
|
|
.compact-menu-row {
|
|
border-radius: 2px;
|
|
min-height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.compact-menu-row:hover {
|
|
background-color: @mt_panel_alt;
|
|
}
|
|
|
|
.compact-menu-row:active {
|
|
background-color: alpha(@mt_accent, 0.22);
|
|
}
|
|
|
|
.compact-menu-row-leading,
|
|
.compact-menu-row-mark {
|
|
color: @mt_accent;
|
|
}
|
|
|
|
.compact-menu-row-title {
|
|
color: @mt_text;
|
|
font-size: 0.82em;
|
|
}
|
|
|
|
.compact-menu-row-subtitle,
|
|
.compact-menu-row-trailing {
|
|
color: @mt_text_dim;
|
|
font-size: 0.70em;
|
|
}
|
|
|
|
.compact-menu-separator {
|
|
min-height: 1px;
|
|
margin: 0;
|
|
background-color: @mt_border;
|
|
}
|
|
|
|
/* ── Unsaved changes / alert dialogs ────────────────────────────────────
|
|
libadwaita::AlertDialog renders as .alert-dialog. */
|
|
.alert-dialog {
|
|
background-color: @mt_panel;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.alert-dialog .dialog-body {
|
|
color: @mt_text_dim;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.alert-dialog .response-area {
|
|
border-top: 1px solid @mt_border;
|
|
padding: 6px;
|
|
}
|
|
|
|
.alert-dialog .response-area button {
|
|
border-radius: 2px;
|
|
padding: 6px 14px;
|
|
font-size: 0.90em;
|
|
}
|
|
|
|
.alert-dialog .response-area button.suggested-action {
|
|
background-color: @mt_info_bg;
|
|
border: 1px solid @mt_info_border;
|
|
color: @mt_info;
|
|
}
|
|
|
|
.alert-dialog .response-area button.suggested-action:hover {
|
|
background-color: alpha(@mt_info, 0.16);
|
|
}
|
|
|
|
.alert-dialog .response-area button.destructive-action {
|
|
background-color: @mt_danger_bg;
|
|
border: 1px solid @mt_danger_border;
|
|
color: @mt_danger;
|
|
}
|
|
|
|
.alert-dialog .response-area button.destructive-action:hover {
|
|
background-color: alpha(@mt_danger, 0.14);
|
|
}
|
|
|
|
.unsaved-dialog-shell {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.unsaved-dialog-card {
|
|
background: @mt_panel;
|
|
border: 1px solid @mt_border_soft;
|
|
border-radius: 4px;
|
|
padding: 18px;
|
|
min-width: 320px;
|
|
}
|
|
|
|
.unsaved-dialog-title {
|
|
color: @mt_text;
|
|
font-size: 1.16em;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.unsaved-dialog-body {
|
|
color: @mt_text_dim;
|
|
font-size: 0.92em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.unsaved-dialog-actions {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.unsaved-dialog-actions button {
|
|
min-height: 38px;
|
|
}
|
|
|
|
/* ── Explicit preferences/sheets we own in Rust ──────────────────────── */
|
|
.preferences-shell {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.preferences-page {
|
|
background: @mt_bg;
|
|
}
|
|
|
|
.preferences-group {
|
|
background: transparent;
|
|
}
|
|
|
|
.preferences-row {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* ── Preferences window ─────────────────────────────────────────────────
|
|
gtk4::Window > AdwPreferencesPage > AdwPreferencesGroup
|
|
No custom CSS classes — target by type. */
|
|
preferencespage {
|
|
background-color: @mt_bg;
|
|
}
|
|
|
|
preferencesgroup > box > box > label.title {
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
color: @mt_accent;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
preferencesgroup > box > box > label.subtitle {
|
|
font-size: 0.84em;
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
preferencesgroup list {
|
|
background-color: @mt_panel;
|
|
border: 1px solid @mt_border;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
preferencesgroup list row {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
padding: 6px 10px;
|
|
border-top: 1px solid @mt_panel_alt;
|
|
}
|
|
|
|
preferencesgroup list row:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
preferencesgroup list row:hover {
|
|
background-color: alpha(@mt_text, 0.03);
|
|
}
|
|
|
|
/* SwitchRow title/subtitle labels */
|
|
preferencesgroup list row .title {
|
|
font-size: 0.92em;
|
|
color: @mt_text;
|
|
}
|
|
|
|
preferencesgroup list row .subtitle {
|
|
font-size: 0.84em;
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
/* Switch inside SwitchRow */
|
|
preferencesgroup list row switch {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
preferencesgroup list row switch:checked {
|
|
background-color: alpha(@mt_accent, 0.18);
|
|
border-color: alpha(@mt_accent, 0.40);
|
|
}
|
|
|
|
preferencesgroup list row switch slider {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* ActionRow (e.g. Open Profiles Folder row) */
|
|
preferencesgroup list row button {
|
|
border-radius: 2px;
|
|
background: @mt_bg;
|
|
border: 1px solid @mt_border_soft;
|
|
color: @mt_text;
|
|
padding: 4px 12px;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
preferencesgroup list row button:hover {
|
|
border-color: alpha(@mt_accent, 0.34);
|
|
color: @mt_accent;
|
|
}
|
|
|
|
/* ── Stock AdwSwitchRow / GtkSwitch used elsewhere ──────────────────────
|
|
The toggle rows on the preferences page and anywhere a raw GtkSwitch
|
|
appears outside the custom .control-row context. */
|
|
switch {
|
|
border-radius: 999px;
|
|
min-width: 42px;
|
|
min-height: 22px;
|
|
}
|
|
|
|
/* ── Stock Adwaita list rows used in sidebar accordion ──────────────────
|
|
Expander rows (section expand buttons). */
|
|
expander-row {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
expander-row > box > box > label {
|
|
font-size: 0.78em;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-family: "IBM Plex Mono", monospace;
|
|
color: @mt_text_dim;
|
|
}
|
|
|
|
/* ── GtkScrolledWindow scrollbars ───────────────────────────────────────
|
|
Thin, low-contrast scrollbars throughout. */
|
|
scrollbar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
scrollbar slider {
|
|
background-color: @mt_border_soft;
|
|
border-radius: 999px;
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
margin: 2px;
|
|
}
|
|
|
|
scrollbar slider:hover {
|
|
background-color: @mt_text_faint;
|
|
}
|
|
|
|
/* ── GtkSeparator ───────────────────────────────────────────────────────*/
|
|
separator {
|
|
background-color: @mt_border;
|
|
min-height: 1px;
|
|
min-width: 1px;
|
|
}
|