Zakarya
affe6bc585
Overhauled the mobile page menu to actually be intuitive Fixed the video download menu (dark theme and a typo) Head tags are now consistent between pages Added alt texts to all images, and proper HTML formatting A few wording changes here and there A new link to Colormatic Git
110 lines
2.3 KiB
CSS
110 lines
2.3 KiB
CSS
div.video.container {
|
|
display: flex;
|
|
color: var(--text-color);
|
|
width: 90%;
|
|
margin: 16px auto 16px auto;
|
|
border: solid 1px #00000033;
|
|
border-radius: 8px;
|
|
box-shadow: 1px 1px 8px #00000033;
|
|
padding: 16px;
|
|
background-color: #ffffff22;
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
|
|
div.video.container video#videoplayer {
|
|
flex-grow: 1;
|
|
border-radius: 12px;
|
|
height: auto;
|
|
max-width: 55%;
|
|
}
|
|
|
|
div.video.container div.videoobjects {
|
|
display: grid;
|
|
padding: 24px;
|
|
}
|
|
|
|
div.video.container div.videodetails h1#videotitle {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
div.dropdown-container {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
div.video.container div.download-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 12px;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-color: #21afff;
|
|
box-shadow: 1px 1px 8px #00000033;
|
|
border-radius: 50px;
|
|
transition-duration: 0.35s;
|
|
}
|
|
|
|
div.video.container div.download-dropdown:hover {
|
|
box-shadow: 1px 1px 8px #00000088;
|
|
}
|
|
|
|
div.video.container div.download-dropdown img {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
div.video.container div.download-dropdown div.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
font-size: 80%;
|
|
min-width: 135px;
|
|
background-color: #edeeee;
|
|
box-shadow: 1px 1px 8px #00000033;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
div.video.container div.download-dropdown:hover div.dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
div.video.container div.download-dropdown div.dropdown-content ul {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
div.video.container div.download-dropdown div.dropdown-content ul li {
|
|
padding: 4px;
|
|
}
|
|
|
|
div.video.container div.download-dropdown div.dropdown-content ul li:hover {
|
|
background-color: #dcdfdf;
|
|
}
|
|
|
|
div.video.container div.download-dropdown div.dropdown-content ul li a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
div.video.container {
|
|
display: block;
|
|
}
|
|
div.video.container video#videoplayer {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
div.video.container div.download-dropdown {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
div.video.container div.download-dropdown div.dropdown-content {
|
|
background-color: #444444;
|
|
}
|
|
}
|