262 lines
7.1 KiB
Python
262 lines
7.1 KiB
Python
"""
|
|
Theme and styling configuration for the Cluster4NPU UI application.
|
|
|
|
This module contains the complete QSS (Qt Style Sheets) theme definitions and color
|
|
constants used throughout the application. It provides a harmonious dark theme with
|
|
complementary color palette optimized for professional ML pipeline development.
|
|
|
|
Main Components:
|
|
- HARMONIOUS_THEME_STYLESHEET: Complete QSS dark theme definition
|
|
- Color constants and theme utilities
|
|
- Consistent styling for all UI components
|
|
|
|
Usage:
|
|
from cluster4npu_ui.config.theme import HARMONIOUS_THEME_STYLESHEET
|
|
|
|
app.setStyleSheet(HARMONIOUS_THEME_STYLESHEET)
|
|
"""
|
|
|
|
# Harmonious theme with complementary color palette
|
|
HARMONIOUS_THEME_STYLESHEET = """
|
|
QWidget {
|
|
background-color: #1e1e2e;
|
|
color: #cdd6f4;
|
|
font-family: "Inter", "SF Pro Display", "Segoe UI", sans-serif;
|
|
font-size: 13px;
|
|
}
|
|
QMainWindow {
|
|
background-color: #181825;
|
|
}
|
|
QDialog {
|
|
background-color: #1e1e2e;
|
|
border: 1px solid #313244;
|
|
}
|
|
QLabel {
|
|
color: #f9e2af;
|
|
font-weight: 500;
|
|
}
|
|
QLineEdit, QTextEdit, QSpinBox, QDoubleSpinBox, QComboBox {
|
|
background-color: #313244;
|
|
border: 2px solid #45475a;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
color: #cdd6f4;
|
|
selection-background-color: #74c7ec;
|
|
font-size: 13px;
|
|
}
|
|
QLineEdit:focus, QTextEdit:focus, QSpinBox:focus, QDoubleSpinBox:focus, QComboBox:focus {
|
|
border-color: #89b4fa;
|
|
background-color: #383a59;
|
|
outline: none;
|
|
}
|
|
QLineEdit:hover, QTextEdit:hover, QSpinBox:hover, QDoubleSpinBox:hover, QComboBox:hover {
|
|
border-color: #585b70;
|
|
}
|
|
QPushButton {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
color: #1e1e2e;
|
|
border: none;
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
min-height: 16px;
|
|
}
|
|
QPushButton:hover {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #a6c8ff, stop:1 #89dceb);
|
|
}
|
|
QPushButton:pressed {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #7287fd, stop:1 #5fb3d3);
|
|
}
|
|
QPushButton:disabled {
|
|
background-color: #45475a;
|
|
color: #6c7086;
|
|
}
|
|
QDialogButtonBox QPushButton {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
color: #1e1e2e;
|
|
min-width: 90px;
|
|
margin: 2px;
|
|
}
|
|
QDialogButtonBox QPushButton:hover {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #a6c8ff, stop:1 #89dceb);
|
|
}
|
|
QDialogButtonBox QPushButton[text="Cancel"] {
|
|
background-color: #585b70;
|
|
color: #cdd6f4;
|
|
border: 1px solid #6c7086;
|
|
}
|
|
QDialogButtonBox QPushButton[text="Cancel"]:hover {
|
|
background-color: #6c7086;
|
|
}
|
|
QListWidget {
|
|
background-color: #313244;
|
|
border: 2px solid #45475a;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
QListWidget::item {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #45475a;
|
|
color: #cdd6f4;
|
|
border-radius: 4px;
|
|
margin: 2px;
|
|
}
|
|
QListWidget::item:selected {
|
|
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
color: #1e1e2e;
|
|
border-radius: 6px;
|
|
}
|
|
QListWidget::item:hover {
|
|
background-color: #383a59;
|
|
border-radius: 6px;
|
|
}
|
|
QSplitter::handle {
|
|
background-color: #45475a;
|
|
width: 3px;
|
|
height: 3px;
|
|
}
|
|
QSplitter::handle:hover {
|
|
background-color: #89b4fa;
|
|
}
|
|
QCheckBox {
|
|
color: #cdd6f4;
|
|
spacing: 8px;
|
|
}
|
|
QCheckBox::indicator {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid #45475a;
|
|
border-radius: 4px;
|
|
background-color: #313244;
|
|
}
|
|
QCheckBox::indicator:checked {
|
|
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
border-color: #89b4fa;
|
|
}
|
|
QCheckBox::indicator:hover {
|
|
border-color: #89b4fa;
|
|
}
|
|
QScrollArea {
|
|
border: none;
|
|
background-color: #1e1e2e;
|
|
}
|
|
QScrollBar:vertical {
|
|
background-color: #313244;
|
|
width: 14px;
|
|
border-radius: 7px;
|
|
margin: 0px;
|
|
}
|
|
QScrollBar::handle:vertical {
|
|
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
border-radius: 7px;
|
|
min-height: 20px;
|
|
margin: 2px;
|
|
}
|
|
QScrollBar::handle:vertical:hover {
|
|
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #a6c8ff, stop:1 #89dceb);
|
|
}
|
|
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
|
|
border: none;
|
|
background: none;
|
|
height: 0px;
|
|
}
|
|
QMenuBar {
|
|
background-color: #181825;
|
|
color: #cdd6f4;
|
|
border-bottom: 1px solid #313244;
|
|
padding: 4px;
|
|
}
|
|
QMenuBar::item {
|
|
padding: 8px 12px;
|
|
background-color: transparent;
|
|
border-radius: 6px;
|
|
}
|
|
QMenuBar::item:selected {
|
|
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
color: #1e1e2e;
|
|
}
|
|
QMenu {
|
|
background-color: #313244;
|
|
color: #cdd6f4;
|
|
border: 1px solid #45475a;
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
}
|
|
QMenu::item {
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
}
|
|
QMenu::item:selected {
|
|
background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #89b4fa, stop:1 #74c7ec);
|
|
color: #1e1e2e;
|
|
}
|
|
QComboBox::drop-down {
|
|
border: none;
|
|
width: 30px;
|
|
border-radius: 4px;
|
|
}
|
|
QComboBox::down-arrow {
|
|
image: none;
|
|
border: 5px solid transparent;
|
|
border-top: 6px solid #cdd6f4;
|
|
margin-right: 8px;
|
|
}
|
|
QFormLayout QLabel {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
color: #f9e2af;
|
|
}
|
|
QTextEdit {
|
|
line-height: 1.4;
|
|
}
|
|
/* Custom accent colors for different UI states */
|
|
.success {
|
|
color: #a6e3a1;
|
|
}
|
|
.warning {
|
|
color: #f9e2af;
|
|
}
|
|
.error {
|
|
color: #f38ba8;
|
|
}
|
|
.info {
|
|
color: #89b4fa;
|
|
}
|
|
"""
|
|
|
|
# Color constants for programmatic use
|
|
class Colors:
|
|
"""Color constants used throughout the application."""
|
|
|
|
# Background colors
|
|
BACKGROUND_MAIN = "#1e1e2e"
|
|
BACKGROUND_WINDOW = "#181825"
|
|
BACKGROUND_WIDGET = "#313244"
|
|
BACKGROUND_HOVER = "#383a59"
|
|
|
|
# Text colors
|
|
TEXT_PRIMARY = "#cdd6f4"
|
|
TEXT_SECONDARY = "#f9e2af"
|
|
TEXT_DISABLED = "#6c7086"
|
|
|
|
# Accent colors
|
|
ACCENT_PRIMARY = "#89b4fa"
|
|
ACCENT_SECONDARY = "#74c7ec"
|
|
ACCENT_HOVER = "#a6c8ff"
|
|
|
|
# State colors
|
|
SUCCESS = "#a6e3a1"
|
|
WARNING = "#f9e2af"
|
|
ERROR = "#f38ba8"
|
|
INFO = "#89b4fa"
|
|
|
|
# Border colors
|
|
BORDER_NORMAL = "#45475a"
|
|
BORDER_HOVER = "#585b70"
|
|
BORDER_FOCUS = "#89b4fa"
|
|
|
|
|
|
def apply_theme(app):
|
|
"""Apply the harmonious theme to the application."""
|
|
app.setStyleSheet(HARMONIOUS_THEME_STYLESHEET) |