The CSS I am using these days

I have a Notepad doc open with the CSS I use in the app (and some I am thinking of using but have not deployed yet). And big thanks to the community for these! I have not worked out any of them myself :slight_smile:

I am copying these across a bit quickly so I hope I have not got anything wrong!

CSS Used in Covessa

Adjust Title - narrow Image

<pre><span><style>

[data-test="app-summary"] >* {

margin-top: -150px;

{

Remove Top and Tab

<pre><span><style>

[id="tabBar"]{

display: none;

}

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

#app-root div[opacity='1'] {

color: transparent;

}

Remove Only Top


<pre><span><style>

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

#app-root div[opacity='1'] {

color: transparent;

}

Remove only Tab

<pre><span><style>

[id="tabBar"]{

display: none;

}

Move Floating Help button to Top Right

<pre><span><style>

.fab-target >:nth-child(1) {

position: fixed;

top: 14% ;

right: 2%

}

Remove Top & Tab & Move Help * Keep line breaks in Hint text

<pre><span><style>

[id="tabBar"]{

display: none;

}

[data-test="glide-app-bar"] :nth-child(1) {

display: none;

}

#app-root div[opacity='1'] {

color: transparent;

}

.fab-target >:nth-child(1) {

position: fixed;

top: 14% ;

right: 2%

}

<pre><span><style>

[data-test='app-hint']{

white-space: break-spaces;

}

Change separator color

<pre><span><style>

[data-test="app-hr"] .sep-line {

background-color: blue;

opacity: 0.5;

}

Retain Line Breaks for Hint Text

<pre><span><style>

[data-test='app-hint']{

white-space: break-spaces;

}

Force Landscape

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {

html {

transform: rotate(-90deg);

transform-origin: left top;

width: 100vh;

overflow-x: hidden;

position: absolute;

top: 100%;

left: 0;

}

}

Reduce Opacity of overlay title in Image in tile

< pre >< span>< style >

.tile-overlay {

background: rgba(0, 0, 0, 0.2) !important;

}

CSS Improve Image Carousel - background color, highlight images


<pre><span><style>

[data-test="app-image-carousel"] .tag{

opacity: 1;

animation: none;

bottom: 10px;

}

CSS Add color background to entry field

<pre><span><style>

[data-test="app-text-field"]{

position: center;

backdrop-filter: blur(0px);

background: #F2BE24;

border-radius: 50px;

width: 60%;

padding: 2px 20px 12px;

}

CSS LOGO IN HEADER

<pre><span><style>
#app-root div[opacity='1'] { 
color: transparent; 

} 

#app-root div[opacity='1'] {

content: ""; 

display: block;

height: 45px;

background-image: url("INSERT URL");

background-size: 100px 20px;

background-repeat: no-repeat;

background-position: 55% 45%;

;}

CSS to Stop user Scrolling

<pre><span><style>

div[id*='screenScrollView'] {

overflow-y: hidden; !important;

}

Modal Popup - nice for help to appear with a toggle

<div style =" position: fixed;

top: 40%; width: 90%; opacity: 1;

background-color:white; border-radius: 10px;

padding-top: 10%;

padding-bottom: 10%;

padding-left: 7%;

padding-right: 7%;

text-align: center;">

<h3><font color=red>TITLE</h3>

<font color=0e0e0e>DESCRIPTION

</div>

<bg><a style="position: fixed; width:100%; top: 0%; right: 0%; z-index:-1; opacity: 0.9">

<div style="background-color:#131313; margin: 0%; padding:100%;">
18 Likes

tnx for sharing…
you can try in action CSS codes… change parameters… and see effect, by clicking this image:

Code BOOK

SA book copy

4 Likes

I love this App!

1 Like

I fixed the formatting for you :slight_smile:

1 Like

Thank you!

Maybe one of the most complex, feature-filled app built in Glide :grin:

2 Likes

He’s certainly been stretching me to my limits, and beyond… (which is a good thing, of course :slight_smile:)

3 Likes

It looks like something is wrong with this one, I’ve tried to add it into my app and had a black square behind all my content…

I haven’t implemented this one yet properly - I did a proof of concept in a tab that I am not using anymore and it looked like this. This would be fine for me - focused the user, then click to make it go away again :slight_smile:

4 Likes

Thanks @Mark_Turrell very useful resource :+1:

3 Likes