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

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

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

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

@@ -43,7 +43,8 @@
}
.settings-item + .settings-item {
border-top: 1px solid #333333;
border-top-width: 1px;
border-top-color: #333333;
}
.settings-icon {
@@ -148,7 +149,7 @@
}
</style>
</head>
<body class="settings-screen" data-model="settings">
<body class="settings-screen">
<!-- 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>
@@ -162,8 +163,8 @@
<div class="user-card">
<div class="user-avatar">U</div>
<div class="user-info">
<div class="user-name">{{ user_name }}</div>
<div class="user-email">{{ user_email }}</div>
<div class="user-name">User</div>
<div class="user-email">user@mosis.local</div>
</div>
<span class="settings-action">></span>
</div>
@@ -175,10 +176,9 @@
<div class="settings-icon">W</div>
<div class="settings-content">
<div class="settings-title">Wi-Fi</div>
<div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div>
<div class="settings-subtitle" data-if="!wifi">Off</div>
<div class="settings-subtitle">Connected to MosisNetwork</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>
</div>
@@ -186,10 +186,9 @@
<div class="settings-icon">B</div>
<div class="settings-content">
<div class="settings-title">Bluetooth</div>
<div class="settings-subtitle" data-if="bluetooth">On</div>
<div class="settings-subtitle" data-if="!bluetooth">Off</div>
<div class="settings-subtitle">Off</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>
</div>
@@ -198,7 +197,7 @@
<div class="settings-content">
<div class="settings-title">Airplane Mode</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>
</div>
@@ -235,7 +234,7 @@
<div class="settings-icon">B</div>
<div class="settings-content">
<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>
<span class="settings-action">></span>
</div>
@@ -243,7 +242,7 @@
<div class="settings-icon">S</div>
<div class="settings-content">
<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>
<span class="settings-action">></span>
</div>
@@ -272,10 +271,9 @@
<div class="settings-icon">L</div>
<div class="settings-content">
<div class="settings-title">Location</div>
<div class="settings-subtitle" data-if="location">On - High accuracy</div>
<div class="settings-subtitle" data-if="!location">Off</div>
<div class="settings-subtitle">On - High accuracy</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>
</div>

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

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