ForRo/public/assets/css/front/listing.css
ro 573054e7d8 Cleaned up location controller, responsive fix
The Location Controller was getting too heavy so an Update and
Maintenance service class was created to offload most of it's
functionality. Location upating was moved to LocationRepository

There was also a small issue with responsive list links not adapting
properly in Safari that was fixed
2024-02-15 15:00:03 -06:00

156 lines
2.7 KiB
CSS

section[role="listings"] {
background: var(--primary);
width: 100%;
max-width: 600px;
padding: 10px;
margin: 0 auto;
color: var(--white);
}
section[role="listings"] a {
color: var(--highlight);
font-size: 2em;
font-weight: bold;
border: 0;
}
section[role="listings"] a label {
color: var(--secondary);
font-size: 0.3em;
text-decoration: underline;
font-family: var(--mono-type);
}
section[role="listings"] a:hover {
color: var(--white);
}
section[role="listings"] div[role="paginate"] {
padding: 5px;
}
section[role="listings"] div[role="paginate"] span {
vertical-align: super;
font-weight: bold;
font-size: 1.5em;
}
a.list-link {
display: grid;
grid-template-columns: 70px 1fr 80px 80px;
gap: 10px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
background: var(--secondary);
border-radius: 3px;
color: var(--white);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-name {
background: var(--white);
border-radius: 3px;
color: var(--black);
font-weight: 400;
padding: 9px 5px;
cursor: pointer;
position: relative;
}
a.list-link > .item-silence {
background: var(--silence);
border-radius: 3px;
color: var(--black);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-block {
background: var(--suspend);
border-radius: 3px;
color: var(--black);
font-weight: 500;
padding: 10px;
position: relative;
}
a.list-link > .item-silence > .item-icon,
a.list-link > .item-block > .item-icon {
width: 30px;
vertical-align: top;
}
/*
responsive
*/
@media only screen and (max-width: 800px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 100% 100px 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/4;
height: 100%;
}
a.list-link > .item-name {
grid-row: 2/3;
grid-column: 1/6;
}
a.list-link > .item-silence {
grid-row: 3/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
}
}
@media only screen and (max-width: 480px) {
a.list-link {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto 30px 30px;
gap: 5px;
height: auto;
padding-bottom: 20px;
cursor: pointer;
}
a.list-link > .item-rating {
grid-row: 3;
grid-column: 1/2;
height: 100%;
}
a.list-link > .item-silence {
grid-row: 3/4;
grid-column: 2/4;
height: 100%;
}
a.list-link > .item-block {
grid-row: 3/4;
height: 100%;
grid-column: 4/6;
}
}