maotube/public/style.css

109 lines
1.8 KiB
CSS

*, *::before, *::after {
box-sizing: border-box;
}
:root {
color-scheme: light dark;
}
body {
margin: 0 auto;
padding: 0;
text-align: center;
font-family: system-ui, sans-serif;
background-color: #dff3f1;
color: #211;
}
@media (prefers-color-scheme: dark) {
body {
background: #211;
color: #dff3f1;
}
}
.mao-error {
display: flex;
flex-direction: column;
background: url("/chairman_1.jpg");
background-size: auto 600px;
background-repeat: no-repeat;
background-position: center center;
height: 600px;
}
.hidden {
display: none;
}
.mao-error p {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: "Impact", "Bebas", "League Gothic", "Oswald", "Coluna", "Ubuntu Condensed", system-ui, sans-serif;
text-shadow:
3px 3px 0 black,
-3px -3px 0 black,
3px -3px 0 black,
-3px 3px 0 black,
-3px 0px 0 black,
3px 0px 0 black,
0px 3px 0 black,
0px -3px 0 black;
font-size: 2em;
}
.mao-error p:last-child {
margin-top: auto;
}
ul#video-list {
padding: 0;
list-style: none;
}
#video-player {
max-height: 80vh;
}
header {
display: flex;
align-items: center;
gap: 30px;
background-image: linear-gradient(to bottom, #c51e0e, #FF5722);
padding: 20px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
color: #fcf4c8;
}
#app-name {
padding-right: 20px;
margin: 0;
}
a {
color: #fcf4c8;
text-decoration: none;
}
#search {
border: none;
outline: none;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
transition-duration: 100ms;
color: white;
}
#search:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#search:focus {
background-color: white;
color: black;
}