Implement custom Windows title bar and theme refactor
Adds a frameless window with custom title bar controls for Windows, including minimize, maximize/restore, and close buttons. Refactors theme color application to use CSS variables and color-mix for improved consistency and dynamic theming across home, settings, and main UI. Updates renderer and styles to support the new title bar, platform detection, and improved color handling. No changes to lock files.
This commit is contained in:
+29
-25
@@ -53,7 +53,7 @@ body {
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, rgba(20, 14, 40, 0.6), rgba(16, 10, 28, 0.6));
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, #000 15%), color-mix(in srgb, var(--dark-purple, var(--bg)) 80%, #000 20%));
|
||||
backdrop-filter: blur(14px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(120%);
|
||||
padding: 0;
|
||||
@@ -73,7 +73,7 @@ body {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(135deg, rgba(123,46,255,0.25), rgba(0,198,255,0.15) 40%, transparent 60%);
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, transparent), color-mix(in srgb, var(--accent) 18%, transparent) 40%, transparent 60%);
|
||||
filter: blur(20px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
@@ -82,7 +82,7 @@ body {
|
||||
/* Sidebar + content layout */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 4%, transparent));
|
||||
border-right: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 1.25rem 1rem;
|
||||
position: relative;
|
||||
@@ -127,10 +127,10 @@ body {
|
||||
}
|
||||
|
||||
.tab-link.active {
|
||||
background: linear-gradient(180deg, rgba(123, 46, 255, 0.18), rgba(0, 198, 255, 0.10));
|
||||
color: #fff;
|
||||
border: 1px solid rgba(123,46,255,0.35);
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
|
||||
color: var(--text);
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
|
||||
}
|
||||
|
||||
/* Left accent bar */
|
||||
@@ -185,24 +185,24 @@ label {
|
||||
input {
|
||||
padding: 0.6rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 0.75rem;
|
||||
background-color: rgba(11, 28, 43, 0.6);
|
||||
background-color: color-mix(in srgb, var(--bg) 82%, #000 18%);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
input:focus {
|
||||
box-shadow: var(--ring);
|
||||
border-color: rgba(123,46,255,0.5);
|
||||
border-color: color-mix(in srgb, var(--primary) 50%, transparent);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.65rem 0.9rem;
|
||||
font-size: 0.95rem;
|
||||
background: linear-gradient(180deg, rgba(123,46,255,0.95), rgba(90, 20, 220, 0.95));
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, var(--accent) 10%), color-mix(in srgb, var(--primary) 80%, #000 20%));
|
||||
color: var(--text);
|
||||
border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
|
||||
@@ -225,30 +225,30 @@ button:active {
|
||||
padding: 12px 24px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(135deg, #7B2EFF 0%, #5a1fd4 50%, #00C6FF 100%);
|
||||
background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, #000 40%) 50%, var(--accent) 100%);
|
||||
background-size: 200% 100%;
|
||||
color: #fff;
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(123, 46, 255, 0.3);
|
||||
box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 30%, transparent);
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
background-position: 100% 0;
|
||||
box-shadow: 0 6px 30px rgba(123, 46, 255, 0.45), 0 0 20px rgba(0, 198, 255, 0.2);
|
||||
box-shadow: 0 6px 30px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.primary-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(123, 46, 255, 0.3);
|
||||
box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 30%, transparent);
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 0.8rem;
|
||||
color: #aaa;
|
||||
color: color-mix(in srgb, var(--text) 70%, transparent);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@@ -260,11 +260,11 @@ button:active {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: rgba(18,20,24,0.8);
|
||||
color: white;
|
||||
background-color: color-mix(in srgb, var(--bg) 82%, #000 18%);
|
||||
color: var(--text);
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.5);
|
||||
font-size: 1rem;
|
||||
z-index: 1000;
|
||||
@@ -300,7 +300,7 @@ button:active {
|
||||
|
||||
/* Cards (customization groups) */
|
||||
.customization-group {
|
||||
background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
|
||||
background: linear-gradient(180deg, var(--surface-1, color-mix(in srgb, var(--bg) 85%, #000 15%)), var(--surface-2, color-mix(in srgb, var(--bg) 78%, #000 22%)));
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px 16px 16px;
|
||||
@@ -348,6 +348,10 @@ h2::after {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 10px 0;
|
||||
background: linear-gradient(180deg, var(--surface-1, color-mix(in srgb, var(--bg) 85%, #000 15%)), var(--surface-2, color-mix(in srgb, var(--bg) 78%, #000 22%)));
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.theme-btn {
|
||||
display: flex;
|
||||
@@ -494,8 +498,8 @@ input[type="color"] {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(180deg, rgba(123,46,255,0.95), rgba(90, 20, 220, 0.95));
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
color: var(--text);
|
||||
border: 1px solid rgba(255,255,255,0.08) !important;
|
||||
border-radius: 10px !important;
|
||||
text-decoration: none;
|
||||
|
||||
Reference in New Issue
Block a user