I think @Manu.n and @Lucas_Pires have covered a lot of what I have stolen borrowed, so I’ll just share a few of the other modifications I have done.
This is to apply a gray background color to the cards in the log history list:
<pre><span><style>
[data-test="card-item"] .bottom-area {
background-color: #dddddd;
}
This is to apply a shadow behind the tile with the vehicle image:
<pre><span><style>
[data-test="tile-item"] {
width: 100%;
margin-left: 0%;
margin-top: 10px;
margin-bottom: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 5px !important;
}
</style></span></pre>
This is to create the separator with the curves between the chart and the log history. Similar to what @Lucas_Pires has done with the curved background at the top of the screen:
<a style="position: absolute; width:100%; right: 0%; z-index:-2; opacity: 1;">
<div style="background-color: #960000; margin: 0%; padding-bottom:100px;"></div>
</a>
<a style="position: absolute; width:100%; right: 0%; z-index:-1; opacity: 1;" target="_blank">
<div style="background-color: #ffffff; padding-bottom: 30px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-origin: content-box;"></div>
<p>
<div style="background-color: #ffffff; padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>
</a>
This is what I’m using for the modal popup:
<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%;
padding:100%;
background-color: rgb(150 150 150 / 20%);
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>
<!-- Box -->
<div style =" position: fixed;
top: 300px;
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%);
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<!-- Text-->
<br>
<h3><font color=#000>Is this the correct amount?</h3>
<h1>{amount}</h1>
<pre><span><style>
[data-test="app-button-view"] {
position: fixed;
top: 420px;
margin-left:7%;
width:30%;
max-width:180px;
}
.fab-target >* {
display:none;
}
</style></span></pre>
Here is a hint component that that I've modified to become fixed so it's always visible in the same position while scrolling.
<pre><span><style>
[data-test=app-hint] {
position:fixed;
top: calc( var(--safe-area-inset-top) +75px);
background-color: rgba(0, 0, 0,.2) !important;
backdrop-filter: blur(8px);
width: 92.1%;
text-align: center;
z-index: 1}
</style></span></pre>
This one is completely gross and is some massive manipulation on a cards style list to get more columns. I think if we had the option for more tile or card columns, then this could largely be avoided.
<pre>
<span>
<style>
.inner {
grid-template-columns: repeat(7, 53%) !important;
column-gap: 0px !important;
padding: 0px 0px !important;
width: 27%;
}
.card-title {
text-align: center;
}
.card-title:nth-child(even),
.card-title:hover {
border-radius:20px;
background-color: #58656F;
color: #fff !important;
font-weight: 700;
cursor: pointer;
}
.card-subtitle {
margin-left: calc(10px+10%);
margin-top: -25%;
}
[data-test="app-horizontal-list"] {
padding-top: 1px;
padding-bottom: 1px;
}
[data-test="app-avatar-wrap"] {
font-size: xx-small;
}
.card-title-container {
height:5px !important;
margin-bottom: 10px !important;
}
.bottom-area {
padding: 0px !important;
}
.sts-row {
height: 20px !important;
}
[data-test="app-button-view"] {
min-height:0px;
height:0px;
margin-top: 0px
}
.ReactVirtualized__Grid__innerScrollContainer {
height: 100px;
}
</style>
</span>
</pre
I also create dynamic html tables with some mild css styling, but I'm not sure if that applies to this thread.