104 lines
1.5 KiB
CSS
104 lines
1.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
|
|
|
|
movies {
|
|
border: medium solid indigo;
|
|
box-shadow: 0.25em 0.25em 0.5em indigo;
|
|
display: block;
|
|
font-family: Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 1em;
|
|
padding: 1em;
|
|
}
|
|
|
|
movie {
|
|
display: list-item;
|
|
list-style-type: disc;
|
|
margin: 0 2em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
title {
|
|
display: none;
|
|
}
|
|
|
|
title:lang(en),
|
|
year,
|
|
genre,
|
|
rating,
|
|
votes {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
title,
|
|
year {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
|
|
|
|
year::after {
|
|
content: "):";
|
|
}
|
|
|
|
genre,
|
|
rating {
|
|
color: red;
|
|
}
|
|
|
|
rating,
|
|
movie:hover::after {
|
|
border-radius: 0.25em;
|
|
padding: .25em;
|
|
}
|
|
|
|
genre {
|
|
background-color: blueviolet;
|
|
border-radius: 9999px;
|
|
font-size: 0.9em;
|
|
margin-right: 0.1em;
|
|
padding: 0.25em 0.6em;
|
|
text-align: center;
|
|
}
|
|
|
|
rating {
|
|
background-color: hotpink;
|
|
font-weight: bold;
|
|
}
|
|
|
|
rating::after {
|
|
content: "/10";
|
|
}
|
|
|
|
votes::before {
|
|
content: " from ";
|
|
}
|
|
|
|
votes::after {
|
|
content: " ratings";
|
|
}
|
|
|
|
movie:hover::after {
|
|
background-color: gold;
|
|
color: blueviolet;
|
|
content: "https://www.imdb.com/title/tt" attr(id);
|
|
font-family: monospace;
|
|
font-size: large;
|
|
}
|
|
|
|
movie:is([mpa-rating=R], [mpa-rating=NC-17])> :is(title, year) {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
movie:hover {
|
|
background-color: powderblue;
|
|
}
|
|
|
|
movie {
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
|
|
year::before {
|
|
content: "(";
|
|
}
|