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

Fix RmlUi CSS compatibility issues in store, settings, and music apps

Browse Source 
- Replace linear-gradient with solid colors (not supported in RmlUi)
- Replace border shorthand with border-width/border-color properties
- Replace display:grid with flexbox in music quick-access cards
- Remove unsupported transition property
- Fix border-radius: 50% to use 9999px in theme.rcss
- Fix third-party app icon/label sizes to match system apps (72x72px, 16px)
- Replace data-model bindings with static values in settings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
omigamedev
2026-01-19 17:27:08 +01:00
parent 6b611b1d09
commit 56dc8337af
5 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,30 +43,31 @@
width: 100%; width: 100%;
} }
/* Third-party apps use same sizing as system apps */
#third-party-apps .app-icon { #third-party-apps .app-icon {
width: 25%; width: 25%;
box-sizing: border-box; box-sizing: border-box;
} }
#third-party-apps .app-icon-image { #third-party-apps .app-icon-image {
width: 56px; width: 72px;
height: 56px; height: 72px;
border-radius: 14px; border-radius: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 8px auto; margin: 0 auto 12px auto;
cursor: pointer; cursor: pointer;
} }
#third-party-apps .app-icon-image:hover { #third-party-apps .app-icon-image:hover {
opacity: 0.8; transform: scale(1.05);
} }
#third-party-apps .app-icon-label { #third-party-apps .app-icon-label {
display: block; display: block;
text-align: center; text-align: center;
font-size: 12px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
} }
</style> </style>

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

@@ -25,14 +25,15 @@
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 16px;
background-color: #282828; background-color: #282828;
border-top: 1px solid #333333; border-top-width: 1px;
border-top-color: #333333;
} }
.mini-player-art { .mini-player-art {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-color: #667eea;
margin-right: 12px; margin-right: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -145,13 +146,14 @@
/* Quick Access Cards */ /* Quick Access Cards */
.quick-access { .quick-access {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; flex-wrap: wrap;
gap: 8px; gap: 8px;
padding: 0 16px; padding: 0 16px;
} }
.quick-card { .quick-card {
width: 48%;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #282828; background-color: #282828;
@@ -228,7 +230,8 @@
display: flex; display: flex;
height: 56px; height: 56px;
background-color: #1E1E1E; background-color: #1E1E1E;
border-top: 1px solid #282828; border-top-width: 1px;
border-top-color: #282828;
} }
.nav-item { .nav-item {
@@ -256,12 +259,12 @@
} }
/* Color palette for album arts */ /* Color palette for album arts */
.bg-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .bg-gradient-1 { background-color: #667eea; }
.bg-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .bg-gradient-2 { background-color: #f093fb; }
.bg-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .bg-gradient-3 { background-color: #4facfe; }
.bg-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } .bg-gradient-4 { background-color: #43e97b; }
.bg-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } .bg-gradient-5 { background-color: #fa709a; }
.bg-gradient-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); } .bg-gradient-6 { background-color: #a8edea; }
.bg-solid-purple { background-color: #7c3aed; } .bg-solid-purple { background-color: #7c3aed; }
.bg-solid-red { background-color: #dc2626; } .bg-solid-red { background-color: #dc2626; }
.bg-solid-green { background-color: #16a34a; } .bg-solid-green { background-color: #16a34a; }

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

@@ -43,7 +43,8 @@
} }
.settings-item + .settings-item { .settings-item + .settings-item {
border-top: 1px solid #333333; border-top-width: 1px;
border-top-color: #333333;
} }
.settings-icon { .settings-icon {
@@ -148,7 +149,7 @@
} }
</style> </style>
</head> </head>
<body class="settings-screen" data-model="settings"> <body class="settings-screen">
<!-- App Bar --> <!-- App Bar -->
<div class="app-bar"> <div class="app-bar">
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div> <div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
@@ -162,8 +163,8 @@
<div class="user-card"> <div class="user-card">
<div class="user-avatar">U</div> <div class="user-avatar">U</div>
<div class="user-info"> <div class="user-info">
<div class="user-name">{{ user_name }}</div> <div class="user-name">User</div>
<div class="user-email">{{ user_email }}</div> <div class="user-email">user@mosis.local</div>
</div> </div>
<span class="settings-action">></span> <span class="settings-action">></span>
</div> </div>
@@ -175,10 +176,9 @@
<div class="settings-icon">W</div> <div class="settings-icon">W</div>
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Wi-Fi</div> <div class="settings-title">Wi-Fi</div>
<div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div> <div class="settings-subtitle">Connected to MosisNetwork</div>
<div class="settings-subtitle" data-if="!wifi">Off</div>
</div> </div>
<div class="settings-toggle" data-class-active="wifi" data-event-click="wifi = !wifi"> <div class="settings-toggle active">
<div class="settings-toggle-thumb"></div> <div class="settings-toggle-thumb"></div>
</div> </div>
</div> </div>
@@ -186,10 +186,9 @@
<div class="settings-icon">B</div> <div class="settings-icon">B</div>
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Bluetooth</div> <div class="settings-title">Bluetooth</div>
<div class="settings-subtitle" data-if="bluetooth">On</div> <div class="settings-subtitle">Off</div>
<div class="settings-subtitle" data-if="!bluetooth">Off</div>
</div> </div>
<div class="settings-toggle" data-class-active="bluetooth" data-event-click="bluetooth = !bluetooth"> <div class="settings-toggle">
<div class="settings-toggle-thumb"></div> <div class="settings-toggle-thumb"></div>
</div> </div>
</div> </div>
@@ -198,7 +197,7 @@
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Airplane Mode</div> <div class="settings-title">Airplane Mode</div>
</div> </div>
<div class="settings-toggle" data-class-active="airplane_mode" data-event-click="airplane_mode = !airplane_mode"> <div class="settings-toggle">
<div class="settings-toggle-thumb"></div> <div class="settings-toggle-thumb"></div>
</div> </div>
</div> </div>
@@ -235,7 +234,7 @@
<div class="settings-icon">B</div> <div class="settings-icon">B</div>
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Battery</div> <div class="settings-title">Battery</div>
<div class="settings-subtitle">{{ battery_percent }}% - {{ battery_remaining }}</div> <div class="settings-subtitle">85% - 4h 30m remaining</div>
</div> </div>
<span class="settings-action">></span> <span class="settings-action">></span>
</div> </div>
@@ -243,7 +242,7 @@
<div class="settings-icon">S</div> <div class="settings-icon">S</div>
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Storage</div> <div class="settings-title">Storage</div>
<div class="settings-subtitle">{{ storage_used }}</div> <div class="settings-subtitle">32 GB of 128 GB used</div>
</div> </div>
<span class="settings-action">></span> <span class="settings-action">></span>
</div> </div>
@@ -272,10 +271,9 @@
<div class="settings-icon">L</div> <div class="settings-icon">L</div>
<div class="settings-content"> <div class="settings-content">
<div class="settings-title">Location</div> <div class="settings-title">Location</div>
<div class="settings-subtitle" data-if="location">On - High accuracy</div> <div class="settings-subtitle">On - High accuracy</div>
<div class="settings-subtitle" data-if="!location">Off</div>
</div> </div>
<div class="settings-toggle" data-class-active="location" data-event-click="location = !location"> <div class="settings-toggle active">
<div class="settings-toggle-thumb"></div> <div class="settings-toggle-thumb"></div>
</div> </div>
</div> </div>

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

@@ -67,7 +67,7 @@
.featured-banner { .featured-banner {
margin: 0 16px 16px 16px; margin: 0 16px 16px 16px;
height: 160px; height: 160px;
background: linear-gradient(135deg, #BB86FC 0%, #6200EE 100%); background-color: #7C3AED;
border-radius: 16px; border-radius: 16px;
padding: 20px; padding: 20px;
display: flex; display: flex;
@@ -226,7 +226,8 @@
.install-btn.installed { .install-btn.installed {
background-color: transparent; background-color: transparent;
color: #BB86FC; color: #BB86FC;
border: 1px solid #BB86FC; border-width: 1px;
border-color: #BB86FC;
} }
/* Category Chips */ /* Category Chips */
@@ -374,7 +375,6 @@
height: 100%; height: 100%;
background-color: #BB86FC; background-color: #BB86FC;
border-radius: 2px; border-radius: 2px;
transition: width 0.3s ease;
} }
/* Toast */ /* Toast */

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

@@ -227,7 +227,7 @@ body {
} }
.rounded-full { .rounded-full {
border-radius: 50%; border-radius: 9999px;
} }
/* ============== Screen Structure ============== */ /* ============== Screen Structure ============== */