From fbb69178122e78d275661231c5bd5bf0458f60e4 Mon Sep 17 00:00:00 2001 From: omigamedev Date: Fri, 16 Jan 2026 14:52:18 +0100 Subject: [PATCH] make ui bigger --- src/main/assets/apps/browser/browser.rml | 40 +- src/main/assets/apps/camera/camera.rml | 60 +- .../assets/apps/contacts/contact_detail.rml | 26 +- src/main/assets/apps/contacts/contacts.rml | 36 +- src/main/assets/apps/dialer/calling.rml | 6 +- src/main/assets/apps/dialer/dialer.rml | 35 +- src/main/assets/apps/home/home.rml | 14 +- src/main/assets/apps/home/lock.rml | 26 +- src/main/assets/apps/messages/chat.rml | 38 +- src/main/assets/apps/messages/messages.rml | 18 +- src/main/assets/apps/music/music.rml | 41 +- src/main/assets/apps/settings/settings.rml | 34 +- src/main/assets/apps/store/store.rml | 46 +- src/main/assets/demo.rml | 34 - src/main/assets/hello_world.rml | 13 - src/main/assets/html.rcss | 93 -- src/main/assets/invader.rcss | 765 ----------- src/main/assets/phone.rcss | 159 --- src/main/assets/rml.rcss | 61 - src/main/assets/ui/components.rcss | 1155 ++++++++++++++--- src/main/assets/ui/theme.rcss | 120 +- src/main/assets/window.rcss | 36 - src/main/assets/window.rml | 19 - 23 files changed, 1252 insertions(+), 1623 deletions(-) delete mode 100644 src/main/assets/demo.rml delete mode 100644 src/main/assets/hello_world.rml delete mode 100644 src/main/assets/html.rcss delete mode 100644 src/main/assets/invader.rcss delete mode 100644 src/main/assets/phone.rcss delete mode 100644 src/main/assets/rml.rcss delete mode 100644 src/main/assets/window.rcss delete mode 100644 src/main/assets/window.rml diff --git a/src/main/assets/apps/browser/browser.rml b/src/main/assets/apps/browser/browser.rml index 220bb94..aa8924c 100644 --- a/src/main/assets/apps/browser/browser.rml +++ b/src/main/assets/apps/browser/browser.rml @@ -23,15 +23,15 @@ } .browser-nav-btn { - width: 40px; - height: 40px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: 24px; color: #B3B3B3; cursor: pointer; - border-radius: 20px; + border-radius: 28px; } .browser-nav-btn:hover { @@ -57,14 +57,14 @@ } .browser-secure-icon { - font-size: 14px; + font-size: 18px; color: #4CAF50; margin-right: 8px; } .browser-url { flex: 1; - font-size: 14px; + font-size: 18px; color: #FFFFFF; background: transparent; border: none; @@ -89,7 +89,7 @@ } .browser-page-text { - font-size: 14px; + font-size: 18px; line-height: 1.6; color: #333333; margin-bottom: 16px; @@ -124,13 +124,13 @@ } .browser-search-url { - font-size: 13px; + font-size: 16px; color: #006621; margin-bottom: 4px; } .browser-search-desc { - font-size: 14px; + font-size: 18px; color: #545454; line-height: 1.4; } @@ -163,14 +163,14 @@ } .browser-tab-label { - font-size: 11px; + font-size: 16px; } .browser-tabs-indicator { - padding: 4px 8px; + padding: 6px 10px; border: 1px solid #B3B3B3; - border-radius: 4px; - font-size: 12px; + border-radius: 6px; + font-size: 16px; color: #B3B3B3; } @@ -189,20 +189,20 @@
- +
- +
🔒
- +
- +
@@ -236,7 +236,7 @@
- + Home
@@ -244,11 +244,11 @@ Tabs
- + New Tab
- + Menu
diff --git a/src/main/assets/apps/camera/camera.rml b/src/main/assets/apps/camera/camera.rml index 4a4aa89..3b7e2a0 100644 --- a/src/main/assets/apps/camera/camera.rml +++ b/src/main/assets/apps/camera/camera.rml @@ -28,9 +28,9 @@ } .camera-btn { - width: 44px; - height: 44px; - border-radius: 22px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; @@ -43,8 +43,8 @@ } .camera-btn img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; } /* Viewfinder */ @@ -69,7 +69,7 @@ /* Placeholder for camera feed - replace with shared texture */ .viewfinder-placeholder { color: #666666; - font-size: 16px; + font-size: 18px; text-align: center; } @@ -136,10 +136,10 @@ } .camera-mode { - font-size: 14px; + font-size: 18px; color: #B3B3B3; cursor: pointer; - padding: 8px; + padding: 10px; } .camera-mode.active { @@ -173,8 +173,8 @@ } .gallery-preview img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; opacity: 0.7; } @@ -229,8 +229,8 @@ } .switch-camera-btn img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; } /* Settings Overlay */ @@ -240,33 +240,33 @@ left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.6); - padding: 8px 16px; - border-radius: 20px; - font-size: 14px; + padding: 10px 18px; + border-radius: 22px; + font-size: 18px; color: #FFFFFF; } /* Flash modes */ .flash-indicator { position: absolute; - top: 70px; + top: 80px; left: 16px; background-color: rgba(0, 0, 0, 0.4); - padding: 6px 12px; - border-radius: 12px; - font-size: 12px; + padding: 8px 14px; + border-radius: 14px; + font-size: 16px; color: #FFFFFF; } /* Timer indicator */ .timer-indicator { position: absolute; - top: 70px; + top: 80px; right: 16px; background-color: rgba(0, 0, 0, 0.4); - padding: 6px 12px; - border-radius: 12px; - font-size: 12px; + padding: 8px 14px; + border-radius: 14px; + font-size: 16px; color: #FFFFFF; } @@ -282,23 +282,23 @@ } .zoom-btn { - width: 32px; - height: 32px; - border-radius: 16px; + width: 44px; + height: 44px; + border-radius: 22px; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 22px; color: #FFFFFF; cursor: pointer; } .zoom-level { - font-size: 14px; + font-size: 18px; color: #FFD700; font-weight: 600; - min-width: 40px; + min-width: 48px; text-align: center; } @@ -329,7 +329,7 @@
C
Camera Preview
-
+
Tap to focus
diff --git a/src/main/assets/apps/contacts/contact_detail.rml b/src/main/assets/apps/contacts/contact_detail.rml index 944a4c8..348366a 100644 --- a/src/main/assets/apps/contacts/contact_detail.rml +++ b/src/main/assets/apps/contacts/contact_detail.rml @@ -58,9 +58,9 @@ } .contact-action-icon { - width: 48px; - height: 48px; - border-radius: 24px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: #BB86FC; display: flex; align-items: center; @@ -69,13 +69,13 @@ } .contact-action-icon img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; pointer-events: none; } .contact-action-label { - font-size: 12px; + font-size: 16px; color: #B3B3B3; } @@ -90,8 +90,8 @@ } .contact-info-icon { - width: 24px; - height: 24px; + width: 28px; + height: 28px; margin-right: 16px; } @@ -100,7 +100,7 @@ } .contact-info-label { - font-size: 12px; + font-size: 16px; color: #B3B3B3; } @@ -114,9 +114,9 @@
-
+
Contact -
+
@@ -143,14 +143,14 @@
- +
Mobile
+1 (555) 000-0000
- +
Email
email@example.com
diff --git a/src/main/assets/apps/contacts/contacts.rml b/src/main/assets/apps/contacts/contacts.rml index ca9d726..4d65537 100644 --- a/src/main/assets/apps/contacts/contacts.rml +++ b/src/main/assets/apps/contacts/contacts.rml @@ -22,7 +22,7 @@ .contact-letter { padding: 8px 16px; - font-size: 14px; + font-size: 18px; font-weight: 500; color: #BB86FC; background-color: #1E1E1E; @@ -42,14 +42,14 @@ } .contact-avatar { - width: 40px; - height: 40px; - border-radius: 20px; + width: 48px; + height: 48px; + border-radius: 24px; margin-right: 16px; display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 20px; color: #000000; } @@ -63,19 +63,19 @@ } .contact-phone { - font-size: 13px; + font-size: 16px; color: #B3B3B3; margin-top: 2px; } .contact-call-btn { - width: 40px; - height: 40px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; - border-radius: 20px; + border-radius: 28px; } .contact-call-btn:hover { @@ -83,8 +83,8 @@ } .contact-call-btn img { - width: 20px; - height: 20px; + width: 32px; + height: 32px; pointer-events: none; } @@ -92,14 +92,14 @@
-
+
Contacts -
+
- +
@@ -120,20 +120,20 @@
-
+
- + Keypad
- + Recent
- + Contacts
diff --git a/src/main/assets/apps/dialer/calling.rml b/src/main/assets/apps/dialer/calling.rml index edda099..adc1e8c 100644 --- a/src/main/assets/apps/dialer/calling.rml +++ b/src/main/assets/apps/dialer/calling.rml @@ -18,7 +18,7 @@ .calling-status { margin-top: 80px; - font-size: 14px; + font-size: 18px; color: #4CAF50; text-transform: uppercase; letter-spacing: 2px; @@ -73,8 +73,8 @@ } .call-action-btn img { - width: 28px; - height: 28px; + width: 32px; + height: 32px; pointer-events: none; } diff --git a/src/main/assets/apps/dialer/dialer.rml b/src/main/assets/apps/dialer/dialer.rml index 2809840..54c4c66 100644 --- a/src/main/assets/apps/dialer/dialer.rml +++ b/src/main/assets/apps/dialer/dialer.rml @@ -24,7 +24,7 @@ flex: 1; padding: 16px; text-align: center; - font-size: 14px; + font-size: 18px; color: #B3B3B3; cursor: pointer; } @@ -56,15 +56,15 @@ } .call-avatar { - width: 40px; - height: 40px; - border-radius: 20px; + width: 48px; + height: 48px; + border-radius: 24px; background-color: #BB86FC; margin-right: 16px; display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 20px; color: #000000; } @@ -78,7 +78,7 @@ } .call-type { - font-size: 13px; + font-size: 16px; color: #B3B3B3; margin-top: 2px; } @@ -88,26 +88,31 @@ } .call-time { - font-size: 13px; + font-size: 16px; color: #666666; } .call-action { - width: 40px; - height: 40px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: 24px; color: #4CAF50; cursor: pointer; + border-radius: 28px; + } + + .call-action:hover { + background-color: rgba(76, 175, 80, 0.2); }
-
+
Phone
@@ -177,21 +182,21 @@
-
+
- + Keypad
- + Recent
- + Contacts
diff --git a/src/main/assets/apps/home/home.rml b/src/main/assets/apps/home/home.rml index 257c1cc..ca70240 100644 --- a/src/main/assets/apps/home/home.rml +++ b/src/main/assets/apps/home/home.rml @@ -20,14 +20,14 @@ } .app-icon-image img { - width: 32px; - height: 32px; + width: 48px; + height: 48px; pointer-events: none; } .dock-item img { - width: 32px; - height: 32px; + width: 48px; + height: 48px; pointer-events: none; } @@ -41,9 +41,9 @@
12:30
- - - + + +
diff --git a/src/main/assets/apps/home/lock.rml b/src/main/assets/apps/home/lock.rml index 62c4609..07ca873 100644 --- a/src/main/assets/apps/home/lock.rml +++ b/src/main/assets/apps/home/lock.rml @@ -44,7 +44,7 @@ } .lock-swipe-text { - font-size: 14px; + font-size: 18px; color: #666666; } @@ -65,14 +65,14 @@ } .lock-shortcut { - width: 48px; - height: 48px; - border-radius: 24px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: 24px; color: #FFFFFF; cursor: pointer; } @@ -97,15 +97,15 @@ } .lock-notification-icon { - width: 32px; - height: 32px; - border-radius: 8px; + width: 40px; + height: 40px; + border-radius: 10px; background-color: #2196F3; - margin-right: 12px; + margin-right: 14px; display: flex; align-items: center; justify-content: center; - font-size: 16px; + font-size: 20px; color: #FFFFFF; } @@ -114,15 +114,15 @@ } .lock-notification-title { - font-size: 14px; + font-size: 18px; font-weight: 500; color: #FFFFFF; } .lock-notification-text { - font-size: 13px; + font-size: 16px; color: #B3B3B3; - margin-top: 2px; + margin-top: 4px; } diff --git a/src/main/assets/apps/messages/chat.rml b/src/main/assets/apps/messages/chat.rml index e6786b0..15fdd13 100644 --- a/src/main/assets/apps/messages/chat.rml +++ b/src/main/assets/apps/messages/chat.rml @@ -23,14 +23,14 @@ } .chat-avatar { - width: 40px; - height: 40px; - border-radius: 20px; + width: 48px; + height: 48px; + border-radius: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 20px; color: #000000; } @@ -45,7 +45,7 @@ } .chat-header-status { - font-size: 12px; + font-size: 16px; color: #4CAF50; } @@ -60,9 +60,9 @@ .message-bubble { max-width: 75%; - padding: 10px 14px; + padding: 12px 16px; border-radius: 18px; - font-size: 14px; + font-size: 18px; line-height: 1.4; } @@ -81,7 +81,7 @@ } .message-time { - font-size: 11px; + font-size: 16px; color: #666666; margin-top: 4px; text-align: right; @@ -101,17 +101,17 @@ .chat-input { flex: 1; - padding: 10px 16px; + padding: 12px 18px; background-color: #2D2D2D; border-radius: 24px; color: #FFFFFF; - font-size: 14px; + font-size: 18px; } .chat-send-btn { - width: 44px; - height: 44px; - border-radius: 22px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: #BB86FC; display: flex; align-items: center; @@ -124,8 +124,8 @@ } .chat-send-btn img { - width: 20px; - height: 20px; + width: 28px; + height: 28px; pointer-events: none; } @@ -133,14 +133,14 @@
-
+
J
John Wilson
Online
-
-
+
+
@@ -154,7 +154,7 @@
-
+
diff --git a/src/main/assets/apps/messages/messages.rml b/src/main/assets/apps/messages/messages.rml index 8020bc9..32efd10 100644 --- a/src/main/assets/apps/messages/messages.rml +++ b/src/main/assets/apps/messages/messages.rml @@ -60,12 +60,12 @@ } .conversation-time { - font-size: 12px; + font-size: 16px; color: #666666; } .conversation-preview { - font-size: 14px; + font-size: 18px; color: #B3B3B3; margin-top: 4px; white-space: nowrap; @@ -74,12 +74,12 @@ } .conversation-unread { - width: 20px; - height: 20px; - border-radius: 10px; + width: 24px; + height: 24px; + border-radius: 12px; background-color: #BB86FC; color: #000000; - font-size: 11px; + font-size: 14px; font-weight: 500; display: flex; align-items: center; @@ -91,9 +91,9 @@
-
+
Messages -
+
@@ -112,6 +112,6 @@
-
+
diff --git a/src/main/assets/apps/music/music.rml b/src/main/assets/apps/music/music.rml index 49780bd..46b1e97 100644 --- a/src/main/assets/apps/music/music.rml +++ b/src/main/assets/apps/music/music.rml @@ -46,13 +46,13 @@ } .mini-player-title { - font-size: 14px; + font-size: 18px; color: #FFFFFF; font-weight: 500; } .mini-player-artist { - font-size: 12px; + font-size: 16px; color: #B3B3B3; margin-top: 2px; } @@ -63,17 +63,22 @@ } .mini-control-btn { - width: 40px; - height: 40px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; cursor: pointer; + border-radius: 28px; + } + + .mini-control-btn:hover { + background-color: rgba(255, 255, 255, 0.1); } .mini-control-btn img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; } /* Section Headers */ @@ -91,12 +96,16 @@ } .section-action { - font-size: 13px; + font-size: 16px; font-weight: 600; color: #B3B3B3; cursor: pointer; } + .section-action:hover { + color: #FFFFFF; + } + /* Recently Played Row */ .recent-row { display: flex; @@ -123,14 +132,14 @@ } .recent-title { - font-size: 14px; + font-size: 18px; color: #FFFFFF; font-weight: 500; margin-bottom: 4px; } .recent-subtitle { - font-size: 12px; + font-size: 16px; color: #B3B3B3; } @@ -168,7 +177,7 @@ } .quick-card-title { - font-size: 13px; + font-size: 16px; font-weight: 600; color: #FFFFFF; padding: 0 12px; @@ -209,7 +218,7 @@ } .playlist-meta { - font-size: 13px; + font-size: 16px; color: #B3B3B3; margin-top: 4px; } @@ -237,13 +246,13 @@ } .nav-item img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; margin-bottom: 4px; } .nav-item span { - font-size: 11px; + font-size: 16px; } /* Color palette for album arts */ @@ -263,11 +272,11 @@
- +
Music
- +
diff --git a/src/main/assets/apps/settings/settings.rml b/src/main/assets/apps/settings/settings.rml index 93fdadf..0d80435 100644 --- a/src/main/assets/apps/settings/settings.rml +++ b/src/main/assets/apps/settings/settings.rml @@ -25,7 +25,7 @@ .settings-header { padding: 16px 16px 8px 16px; - font-size: 14px; + font-size: 18px; font-weight: 500; color: #BB86FC; } @@ -47,13 +47,13 @@ } .settings-icon { - width: 40px; - height: 40px; + width: 56px; + height: 56px; margin-right: 16px; display: flex; align-items: center; justify-content: center; - font-size: 22px; + font-size: 28px; color: #B3B3B3; } @@ -67,9 +67,9 @@ } .settings-subtitle { - font-size: 13px; + font-size: 16px; color: #B3B3B3; - margin-top: 2px; + margin-top: 4px; } .settings-action { @@ -78,9 +78,9 @@ } .settings-toggle { - width: 44px; - height: 24px; - border-radius: 12px; + width: 56px; + height: 32px; + border-radius: 16px; background-color: #666666; position: relative; cursor: pointer; @@ -91,9 +91,9 @@ } .settings-toggle-thumb { - width: 20px; - height: 20px; - border-radius: 10px; + width: 28px; + height: 28px; + border-radius: 14px; background-color: #B3B3B3; position: absolute; top: 2px; @@ -102,11 +102,11 @@ .settings-toggle.active .settings-toggle-thumb { background-color: #BB86FC; - left: 22px; + left: 26px; } .settings-value { - font-size: 14px; + font-size: 18px; color: #B3B3B3; } @@ -142,7 +142,7 @@ } .user-email { - font-size: 14px; + font-size: 18px; color: #B3B3B3; margin-top: 4px; } @@ -151,9 +151,9 @@
-
+
Settings -
+
diff --git a/src/main/assets/apps/store/store.rml b/src/main/assets/apps/store/store.rml index f3dad3b..8ac8135 100644 --- a/src/main/assets/apps/store/store.rml +++ b/src/main/assets/apps/store/store.rml @@ -31,8 +31,8 @@ } .store-search img { - width: 20px; - height: 20px; + width: 28px; + height: 28px; margin-right: 12px; opacity: 0.6; } @@ -57,7 +57,7 @@ } .section-action { - font-size: 14px; + font-size: 18px; color: #BB86FC; cursor: pointer; } @@ -75,7 +75,7 @@ } .featured-tag { - font-size: 12px; + font-size: 16px; color: rgba(255,255,255,0.7); text-transform: uppercase; margin-bottom: 8px; @@ -89,7 +89,7 @@ } .featured-subtitle { - font-size: 14px; + font-size: 18px; color: rgba(255,255,255,0.8); } @@ -126,14 +126,14 @@ } .app-card-name { - font-size: 14px; + font-size: 18px; font-weight: 500; color: #FFFFFF; margin-bottom: 4px; } .app-card-category { - font-size: 12px; + font-size: 16px; color: #B3B3B3; margin-bottom: 8px; } @@ -141,13 +141,13 @@ .app-card-rating { display: flex; align-items: center; - font-size: 12px; + font-size: 16px; color: #B3B3B3; } .app-card-rating img { - width: 12px; - height: 12px; + width: 16px; + height: 16px; margin-right: 4px; } @@ -186,9 +186,9 @@ } .app-list-meta { - font-size: 13px; + font-size: 16px; color: #B3B3B3; - margin-top: 2px; + margin-top: 4px; } .app-list-rating { @@ -198,23 +198,23 @@ } .app-list-rating img { - width: 14px; - height: 14px; + width: 18px; + height: 18px; margin-right: 4px; } .app-list-rating span { - font-size: 13px; + font-size: 16px; color: #B3B3B3; } .install-btn { background-color: #BB86FC; color: #000000; - font-size: 13px; + font-size: 16px; font-weight: 600; - padding: 8px 20px; - border-radius: 20px; + padding: 10px 22px; + border-radius: 22px; cursor: pointer; } @@ -278,13 +278,13 @@ } .store-nav-item img { - width: 24px; - height: 24px; + width: 32px; + height: 32px; margin-bottom: 4px; } .store-nav-item span { - font-size: 12px; + font-size: 16px; } /* Color palette for app icons */ @@ -302,11 +302,11 @@
- +
Mosis Store
- +
diff --git a/src/main/assets/demo.rml b/src/main/assets/demo.rml deleted file mode 100644 index dbc1ded..0000000 --- a/src/main/assets/demo.rml +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - Fullscreen Mobile UI - - -
- {{time}} -
- 📶 - 🔋 -
-
- -
-
-

Mosis Service

-
- -
- - -
-
- - - - diff --git a/src/main/assets/hello_world.rml b/src/main/assets/hello_world.rml deleted file mode 100644 index 42d6132..0000000 --- a/src/main/assets/hello_world.rml +++ /dev/null @@ -1,13 +0,0 @@ - - - Hello world - - - - -

RmlUi

-

Hello world!

-

The quick brown fox jumps over the lazy {{animal}}.

- - - diff --git a/src/main/assets/html.rcss b/src/main/assets/html.rcss deleted file mode 100644 index ac19961..0000000 --- a/src/main/assets/html.rcss +++ /dev/null @@ -1,93 +0,0 @@ -body, div, -h1, h2, h3, h4, -h5, h6, p, -hr, pre, -tabset tabs -{ - display: block; -} - -h1 -{ - font-size: 2em; - margin: .67em 0; -} - -h2 -{ - font-size: 1.5em; - margin: .75em 0; -} - -h3 -{ - font-size: 1.17em; - margin: .83em 0; -} - -h4, p -{ - margin: 1.12em 0; -} - -h5 -{ - font-size: .83em; - margin: 1.5em 0; -} - -h6 -{ - font-size: .75em; - margin: 1.67em 0; -} - -h1, h2, h3, h4, -h5, h6, strong -{ - font-weight: bold; -} - -em -{ - font-style: italic; -} - -pre -{ - white-space: pre; -} - -hr -{ - border-width: 1px; -} - -table -{ - box-sizing: border-box; - display: table; -} -tr -{ - box-sizing: border-box; - display: table-row; -} -td -{ - box-sizing: border-box; - display: table-cell; -} -col -{ - box-sizing: border-box; - display: table-column; -} -colgroup -{ - display: table-column-group; -} -thead, tbody, tfoot -{ - display: table-row-group; -} diff --git a/src/main/assets/invader.rcss b/src/main/assets/invader.rcss deleted file mode 100644 index e37239e..0000000 --- a/src/main/assets/invader.rcss +++ /dev/null @@ -1,765 +0,0 @@ -@spritesheet theme -{ - src: invader.tga; - - /* For high dpi screens, designates the scaling it is intended to be shown at. */ - resolution: 1x; - - /** - The following specifies a list of sprite names and associated rectangles into the image given above. - Any sprite given here can be specified in a decorator. Their names must be globally unique. - Rectangles are specified as: x y width height. With the origin assumed to be at the top left corner. - */ - title-bar-l: 147px 0px 82px 85px; - title-bar-c: 229px 0px 1px 85px; - title-bar-r: 231px 0px 15px 85px; - - /* huditems are vertically flipped titlebars */ - huditem-l: 147px 55px 82px -55px; - huditem-c: 229px 55px 1px -55px; - huditem-r: 231px 55px 15px -55px; - - icon-help: 128px 152px 51px 39px; - icon-invader: 179px 152px 51px 39px; - icon-game: 230px 152px 51px 39px; - icon-hiscore: 281px 152px 51px 39px; - icon-waves: 332px 152px 51px 39px; - icon-flag: 336px 191px 51px 39px; - icon-lives: 383px 152px 51px 39px; - icon-score: 434px 152px 51px 39px; - - window-tl: 0px 0px 133px 140px; - window-t: 134px 0px 1px 140px; - window-tr: 136px 0px 10px 140px; - window-l: 0px 139px 10px 1px; - window-c: 11px 139px 1px 1px; - window-r: 10px 139px -10px 1px; /* mirrored left */ - window-bl: 0px 140px 11px 11px; - window-b: 11px 140px 1px 11px; - window-br: 136px 140px 10px 11px; - - button: 247px 0px 159px 45px; - button-hover: 247px 45px 159px 45px; - button-active: 247px 90px 159px 45px; - - button-inner: 259px 19px 135px 1px; - button-inner-hover: 259px 64px 135px 1px; - button-inner-active: 259px 109px 135px 1px; - - text-l: 162px 192px 14px 31px; - text-c: 176px 192px 1px 31px; - text-focus-l: 162px 230px 14px 31px; - text-focus-c: 176px 230px 1px 31px; - textarea: 162px 193px 145px 31px; - textarea-inner: 173px 206px 127px 10px; - textarea-focus: 162px 231px 145px 31px; - textarea-focus-inner: 173px 244px 127px 10px; - - selectbox-tl: 281px 275px 11px 9px; - selectbox-t: 292px 275px 1px 9px; - selectbox-tr: 294px 275px 11px 9px; - selectbox-l: 281px 283px 11px 1px; - selectbox-c: 292px 283px 1px 1px; - selectbox-bl: 281px 285px 11px 11px; - selectbox-b: 292px 285px 1px 11px; - selectbox-br: 294px 285px 11px 11px; - - selectvalue: 162px 192px 145px 37px; - selectvalue-hover: 162px 230px 145px 37px; - selectarrow: 307px 192px 30px 37px; - selectarrow-hover: 307px 230px 30px 37px; - selectarrow-active: 307px 268px 30px 37px; - - radio: 407px 0px 30px 30px; - radio-hover: 437px 0px 30px 30px; - radio-active: 467px 0px 30px 30px; - radio-checked: 407px 30px 30px 30px; - radio-checked-hover: 437px 30px 30px 30px; - radio-checked-active: 467px 30px 30px 30px; - - checkbox: 407px 60px 30px 30px; - checkbox-hover: 437px 60px 30px 30px; - checkbox-active: 467px 60px 30px 30px; - checkbox-checked: 407px 90px 30px 30px; - checkbox-checked-hover: 437px 90px 30px 30px; - checkbox-checked-active: 467px 90px 30px 30px; - - tableheader-l: 127px 192px 16px 31px; - tableheader-c: 143px 192px 2px 31px; - tableheader-r: 145px 192px 15px 31px; - - expand: 3px 232px 17px 17px; - expand-hover: 21px 232px 17px 17px; - expand-active: 39px 232px 17px 17px; - expand-collapsed: 3px 250px 17px 17px; - expand-collapsed-hover: 21px 250px 17px 17px; - expand-collapsed-active: 39px 250px 17px 17px; - - slidertrack-t: 70px 199px 27px 2px; - slidertrack-c: 70px 201px 27px 1px; - slidertrack-b: 70px 202px 27px 2px; - - sliderbar-t: 56px 152px 23px 23px; - sliderbar-c: 56px 175px 23px 1px; - sliderbar-b: 56px 176px 23px 22px; - sliderbar-hover-t: 80px 152px 23px 23px; - sliderbar-hover-c: 80px 175px 23px 1px; - sliderbar-hover-b: 80px 176px 23px 22px; - sliderbar-active-t: 104px 152px 23px 23px; - sliderbar-active-c: 104px 175px 23px 1px; - sliderbar-active-b: 104px 176px 23px 22px; - - sliderarrowdec: 0px 152px 27px 24px; - sliderarrowdec-hover: 0px 177px 27px 24px; - sliderarrowdec-active: 0px 202px 27px 24px; - - sliderarrowinc: 28px 152px 27px 24px; - sliderarrowinc-hover: 28px 177px 27px 24px; - sliderarrowinc-active: 28px 202px 27px 24px; - - range-track: 219px 194px 3px 32px; - range-track-inner: 220px 204px 1px 14px; - range-track-focus: 219px 232px 3px 32px; - range-track-focus-inner: 220px 242px 1px 14px; - - range-bar: 127px 191px 34px 32px; - range-dec: 3px 232px 17px 17px; - range-dec-hover: 21px 232px 17px 17px; - range-dec-active: 39px 232px 17px 17px; - range-inc: 3px 250px 17px 17px; - range-inc-hover: 21px 250px 17px 17px; - range-inc-active: 39px 250px 17px 17px; - - progress-l: 103px 267px 13px 34px; - progress-c: 116px 267px 54px 34px; - progress-r: 170px 267px 13px 34px; - progress-fill-l: 110px 302px 6px 34px; - progress-fill-c: 140px 302px 6px 34px; - progress-fill-r: 170px 302px 6px 34px; - gauge: 0px 271px 100px 86px; - gauge-fill: 0px 356px 100px 86px; -} - -body -{ - font-family: LatoLatin; - font-weight: normal; - font-style: normal; - font-size: 15dp; - color: white; - nav: auto; -} - -body.window -{ - padding-top: 43dp; - padding-bottom: 20dp; - - min-width: 250dp; - max-width: 800dp; - - min-height: 135dp; - max-height: 700dp; -} - -div#title_bar -{ - z-index: 1; - - position: absolute; - top: 7dp; - left: 0; - - text-align: left; - vertical-align: bottom; -} - -div#title_bar div#icon -{ - position: absolute; - left: 15dp; - top: -4dp; - - width: 51dp; - height: 39dp; -} - - -div#title_bar span -{ - padding-left: 85dp; - padding-right: 25dp; - padding-top: 18dp; - padding-bottom: 43dp; - - vertical-align: top; - - line-height: 24dp; - font-size: 20dp; - font-weight: bold; - - font-effect: glow(1dp black); - decorator: tiled-horizontal( title-bar-l, title-bar-c, title-bar-r ); -} - -div#window -{ - width: auto; - height: 100%; - padding: 10dp 15dp; - - decorator: tiled-box( - window-tl, window-t, window-tr, - window-l, window-c, window-r, - window-bl, window-b, window-br - ); -} - -div#content -{ - z-index: 2; - - width: auto; - height: 100%; - - overflow: hidden auto; - - text-align: center; -} - - - -p -{ - text-align: left; - margin-bottom: 1em; -} - -h1 -{ - margin-left: 0.4em; - margin-bottom: 0.4em; - - text-align: left; - font-size: 16dp; - font-weight: bold; - - font-effect: glow(1dp 1dp 1dp 1dp #1117); -} - - - -input, -select -{ - margin-left: 20dp; -} - -input.submit -{ - margin-left: 0; -} - -input, button, select { - nav: auto; -} - -button, -input.submit -{ - display: inline-block; - - width: 159dp; - height: 33dp; - padding-top: 12dp; - - font-size: 16dp; - text-align: center; - tab-index: auto; - - decorator: image(button); -} - -button:focus, -input.submit:focus -{ - font-effect: blur(3dp #fff); -} - -button:hover, button:focus-visible, -input.submit:hover, input.submit:focus-visible -{ - decorator: image(button-hover); -} - -button:active, -input.submit:active -{ - decorator: image(button-active); -} - -input.submit:disabled -{ - decorator: image(button); - image-color: rgba(50, 150, 150, 120); - cursor: unavailable; -} - -input.text, input.password -{ - box-sizing: border-box; - height: 31dp; - padding: 11dp 10dp 0; - decorator: tiled-horizontal( text-l, text-c, auto ); /* Right becomes mirrored left */ - cursor: text; - text-align: left; -} -input.text:focus-visible, input.password:focus-visible -{ - decorator: tiled-horizontal( text-focus-l, text-focus-c, auto ); -} - -textarea -{ - padding: 5dp 8dp; - decorator: ninepatch(textarea, textarea-inner, 1.0) border-box; - cursor: text; - text-align: left; - line-height: 1.3; - border-width: 14dp 12dp 10dp; - border-color: transparent; -} -textarea:focus-visible -{ - decorator: ninepatch(textarea-focus, textarea-focus-inner, 1.0) border-box; -} - -input.text, -input.password, -select, -textarea -{ - color: #333; - font-size: 13dp; -} - -table input.text -{ - box-sizing: border-box; - width: 100%; - margin: 0; - padding: 1dp 5dp; - height: auto; - line-height: 16dp; - text-align: center; - - border-width: 1dp; - border-color: black; - background-color: white; - - font-size: 15dp; -} -table input.text, table input.text:focus-visible -{ - decorator: none; -} - - -select -{ - width: 175dp; - height: 37dp; -} - -select selectvalue -{ - width: auto; - margin-right: 30dp; - - height: 25dp; - padding: 12dp 10dp 0dp 10dp; - - decorator: image( selectvalue ); -} -select:focus-visible selectvalue { - decorator: image( selectvalue-hover ); -} - -select selectarrow -{ - width: 30dp; - height: 37dp; - - decorator: image( selectarrow ); -} - -select:hover selectarrow, select:focus-visible selectarrow -{ - decorator: image( selectarrow-hover ); -} - -select:active selectarrow, -select selectarrow:checked -{ - decorator: image( selectarrow-active ); -} - -select selectbox -{ - margin-left: 1dp; - margin-top: -7dp; - margin-bottom: -10dp; - width: 162dp; - padding: 1dp 4dp 4dp 4dp; -} - -select selectbox, -tbody -{ - decorator: tiled-box( - selectbox-tl, selectbox-t, selectbox-tr, - selectbox-l, selectbox-c, auto, /* auto mirrors left */ - selectbox-bl, selectbox-b, selectbox-br - ); -} - -select selectbox option -{ - width: auto; - padding: 3dp 0 3dp 6dp; - background: #DDDD; -} - -select selectbox option:nth-child(even), -tr:nth-child(even) -{ - background: #FFFFFFA0; -} -select selectbox option:checked -{ - font-weight: bold; -} -select selectbox option:hover -{ - background: #FF5D5D; -} - - - -input.radio, -input.checkbox -{ - width: 30dp; - height: 30dp; - - vertical-align: -11dp; -} - -input.radio -{ - decorator: image(radio); -} - -input.radio:hover, input.radio:focus-visible -{ - decorator: image(radio-hover); -} - -input.radio:active -{ - decorator: image(radio-active); -} - -input.radio:checked -{ - decorator: image(radio-checked); -} - -input.radio:checked:hover, input.radio:checked:focus-visible -{ - decorator: image(radio-checked-hover); -} - -input.radio:checked:active -{ - decorator: image(radio-checked-active); -} - -input.checkbox -{ - decorator: image(checkbox); -} - -input.checkbox:hover, input.checkbox:focus-visible -{ - decorator: image(checkbox-hover); -} - -input.checkbox:active -{ - decorator: image(checkbox-active); -} - -input.checkbox:checked -{ - decorator: image(checkbox-checked); -} - -input.checkbox:checked:hover, input.checkbox:checked:focus-visible -{ - decorator: image(checkbox-checked-hover); -} - -input.checkbox:checked:active -{ - decorator: image(checkbox-checked-active); -} - -input.range { - width: 200dp; - height: 32dp; - vertical-align: -12dp; -} -input.range slidertrack { - margin-top: 3dp; - height: 22dp; - image-color: #ecc; - decorator: ninepatch( range-track, range-track-inner, 1.0 ); -} -input.range:focus-visible slidertrack { - decorator: ninepatch( range-track-focus, range-track-focus-inner, 1.0 ); -} -input.range sliderprogress { - background: rgba(100, 0, 0, 80); - margin-top: 8dp; - height: 7dp; -} -input.range sliderbar { - margin-left: -8dp; - margin-right: -7dp; - margin-top: -3dp; - width: 34dp; - height: 23dp; - decorator: image( range-bar ); -} -input.range sliderbar:hover, input.range slidertrack:hover + sliderbar { - image-color: #cc0; -} -input.range sliderbar:active, input.range slidertrack:active + sliderbar { - image-color: #c80; -} -input.range sliderarrowdec, input.range sliderarrowinc { - width: 17dp; - height: 17dp; - margin-top: 6dp; -} -input.range sliderarrowdec { decorator: image( range-dec ); } -input.range sliderarrowinc { decorator: image( range-inc ); } -input.range sliderarrowdec:hover { decorator: image( range-dec-hover ); } -input.range sliderarrowinc:hover { decorator: image( range-inc-hover ); } -input.range sliderarrowdec:active { decorator: image( range-dec-active ); } -input.range sliderarrowinc:active { decorator: image( range-inc-active ); } - -thead tr { - height: 35dp; - decorator: tiled-horizontal( tableheader-l, tableheader-c, tableheader-r ); -} -thead td { - padding-top: 11dp; -} - -tbody { - /* Margin left/right only affects the background positioning for the decorator, not the cell placement */ - margin-left: 5dp; - margin-right: 4dp; - /* Padding top/bottom adds extra spacing between the header row and the body, and between the body and table bottom */ - padding-top: 4dp; - padding-bottom: 4dp; -} -tbody tr { - margin-left: 9dp; - margin-right: 8dp; - color: black; -} - - -expand -{ - display: block; - - margin: 1dp 0 1dp 5dp; - height: 17dp; - width: 17dp; - - decorator: image( expand ); -} - -expand:hover -{ - decorator: image( expand-hover ); -} - -expand:active -{ - decorator: image( expand-active ); -} - -expand.collapsed -{ - decorator: image( expand-collapsed ); -} - -expand.collapsed:hover -{ - decorator: image( expand-collapsed-hover ); -} - -expand.collapsed:active -{ - decorator: image( expand-collapsed-active ); -} - - -scrollbarvertical -{ - margin-top: -6dp; - margin-bottom: -6dp; - margin-right: -11dp; - width: 27dp; -} - -scrollbarvertical slidertrack -{ - decorator: tiled-vertical( slidertrack-t, slidertrack-c, slidertrack-b ); -} -scrollbarvertical slidertrack:active -{ - image-color: #aaa; -} - -scrollbarvertical sliderbar -{ - margin-left: 4dp; - width: 23dp; - min-height: 46dp; - - decorator: tiled-vertical( sliderbar-t, sliderbar-c, sliderbar-b ); -} -scrollbarvertical sliderbar:hover -{ - decorator: tiled-vertical( sliderbar-hover-t, sliderbar-hover-c, sliderbar-hover-b ); -} -scrollbarvertical sliderbar:active -{ - decorator: tiled-vertical( sliderbar-active-t, sliderbar-active-c, sliderbar-active-b ); -} - -scrollbarvertical sliderarrowdec, -scrollbarvertical sliderarrowinc -{ - width: 27dp; - height: 24dp; -} -scrollbarvertical sliderarrowdec -{ - decorator: image( sliderarrowdec ); -} -scrollbarvertical sliderarrowdec:hover -{ - decorator: image( sliderarrowdec-hover ); -} -scrollbarvertical sliderarrowdec:active -{ - decorator: image( sliderarrowdec-active ); -} - -scrollbarvertical sliderarrowinc -{ - decorator: image( sliderarrowinc ); -} -scrollbarvertical sliderarrowinc:hover -{ - decorator: image( sliderarrowinc-hover ); -} -scrollbarvertical sliderarrowinc:active -{ - decorator: image( sliderarrowinc-active ); -} - -scrollbarhorizontal -{ - width: 0; - height: 0; -} - -textarea scrollbarvertical -{ - cursor: arrow; - width: 12dp; - margin: -3dp -7dp -3dp 7dp; -} -textarea scrollbarvertical slidertrack -{ - decorator: none; - background-color: #eee; -} -textarea scrollbarvertical sliderbar -{ - decorator: none; - background-color: #bc0000; - border-left: 5dp #cc7272; - width: 7dp; - min-height: 16dp; - margin: 0; -} -textarea scrollbarvertical sliderbar:hover -{ - decorator: none; - background-color: #ca3535; -} - -textarea scrollbarvertical sliderbar:active -{ - decorator: none; - background-color: #880000; -} -textarea scrollbarvertical sliderarrowdec, -textarea scrollbarvertical sliderarrowinc -{ - width: 0; - height: 0; -} - -textarea scrollbarhorizontal -{ - cursor: arrow; - height: 10dp; - margin: 3dp -7dp -3dp -3dp; -} -textarea scrollbarhorizontal sliderbar -{ - background-color: #bc0000; - border-top: 4dp #cc7272; - height: 6dp; - min-width: 10dp; -} -textarea scrollbarhorizontal sliderbar:hover -{ - background-color: #ca3535; -} -textarea scrollbarhorizontal sliderbar:active -{ - background-color: #880000; -} -textarea scrollbarhorizontal slidertrack -{ - background-color: #eee; -} - -textarea scrollbarcorner -{ - cursor: arrow; - background-color: #ccc; - margin-top: 3dp; - margin-left: 7dp; -} diff --git a/src/main/assets/phone.rcss b/src/main/assets/phone.rcss deleted file mode 100644 index 8dc0683..0000000 --- a/src/main/assets/phone.rcss +++ /dev/null @@ -1,159 +0,0 @@ -/* Ensure the body fills the entire window */ -body { - font-family: LatoLatin; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - background: #0f0f12; - color: white; -} - -/* Status Bar pinned to top */ -#status-bar { - font-size: 3em; - display: block; - padding: 30px; - height: 35px; - background-color: gray; -} - -.time { - float: left; - font-weight: bold; -} - -.status-icons { - float: right; - font-family: Noto Emoji -} - -.icon { - margin-left: 10px; -} - -/* Content area grows to fill space */ -#content { - padding: 20px; - /* Leaves room for status and nav bars */ - height: 80%; - align: center; -} - -.header-section { - margin-bottom: 30px; - text-align: center; -} - -h1 { - font-size: 5em; - font-weight: bold; -} - -/* Mobile-style cards */ -.card { - background: #1e1e24; - border-radius: 20px; - padding: 20px; - margin-bottom: 15px; - border: 1px solid #333; -} - -.card-title { - font-size: 1.2em; - margin-bottom: 10px; - color: #3498db; -} - -.progress-bar { - height: 8px; - background: #333; - border-radius: 4px; - margin: 10px 0; -} - -.progress-fill { - width: 84%; - height: 100%; - background: #3498db; - border-radius: 4px; -} - -/* Navigation Bar pinned to bottom */ -#nav-bar { - position: absolute; - bottom: 0; - width: 100%; - height: 150px; - background-color: gray; - display: flex; - justify-content: space-around; - align-items: center; -} - -.nav-item { - font-size: 3em; - color: black; - background-color: #AAAAAA; - width: 150px; - height: 100px; - text-align: center; - vertical-align: middle; - line-height: 100px; - border-radius: 10px; -} - -.nav-item:hover { - background-color: white; -} - -/* Button Section */ -.button-section { - display: block; - text-align: center; - margin-top: 50px; -} - -/* Primary Button Style */ -.primary-button { - font-family: LatoLatin; - font-size: 4em; - padding: 30px 60px; - margin: 20px; - background-color: #3498db; - color: white; - border: none; - border-radius: 15px; - cursor: pointer; - min-width: 300px; -} - -.primary-button:hover { - background-color: #2980b9; -} - -.primary-button:active { - background-color: #1c5a85; -} - -/* Secondary Button Style */ -.secondary-button { - font-family: LatoLatin; - font-size: 3em; - padding: 20px 40px; - margin: 20px; - background-color: #7f8c8d; - color: white; - border: none; - border-radius: 15px; - cursor: pointer; - min-width: 200px; -} - -.secondary-button:hover { - background-color: #95a5a6; -} - -.secondary-button:active { - background-color: #5d6d6e; -} \ No newline at end of file diff --git a/src/main/assets/rml.rcss b/src/main/assets/rml.rcss deleted file mode 100644 index 0905b24..0000000 --- a/src/main/assets/rml.rcss +++ /dev/null @@ -1,61 +0,0 @@ -/* -* Default styles for all the basic elements. -*/ - -div -{ - display: block; -} - -p -{ - display: block; -} - -h1 -{ - display: block; -} - -em -{ - font-style: italic; -} - -strong -{ - font-weight: bold; -} - -select -{ - text-align: left; -} - -tabset tabs -{ - display: block; -} - -table { - box-sizing: border-box; - display: table; -} -tr { - box-sizing: border-box; - display: table-row; -} -td { - box-sizing: border-box; - display: table-cell; -} -col { - box-sizing: border-box; - display: table-column; -} -colgroup { - display: table-column-group; -} -thead, tbody, tfoot { - display: table-row-group; -} diff --git a/src/main/assets/ui/components.rcss b/src/main/assets/ui/components.rcss index 80dfaa8..87a9d45 100644 --- a/src/main/assets/ui/components.rcss +++ b/src/main/assets/ui/components.rcss @@ -1,17 +1,19 @@ /* ============================================== - Components: Material UI Components + Components: Material UI Components (VR Optimized) + All sizes increased for VR readability and raycast interaction + All interactive elements have hover/active states ============================================== */ -/* ============== Status Bar ============== */ +/* ============== Status Bar (VR-sized) ============== */ .status-bar { - height: 24px; - padding: 0 12px; + height: 36px; + padding: 0 16px; background-color: transparent; display: flex; justify-content: space-between; align-items: center; - font-size: 12px; + font-size: 16px; color: #FFFFFF; } @@ -21,13 +23,13 @@ .status-bar-icons { display: flex; - gap: 4px; + gap: 8px; } -/* ============== App Bar ============== */ +/* ============== App Bar (VR-sized) ============== */ .app-bar { - height: 56px; + height: 72px; padding: 0 16px; background-color: #1E1E1E; display: flex; @@ -35,16 +37,26 @@ } .app-bar-nav { - width: 48px; - height: 48px; + width: 56px; + height: 56px; display: flex; align-items: center; justify-content: center; - margin-right: 8px; + margin-right: 12px; + cursor: pointer; + border-radius: 28px; +} + +.app-bar-nav:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.app-bar-nav:active { + background-color: rgba(255, 255, 255, 0.2); } .app-bar-title { - font-size: 20px; + font-size: 26px; font-weight: 500; flex: 1; color: #FFFFFF; @@ -52,18 +64,28 @@ .app-bar-actions { display: flex; + gap: 8px; } -/* ============== Buttons ============== */ +/* ============== Buttons (VR-sized) ============== */ .btn { - padding: 12px 24px; - font-size: 14px; + padding: 16px 32px; + font-size: 18px; font-weight: 500; font-family: LatoLatin; text-align: center; - border-radius: 4px; + border-radius: 8px; cursor: pointer; + min-height: 56px; +} + +.btn:hover { + opacity: 0.9; +} + +.btn:active { + opacity: 0.8; } .btn-primary { @@ -88,84 +110,107 @@ background-color: #4AEADB; } +.btn-secondary:active { + background-color: #00B3A1; +} + .btn-outlined { background-color: transparent; - border: 1px solid #BB86FC; color: #BB86FC; } .btn-outlined:hover { - background-color: rgba(187, 134, 252, 0.1); + background-color: rgba(187, 134, 252, 0.15); +} + +.btn-outlined:active { + background-color: rgba(187, 134, 252, 0.25); } .btn-text { background-color: transparent; color: #BB86FC; - padding: 8px 16px; + padding: 12px 20px; } .btn-text:hover { background-color: rgba(187, 134, 252, 0.1); } -/* Icon Button */ +.btn-text:active { + background-color: rgba(187, 134, 252, 0.2); +} + +/* Icon Button (VR-sized - larger touch target) */ .btn-icon { - width: 48px; - height: 48px; + width: 64px; + height: 64px; padding: 0; - border-radius: 24px; + border-radius: 32px; background-color: transparent; display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: 28px; + cursor: pointer; } .btn-icon:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.12); } -/* Floating Action Button */ +.btn-icon:active { + background-color: rgba(255, 255, 255, 0.2); +} + +/* Floating Action Button (VR-sized) */ .btn-fab { - width: 56px; - height: 56px; - border-radius: 28px; + width: 72px; + height: 72px; + border-radius: 36px; background-color: #BB86FC; color: #000000; display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: 32px; position: absolute; - bottom: 72px; - right: 16px; + bottom: 100px; + right: 20px; + cursor: pointer; } .btn-fab:hover { background-color: #D4A5FF; + transform: scale(1.05); } -/* ============== Input Fields ============== */ +.btn-fab:active { + background-color: #9A67EA; + transform: scale(0.95); +} + +/* ============== Input Fields (VR-sized) ============== */ .input-container { - margin-bottom: 16px; + margin-bottom: 20px; } .input-label { - font-size: 12px; + font-size: 16px; color: #B3B3B3; - margin-bottom: 4px; + margin-bottom: 8px; } .input-field { width: 100%; - padding: 12px 0; - font-size: 16px; + padding: 16px 0; + font-size: 20px; font-family: LatoLatin; color: #FFFFFF; background-color: transparent; - border: none; - border-bottom: 1px solid #333333; + border-bottom-width: 2px; + border-bottom-color: #333333; } .input-field:focus { @@ -176,69 +221,86 @@ border-bottom-color: #666666; } -/* Search Input */ +/* Search Input (VR-sized) */ .search-bar { display: flex; align-items: center; - padding: 8px 16px; + padding: 14px 20px; background-color: #2D2D2D; - border-radius: 24px; - margin: 8px 16px; + border-radius: 32px; + margin: 12px 16px; + cursor: pointer; +} + +.search-bar:hover { + background-color: #3D3D3D; } .search-icon { - font-size: 20px; + font-size: 24px; color: #B3B3B3; - margin-right: 12px; + margin-right: 16px; } .search-input { flex: 1; background-color: transparent; - border: none; - font-size: 16px; + font-size: 20px; color: #FFFFFF; } -/* ============== Cards ============== */ +/* ============== Cards (VR-sized) ============== */ .card { background-color: #1E1E1E; - border-radius: 8px; - padding: 16px; - margin: 8px; + border-radius: 12px; + padding: 20px; + margin: 12px; + cursor: pointer; +} + +.card:hover { + background-color: #252525; +} + +.card:active { + background-color: #2A2A2A; } .card-elevated { background-color: #2D2D2D; } +.card-elevated:hover { + background-color: #353535; +} + .card-header { - font-size: 20px; + font-size: 24px; font-weight: 500; - margin-bottom: 8px; + margin-bottom: 10px; color: #FFFFFF; } .card-subtitle { - font-size: 14px; + font-size: 18px; color: #B3B3B3; - margin-bottom: 12px; + margin-bottom: 16px; } .card-content { - font-size: 14px; + font-size: 18px; color: #B3B3B3; } .card-actions { display: flex; justify-content: flex-end; - margin-top: 16px; - gap: 8px; + margin-top: 20px; + gap: 12px; } -/* ============== Lists ============== */ +/* ============== Lists (VR-sized) ============== */ .list { display: flex; @@ -248,40 +310,40 @@ .list-item { display: flex; align-items: center; - padding: 12px 16px; - min-height: 48px; + padding: 16px 20px; + min-height: 72px; cursor: pointer; } .list-item:hover { - background-color: rgba(255, 255, 255, 0.05); + background-color: rgba(255, 255, 255, 0.08); } .list-item:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.15); } .list-item-avatar { - width: 40px; - height: 40px; - border-radius: 20px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: #BB86FC; - margin-right: 16px; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - color: #000000; -} - -.list-item-icon { - width: 40px; - height: 40px; - margin-right: 16px; + margin-right: 20px; display: flex; align-items: center; justify-content: center; font-size: 24px; + color: #000000; +} + +.list-item-icon { + width: 56px; + height: 56px; + margin-right: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; color: #B3B3B3; } @@ -292,45 +354,49 @@ } .list-item-title { - font-size: 16px; + font-size: 20px; color: #FFFFFF; } .list-item-subtitle { - font-size: 14px; + font-size: 16px; color: #B3B3B3; - margin-top: 2px; + margin-top: 4px; } .list-item-action { - font-size: 24px; + font-size: 28px; color: #666666; + cursor: pointer; +} + +.list-item-action:hover { + color: #FFFFFF; } .list-divider { height: 1px; background-color: #333333; - margin-left: 72px; + margin-left: 96px; } .list-header { - padding: 16px 16px 8px 16px; - font-size: 14px; + padding: 20px 20px 12px 20px; + font-size: 18px; font-weight: 500; color: #BB86FC; } -/* ============== Bottom Navigation ============== */ +/* ============== Bottom Navigation (VR-sized) ============== */ .bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; - height: 56px; + height: 72px; background-color: #1E1E1E; display: flex; - border-top: 1px solid #333333; } .bottom-nav-item { @@ -345,22 +411,31 @@ .bottom-nav-item:hover { color: #B3B3B3; + background-color: rgba(255, 255, 255, 0.05); +} + +.bottom-nav-item:active { + background-color: rgba(255, 255, 255, 0.1); } .bottom-nav-item.active { color: #BB86FC; } +.bottom-nav-item.active:hover { + color: #D4A5FF; +} + .bottom-nav-icon { - font-size: 24px; - margin-bottom: 4px; + font-size: 28px; + margin-bottom: 6px; } .bottom-nav-label { - font-size: 12px; + font-size: 14px; } -/* ============== Dialogs/Modals ============== */ +/* ============== Dialogs/Modals (VR-sized) ============== */ .modal-overlay { position: absolute; @@ -368,7 +443,7 @@ left: 0; right: 0; bottom: 0; - background-color: rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; @@ -376,105 +451,141 @@ .modal-dialog { background-color: #2D2D2D; - border-radius: 8px; - padding: 24px; - width: 280px; + border-radius: 16px; + padding: 32px; + width: 360px; max-width: 90%; } .modal-title { - font-size: 20px; + font-size: 26px; font-weight: 500; color: #FFFFFF; - margin-bottom: 16px; + margin-bottom: 20px; } .modal-content { - font-size: 14px; + font-size: 18px; color: #B3B3B3; - margin-bottom: 24px; + margin-bottom: 32px; } .modal-actions { display: flex; justify-content: flex-end; - gap: 8px; + gap: 12px; } -/* ============== Toast/Snackbar ============== */ +/* ============== Toast/Snackbar (VR-sized) ============== */ .toast { position: absolute; - bottom: 72px; - left: 16px; - right: 16px; + bottom: 100px; + left: 20px; + right: 20px; background-color: #323232; color: #FFFFFF; - padding: 14px 16px; - border-radius: 4px; + padding: 20px 24px; + border-radius: 8px; display: flex; align-items: center; justify-content: space-between; - font-size: 14px; + font-size: 18px; } .toast-action { color: #BB86FC; font-weight: 500; - margin-left: 16px; + margin-left: 20px; + cursor: pointer; } -/* ============== Toggle/Switch ============== */ +.toast-action:hover { + color: #D4A5FF; +} + +/* ============== Toggle/Switch (VR-sized) ============== */ .toggle { - width: 36px; - height: 20px; - border-radius: 10px; + width: 52px; + height: 32px; + border-radius: 16px; background-color: #666666; position: relative; cursor: pointer; } +.toggle:hover { + background-color: #777777; +} + .toggle.active { background-color: rgba(187, 134, 252, 0.5); } +.toggle.active:hover { + background-color: rgba(187, 134, 252, 0.6); +} + .toggle-thumb { - width: 16px; - height: 16px; - border-radius: 8px; + width: 24px; + height: 24px; + border-radius: 12px; background-color: #B3B3B3; position: absolute; - top: 2px; - left: 2px; + top: 4px; + left: 4px; } .toggle.active .toggle-thumb { background-color: #BB86FC; - left: 18px; + left: 24px; } -/* ============== Chips/Tags ============== */ +/* ============== Chips/Tags (VR-sized) ============== */ .chip { display: inline-flex; align-items: center; - padding: 6px 12px; + padding: 10px 18px; background-color: #2D2D2D; - border-radius: 16px; - font-size: 14px; + border-radius: 24px; + font-size: 18px; color: #FFFFFF; - margin: 4px; + margin: 6px; + cursor: pointer; +} + +.chip:hover { + background-color: #3D3D3D; +} + +.chip:active { + background-color: #454545; +} + +.chip.active { + background-color: #BB86FC; + color: #000000; +} + +.chip.active:hover { + background-color: #D4A5FF; } .chip-icon { - margin-right: 8px; + margin-right: 10px; } .chip-delete { - margin-left: 8px; - font-size: 18px; + margin-left: 10px; + font-size: 22px; color: #B3B3B3; + cursor: pointer; +} + +.chip-delete:hover { + color: #FFFFFF; } /* ============== Dividers ============== */ @@ -485,15 +596,15 @@ } .divider-inset { - margin-left: 72px; + margin-left: 96px; } -/* ============== App Grid (Home Screen) ============== */ +/* ============== App Grid (Home Screen - VR-sized) ============== */ .app-grid { display: flex; flex-wrap: wrap; - padding: 16px; + padding: 20px; } .app-icon { @@ -501,87 +612,101 @@ display: flex; flex-direction: column; align-items: center; - padding: 12px 0; + padding: 16px 0; cursor: pointer; + border-radius: 12px; } .app-icon:hover { - background-color: rgba(255, 255, 255, 0.05); - border-radius: 8px; + background-color: rgba(255, 255, 255, 0.08); +} + +.app-icon:active { + background-color: rgba(255, 255, 255, 0.15); } .app-icon-image { - width: 48px; - height: 48px; - border-radius: 12px; + width: 72px; + height: 72px; + border-radius: 18px; background-color: #BB86FC; display: flex; align-items: center; justify-content: center; - font-size: 24px; + font-size: 32px; color: #000000; - margin-bottom: 8px; + margin-bottom: 12px; +} + +.app-icon-image:hover { + transform: scale(1.05); } .app-icon-label { - font-size: 12px; + font-size: 16px; color: #FFFFFF; text-align: center; } -/* ============== Dock ============== */ +/* ============== Dock (VR-sized) ============== */ .dock { position: absolute; bottom: 0; left: 0; right: 0; - height: 80px; - background-color: rgba(30, 30, 30, 0.9); + height: 100px; + background-color: rgba(30, 30, 30, 0.95); display: flex; justify-content: space-around; align-items: center; - padding: 0 32px; + padding: 0 40px; } .dock-item { - width: 56px; - height: 56px; - border-radius: 14px; + width: 72px; + height: 72px; + border-radius: 18px; background-color: #BB86FC; display: flex; align-items: center; justify-content: center; - font-size: 28px; + font-size: 36px; color: #000000; cursor: pointer; } .dock-item:hover { transform: scale(1.1); + background-color: #D4A5FF; } -/* ============== Dial Pad ============== */ +.dock-item:active { + transform: scale(0.95); + background-color: #9A67EA; +} + +/* ============== Dial Pad (VR-sized) ============== */ .dial-pad { display: flex; flex-wrap: wrap; - padding: 16px; + padding: 20px; } .dial-key { width: 33.33%; - height: 72px; + height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; - border-radius: 36px; + border-radius: 48px; } .dial-key:hover { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.12); } .dial-key:active { @@ -589,116 +714,772 @@ } .dial-key-number { - font-size: 32px; + font-size: 42px; font-weight: 300; color: #FFFFFF; } .dial-key-letters { - font-size: 10px; + font-size: 14px; color: #B3B3B3; - letter-spacing: 2px; - margin-top: 2px; + letter-spacing: 3px; + margin-top: 4px; } .dial-display { - font-size: 36px; + font-size: 48px; font-weight: 300; color: #FFFFFF; text-align: center; - padding: 24px 16px; - letter-spacing: 2px; + padding: 32px 20px; + letter-spacing: 3px; } .dial-actions { display: flex; justify-content: center; - padding: 16px; - gap: 48px; + padding: 20px; + gap: 64px; } .dial-call-btn { - width: 64px; - height: 64px; - border-radius: 32px; + width: 80px; + height: 80px; + border-radius: 40px; background-color: #4CAF50; display: flex; align-items: center; justify-content: center; - font-size: 28px; + font-size: 36px; color: #FFFFFF; cursor: pointer; } .dial-call-btn:hover { background-color: #66BB6A; + transform: scale(1.05); } -/* ============== Chat Bubbles ============== */ +.dial-call-btn:active { + background-color: #43A047; + transform: scale(0.95); +} + +/* ============== Chat Bubbles (VR-sized) ============== */ .chat-container { display: flex; flex-direction: column; - padding: 16px; - gap: 8px; + padding: 20px; + gap: 12px; } .chat-bubble { max-width: 75%; - padding: 10px 14px; - border-radius: 18px; - font-size: 14px; + padding: 14px 20px; + border-radius: 24px; + font-size: 18px; } .chat-bubble-sent { align-self: flex-end; background-color: #BB86FC; color: #000000; - border-bottom-right-radius: 4px; + border-bottom-right-radius: 6px; } .chat-bubble-received { align-self: flex-start; background-color: #2D2D2D; color: #FFFFFF; - border-bottom-left-radius: 4px; + border-bottom-left-radius: 6px; } .chat-timestamp { - font-size: 11px; + font-size: 14px; color: #666666; text-align: center; - margin: 8px 0; + margin: 12px 0; } .chat-input-container { display: flex; align-items: center; - padding: 8px 16px; + padding: 12px 20px; background-color: #1E1E1E; - border-top: 1px solid #333333; } .chat-input { flex: 1; - padding: 10px 16px; + padding: 14px 20px; background-color: #2D2D2D; - border-radius: 24px; - border: none; - font-size: 16px; + border-radius: 32px; + font-size: 18px; color: #FFFFFF; - margin-right: 8px; + margin-right: 12px; +} + +.chat-input:hover { + background-color: #3D3D3D; +} + +.chat-input:focus { + background-color: #353535; } .chat-send-btn { - width: 40px; - height: 40px; - border-radius: 20px; + width: 56px; + height: 56px; + border-radius: 28px; background-color: #BB86FC; display: flex; align-items: center; justify-content: center; - font-size: 20px; + font-size: 28px; color: #000000; cursor: pointer; } + +.chat-send-btn:hover { + background-color: #D4A5FF; + transform: scale(1.05); +} + +.chat-send-btn:active { + background-color: #9A67EA; + transform: scale(0.95); +} + +/* ============== Section Headers (VR-sized) ============== */ + +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 24px 20px 16px 20px; +} + +.section-title { + font-size: 24px; + font-weight: 600; + color: #FFFFFF; +} + +.section-action { + font-size: 16px; + font-weight: 600; + color: #B3B3B3; + cursor: pointer; +} + +.section-action:hover { + color: #FFFFFF; +} + +/* ============== Navigation Item (VR-sized) ============== */ + +.nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + color: #B3B3B3; + padding: 12px; +} + +.nav-item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.nav-item:active { + background-color: rgba(255, 255, 255, 0.1); +} + +.nav-item.active { + color: #FFFFFF; +} + +.nav-item img { + width: 32px; + height: 32px; + margin-bottom: 6px; +} + +.nav-item span { + font-size: 14px; +} + +/* ============== Quick Cards (VR-sized) ============== */ + +.quick-card { + display: flex; + align-items: center; + background-color: #282828; + border-radius: 8px; + padding: 0; + height: 72px; + overflow: hidden; + cursor: pointer; +} + +.quick-card:hover { + background-color: #353535; +} + +.quick-card:active { + background-color: #3D3D3D; +} + +.quick-card-art { + width: 72px; + height: 72px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + color: #FFFFFF; +} + +.quick-card-title { + font-size: 17px; + font-weight: 600; + color: #FFFFFF; + padding: 0 16px; +} + +/* ============== Recent/Playlist Items (VR-sized) ============== */ + +.recent-item { + min-width: 160px; + cursor: pointer; + padding: 8px; + border-radius: 8px; +} + +.recent-item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.recent-art { + width: 160px; + height: 160px; + border-radius: 12px; + margin-bottom: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 52px; + color: #FFFFFF; +} + +.recent-title { + font-size: 18px; + color: #FFFFFF; + font-weight: 500; + margin-bottom: 6px; +} + +.recent-subtitle { + font-size: 16px; + color: #B3B3B3; +} + +.playlist-item { + display: flex; + align-items: center; + padding: 16px 20px; + cursor: pointer; +} + +.playlist-item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.playlist-item:active { + background-color: rgba(255, 255, 255, 0.1); +} + +.playlist-art { + width: 72px; + height: 72px; + border-radius: 8px; + margin-right: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + color: #FFFFFF; +} + +.playlist-info { + flex: 1; +} + +.playlist-title { + font-size: 20px; + color: #FFFFFF; + font-weight: 500; +} + +.playlist-meta { + font-size: 16px; + color: #B3B3B3; + margin-top: 6px; +} + +/* ============== Mini Player (VR-sized) ============== */ + +.mini-player { + display: flex; + align-items: center; + padding: 12px 20px; + background-color: #282828; +} + +.mini-player-art { + width: 64px; + height: 64px; + border-radius: 8px; + background-color: #667eea; + margin-right: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + color: #FFFFFF; +} + +.mini-player-info { + flex: 1; +} + +.mini-player-title { + font-size: 18px; + color: #FFFFFF; + font-weight: 500; +} + +.mini-player-artist { + font-size: 16px; + color: #B3B3B3; + margin-top: 4px; +} + +.mini-player-controls { + display: flex; + gap: 12px; +} + +.mini-control-btn { + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 28px; +} + +.mini-control-btn:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.mini-control-btn:active { + background-color: rgba(255, 255, 255, 0.2); +} + +.mini-control-btn img { + width: 32px; + height: 32px; +} + +/* ============== Camera Controls (VR-sized) ============== */ + +.camera-btn { + width: 56px; + height: 56px; + border-radius: 28px; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.camera-btn:hover { + background-color: rgba(255, 255, 255, 0.25); +} + +.camera-btn:active { + background-color: rgba(255, 255, 255, 0.35); +} + +.camera-btn img { + width: 32px; + height: 32px; +} + +.camera-mode { + font-size: 18px; + color: #B3B3B3; + cursor: pointer; + padding: 12px; + border-radius: 8px; +} + +.camera-mode:hover { + background-color: rgba(255, 255, 255, 0.1); + color: #FFFFFF; +} + +.camera-mode.active { + color: #FFD700; + font-weight: 600; +} + +.capture-btn { + width: 88px; + height: 88px; + border-radius: 44px; + background-color: #FFFFFF; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.capture-btn:hover { + transform: scale(1.05); +} + +.capture-btn:active { + transform: scale(0.95); + background-color: #E0E0E0; +} + +.switch-camera-btn { + width: 64px; + height: 64px; + border-radius: 32px; + background-color: rgba(255, 255, 255, 0.25); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.switch-camera-btn:hover { + background-color: rgba(255, 255, 255, 0.35); +} + +.switch-camera-btn:active { + background-color: rgba(255, 255, 255, 0.45); +} + +.switch-camera-btn img { + width: 32px; + height: 32px; +} + +.gallery-preview { + width: 64px; + height: 64px; + border-radius: 12px; + background-color: #333333; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.gallery-preview:hover { + background-color: #444444; +} + +.gallery-preview img { + width: 32px; + height: 32px; + opacity: 0.8; +} + +.zoom-btn { + width: 44px; + height: 44px; + border-radius: 22px; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #FFFFFF; + cursor: pointer; +} + +.zoom-btn:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* ============== Store Components (VR-sized) ============== */ + +.app-card { + min-width: 180px; + background-color: #1E1E1E; + border-radius: 16px; + padding: 16px; + cursor: pointer; +} + +.app-card:hover { + background-color: #2A2A2A; +} + +.app-card:active { + background-color: #303030; +} + +.app-card-icon { + width: 80px; + height: 80px; + border-radius: 20px; + margin-bottom: 16px; + display: flex; + align-items: center; + justify-content: center; + font-size: 36px; + color: #000000; +} + +.app-card-name { + font-size: 18px; + font-weight: 500; + color: #FFFFFF; + margin-bottom: 6px; +} + +.app-card-category { + font-size: 16px; + color: #B3B3B3; + margin-bottom: 10px; +} + +.app-card-rating { + display: flex; + align-items: center; + font-size: 16px; + color: #B3B3B3; +} + +.app-list-item { + display: flex; + align-items: center; + padding: 16px 20px; + cursor: pointer; +} + +.app-list-item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.app-list-item:active { + background-color: rgba(255, 255, 255, 0.1); +} + +.app-list-icon { + width: 72px; + height: 72px; + border-radius: 16px; + margin-right: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + color: #000000; +} + +.app-list-info { + flex: 1; +} + +.app-list-name { + font-size: 20px; + font-weight: 500; + color: #FFFFFF; +} + +.app-list-meta { + font-size: 16px; + color: #B3B3B3; + margin-top: 4px; +} + +.app-list-rating { + display: flex; + align-items: center; + margin-top: 6px; +} + +.app-list-rating span { + font-size: 16px; + color: #B3B3B3; +} + +.install-btn { + background-color: #BB86FC; + color: #000000; + font-size: 16px; + font-weight: 600; + padding: 12px 28px; + border-radius: 24px; + cursor: pointer; +} + +.install-btn:hover { + background-color: #D4A5FF; +} + +.install-btn:active { + background-color: #9A67EA; +} + +.install-btn.installed { + background-color: transparent; + color: #BB86FC; +} + +.install-btn.installed:hover { + background-color: rgba(187, 134, 252, 0.15); +} + +.category-chip { + background-color: #2D2D2D; + color: #FFFFFF; + font-size: 18px; + padding: 12px 24px; + border-radius: 24px; + white-space: nowrap; + cursor: pointer; +} + +.category-chip:hover { + background-color: #3D3D3D; +} + +.category-chip.active { + background-color: #BB86FC; + color: #000000; +} + +.category-chip.active:hover { + background-color: #D4A5FF; +} + +/* ============== Featured Banner (VR-sized) ============== */ + +.featured-banner { + margin: 0 20px 20px 20px; + height: 200px; + background-color: #6200EE; + border-radius: 20px; + padding: 28px; + display: flex; + flex-direction: column; + justify-content: flex-end; + cursor: pointer; +} + +.featured-banner:hover { + opacity: 0.95; +} + +.featured-tag { + font-size: 14px; + color: rgba(255,255,255,0.7); + text-transform: uppercase; + margin-bottom: 10px; +} + +.featured-title { + font-size: 32px; + font-weight: 600; + color: #FFFFFF; + margin-bottom: 6px; +} + +.featured-subtitle { + font-size: 18px; + color: rgba(255,255,255,0.8); +} + +/* ============== Store Search (VR-sized) ============== */ + +.store-search { + margin: 20px; + background-color: #2D2D2D; + border-radius: 32px; + padding: 16px 24px; + display: flex; + align-items: center; + cursor: pointer; +} + +.store-search:hover { + background-color: #3D3D3D; +} + +.store-search img { + width: 28px; + height: 28px; + margin-right: 16px; + opacity: 0.6; +} + +.store-search-text { + font-size: 20px; + color: #B3B3B3; +} + +/* ============== Store Navigation (VR-sized) ============== */ + +.store-bottom-nav { + display: flex; + height: 72px; + background-color: #1E1E1E; +} + +.store-nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + color: #B3B3B3; +} + +.store-nav-item:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.store-nav-item.active { + color: #BB86FC; +} + +.store-nav-item img { + width: 32px; + height: 32px; + margin-bottom: 6px; +} + +.store-nav-item span { + font-size: 14px; +} + +/* ============== Music Navigation (VR-sized) ============== */ + +.music-bottom-nav { + display: flex; + height: 72px; + background-color: #1E1E1E; +} diff --git a/src/main/assets/ui/theme.rcss b/src/main/assets/ui/theme.rcss index 6df89ac..6df8f3b 100644 --- a/src/main/assets/ui/theme.rcss +++ b/src/main/assets/ui/theme.rcss @@ -1,5 +1,6 @@ /* ============================================== - Theme: Material Dark for Virtual Smartphone + Theme: Material Dark for Virtual Smartphone (VR Optimized) + All sizes increased for VR readability and raycast interaction ============================================== */ /* Base body styling */ @@ -14,58 +15,58 @@ body { animation: 0.2s cubic-out fade-in; } -/* ============== Typography ============== */ +/* ============== Typography (VR-sized) ============== */ .text-h1 { - font-size: 96px; + font-size: 120px; font-weight: 300; } .text-h2 { - font-size: 60px; + font-size: 80px; font-weight: 300; } .text-h3 { - font-size: 48px; + font-size: 64px; font-weight: 400; } .text-h4 { - font-size: 34px; + font-size: 48px; font-weight: 400; } .text-h5 { - font-size: 24px; + font-size: 32px; font-weight: 400; } .text-h6 { - font-size: 20px; + font-size: 28px; font-weight: 500; } .text-body1 { - font-size: 16px; + font-size: 22px; font-weight: 400; } .text-body2 { - font-size: 14px; + font-size: 18px; font-weight: 400; } .text-caption { - font-size: 12px; + font-size: 16px; font-weight: 400; } .text-overline { - font-size: 10px; + font-size: 14px; font-weight: 500; text-transform: uppercase; - letter-spacing: 1.5px; + letter-spacing: 2px; } /* ============== Text Colors ============== */ @@ -120,35 +121,40 @@ body { background-color: #CF6679; } -/* ============== Spacing Utilities ============== */ +/* Hover highlight color - used for interactive element feedback */ +.bg-hover { + background-color: rgba(255, 255, 255, 0.12); +} + +/* ============== Spacing Utilities (VR-scaled) ============== */ .p-0 { padding: 0; } -.p-1 { padding: 4px; } -.p-2 { padding: 8px; } -.p-3 { padding: 12px; } -.p-4 { padding: 16px; } -.p-5 { padding: 24px; } -.p-6 { padding: 32px; } -.p-8 { padding: 48px; } +.p-1 { padding: 6px; } +.p-2 { padding: 12px; } +.p-3 { padding: 18px; } +.p-4 { padding: 24px; } +.p-5 { padding: 36px; } +.p-6 { padding: 48px; } +.p-8 { padding: 72px; } .m-0 { margin: 0; } -.m-1 { margin: 4px; } -.m-2 { margin: 8px; } -.m-3 { margin: 12px; } -.m-4 { margin: 16px; } -.m-5 { margin: 24px; } -.m-6 { margin: 32px; } -.m-8 { margin: 48px; } +.m-1 { margin: 6px; } +.m-2 { margin: 12px; } +.m-3 { margin: 18px; } +.m-4 { margin: 24px; } +.m-5 { margin: 36px; } +.m-6 { margin: 48px; } +.m-8 { margin: 72px; } -.mt-1 { margin-top: 4px; } -.mt-2 { margin-top: 8px; } -.mt-3 { margin-top: 12px; } -.mt-4 { margin-top: 16px; } +.mt-1 { margin-top: 6px; } +.mt-2 { margin-top: 12px; } +.mt-3 { margin-top: 18px; } +.mt-4 { margin-top: 24px; } -.mb-1 { margin-bottom: 4px; } -.mb-2 { margin-bottom: 8px; } -.mb-3 { margin-bottom: 12px; } -.mb-4 { margin-bottom: 16px; } +.mb-1 { margin-bottom: 6px; } +.mb-2 { margin-bottom: 12px; } +.mb-3 { margin-bottom: 18px; } +.mb-4 { margin-bottom: 24px; } /* ============== Layout Utilities ============== */ @@ -209,29 +215,21 @@ body { /* ============== Border Utilities ============== */ .rounded { - border-radius: 4px; + border-radius: 6px; } .rounded-lg { - border-radius: 8px; + border-radius: 12px; } .rounded-xl { - border-radius: 16px; + border-radius: 20px; } .rounded-full { border-radius: 50%; } -.border { - border: 1px solid #333333; -} - -.border-bottom { - border-bottom: 1px solid #333333; -} - /* ============== Screen Structure ============== */ .screen { @@ -248,38 +246,39 @@ body { } /* ============== Animations ============== */ -/* RmlUi syntax: animation: ? ? ? alternate? paused? */ -/* Fade in animation */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } -/* Slide in from right */ @keyframes slide-in-right { 0% { transform: translateX(100px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } -/* Slide in from left */ @keyframes slide-in-left { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } -/* Slide up animation */ @keyframes slide-up { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } -/* Scale in animation */ @keyframes scale-in { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1.0); opacity: 1; } } +/* Hover highlight animation */ +@keyframes hover-pulse { + 0% { background-color: rgba(255, 255, 255, 0.0); } + 50% { background-color: rgba(255, 255, 255, 0.15); } + 100% { background-color: rgba(255, 255, 255, 0.1); } +} + /* Screen transition classes */ .nav-forward { animation: 0.2s cubic-out slide-in-right; @@ -317,3 +316,18 @@ body { .animate-scale-in { animation: 0.2s back-out scale-in; } + +/* ============== Interactive Base Class ============== */ +/* All interactive elements should use cursor: pointer and have hover feedback */ + +.interactive { + cursor: pointer; +} + +.interactive:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.interactive:active { + background-color: rgba(255, 255, 255, 0.2); +} diff --git a/src/main/assets/window.rcss b/src/main/assets/window.rcss deleted file mode 100644 index 480c5d8..0000000 --- a/src/main/assets/window.rcss +++ /dev/null @@ -1,36 +0,0 @@ -body { - font-family: LatoLatin; - font-size: 18px; - color: #02475e; - background: #fefecc; - text-align: center; - padding: 2em 1em; - position: absolute; - border: 2px #ccc; - width: 500px; - height: 200px; - margin: auto; -} - -h1 { - color: #f6470a; - font-size: 1.5em; - font-weight: bold; - margin-bottom: 0.7em; -} - -p { - margin: 0.7em 0; -} - -input.text { - background-color: #fff; - color: #555; - border: 2px #999; - padding: 5px; - tab-index: auto; - cursor: text; - box-sizing: border-box; - width: 200px; - font-size: 0.9em; -} diff --git a/src/main/assets/window.rml b/src/main/assets/window.rml deleted file mode 100644 index e368b36..0000000 --- a/src/main/assets/window.rml +++ /dev/null @@ -1,19 +0,0 @@ -