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>