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

Finishing up with switching to SASS

Browse source
This commit is contained in:
Michał Gdula 2022-08-12 16:54:35 +00:00
parent 302fe6c15e
commit 2ff9d356b2
18 changed files with 828 additions and 1026 deletions
Download patch file Download diff file Expand all files Collapse all files

198
css/main.scss
View file

@ -20,39 +20,42 @@
|-------------------------------------------------------------
*/
html {
margin: 0; padding: 0;
margin: 0;
padding: 0;
min-height: 100vh; max-width: 100vw;
min-height: 100vh;
max-width: 100vw;
position: relative;
position: relative;
background-color: $bg;
background-image: url("../assets/bg.svg");
background-color: $bg;
background-image: url("../assets/bg.svg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
scroll-behavior: smooth;
scroll-behavior: smooth;
overflow: auto;
overflow: auto;
}
body {
margin: 0 auto; padding: 1rem;
margin: 0 auto;
padding: 1rem;
max-width: 1000px;
max-width: 1000px;
min-height: calc(100vh - 2rem);
min-height: calc(100vh - 2rem);
@include flexDown(space-between);
@include flexDown(space-between);
position: relative;
position: relative;
* {
color: $fg;
}
* {
color: $fg;
}
}
/*
@ -61,54 +64,60 @@ body {
|-------------------------------------------------------------
*/
.btn {
padding: 0.5rem;
padding: 0.5rem;
width: 100%;
width: 100%;
display: block;
box-sizing: border-box;
display: block;
box-sizing: border-box;
font-size: 16px;
font-weight: 500;
font-family: $font-body;
font-size: 16px;
font-weight: 500;
font-family: $font-body;
text-decoration: none;
text-align: center;
text-decoration: none;
border: none;
border-radius: $rad;
border: none;
border-radius: calc($rad - (0.5rem + 3px));
transition: outline 0.1s cubic-bezier(.19,1,.22,1);
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
&:hover {
outline: $white 3px solid;
color: $fg;
}
&:hover {
outline: $white 3px solid;
color: $fg;
}
&:where(input[type="file"])::file-selector-button {
margin: -0.5rem 0.5rem -0.5rem -0.5rem;
padding: 0.5rem;
display: inline-block;
font-size: 16px;
text-decoration: none;
background-color: $white;
border: none;
border-radius: $rad;
}
&:where(input[type="file"])::file-selector-button {
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
padding: 0.5rem;
display: inline-block;
font-size: 16px;
text-decoration: none;
background-color: $white;
border: none;
border-radius: $rad;
}
}
a.btn {
text-align: center;
}
.btn-good {
background-color: $green;
background-color: $green;
}
.btn-bad {
background-color: $red;
background-color: $red;
}
.btn-neutral {
background-color: $black;
background-color: $black;
}
/*
@ -117,8 +126,12 @@ body {
|-------------------------------------------------------------
*/
form {
width: 100%;
box-sizing: content-box;
width: 100%;
box-sizing: content-box;
>* {
margin-bottom: 0.5rem;
}
}
/*
@ -127,13 +140,25 @@ form {
|-------------------------------------------------------------
*/
.svg {
margin: 0 0.2rem 0.1rem 0;
margin: 0 0.2rem 0.1rem 0;
width: 19px; height: 18px;
width: 19px;
height: 18px;
vertical-align: middle;
vertical-align: middle;
display: inline;
display: inline;
}
/*
|-------------------------------------------------------------
| BR / BREAK
|-------------------------------------------------------------
*/
br {
margin: 0;
line-height: 0.25rem;
}
/*
@ -142,31 +167,36 @@ form {
|-------------------------------------------------------------
*/
#back-to-top {
margin: 0; padding: 0.5rem;
position: fixed; z-index: 99;
right: -2.5rem; bottom: 1rem;
object-position: center;
background-color: $bg;
backdrop-filter: blur(8px);
border-radius: 50%;
box-shadow: $shadow;
transition: right 0.15s cubic-bezier(.19,1,.22,1);
margin: 0;
padding: 0.5rem;
&:hover {
outline: 0.2rem solid $green;
}
position: fixed;
z-index: 99;
right: -2.5rem;
bottom: 1rem;
* {
margin: 0; padding: 0;
width: 1.5rem; height: 1.5rem;
display: block;
object-position: center;
}
object-position: center;
background-color: $bg;
backdrop-filter: blur(8px);
border-radius: 50%;
box-shadow: $shadow;
transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
&:hover {
outline: 0.2rem solid $green;
}
* {
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
display: block;
object-position: center;
}
}