sfja.skp/maotube
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
Reimar 2024-02-11 00:28:33 +01:00
parent c3314c440a
commit 3c9311aef7
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
2 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/search/script.js
View File

@ -26,14 +26,17 @@ function displayResponse(response) {
console.log(v); console.log(v);
return ` return `
<li> <li>
<p class="video-item"> <div class="video-item">
<img src="/videos/${v.id}.png" alt=""> <div class="video-image">
<img class="shadow" src="/videos/${v.id}.png" alt="">
<img class="non-shadow" src="/videos/${v.id}.png" alt="">
</div>
<span class="video-info"> <span class="video-info">
<a href="/watch?id=${v.id}">${v.title}</a> <a href="/watch?id=${v.id}">${v.title}</a>
<br> <br>
by ${v.author} by ${v.author}
</span> </span>
</p> </div>
</li> </li>
`; `;
}) })

89
public/style.css
View File

@ -1,10 +1,11 @@
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
} }
:root { :root {
color-scheme: light dark; color-scheme: light dark;
--shadow: 0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.125);
} }
body { body {
@ -12,15 +13,6 @@ body {
padding: 0; padding: 0;
text-align: center; text-align: center;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
background-color: #dff3f1;
color: #211;
}
@media (prefers-color-scheme: dark) {
body {
background: #211;
color: #dff3f1;
}
} }
.mao-error { .mao-error {
@ -38,7 +30,7 @@ body {
} }
.mao-error p { .mao-error p {
color: #fff; color: white;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
font-family: "Impact", "Bebas", "League Gothic", "Oswald", "Coluna", "Ubuntu Condensed", system-ui, sans-serif; font-family: "Impact", "Bebas", "League Gothic", "Oswald", "Coluna", "Ubuntu Condensed", system-ui, sans-serif;
@ -59,7 +51,7 @@ body {
margin-top: auto; margin-top: auto;
} }
ul#video-list { #video-list {
padding: 0; padding: 0;
list-style: none; list-style: none;
width: 100%; width: 100%;
@ -72,24 +64,45 @@ ul#video-list {
} }
.video-item { .video-item {
padding: 0.5rem;
border-radius: 0.25rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
gap: 2em; gap: 2rem;
text-align: left; text-align: left;
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: var(--shadow);
} }
.video-item img { .video-item .video-image {
border-radius: 0.25rem;
position: relative;
width: 200px; width: 200px;
height: 100px; height: 113px;
object-fit: contain; overflow: hidden;
background-color: black; background-color: black;
} }
.video-item .video-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.video-item .shadow {
object-fit: cover;
filter: blur(0.25rem) brightness(50%);
}
.video-item .non-shadow {
object-fit: contain;
}
.video-item .video-info { .video-item .video-info {
padding-top: 0.5em; padding-block: 0.5em;
} }
.video-item a { .video-item a {
@ -97,41 +110,27 @@ ul#video-list {
font-weight: bold; font-weight: bold;
} }
a {
color: #c51e0e;
}
a:visited {
color: #FF5722;
}
header { header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 30px; gap: 30px;
background-image: linear-gradient(to bottom, #c51e0e, #FF5722);
padding: 20px; padding: 20px;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow);
color: #fcf4c8; }
header a {
text-decoration: none;
} }
#app-name { #app-name {
padding-right: 20px; padding-right: 20px;
margin: 0; margin: 0;
} }
header 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;
}