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
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%;">