1510 lines
34 KiB
CSS
1510 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;
|
|
}
|
|
|
|
.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;
|
|
}
|