Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-28 06:13:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Random Group fixes

Browse source
This commit is contained in:
Michał Gdula 2022-09-25 12:01:23 +00:00
parent 8ecd3f5921
commit d8f2166a1f
8 changed files with 151 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

51
css/main.css
View file

@ -243,7 +243,7 @@ nav .btn {
max-width: calc(20% - 0.5rem);
min-width: calc(20% - 0.5rem);
background-color: #151515;
border-radius: -0.1rem;
border-radius: -0.3rem;
position: relative;
overflow: hidden;
flex: 1 0 150px;
@ -487,6 +487,48 @@ nav .btn {
| Groups
|-------------------------------------------------------------
*/
.group-banner {
position: relative;
}
.group-description {
height: auto;
width: auto;
position: relative;
z-index: 1;
}
.group-description > * {
margin: 0 0 0.5rem 0;
}
.group-cover {
height: 100%;
max-width: 40%;
width: auto;
position: absolute;
display: inline-block;
right: 0;
top: 0;
overflow: hidden;
z-index: 0;
}
.group-cover span {
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to right, #151515, rgba(21, 21, 21, 0.7333333333));
z-index: 1;
border-radius: 0.2rem;
}
.group-cover img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
margin-left: auto;
border-radius: 0.2rem;
}
.selectedImage {
outline: #8C977D solid 0.3rem;
}
@ -503,6 +545,7 @@ nav .btn {
font-size: 17px;
font-family: "Secular One", sans-serif;
text-decoration: none;
text-align: center;
}
.gallery-group {
@ -516,14 +559,14 @@ nav .btn {
z-index: 5;
}
.group-item:hover .gallery-group {
.group-item .gallery-group {
-webkit-backdrop-filter: brightness(0.5);
backdrop-filter: brightness(0.5);
}
.group-item:hover .nsfw-warning > * {
.group-item .nsfw-warning > * {
display: none;
}
.group-item:hover .group-name {
.group-item .group-name {
opacity: 1;
}

79
css/scss/_body.scss
View file

@ -72,7 +72,7 @@
min-width: calc(20% - 0.5rem);
background-color: $bg;
border-radius: calc($rad - 0.5rem);
border-radius: calc($rad - 0.7rem);
position: relative;
@ -384,6 +384,64 @@
| Groups
|-------------------------------------------------------------
*/
.group-banner {
position: relative;
}
.group-description {
height: auto;
width: auto;
position: relative;
z-index: +1;
& > * {
margin: 0 0 0.5rem 0;
}
}
.group-cover {
height: 100%;
max-width: 40%;
width: auto;
position: absolute;
display: inline-block;
right: 0;
top: 0;
overflow: hidden;
z-index: 0;
span {
width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to right, $bg, $bg-alt);
z-index: +1;
border-radius: calc($rad - 0.2rem);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
margin-left: auto;
border-radius: calc($rad - 0.2rem);
}
}
.selectedImage {
outline: $page-accent solid 0.3rem;
}
@ -403,6 +461,7 @@
font-size: 17px;
font-family: $font-body;
text-decoration: none;
text-align: center;
}
.gallery-group {
@ -419,16 +478,14 @@
}
.group-item {
&:hover {
& .gallery-group {
backdrop-filter: brightness(0.5);
}
& .nsfw-warning > * {
display: none;
}
& .group-name {
opacity: 1;
}
& .gallery-group {
backdrop-filter: brightness(0.5);
}
& .nsfw-warning > * {
display: none;
}
& .group-name {
opacity: 1;
}
}