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

Progress on fixing shitty groups code?

Browse source
This commit is contained in:
Michał Gdula 2022-09-24 16:47:34 +00:00
parent be80166795
commit 89bab971f3
8 changed files with 252 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

93
css/main.css
View file

@ -527,6 +527,71 @@ nav .btn {
opacity: 1;
}
.group-make {
margin: 0.25rem;
padding: 0;
height: auto;
max-width: calc(20% - 0.5rem);
min-width: calc(20% - 0.5rem);
border-radius: -0.1rem;
position: relative;
overflow: hidden;
flex: 1 0 150px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.group-make:hover {
outline: #E8E3E3 0.2rem solid;
}
.group-make:after {
content: "";
display: block;
padding-bottom: 100%;
}
.group-make button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
background-color: #121212;
border-radius: -0.1rem;
border: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 5;
text-decoration: none;
font-family: "Secular One", sans-serif;
}
.group-make button:hover {
color: #E8E3E3;
cursor: pointer;
}
.group-make button span {
text-align: center;
}
.group-make button img {
margin: 0.25rem;
width: 2.5rem;
height: 2.5rem;
}
@media (max-width: 800px) {
.group-make {
max-width: calc(25% - 0.5rem);
min-width: calc(25% - 0.5rem);
}
}
@media (max-width: 550px) {
.group-make {
max-width: calc(33.33% - 0.5rem);
min-width: calc(33.33% - 0.5rem);
}
}
/*
|-------------------------------------------------------------
| profile
@ -814,34 +879,6 @@ nav .btn {
top: 0;
}
/*
|-------------------------------------------------------------
| PASSWORD RESET
|-------------------------------------------------------------
*/
.password-reset-root {
background-color: #151515;
color: #E8E3E3;
border-radius: 0.4rem;
border: 0.2rem solid #B66467;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
}
.password-reset-root h1,
.password-reset-root h2,
.password-reset-root h3,
.password-reset-root h4,
.password-reset-root h5 {
font-family: "Lexend Deca", sans-serif;
text-rendering: optimizeLegibility;
}
.password-reset-root p,
.password-reset-root a,
.password-reset-root button,
.password-reset-root input {
font-family: "Secular One", sans-serif;
text-rendering: optimizeLegibility;
}
/*
|-------------------------------------------------------------
| FOOTER

109
css/scss/_body.scss
View file

@ -431,6 +431,89 @@
}
}
}
.group-make {
margin: 0.25rem;
padding: 0;
height: auto;
max-width: calc(20% - 0.5rem);
min-width: calc(20% - 0.5rem);
border-radius: calc($rad - 0.5rem);
position: relative;
overflow: hidden;
flex: 1 0 150px;
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
&:hover {
outline: $white 0.2rem solid;
}
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
button {
@include flexDown(center);
align-items: center;
width: 100%;
height: 100%;
padding: 0;
background-color: $black;
border-radius: calc($rad - 0.5rem);
border: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 5;
text-decoration: none;
font-family: $font-body;
&:hover {
color: $fg;
cursor: pointer;
}
span {
text-align: center;
}
img {
margin: 0.25rem;
width: 2.5rem;
height: 2.5rem;
}
}
}
@media (max-width: 800px) {
.group-make {
max-width: calc(25% - 0.5rem);
min-width: calc(25% - 0.5rem);
}
}
@media (max-width: 550px) {
.group-make {
max-width: calc(33.33% - 0.5rem);
min-width: calc(33.33% - 0.5rem);
}
}
/*
|-------------------------------------------------------------
| profile
@ -509,18 +592,16 @@
| UPLOAD
|-------------------------------------------------------------
*/
.upload-root {
& > img {
margin: 0 auto;
.upload-root > img {
margin: 0 auto;
max-width: 100%;
max-height: 15rem;
max-width: 100%;
max-height: 15rem;
border-radius: calc($rad - 0.7rem);
border-radius: calc($rad - 0.7rem);
display: flex;
flex-direction: column;
}
display: flex;
flex-direction: column;
}
/*
@ -750,14 +831,4 @@
background-color: $bg;
position: sticky;
top: 0;
}
/*
|-------------------------------------------------------------
| PASSWORD RESET
|-------------------------------------------------------------
*/
.password-reset-root {
@include defaultDecoration($red);
@include defaultFont();
}