gkucmierz/rubic-cube
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor: Implement SmartCube renderer, improve UI styling, and fix gaps

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-22 04:35:59 +00:00
parent 57abfd6b80
commit b5ddc21662
4168 changed files with 763782 additions and 1008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/style.css
View File

@@ -13,9 +13,9 @@
-moz-osx-font-smoothing: grayscale;
/* --- Glassmorphism Design System (from Nonograms) --- */
--bg-gradient: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--bg-gradient: radial-gradient(circle at center, #2b2b2b 0%, #000000 100%);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
--text-color: #ffffff;
--text-strong: #ffffff;
@@ -25,10 +25,55 @@
--accent-purple: #4facfe;
--primary-accent: #00f2fe;
--title-glow: rgba(0, 255, 255, 0.2);
--toggle-bg: rgba(255, 255, 255, 0.08);
--toggle-border: rgba(255, 255, 255, 0.2);
--toggle-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
--toggle-btn-border: rgba(255, 255, 255, 0.2);
--panel-bg: rgba(255, 255, 255, 0.05);
--toggle-hover-border: #ffffff;
--toggle-active-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
--panel-bg: rgba(255, 255, 255, 0.1);
--panel-border: rgba(255, 255, 255, 0.1);
--panel-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
--button-bg: rgba(255, 255, 255, 0.1);
--button-border: rgba(255, 255, 255, 0.2);
--button-text: #ffffff;
--button-hover-bg: rgba(255, 255, 255, 0.25);
--button-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--button-active-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
--cube-edge-color: #333333;
--title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
}
:root[data-theme="light"] {
--bg-gradient: radial-gradient(circle at center, #ffffff 0%, #e0e0e0 100%);
--glass-bg: rgba(255, 255, 255, 0.75);
--glass-border: rgba(15, 23, 42, 0.12);
--glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);
--text-color: #0f172a;
--text-strong: #0f172a;
--text-secondary: rgba(15, 23, 42, 0.7);
--text-muted: rgba(15, 23, 42, 0.6);
--accent-cyan: #0ea5e9;
--accent-purple: #6366f1;
--primary-accent: #0ea5e9;
--title-glow: rgba(14, 165, 233, 0.35);
--toggle-bg: rgba(255, 255, 255, 0.85);
--toggle-border: rgba(15, 23, 42, 0.12);
--toggle-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
--toggle-btn-border: rgba(15, 23, 42, 0.18);
--toggle-hover-border: rgba(15, 23, 42, 0.5);
--toggle-active-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
--panel-bg: rgba(255, 255, 255, 0.7);
--panel-border: rgba(15, 23, 42, 0.12);
--panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
--button-bg: rgba(255, 255, 255, 0.85);
--button-border: rgba(15, 23, 42, 0.16);
--button-text: #0f172a;
--button-hover-bg: rgba(255, 255, 255, 1);
--button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
--button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
--cube-edge-color: #000000;
--title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
}
a {
@@ -44,11 +89,12 @@ body {
margin: 0;
display: flex;
min-width: 320px;
min-height: 100vh;
height: 100vh;
flex-direction: column;
background: var(--bg-gradient);
background-attachment: fixed;
color: var(--text-color);
overflow: hidden;
}
h1 {
@@ -81,7 +127,7 @@ button:focus-visible {
#app {
width: 100%;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
@@ -90,11 +136,56 @@ button:focus-visible {
/* Glassmorphism utility class */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(10px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
/* Button Styles */
button.btn-neon {
background: var(--button-bg);
border: 1px solid var(--button-border);
color: var(--button-text);
padding: 10px 20px;
font-size: 0.95rem;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
outline: none;
}
button.btn-neon:hover {
background: var(--button-hover-bg);
transform: translateY(-2px);
box-shadow: var(--button-hover-shadow);
border-color: var(--toggle-hover-border);
}
button.btn-neon.active {
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
border-color: transparent;
box-shadow: var(--button-active-shadow);
font-weight: 700;
color: #fff;
}
button.btn-neon.icon-only {
padding: 10px;
border-radius: 50%;
width: 40px;
height: 40px;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;