refactor: Match Skills window UI exactly

- Centered title with decorative lines like SKILLS window
- Orange left border (3px) on selected/active items
- Updated colors to match exact game palette:
  - Teal progress bars (#4ecdc4)
  - Orange window border
  - Better background colors
- Category label style like ALL CATEGORIES
- Clean sidebar with proper borders
- Match EU window aesthetic more closely
This commit is contained in:
LemonNexus 2026-02-13 15:41:54 +00:00
parent 2d8eb458bb
commit 58661fc85f
2 changed files with 60 additions and 44 deletions

View File

@ -5,35 +5,37 @@ Exact styling to match Entropia Universe game UI.
Based on screenshot analysis.
"""
# EU Color Palette from screenshots
# EU Color Palette from screenshots - EXACT MATCH
EU_COLORS = {
# Backgrounds
'bg_dark': 'rgba(15, 20, 28, 230)',
'bg_panel': 'rgba(25, 30, 40, 220)',
'bg_header': 'rgba(35, 40, 55, 200)',
'bg_hover': 'rgba(45, 50, 70, 240)',
# Backgrounds - from Skills window
'bg_dark': 'rgba(20, 25, 35, 245)', # Main window bg
'bg_panel': 'rgba(30, 35, 45, 230)', # Panel/content bg
'bg_header': 'rgba(25, 30, 40, 240)', # Header bg
'bg_hover': 'rgba(40, 45, 60, 200)', # Hover state
'bg_selected': 'rgba(50, 55, 75, 180)', # Selected item
# Borders
'border_subtle': 'rgba(80, 90, 110, 80)',
'border_medium': 'rgba(100, 110, 130, 100)',
'border_bright': 'rgba(120, 130, 150, 120)',
'border_orange': 'rgba(200, 130, 50, 150)',
'border_subtle': 'rgba(60, 70, 90, 100)',
'border_medium': 'rgba(80, 90, 110, 120)',
'border_window': 'rgba(255, 140, 66, 200)', # Orange window border
'border_active': 'rgba(255, 140, 66, 255)', # Active/selected border
# Accents
'accent_orange': '#ff8c42',
# Accents - EXACT from game
'accent_orange': '#ff8c42', # Main orange
'accent_orange_bright': '#ffa060', # Hover orange
'accent_teal': '#4ecdc4', # Progress bar teal
'accent_gold': '#ffc107',
'accent_blue': '#4a9eff',
'accent_green': '#4caf50',
'accent_red': '#f44336',
# Text
'text_primary': 'rgba(255, 255, 255, 240)',
'text_primary': 'rgba(255, 255, 255, 250)',
'text_secondary': 'rgba(255, 255, 255, 180)',
'text_muted': 'rgba(255, 255, 255, 120)',
'text_orange': '#ff8c42', # Orange text for ranks
# Progress bars
'progress_bg': 'rgba(60, 70, 90, 150)',
'progress_fill': 'rgba(255, 140, 66, 200)',
'progress_fill': '#4ecdc4', # Teal like game
}
# EU Border Radius - slightly rounded corners

View File

@ -83,13 +83,13 @@ class OverlayWindow(QMainWindow):
layout.setContentsMargins(20, 20, 20, 20)
layout.setSpacing(0)
# Main container
# Main container with orange window border like Skills window
self.container = QFrame()
self.container.setObjectName("euContainer")
self.container.setStyleSheet(f"""
#euContainer {{
background-color: {EU_COLORS['bg_dark']};
border: 1px solid {EU_COLORS['border_medium']};
border: 1px solid {EU_COLORS['border_window']};
border-radius: 8px;
}}
""")
@ -104,7 +104,7 @@ class OverlayWindow(QMainWindow):
container_layout.setContentsMargins(0, 0, 0, 0)
container_layout.setSpacing(0)
# Clean header
# Header with centered title like EU windows
header = QWidget()
header.setStyleSheet(f"""
QWidget {{
@ -115,27 +115,38 @@ class OverlayWindow(QMainWindow):
}}
""")
header_layout = QHBoxLayout(header)
header_layout.setContentsMargins(20, 15, 20, 15)
header_layout.setSpacing(15)
header_layout.setContentsMargins(15, 12, 15, 12)
header_layout.setSpacing(10)
# App icon (actual icon, not emoji)
# Left line (decorative)
left_line = QLabel()
left_line.setFixedHeight(2)
left_line.setStyleSheet(f"background-color: {EU_COLORS['border_medium']};")
header_layout.addWidget(left_line, 1)
# App icon
app_icon = QLabel()
app_icon_pixmap = self.icon_manager.get_pixmap("target", size=24)
app_icon_pixmap = self.icon_manager.get_pixmap("target", size=20)
app_icon.setPixmap(app_icon_pixmap)
app_icon.setFixedSize(24, 24)
app_icon.setFixedSize(20, 20)
header_layout.addWidget(app_icon)
# Title
# Centered title like "SKILLS" in game
title = QLabel("EU-UTILITY")
title.setStyleSheet(f"""
color: {EU_COLORS['accent_orange']};
font-size: 16px;
color: {EU_COLORS['text_primary']};
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
letter-spacing: 2px;
padding: 0 10px;
""")
header_layout.addWidget(title)
header_layout.addStretch()
# Right line (decorative)
right_line = QLabel()
right_line.setFixedHeight(2)
right_line.setStyleSheet(f"background-color: {EU_COLORS['border_medium']};")
header_layout.addWidget(right_line, 1)
# View toggle buttons
view_group = QButtonGroup(self)
@ -144,14 +155,14 @@ class OverlayWindow(QMainWindow):
self.icon_view_btn = QPushButton("Grid")
self.icon_view_btn.setCheckable(True)
self.icon_view_btn.setChecked(True)
self.icon_view_btn.setFixedSize(60, 28)
self.icon_view_btn.setFixedSize(50, 24)
self.icon_view_btn.setStyleSheet(self._view_toggle_style())
self.icon_view_btn.clicked.connect(lambda: self._set_view_mode("icons"))
header_layout.addWidget(self.icon_view_btn)
self.list_view_btn = QPushButton("List")
self.list_view_btn.setCheckable(True)
self.list_view_btn.setFixedSize(60, 28)
self.list_view_btn.setFixedSize(50, 24)
self.list_view_btn.setStyleSheet(self._view_toggle_style())
self.list_view_btn.clicked.connect(lambda: self._set_view_mode("list"))
header_layout.addWidget(self.list_view_btn)
@ -161,12 +172,12 @@ class OverlayWindow(QMainWindow):
# Close button
close_btn = QPushButton("×")
close_btn.setFixedSize(28, 28)
close_btn.setFixedSize(24, 24)
close_btn.setStyleSheet(f"""
QPushButton {{
background-color: transparent;
color: {EU_COLORS['text_muted']};
font-size: 18px;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 4px;
@ -220,22 +231,23 @@ class OverlayWindow(QMainWindow):
self._load_plugins()
def _setup_sidebar(self):
"""Setup sidebar with plugin selector."""
"""Setup sidebar with plugin selector - EU style with orange left border."""
sidebar_layout = QVBoxLayout(self.sidebar)
sidebar_layout.setContentsMargins(0, 10, 0, 10)
sidebar_layout.setSpacing(5)
sidebar_layout.setContentsMargins(0, 0, 0, 0)
sidebar_layout.setSpacing(0)
# Plugins label
# Category label like "ALL CATEGORIES" in Skills window
plugins_label = QLabel("PLUGINS")
plugins_label.setStyleSheet(f"""
color: {EU_COLORS['text_muted']};
font-size: 10px;
font-weight: bold;
padding: 5px 15px;
padding: 15px;
border-bottom: 1px solid {EU_COLORS['border_subtle']};
""")
sidebar_layout.addWidget(plugins_label)
# Plugin list (for list view)
# Plugin list (for list view) - EU style with orange left border
self.plugin_list = QListWidget()
self.plugin_list.setFrameShape(QFrame.Shape.NoFrame)
self.plugin_list.setStyleSheet(f"""
@ -246,14 +258,16 @@ class OverlayWindow(QMainWindow):
}}
QListWidget::item {{
color: {EU_COLORS['text_secondary']};
padding: 10px 15px;
padding: 12px 15px;
border-left: 3px solid transparent;
border-bottom: 1px solid {EU_COLORS['border_subtle']};
}}
QListWidget::item:hover {{
background-color: rgba(255, 255, 255, 10);
background-color: {EU_COLORS['bg_hover']};
color: {EU_COLORS['text_primary']};
}}
QListWidget::item:selected {{
background-color: rgba(255, 140, 66, 30);
background-color: {EU_COLORS['bg_selected']};
color: white;
border-left: 3px solid {EU_COLORS['accent_orange']};
}}
@ -265,8 +279,8 @@ class OverlayWindow(QMainWindow):
self.icon_grid = QWidget()
self.icon_grid.setStyleSheet("background: transparent;")
self.icon_grid_layout = QVBoxLayout(self.icon_grid)
self.icon_grid_layout.setSpacing(10)
self.icon_grid_layout.setContentsMargins(10, 10, 10, 10)
self.icon_grid_layout.setSpacing(0)
self.icon_grid_layout.setContentsMargins(0, 0, 0, 0)
sidebar_layout.addWidget(self.icon_grid)
# Initially show icon grid