295 lines
17 KiB
Python
295 lines
17 KiB
Python
"""Qt style sheets giving the app a modern, dark design-tool look (deep
|
||
ocean-blue surfaces, large rounded corners, a deep-sea gradient accent, and
|
||
colorful pill badges) inspired by contemporary dashboard UIs."""
|
||
from __future__ import annotations
|
||
|
||
# Brand accent — deep sea blue palette with teal-cyan gradients.
|
||
ACCENT = "#0096C7"
|
||
ACCENT_HOVER = "#48CAE4"
|
||
ACCENT2 = "#0077B6" # deeper ocean blue for gradients
|
||
GRADIENT = f"qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 {ACCENT2}, stop:1 {ACCENT})"
|
||
GRADIENT_HOVER = f"qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #023E8A, stop:1 {ACCENT_HOVER})"
|
||
|
||
_DARK = f"""
|
||
* {{ font-family: "Segoe UI", "Helvetica Neue", "Arial", "Yu Gothic UI", "Meiryo", sans-serif; font-size: 13px; }}
|
||
QMainWindow, QWidget {{ background: #0A1628; color: #E0F0FF; }}
|
||
QMainWindow::separator {{ background: #0A1628; width: 4px; height: 4px; }}
|
||
QStatusBar {{ background: #0A1628; color: #5C8DB8; border-top: 1px solid #132240; }}
|
||
QSplitter::handle {{ background: #0A1628; }}
|
||
/* Separate the nav rail (its own panel + divider) from the content area. */
|
||
QWidget#navWrap {{ background: #0D1F35; border-right: 1px solid #17263f; }}
|
||
QWidget#navWrap QTreeWidget, QWidget#navWrap QListWidget {{ background: transparent; border: none; }}
|
||
QWidget#contentArea {{ background: #0A1628; }}
|
||
/* Compact icons app-wide (they looked oversized on scaled displays). */
|
||
QPushButton, QToolButton, QComboBox, QTabBar {{ qproperty-iconSize: 14px 14px; }}
|
||
QTreeWidget#navrail {{ qproperty-iconSize: 16px 16px; }}
|
||
|
||
/* Square the pane (tabs above stay rounded): a rounded pane lets its square
|
||
child pages poke past the corners — the "rectangle behind the rounded box". */
|
||
QTabWidget::pane {{ background: #0D1F35; border: 1px solid #132240; border-radius: 0px; top: 2px; }}
|
||
QTabBar {{ background: transparent; }}
|
||
QTabBar::tab {{
|
||
background: #111D32; color: #5C8DB8; padding: 9px 22px; margin: 0 6px 8px 0;
|
||
border-radius: 10px; border: 1px solid #132240; font-weight: 500;
|
||
}}
|
||
QTabBar::tab:selected {{ background: {GRADIENT}; color: white; border: none; font-weight: 700; }}
|
||
QTabBar::tab:hover:!selected {{ background: #172A45; color: #B0D4F1; }}
|
||
/* Co4E flow "browser" tabs: sit FLUSH in their row (no floating bottom gap, so
|
||
the icon/label is vertically centred) and use the app's panel/accent surfaces
|
||
so the strip reads as part of the app. */
|
||
QTabBar#flowTabs::tab {{ background: #0D1F35; color: #8FB2D4; border: 1px solid #17263f;
|
||
padding: 6px 10px; margin: 0 3px 0 0; min-height: 22px; border-radius: 8px; }}
|
||
QTabBar#flowTabs::tab:selected {{ background: {GRADIENT}; color: white; border: 1px solid transparent; }}
|
||
QTabBar#flowTabs::tab:hover:!selected {{ background: #172A45; color: #E0F0FF; }}
|
||
/* The "new flow" (＋) button — styled as the last tab in the strip. */
|
||
QPushButton#flowAddBtn {{ background: #0D1F35; color: #8FB2D4; border: 1px solid #17263f;
|
||
border-radius: 8px; padding: 6px 0; font-size: 15px; font-weight: bold; min-height: 22px; }}
|
||
QPushButton#flowAddBtn:hover {{ background: #172A45; color: #E0F0FF; }}
|
||
/* Co4E sidebar (Workflows/Agents/Skills): transparent icon tabs with a subtle
|
||
translucent selection + the normal text colour (matches the app's lists,
|
||
not a bright fill). */
|
||
QTabBar#co4eSideTabs {{ qproperty-iconSize: 18px 18px; }}
|
||
QTabBar#co4eSideTabs::tab {{ background: transparent; color: #8FB2D4; border: none;
|
||
border-radius: 6px; padding: 5px; margin: 0 6px 0 0; }}
|
||
QTabBar#co4eSideTabs::tab:selected {{ background: rgba(0,150,199,0.28); color: #E0F0FF; }}
|
||
QTabBar#co4eSideTabs::tab:hover:!selected {{ background: #172A45; color: #B0D4F1; }}
|
||
/* Co4E canvas frame — match the app's other framed surfaces (not a faint hairline). */
|
||
QGraphicsView#co4eCanvas {{ background: #0D1F35; border: 1px solid #1A2D4A; border-radius: 10px; }}
|
||
|
||
QGroupBox {{
|
||
background: #0D1F35; border: 1px solid #132240; border-radius: 18px;
|
||
margin-top: 16px; padding: 14px 10px 10px 10px; font-weight: 700;
|
||
}}
|
||
QGroupBox::title {{
|
||
subcontrol-origin: margin; subcontrol-position: top left; left: 12px; top: 2px;
|
||
padding: 0 6px; color: #5C8DB8; letter-spacing: 0.5px;
|
||
}}
|
||
|
||
QPlainTextEdit, QTextEdit, QTextBrowser, QLineEdit, QTreeView, QListView, QTreeWidget, QListWidget {{
|
||
background: #111D32; color: #E0F0FF; border: 1px solid #1A2D4A; border-radius: 10px;
|
||
selection-background-color: {ACCENT}; selection-color: white;
|
||
}}
|
||
/* Scroll containers must NOT paint their own square panel behind rounded
|
||
children (that square is what shows as a "rectangle under the rounded box").
|
||
The corner where scrollbars meet is squared off too — keep it transparent. */
|
||
QScrollArea {{ background: transparent; border: none; }}
|
||
QAbstractScrollArea::corner {{ background: transparent; }}
|
||
QPlainTextEdit:focus, QTextEdit:focus, QLineEdit:focus {{ border: 1px solid {ACCENT}; }}
|
||
QTreeView::item, QListView::item {{ padding: 3px 2px; border-radius: 6px; }}
|
||
QTreeView::item:hover, QListView::item:hover {{ background: #172A45; }}
|
||
QTreeView::item:selected, QListView::item:selected {{ background: rgba(0,150,199,0.28); color: #E0F0FF; }}
|
||
QHeaderView::section {{ background: #111D32; color: #5C8DB8; border: none; border-bottom: 1px solid #132240; padding: 6px; }}
|
||
|
||
QPushButton {{
|
||
background: #132240; color: #E0F0FF; border: 1px solid #1A2D4A;
|
||
border-radius: 10px; padding: 8px 16px;
|
||
}}
|
||
QPushButton:hover {{ background: #1A3050; border-color: #234070; }}
|
||
QPushButton:pressed {{ background: #111D32; }}
|
||
QPushButton:disabled {{ color: #3A5A78; background: #0F1A28; border-color: #132240; }}
|
||
QPushButton#primary {{ background: {GRADIENT}; color: white; border: none; font-weight: 700; padding: 8px 18px; }}
|
||
QPushButton#primary:hover {{ background: {GRADIENT_HOVER}; }}
|
||
QPushButton#primary:disabled {{ background: #1A2D4A; color: #3A5A78; }}
|
||
QPushButton#danger {{ background: #E5484D; color: white; border: none; font-weight: 600; }}
|
||
QPushButton#danger:hover {{ background: #EF6368; }}
|
||
QPushButton#navMenuBtn {{
|
||
background: transparent; border: none; border-radius: 8px; padding: 5px 6px;
|
||
font-weight: 700; font-size: 11px; letter-spacing: 1px; color: #5C8DB8; text-align: left;
|
||
}}
|
||
QPushButton#navMenuBtn:hover {{ background: #132240; color: #E0F0FF; }}
|
||
QPushButton#navMenuBtn:pressed {{ background: #111D32; }}
|
||
|
||
QLabel#badge {{ background: #0A2A3A; color: #48CAE4; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgeSuccess {{ background: #0A2A20; color: #48D9A0; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgePurple {{ background: #1A1A3A; color: #9B8FF7; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgePink {{ background: #2A1A30; color: #D980C0; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgeWarn {{ background: #0A2A3A; color: #48CAE4; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#hint {{ color: #5C8DB8; }}
|
||
QLabel#warning {{ color: #48CAE4; font-weight: 600; }}
|
||
|
||
QComboBox {{ background: #111D32; border: 1px solid #1A2D4A; border-radius: 10px; padding: 6px 10px; }}
|
||
QComboBox:hover {{ border-color: #234070; }}
|
||
QComboBox::drop-down {{ border: none; width: 22px; }}
|
||
QComboBox QAbstractItemView {{
|
||
background: #111D32; border: 1px solid #1A2D4A; border-radius: 10px;
|
||
selection-background-color: {ACCENT}; selection-color: white; outline: none;
|
||
}}
|
||
|
||
QScrollBar:vertical {{ background: transparent; width: 11px; margin: 2px; }}
|
||
QScrollBar::handle:vertical {{ background: #1A2D4A; border-radius: 5px; min-height: 28px; }}
|
||
QScrollBar::handle:vertical:hover {{ background: {ACCENT}; }}
|
||
QScrollBar:horizontal {{ background: transparent; height: 11px; margin: 2px; }}
|
||
QScrollBar::handle:horizontal {{ background: #1A2D4A; border-radius: 5px; min-width: 28px; }}
|
||
QScrollBar::handle:horizontal:hover {{ background: {ACCENT}; }}
|
||
QScrollBar::add-line, QScrollBar::sub-line {{ height: 0; width: 0; border: none; background: none; }}
|
||
|
||
QCheckBox {{ spacing: 8px; }}
|
||
QCheckBox::indicator, QRadioButton::indicator {{
|
||
width: 16px; height: 16px; background: #111D32; border: 1px solid #1A2D4A; border-radius: 5px;
|
||
}}
|
||
QRadioButton::indicator {{ border-radius: 9px; }}
|
||
QCheckBox::indicator:hover, QRadioButton::indicator:hover {{ border-color: {ACCENT}; }}
|
||
QCheckBox::indicator:checked, QRadioButton::indicator:checked {{
|
||
background: {GRADIENT}; border-color: {ACCENT};
|
||
}}
|
||
QCheckBox::indicator:disabled {{ border-color: #132240; background: #0F1A28; }}
|
||
QCheckBox::indicator:checked:disabled, QRadioButton::indicator:checked:disabled {{
|
||
background: #1A3050; border-color: #234070;
|
||
}}
|
||
|
||
QMenu {{ background: #111D32; color: #E0F0FF; border: 1px solid #1A2D4A; border-radius: 10px; padding: 4px; }}
|
||
QMenu::item {{ padding: 6px 16px; border-radius: 6px; }}
|
||
QMenu::item:selected {{ background: {ACCENT}; color: white; }}
|
||
|
||
QToolTip {{ background: #172A45; color: #E0F0FF; border: 1px solid #1A2D4A; border-radius: 6px; padding: 4px 8px; }}
|
||
"""
|
||
|
||
_LIGHT = f"""
|
||
* {{ font-family: "Segoe UI", "Helvetica Neue", "Arial", "Yu Gothic UI", "Meiryo", sans-serif; font-size: 13px; }}
|
||
QMainWindow, QWidget {{ background: #E8F4FD; color: #1A2332; }}
|
||
QStatusBar {{ background: #E8F4FD; color: #5C8DB8; border-top: 1px solid #B8D4E8; }}
|
||
/* Separate the nav rail (its own panel + divider) from the content area. */
|
||
QWidget#navWrap {{ background: #EDF5FB; border-right: 1px solid #C4DBEC; }}
|
||
QWidget#navWrap QTreeWidget, QWidget#navWrap QListWidget {{ background: transparent; border: none; }}
|
||
QWidget#contentArea {{ background: #E8F4FD; }}
|
||
/* Compact icons app-wide (they looked oversized on scaled displays). */
|
||
QPushButton, QToolButton, QComboBox, QTabBar {{ qproperty-iconSize: 14px 14px; }}
|
||
QTreeWidget#navrail {{ qproperty-iconSize: 16px 16px; }}
|
||
|
||
QTabWidget::pane {{ background: #FFFFFF; border: 1px solid #B8D4E8; border-radius: 0px; top: 2px; }}
|
||
QTabBar {{ background: transparent; }}
|
||
QTabBar::tab {{
|
||
background: #D0E8F5; color: #3A6B8C; padding: 9px 22px; margin: 0 6px 8px 0;
|
||
border-radius: 10px; border: 1px solid #B8D4E8; font-weight: 500;
|
||
}}
|
||
QTabBar::tab:selected {{ background: {GRADIENT}; color: white; border: none; font-weight: 700; }}
|
||
QTabBar::tab:hover:!selected {{ background: #B8D4E8; color: #1A2332; }}
|
||
/* Co4E flow "browser" tabs — light-theme counterpart (see dark block). */
|
||
QTabBar#flowTabs::tab {{ background: #EDF5FB; color: #3A6B8C; border: 1px solid #C4DBEC;
|
||
padding: 6px 10px; margin: 0 3px 0 0; min-height: 22px; border-radius: 8px; }}
|
||
QTabBar#flowTabs::tab:selected {{ background: {GRADIENT}; color: white; border: 1px solid transparent; }}
|
||
QTabBar#flowTabs::tab:hover:!selected {{ background: #D0E8F5; color: #1A2332; }}
|
||
/* The "new flow" (＋) button (light) — styled as the last tab in the strip. */
|
||
QPushButton#flowAddBtn {{ background: #EDF5FB; color: #3A6B8C; border: 1px solid #C4DBEC;
|
||
border-radius: 8px; padding: 6px 0; font-size: 15px; font-weight: bold; min-height: 22px; }}
|
||
QPushButton#flowAddBtn:hover {{ background: #D0E8F5; color: #1A2332; }}
|
||
/* Co4E sidebar (light) — transparent tabs, translucent selection, dark text. */
|
||
QTabBar#co4eSideTabs {{ qproperty-iconSize: 18px 18px; }}
|
||
QTabBar#co4eSideTabs::tab {{ background: transparent; color: #3A6B8C; border: none;
|
||
border-radius: 6px; padding: 5px; margin: 0 6px 0 0; }}
|
||
QTabBar#co4eSideTabs::tab:selected {{ background: rgba(0,150,199,0.20); color: #1A2332; }}
|
||
QTabBar#co4eSideTabs::tab:hover:!selected {{ background: #D0E8F5; color: #1A2332; }}
|
||
/* Co4E canvas frame (light). */
|
||
QGraphicsView#co4eCanvas {{ background: #FFFFFF; border: 1px solid #B8D4E8; border-radius: 10px; }}
|
||
|
||
QGroupBox {{
|
||
background: #FFFFFF; border: 1px solid #B8D4E8; border-radius: 18px;
|
||
margin-top: 16px; padding: 14px 10px 10px 10px; font-weight: 700;
|
||
}}
|
||
QGroupBox::title {{
|
||
subcontrol-origin: margin; subcontrol-position: top left; left: 12px; top: 2px;
|
||
padding: 0 6px; color: #5C8DB8; letter-spacing: 0.5px;
|
||
}}
|
||
|
||
QPlainTextEdit, QTextEdit, QTextBrowser, QLineEdit, QTreeView, QListView, QTreeWidget, QListWidget {{
|
||
background: white; color: #1A2332; border: 1px solid #C0D8EC; border-radius: 10px;
|
||
selection-background-color: {ACCENT}; selection-color: white;
|
||
}}
|
||
QScrollArea {{ background: transparent; border: none; }}
|
||
QAbstractScrollArea::corner {{ background: transparent; }}
|
||
QPlainTextEdit:focus, QTextEdit:focus, QLineEdit:focus {{ border: 1px solid {ACCENT}; }}
|
||
QTreeView::item, QListView::item {{ padding: 3px 2px; border-radius: 6px; }}
|
||
QTreeView::item:hover, QListView::item:hover {{ background: #E0EFFA; }}
|
||
QTreeView::item:selected, QListView::item:selected {{ background: rgba(0,150,199,0.18); color: #1A2332; }}
|
||
QHeaderView::section {{ background: #E8F4FD; color: #5C8DB8; border: none; border-bottom: 1px solid #B8D4E8; padding: 6px; }}
|
||
|
||
QPushButton {{
|
||
background: white; color: #1A2332; border: 1px solid #C0D8EC;
|
||
border-radius: 10px; padding: 8px 16px;
|
||
}}
|
||
QPushButton:hover {{ background: #E0EFFA; }}
|
||
QPushButton:disabled {{ color: #8AA8C0; background: #F0F8FC; }}
|
||
QPushButton#primary {{ background: {GRADIENT}; color: white; border: none; font-weight: 700; padding: 8px 18px; }}
|
||
QPushButton#primary:hover {{ background: {GRADIENT_HOVER}; }}
|
||
QPushButton#danger {{ background: #E5484D; color: white; border: none; font-weight: 600; }}
|
||
QPushButton#danger:hover {{ background: #EF6368; }}
|
||
QPushButton#navMenuBtn {{
|
||
background: transparent; border: none; border-radius: 8px; padding: 5px 6px;
|
||
font-weight: 700; font-size: 11px; letter-spacing: 1px; color: #5C8DB8; text-align: left;
|
||
}}
|
||
QPushButton#navMenuBtn:hover {{ background: #D0E8F5; color: #1A2332; }}
|
||
QPushButton#navMenuBtn:pressed {{ background: #B8D4E8; }}
|
||
|
||
QLabel#badge {{ background: #D0ECF8; color: #0077B6; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgeSuccess {{ background: #D0F5E8; color: #1B7A3D; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgePurple {{ background: #E8E0FF; color: #6238C9; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgePink {{ background: #F8E0F0; color: #B93A85; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#badgeWarn {{ background: #D0ECF8; color: #0077B6; border-radius: 11px; padding: 2px 12px; font-weight: 600; }}
|
||
QLabel#hint {{ color: #5C8DB8; }}
|
||
QLabel#warning {{ color: #0077B6; font-weight: 600; }}
|
||
|
||
QComboBox {{ background: white; border: 1px solid #C0D8EC; border-radius: 10px; padding: 6px 10px; }}
|
||
QComboBox::drop-down {{ border: none; width: 22px; }}
|
||
QComboBox QAbstractItemView {{
|
||
background: white; border: 1px solid #C0D8EC; border-radius: 10px;
|
||
selection-background-color: {ACCENT}; selection-color: white; outline: none;
|
||
}}
|
||
|
||
QScrollBar:vertical {{ background: transparent; width: 11px; margin: 2px; }}
|
||
QScrollBar::handle:vertical {{ background: #C0D8EC; border-radius: 5px; min-height: 28px; }}
|
||
QScrollBar::handle:vertical:hover {{ background: {ACCENT}; }}
|
||
QScrollBar:horizontal {{ background: transparent; height: 11px; margin: 2px; }}
|
||
QScrollBar::handle:horizontal {{ background: #C0D8EC; border-radius: 5px; min-width: 28px; }}
|
||
QScrollBar::handle:horizontal:hover {{ background: {ACCENT}; }}
|
||
QScrollBar::add-line, QScrollBar::sub-line {{ height: 0; width: 0; border: none; background: none; }}
|
||
|
||
QCheckBox {{ spacing: 8px; }}
|
||
QCheckBox::indicator, QRadioButton::indicator {{
|
||
width: 16px; height: 16px; background: white; border: 1px solid #C0D8EC; border-radius: 5px;
|
||
}}
|
||
QRadioButton::indicator {{ border-radius: 9px; }}
|
||
QCheckBox::indicator:hover, QRadioButton::indicator:hover {{ border-color: {ACCENT}; }}
|
||
QCheckBox::indicator:checked, QRadioButton::indicator:checked {{
|
||
background: {GRADIENT}; border-color: {ACCENT};
|
||
}}
|
||
QCheckBox::indicator:disabled {{ border-color: #D0E8F5; background: #F0F8FC; }}
|
||
QCheckBox::indicator:checked:disabled, QRadioButton::indicator:checked:disabled {{
|
||
background: #B8D4E8; border-color: #8AB8D8;
|
||
}}
|
||
|
||
QMenu {{ background: white; color: #1A2332; border: 1px solid #C0D8EC; border-radius: 10px; padding: 4px; }}
|
||
QMenu::item {{ padding: 6px 16px; border-radius: 6px; }}
|
||
QMenu::item:selected {{ background: {ACCENT}; color: white; }}
|
||
|
||
QToolTip {{ background: #FFFFFF; color: #1A2332; border: 1px solid #C0D8EC; border-radius: 6px; padding: 4px 8px; }}
|
||
"""
|
||
|
||
# Node colors used by the Graph view (shared light/dark).
|
||
NODE_COLORS = {
|
||
"user": "#3B82F6",
|
||
"assistant": ACCENT,
|
||
"tool": "#8B5CF6",
|
||
"result": "#22A06B",
|
||
"error": "#E5484D",
|
||
}
|
||
|
||
|
||
def resolve_theme(theme: str) -> str:
|
||
"""Resolve 'system' to 'dark'/'light' based on the OS color scheme."""
|
||
if theme != "system":
|
||
return theme
|
||
try:
|
||
from PySide6.QtCore import Qt
|
||
from PySide6.QtWidgets import QApplication
|
||
|
||
app = QApplication.instance()
|
||
if app is not None:
|
||
scheme = app.styleHints().colorScheme()
|
||
return "light" if scheme == Qt.ColorScheme.Light else "dark"
|
||
except Exception:
|
||
pass
|
||
return "dark"
|
||
|
||
|
||
def stylesheet(theme: str) -> str:
|
||
return _LIGHT if resolve_theme(theme) == "light" else _DARK |