ForRo/public/assets/css/front/listing.css

156 lines
2.7 KiB
CSS
Raw Normal View History

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;
}
}