ro
9be54fa13c
Hit the major friction points in the responsive UI. Still have some polishing to do but there shouldn't be any show stoppers at this points. Also moved some variable to the env so they can be changed easily when necessary
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: 100% 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;
|
|
}
|
|
}
|