Tell Glide how you use CSS

General
26

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.

image
image376×787 57.4 KB
image
image377×783 47 KB

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.

image

<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.

image
image372×786 47.6 KB 

<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.

image
image371×786 64.7 KB

16 Likes