deflax/television
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

reformat gallery css

Browse source
This commit is contained in:
deflax 2024-01-19 20:35:45 +02:00
parent c031e46d9f
commit c223c3ddab
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/scheduler/templates/gallery.html
View file

@ -8,32 +8,32 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #212529; background-color: #212529;
color: #fff; color: #fff;
} }
.gallery { .gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
margin: 0px; margin: 0px;
} }
.gallery-item { .gallery-item {
flex: 0 1 calc(25% - 20px); flex: 0 1 calc(25% - 20px);
margin: 0px; margin: 10px; /* Added margin between items */
overflow: hidden; overflow: hidden;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
} }
.gallery-item img { .gallery-item img {
max-height: 480px; max-width: 100%; /* Ensure images don't exceed the width of their container */
width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.overlay { .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@ -47,21 +47,21 @@
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.gallery-item:hover .overlay { .gallery-item:hover .overlay {
opacity: 1; opacity: 1;
} }
.overlay-content { .overlay-content {
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
.image-link { .image-link {
display: block; display: block;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
</style> </style>
<title>DeflaxTV Video Gallery</title> <title>DeflaxTV Video Gallery</title>
</head> </head>