diff --git a/css/style.css b/css/style.css index 35ccf03..03c1bf1 100644 --- a/css/style.css +++ b/css/style.css @@ -312,10 +312,105 @@ body { background: rgba(255, 255, 255, 0.1); } +.start-button.active { + background: rgba(255, 255, 255, 0.15); +} + .start-button i { color: var(--accent); } +/* Start Menu */ +.start-menu { + position: absolute; + bottom: 55px; + left: 10px; + width: 280px; + background: rgba(15, 15, 35, 0.98); + backdrop-filter: blur(20px); + border-radius: 12px; + border: 1px solid var(--border); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + display: none; + overflow: hidden; +} + +.start-menu.open { + display: block; + animation: slideUp 0.2s ease; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.start-menu-header { + padding: 20px; + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); + display: flex; + align-items: center; + gap: 12px; +} + +.start-menu-header i { + font-size: 32px; +} + +.start-menu-header span { + font-weight: 600; + font-size: 16px; +} + +.start-menu-items { + padding: 10px 0; +} + +.start-menu-item { + padding: 12px 20px; + cursor: pointer; + display: flex; + align-items: center; + gap: 12px; + transition: background 0.2s; +} + +.start-menu-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +.start-menu-item i { + width: 20px; + color: var(--accent); +} + +.start-menu-footer { + padding: 15px 20px; + border-top: 1px solid var(--border); + display: flex; + gap: 20px; +} + +.start-menu-footer a { + color: var(--text-secondary); + text-decoration: none; + font-size: 13px; + display: flex; + align-items: center; + gap: 6px; + transition: color 0.2s; +} + +.start-menu-footer a:hover { + color: var(--accent); +} + .taskbar-items { flex: 1; display: flex; diff --git a/index.html b/index.html index 99cea2f..617da90 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,23 @@ Start +