forked from projects/thebadspace
ro
573054e7d8
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
156 lines
2.7 KiB
CSS
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;
|
|
}
|
|
}
|