Skip to content

[CSS] Enhance UI, and add animations for an overall cleaner look #4078

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 12 commits into
base: master
Choose a base branch
from
+282 −23
Draft

[CSS] Enhance UI, and add animations for an overall cleaner look #4078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
2dec8ee
Add more rounded edges, padding between app tiles, etc.
RKBoss6 Dec 1, 2025
49e0027
Add modal rounding and alignment fixes
RKBoss6 Dec 1, 2025
d24ad21
Remove border around app tiles for a cleaner look
RKBoss6 Dec 1, 2025
bb28c23
Add rounded edges to toasts for a minimal look
RKBoss6 Dec 1, 2025
64469ec
Improve contrast slightly, fix app tile alignment
RKBoss6 Dec 1, 2025
8c5c822
test to see if index.js changes show here
RKBoss6 Dec 2, 2025
cb7a2f8
Update main.css
RKBoss6 Dec 2, 2025
cd7eff8
See if submodule changes propogate
RKBoss6 Dec 2, 2025
a248e25
Add index.js
RKBoss6 Dec 2, 2025
ce02803
Use new index.js for testing
RKBoss6 Dec 2, 2025
6593ee0
Change tabs style, make edges consistent for tabs, search, and apps
RKBoss6 Dec 2, 2025
c560860
Add animated bar to show active tab instead of full fill
RKBoss6 Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[submodule "EspruinoAppLoaderCore"]
path = core
url = https://github.com/espruino/EspruinoAppLoaderCore.git
url = https://github.com/RKBoss6/EspruinoAppLoaderCore.git
[submodule "webtools"]
path = webtools
url = https://github.com/espruino/EspruinoWebTools.git
2 changes: 1 addition & 1 deletion core
Open in desktop
Submodule core updated 1 files
+58 −33 js/index.js
301 changes: 280 additions & 21 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,153 @@
color: #fff;
font-weight: bold;
}
body {
color: #3c3c3c;
padding-left: 1em;
padding-right: 1em;
}

.container.apploader-tab, ul.tab.tab-block {
padding-left: 1rem;
padding-right: 1rem;
header.navbar, .navbar-primary {
margin-left: calc(-1em);
margin-right: calc(-1em);
width: calc(100% + 2rem);
box-sizing: border-box;
}
.container.apploader-tab {
padding-left: 0rem;
padding-right: 0rem;
border-bottom: 0px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.75rem;
}





.navbar-brand.mr-2 > img {
margin-left: 0.3rem;
}
.form-input {
border-radius: 1em;
padding:0.5em;
padding-left: 1em;
border: solid 1px #dadee4;
box-shadow: none;
margin: -1;;
}

.panel-header{
padding-left: 0px;

}
.panel{
border-radius: 1em;
padding-left: 0rem;
padding-right: 0rem;
margin:0px !important;
border:none;
}


.btn{
border-radius: 0.4em;
}

.btn.btn-favourite:focus,
.btn.btn-favourite:focus-visible,
.btn-favourite:focus,
.btn-favourite:focus-visible,
.btn.btn-favourite:active,
.btn-favourite:active {
outline: none !important;
box-shadow: none !important;
}
.btn.btn-favourite:focus .icon,
.btn-favourite:focus .icon {
outline: none !important;
box-shadow: none !important;
}

.panel-body.columns {
margin: 1px;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: stretch;
justify-content: center;

}

.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
border: solid 1px #dadee4;
margin: 0;
min-height: 150px;
padding-top: 0.5rem;

/* Collapse to one column for thinner screens */
@media (max-width: 720px) {
.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
flex: 1 1 100%;
max-width: 100%;
}
}

@media (max-width: 440px) {
.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
padding: 0.9em 0.9em;
}
}
.tab.tab-block .tab-item {
border-bottom: solid 1px #dadee4;
border-bottom: none;
border-radius: 1em;
}
.tab.tab-item.active {

border-bottom: none;
border-radius: 23m;
}
.tab.tab-block{
margin:1em;
padding:0.3em;
padding-left: 0.3em !important;
padding-right: 0.3em !important;
gap:1em
}


#tab-navigate { position: relative; display: flex; padding: 0; }
#tab-navigate .tab-item { flex: 1 1 0; text-align: center; display: block; }
#tab-navigate .tab-item a { display: block; padding: 0.6rem 0.8rem; }
#tab-navigate::after {
content: "";
position: absolute;
bottom: -0.1rem;
left: 0;
height: 3px;
width: calc(100% / 3);
background: #5755d9;
border-radius: 2px;
transform: translateX(0%);
transition: transform 320ms cubic-bezier(.2,.9,.3,1), width 320ms cubic-bezier(.2,.9,.3,1);
will-change: transform, width;
}
/* Move the indicator to the second tab */
#tab-navigate:has(li:nth-child(2).active)::after { transform: translateX(100%); }
/* Move the indicator to the third tab */
#tab-navigate:has(li:nth-child(3).active)::after { transform: translateX(200%); }



.tab.tab-block .tab-item:focus { outline: none; box-shadow: none; }



.tab .tab-item a,
.tab .tab-item a:focus,
.tab .tab-item a:active,
.tab .tab-item a:focus-visible,
.tab.tab-block .tab-item a:focus,
#tab-navigate .tab-item a:focus {
outline: none !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}

a.mr-2{
Expand All @@ -39,8 +162,8 @@ a.mr-2{
}

.dropdown-container {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding-left:1rem;
padding-right:1rem;
}

a.btn.btn-link.dropdown-toggle {
Expand Down Expand Up @@ -78,13 +201,36 @@ a.btn.btn-link.dropdown-toggle {
position: relative;
border-bottom: 1px solid #EEE;
margin-bottom: 4px;
min-height: 8em;
min-height: 11em; /* reduced so tiles can be thinner */
}

.tile-content {
position: relative;
overflow-wrap: anywhere; /* stop long text like links pushing the width out too far*/
}


.tile .tile-content br {
display: block;
line-height: 100;
padding: 2em;
}


.tile .tile-content p { margin: 0 0 0.2rem 0; }

.tile.column.col-6.col-sm-12.col-xs-12.app-tile {
background-color: rgba(87, 85, 217, 0.025);
border: solid 1.3px #dadee47c;
margin: 0; /* spacing handled by container gap */
padding: 0.9em;
border-radius: 1em;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.02);
box-sizing: border-box;
/* allow tiles to be two columns on wide screens, collapse to one on small screens */
flex: 0 1 calc(50% - 0.75rem);
max-width: calc(50% - 0.75rem);
}
.link-github {
position:absolute;
top: 36px;
Expand All @@ -95,20 +241,45 @@ a.btn.btn-link.dropdown-toggle {
width:4em;height:4em;
padding:2px;border:1px solid black;
cursor:pointer;
border-radius: 5px;
}

@keyframes squishAnim {
0% { transform: scale(1, 1); }
15% { transform: scale(1.08, 1.24); }
40% { transform: scale(1.22, 1.08); }
65% { transform: scale(1.15, 1.28); }
85% { transform: scale(1.06, 1.12); }
100% { transform: scale(1, 1); }
}

.btn.btn-favourite { color: red; }
.btn.btn-favourite:hover { color: red; }
.pill-container {
display: inline-flex;
align-items: center;
justify-content: flex-end;
padding: 0em 1em;
margin-right: 0.05em;
background-color: rgba(87, 85, 217, 0.055);
border-radius: 999px;
font-family: sans-serif;
height: auto;
}





.icon.icon-emulator { text-indent: 0px; } /*override spectre*/
.icon.icon-emulator {
text-indent: 0px; /*override spectre*/
content: url("data:image/svg+xml,%3Csvg fill='rgb(87, 85, 217)' xmlns='http://www.w3.org/2000/svg' viewBox='4 4 40 40' width='1em' height='1em'%3E%3Cpath d='M 8.5 5 C 6.0324991 5 4 7.0324991 4 9.5 L 4 30.5 C 4 32.967501 6.0324991 35 8.5 35 L 17 35 L 17 40 L 13.5 40 A 1.50015 1.50015 0 1 0 13.5 43 L 18.253906 43 A 1.50015 1.50015 0 0 0 18.740234 43 L 29.253906 43 A 1.50015 1.50015 0 0 0 29.740234 43 L 34.5 43 A 1.50015 1.50015 0 1 0 34.5 40 L 31 40 L 31 35 L 39.5 35 C 41.967501 35 44 32.967501 44 30.5 L 44 9.5 C 44 7.0324991 41.967501 5 39.5 5 L 8.5 5 z M 8.5 8 L 39.5 8 C 40.346499 8 41 8.6535009 41 9.5 L 41 30.5 C 41 31.346499 40.346499 32 39.5 32 L 29.746094 32 A 1.50015 1.50015 0 0 0 29.259766 32 L 18.746094 32 A 1.50015 1.50015 0 0 0 18.259766 32 L 8.5 32 C 7.6535009 32 7 31.346499 7 30.5 L 7 9.5 C 7 8.6535009 7.6535009 8 8.5 8 z M 17.5 12 C 16.136406 12 15 13.136406 15 14.5 L 15 25.5 C 15 26.863594 16.136406 28 17.5 28 L 30.5 28 C 31.863594 28 33 26.863594 33 25.5 L 33 14.5 C 33 13.136406 31.863594 12 30.5 12 L 17.5 12 z M 18 18 L 30 18 L 30 25 L 18 25 L 18 18 z M 20 35 L 28 35 L 28 40 L 20 40 L 20 35 z'/%3E%3C/svg%3E");
}
.icon.icon-favourite { text-indent: 0px; } /*override spectre*/
.icon.icon-favourite-active { text-indent: 0px; } /*override spectre*/
.icon.icon-favourite-active { text-indent: 0px; color:#EEE } /*override spectre*/
.icon.icon-favourite::before {
content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 16.375 9 C 10.117188 9 5 14.054688 5 20.28125 C 5 33.050781 19.488281 39.738281 24.375 43.78125 L 25 44.3125 L 25.625 43.78125 C 30.511719 39.738281 45 33.050781 45 20.28125 C 45 14.054688 39.882813 9 33.625 9 C 30.148438 9 27.085938 10.613281 25 13.0625 C 22.914063 10.613281 19.851563 9 16.375 9 Z M 16.375 11 C 19.640625 11 22.480469 12.652344 24.15625 15.15625 L 25 16.40625 L 25.84375 15.15625 C 27.519531 12.652344 30.359375 11 33.625 11 C 38.808594 11 43 15.144531 43 20.28125 C 43 31.179688 30.738281 37.289063 25 41.78125 C 19.261719 37.289063 7 31.179688 7 20.28125 C 7 15.144531 11.1875 11 16.375 11 Z'/%3E%3C/svg%3E");
}


.icon.icon-favourite-active::before {
content: url("data:image/svg+xml,%3Csvg fill='rgb(255, 0, 0)' xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 50 47' width='1.5em' height='1.5em'%3E%3Cpath d='M 25 44.296875 L 24.363281 43.769531 C 23.363281 42.941406 22.019531 42.027344 20.46875 40.96875 C 14.308594 36.765625 5 30.414063 5 20.285156 C 5 14.0625 10.097656 9 16.363281 9 C 19.714844 9 22.851563 10.457031 25 12.957031 C 27.148438 10.457031 30.289063 9 33.636719 9 C 39.902344 9 45 14.0625 45 20.285156 C 45 30.414063 35.691406 36.765625 29.53125 40.96875 C 27.976563 42.027344 26.636719 42.941406 25.636719 43.769531 Z'/%3E%3C/svg%3E");
}
Expand All @@ -118,8 +289,95 @@ a.btn.btn-link.dropdown-toggle {
position:relative;
top:-0.8em;
}
.icon.icon-favourite-active span {
color : white;


.fav-count {
display: inline-block;
margin-right: 0.3rem;
font-size: 0.7rem;
vertical-align:middle;
text-align: center;
margin-top: -0.07rem;
color: #F66;
}
.btn-favourite .fav-count + .icon {
margin-left: 0;
}
.btn-favourite{
margin-right: 0.1em;
padding:1em;
}



.btn.btn-favourite {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0.01rem;
min-height: 1.9rem;
box-sizing: border-box;
}
.btn.btn-favourite.btn-lg {
width: auto ;
height: auto ;
padding-right: 0.25rem ;
}
.btn.btn-favourite .icon {
display: inline-flex;
align-items: center;
justify-content: center;
transform-origin: center;
}
.btn.btn-favourite .icon.icon-favourite {
gap: 0.35rem;
}

.modal-container{
border-radius: 1.5em;
background-color: rgb(253, 253, 255);
padding:1em;

}
.bar{
border-radius:1em;
}
.devicechooser{

border-radius:1em;
justify-content: center;
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
text-align: left;

}

/* Support older index.js which puts the count inside the <i> as a span */
.btn.btn-favourite .icon.icon-favourite span{
position: static;
top: auto;
margin-left: 0;
margin-right: 0;
font-size: 0.45rem;
vertical-align: middle;
color: #F66;
}
i.icon.icon-favourite.icon-favourite-active > span {
color : white !important;
z-index: 2;
}
.toast{
border-radius: 0.5em;
margin: 0.7em;
max-width: 99%;
}

.icon.favoriteAnim {
animation-name: squishAnim;
animation-duration: 0.45s;
animation-timing-function: cubic-bezier(.2,.9,.3,1);
animation-fill-mode: both;
}

.icon.icon-interface {text-indent: 0px;} /*override spectre*/
Expand Down Expand Up @@ -153,7 +411,7 @@ Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wr
border: 0;
padding: 10px;
overflow: auto; /* adds scrollbar if needed */

border-radius: 1em;
position: absolute;
left: 0px;
top: 0px;
Expand All @@ -166,6 +424,7 @@ Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wr
user-select: text;
}


.termLine {
font-family: Fixed, monospace;
tab-size: 4;
Expand Down Expand Up @@ -201,4 +460,4 @@ Not sure how to get 'normal' wrap behaviour (eg fill up until max-width, then wr
{
text-shadow: none;
animation: blink_webcam 1s step-end 0s infinite;
}
}