omar/MosisService
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make ui bigger

Browse Source
This commit is contained in:
omigamedev
2026-01-16 14:52:18 +01:00
parent 2e2a9d0603
commit fbb6917812
23 changed files with 1252 additions and 1623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/main/assets/apps/browser/browser.rml
View File

@@ -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;
}
</style>
@@ -189,20 +189,20 @@
<!-- Browser Toolbar -->
<div class="browser-toolbar">
<div class="app-bar-nav browser-nav-btn" data-class-disabled="!can_go_back" onclick="goBack()">
<img src="../../icons/back.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/back.tga" style="width: 32px; height: 32px;"/>
</div>
<div class="browser-nav-btn disabled">
<img src="../../icons/forward.tga" style="width: 24px; height: 24px; opacity: 0.3;"/>
<img src="../../icons/forward.tga" style="width: 32px; height: 32px; opacity: 0.3;"/>
</div>
<div class="browser-url-bar">
<span class="browser-secure-icon">🔒</span>
<input class="browser-url" type="text" data-value="current_url"/>
</div>
<div class="browser-nav-btn" data-event-click="refresh()">
<img src="../../icons/refresh.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/refresh.tga" style="width: 32px; height: 32px;"/>
</div>
<div class="browser-nav-btn">
<img src="../../icons/more.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/more.tga" style="width: 32px; height: 32px;"/>
</div>
</div>
@@ -236,7 +236,7 @@
<!-- Bottom Bar -->
<div class="browser-bottom-bar">
<div class="browser-tab-btn" onclick="goHome()">
<img src="../../icons/home.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/home.tga" class="browser-tab-icon" style="width: 32px; height: 32px;"/>
<span class="browser-tab-label">Home</span>
</div>
<div class="browser-tab-btn">
@@ -244,11 +244,11 @@
<span class="browser-tab-label">Tabs</span>
</div>
<div class="browser-tab-btn">
<img src="../../icons/add.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/add.tga" class="browser-tab-icon" style="width: 32px; height: 32px;"/>
<span class="browser-tab-label">New Tab</span>
</div>
<div class="browser-tab-btn">
<img src="../../icons/menu.tga" class="browser-tab-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/menu.tga" class="browser-tab-icon" style="width: 32px; height: 32px;"/>
<span class="browser-tab-label">Menu</span>
</div>
</div>

60
src/main/assets/apps/camera/camera.rml
View File

@@ -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;
}
</style>
@@ -329,7 +329,7 @@
<div class="viewfinder-placeholder">
<div class="viewfinder-placeholder-icon">C</div>
<div>Camera Preview</div>
<div style="font-size: 12px; margin-top: 8px; color: #555555;">
<div style="font-size: 16px; margin-top: 8px; color: #555555;">
Tap to focus
</div>
</div>

26
src/main/assets/apps/contacts/contact_detail.rml
View File

@@ -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 @@
<body class="contact-detail-screen" onload="updateContactDetail()">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Contact</span>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Contact Header -->
@@ -143,14 +143,14 @@
<!-- Contact Info -->
<div class="contact-info-section">
<div class="contact-info-item">
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Mobile</div>
<div class="contact-info-value" id="contact-phone">+1 (555) 000-0000</div>
</div>
</div>
<div class="contact-info-item">
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
<div class="contact-info-content">
<div class="contact-info-label">Email</div>
<div class="contact-info-value" id="contact-email">email@example.com</div>

36
src/main/assets/apps/contacts/contacts.rml
View File

@@ -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;
}
</style>
@@ -92,14 +92,14 @@
<body class="contacts-screen" data-model="contacts">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Contacts</span>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Search Bar -->
<div class="search-bar">
<img src="../../icons/search.tga" class="search-icon" style="width: 20px; height: 20px;"/>
<img src="../../icons/search.tga" class="search-icon" style="width: 28px; height: 28px;"/>
<input class="search-input" type="text" placeholder="Search contacts"/>
</div>
@@ -120,20 +120,20 @@
</div>
<!-- FAB -->
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item" onclick="navigateTo('dialer')">
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item active">
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>

6
src/main/assets/apps/dialer/calling.rml
View File

@@ -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;
}

35
src/main/assets/apps/dialer/dialer.rml
View File

@@ -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);
}
</style>
</head>
<body class="dialer-screen" data-model="phone">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Phone</span>
</div>
@@ -177,21 +182,21 @@
<div class="dial-actions">
<div style="width: 56px;"></div>
<div class="dial-call-btn" data-event-click="make_call()"><img src="../../icons/call_small.tga" style="width: 32px; height: 32px; pointer-events: none;"/></div>
<div class="btn-icon" data-event-click="dial_backspace()" style="width: 56px; height: 56px;"><img src="../../icons/backspace.tga" style="width: 24px; height: 24px; pointer-events: none;"/></div>
<div class="btn-icon" data-event-click="dial_backspace()" style="width: 56px; height: 56px;"><img src="../../icons/backspace.tga" style="width: 32px; height: 32px; pointer-events: none;"/></div>
</div>
<!-- Bottom Navigation -->
<div class="bottom-nav">
<div class="bottom-nav-item active">
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Keypad</span>
</div>
<div class="bottom-nav-item">
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Recent</span>
</div>
<div class="bottom-nav-item" onclick="navigateTo('contacts')">
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
<span class="bottom-nav-label">Contacts</span>
</div>
</div>

14
src/main/assets/apps/home/home.rml
View File

@@ -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 @@
<div class="status-bar">
<span class="status-bar-time">12:30</span>
<div class="status-bar-icons">
<img src="../../icons/wifi.tga" style="width: 16px; height: 16px;"/>
<img src="../../icons/signal.tga" style="width: 16px; height: 16px;"/>
<img src="../../icons/battery.tga" style="width: 16px; height: 16px;"/>
<img src="../../icons/wifi.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/signal.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/battery.tga" style="width: 24px; height: 24px;"/>
</div>
</div>

26
src/main/assets/apps/home/lock.rml
View File

@@ -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;
}
</style>
</head>

38
src/main/assets/apps/messages/chat.rml
View File

@@ -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;
}
</style>
@@ -133,14 +133,14 @@
<body class="chat-screen">
<!-- Chat Header -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<div class="chat-avatar" id="chat-avatar" style="background-color: #4CAF50;">J</div>
<div class="chat-header-info">
<div class="chat-header-name" id="chat-name">John Wilson</div>
<div class="chat-header-status">Online</div>
</div>
<div class="btn-icon"><img src="../../icons/phone.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/phone.tga" style="width: 32px; height: 32px;"/></div>
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Messages -->
@@ -154,7 +154,7 @@
<!-- Input Bar -->
<div class="chat-input-bar">
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
<input class="chat-input" type="text" placeholder="Type a message..." id="message-input"/>
<div class="chat-send-btn">
<img src="../../icons/send.tga"/>

18
src/main/assets/apps/messages/messages.rml
View File

@@ -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 @@
<body class="messages-screen" data-model="messages">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Messages</span>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Conversations List -->
@@ -112,6 +112,6 @@
</div>
<!-- FAB -->
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
</body>
</rml>

41
src/main/assets/apps/music/music.rml
View File

@@ -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 @@
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()">
<img src="../../icons/back.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/back.tga" style="width: 32px; height: 32px;"/>
</div>
<span class="app-bar-title">Music</span>
<div class="btn-icon">
<img src="../../icons/search.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/search.tga" style="width: 32px; height: 32px;"/>
</div>
</div>

34
src/main/assets/apps/settings/settings.rml
View File

@@ -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 @@
<body class="settings-screen" data-model="settings">
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
<span class="app-bar-title">Settings</span>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 24px; height: 24px;"/></div>
<div class="btn-icon"><img src="../../icons/search.tga" style="width: 32px; height: 32px;"/></div>
</div>
<!-- Settings List -->

46
src/main/assets/apps/store/store.rml
View File

@@ -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 @@
<!-- App Bar -->
<div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()">
<img src="../../icons/back.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/back.tga" style="width: 32px; height: 32px;"/>
</div>
<span class="app-bar-title">Mosis Store</span>
<div class="btn-icon">
<img src="../../icons/account.tga" style="width: 24px; height: 24px;"/>
<img src="../../icons/account.tga" style="width: 32px; height: 32px;"/>
</div>
</div>

34
src/main/assets/demo.rml
View File

@@ -1,34 +0,0 @@
<rml>
<head>
<link type="text/rcss" href="html.rcss"/>
<link type="text/rcss" href="phone.rcss"/>
<script src="scripts.lua"></script>
<title>Fullscreen Mobile UI</title>
</head>
<body>
<div id="status-bar" data-model="status-data">
<span class="time">{{time}}</span>
<div class="status-icons">
<span class="icon">📶</span>
<span class="icon">🔋</span>
</div>
</div>
<div id="content">
<div class="header-section">
<h1>Mosis Service</h1>
</div>
<div class="button-section">
<button id="action-button" class="primary-button" onclick="onButtonClick()">Click Me!</button>
<button id="reset-button" class="secondary-button" onclick="onResetClick()">Reset</button>
</div>
</div>
<div id="nav-bar">
<div class="nav-item">Home</div>
<div class="nav-item">Apps</div>
<div class="nav-item">Settings</div>
</div>
</body>
</rml>

13
src/main/assets/hello_world.rml
View File

@@ -1,13 +0,0 @@
<rml>
<head>
<title>Hello world</title>
<link type="text/rcss" href="rml.rcss"/>
<link type="text/rcss" href="window.rcss"/>
</head>
<body data-model="animals">
<h1>RmlUi</h1>
<p>Hello <span id="world">world</span>!</p>
<p data-if="show_text">The quick brown fox jumps over the lazy {{animal}}.</p>
<input type="text" data-value="animal"/>
</body>
</rml>

93
src/main/assets/html.rcss
View File

@@ -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;
}

765
src/main/assets/invader.rcss
View File

@@ -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;
}

159
src/main/assets/phone.rcss
View File

@@ -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;
}

61
src/main/assets/rml.rcss
View File

@@ -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;
}

1155
src/main/assets/ui/components.rcss
View File

File diff suppressed because it is too large Load Diff

120
src/main/assets/ui/theme.rcss
View File

@@ -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: <duration> <delay>? <tweening-function>? <iterations>? alternate? paused? <keyframes-name> */
/* 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);
}

36
src/main/assets/window.rcss
View File

@@ -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;
}

19
src/main/assets/window.rml
View File

@@ -1,19 +0,0 @@
<template name="window" content="content">
<head>
<link type="text/rcss" href="rml.rcss"/>
<link type="text/rcss" href="invader.rcss"/>
</head>
<body class="window">
<div id="title_bar">
<handle move_target="#document">
<div id="icon"></div>
<span id="title">Title</span>
</handle>
</div>
<div id="window">
<div id="content">
</div>
</div>
<handle size_target="#document" style="position: absolute; width: 16dp; height: 16dp; bottom: 0px; right: 0px; cursor: resize;"></handle>
</body>
</template>