mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 19:46:16 +00:00
Unifying style of the gallery
Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation
This commit is contained in:
parent
0414cda5d3
commit
bb98701430
44 changed files with 1777 additions and 1631 deletions
13
gallery/user/themes/default/animations.sass
Normal file
13
gallery/user/themes/default/animations.sass
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@keyframes imgLoading
|
||||
0%
|
||||
background-position: -468px 0
|
||||
|
||||
100%
|
||||
background-position: 468px 0
|
||||
|
||||
@keyframes notificationTimeout
|
||||
0%
|
||||
left: -100%
|
||||
|
||||
100%
|
||||
left: 0%
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
border: 1px solid rgba($white100, 0.3);
|
||||
background-color: rgba($white100, 0);
|
||||
color: $white100;
|
||||
|
||||
transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
|
||||
&:active {
|
||||
border-color: rgba($white100, 1);
|
||||
color: $white100;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
.tool-btn {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: $white100;
|
||||
|
||||
svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
color: $green;
|
||||
|
||||
.tool-tip {
|
||||
opacity: 1;
|
||||
top: -2.5rem;
|
||||
transform: translateX(calc(-50% + 1.25rem ));
|
||||
}
|
||||
}
|
||||
}
|
||||
.tool-btn--evil {
|
||||
color: $red;
|
||||
|
||||
span {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white100;
|
||||
}
|
||||
}
|
||||
.tool-btn--blu {
|
||||
color: $blue;
|
||||
|
||||
span {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white100;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-tip {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
width: auto;
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: -1.7rem;
|
||||
left: 0;
|
||||
transform: translateX(calc(-50% + 1.25rem ));
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
background-color: $black300;
|
||||
color: $white100;
|
||||
opacity: 0;
|
||||
border-radius: $rad;
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
29
gallery/user/themes/default/buttons/jumpUp.sass
Normal file
29
gallery/user/themes/default/buttons/jumpUp.sass
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.jumpUp
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 2.5rem
|
||||
height: 2.5rem
|
||||
|
||||
position: fixed
|
||||
bottom: 0.75rem
|
||||
right: -3rem
|
||||
|
||||
display: flex // hidden
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
border-radius: 50%
|
||||
background-color: $black
|
||||
color: $white
|
||||
opacity: 0 // hidden
|
||||
|
||||
z-index: 2
|
||||
|
||||
cursor: pointer
|
||||
|
||||
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
|
||||
|
||||
&:hover
|
||||
background-color: $black
|
||||
color: $primary
|
||||
94
gallery/user/themes/default/buttons/pill.sass
Normal file
94
gallery/user/themes/default/buttons/pill.sass
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
.pill-row
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
> div
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
display: flex
|
||||
|
||||
background-color: $black
|
||||
border-radius: $rad
|
||||
|
||||
.pill-item
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 2.5rem
|
||||
height: 2.5rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
position: relative
|
||||
|
||||
border: none
|
||||
background-color: transparent
|
||||
color: $white
|
||||
|
||||
svg
|
||||
width: 1.25rem
|
||||
height: 1.25rem
|
||||
|
||||
&:hover
|
||||
cursor: pointer
|
||||
|
||||
color: $primary
|
||||
|
||||
.tool-tip
|
||||
opacity: 1
|
||||
top: -2.5rem
|
||||
transform: translateX(calc(-50% + 1.25rem ))
|
||||
|
||||
.pill__critical
|
||||
color: $critical
|
||||
|
||||
span
|
||||
color: $critical
|
||||
|
||||
&:hover
|
||||
color: $white
|
||||
|
||||
.pill__info
|
||||
color: $info
|
||||
|
||||
span
|
||||
color: $info
|
||||
|
||||
&:hover
|
||||
color: $white
|
||||
|
||||
.tool-tip
|
||||
margin: 0
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
width: auto
|
||||
|
||||
display: block
|
||||
|
||||
position: absolute
|
||||
top: -1.7rem
|
||||
left: 0
|
||||
transform: translateX(calc(-50% + 1.25rem ))
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
|
||||
background-color: $black2
|
||||
color: $white
|
||||
opacity: 0
|
||||
border-radius: $rad-inner
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)
|
||||
|
||||
pointer-events: none
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
#topButton {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0.75rem;
|
||||
right: -3rem;
|
||||
|
||||
display: flex; // hidden
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: $black300;
|
||||
opacity: 0; // hidden
|
||||
|
||||
z-index: 2;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.2s cubic-bezier(.86, 0, .07, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: $black200;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
39
gallery/user/themes/default/style.sass
Normal file
39
gallery/user/themes/default/style.sass
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
// Default theme for OnlyLegs by FluffyBean
|
||||
// Mockup link: https://www.figma.com/file/IMZT5kZr3sAngrSHSGu5di/OnlyLegs?node-id=0%3A1
|
||||
|
||||
@import "variables"
|
||||
@import "animations"
|
||||
|
||||
@import "ui/notification"
|
||||
@import "ui/pop-up"
|
||||
@import "ui/navigation"
|
||||
@import "ui/content"
|
||||
@import "ui/background"
|
||||
@import "ui/gallery"
|
||||
|
||||
@import "buttons/jumpUp"
|
||||
@import "buttons/pill"
|
||||
|
||||
// Reset
|
||||
*
|
||||
box-sizing: border-box
|
||||
font-family: $font
|
||||
|
||||
html, body
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
min-height: 100vh
|
||||
|
||||
background-color: $white
|
||||
|
||||
scroll-behavior: smooth
|
||||
|
||||
.wrapper
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
min-height: 100vh
|
||||
|
||||
background-color: $white
|
||||
color: $black
|
||||
|
|
@ -1,464 +0,0 @@
|
|||
@import 'variables/variables';
|
||||
@import 'variables/fonts';
|
||||
|
||||
@import 'ui/reset';
|
||||
@import 'ui/nav';
|
||||
@import 'ui/main';
|
||||
@import 'ui/gallery';
|
||||
@import 'ui/notification';
|
||||
|
||||
@import 'buttons/img-tool';
|
||||
@import 'buttons/btn';
|
||||
@import 'buttons/up';
|
||||
|
||||
.app {
|
||||
margin: 0 0 0 3.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: auto;
|
||||
min-height: 100vh;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
//background-color: $black100;
|
||||
color: $white100;
|
||||
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
overflow: unset;
|
||||
|
||||
> h1 {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
color: $green;
|
||||
}
|
||||
> p {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
color: $white100;
|
||||
}
|
||||
/*
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 2.5rem;
|
||||
font-stretch: ultra-expanded;
|
||||
font-weight: 600;
|
||||
|
||||
color: $green;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.box-ui {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 621px;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
}
|
||||
.box-ui-header {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
background-color: $black300;
|
||||
border-radius: $rad $rad 0 0;
|
||||
|
||||
svg {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
|
||||
fill: $green;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 1.25rem;
|
||||
font-stretch: ultra-expanded;
|
||||
font-weight: 600;
|
||||
|
||||
color: $green;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.box-ui-content {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
color: $white100;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.nice-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.form-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
svg {
|
||||
margin: 0;
|
||||
padding: 0.3rem;
|
||||
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
background-color: $black300;
|
||||
color: $white100;
|
||||
border: 1px solid $black400;
|
||||
border-radius: $rad 0 0 $rad;
|
||||
border-right: none;
|
||||
}
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
color: $white100;
|
||||
|
||||
background-color: $black200;
|
||||
border: 1px solid $black400;
|
||||
border-radius: 0 $rad $rad 0;
|
||||
border-left: none;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
~ svg {
|
||||
color: $green;
|
||||
background-color: $black200;
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $white100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
color: $white100;
|
||||
|
||||
background-color: $black300;
|
||||
border: 1px solid $black400;
|
||||
border-radius: $rad;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
.faded {
|
||||
background-color: $black200;
|
||||
border-color: $black200;
|
||||
}
|
||||
|
||||
.err-warning {
|
||||
min-height: 100vh;
|
||||
|
||||
gap: 0;
|
||||
|
||||
> h1 {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
color: $green;
|
||||
}
|
||||
> p {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
color: $white100;
|
||||
}
|
||||
}
|
||||
|
||||
.image__fullscreen {
|
||||
margin: 0;
|
||||
padding: 0 0 0 3.5rem;
|
||||
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
|
||||
position: fixed;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
opacity: 0; // hide
|
||||
|
||||
background-color: rgba($black100, 0.8);
|
||||
backdrop-filter: blur(1rem);
|
||||
z-index: 21;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: calc(100% - 1rem);
|
||||
max-height: calc(100% - 1rem);
|
||||
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
transform: scale(0.8);
|
||||
|
||||
border-radius: $rad;
|
||||
}
|
||||
}
|
||||
.image__fullscreen--active {
|
||||
top: 0;
|
||||
|
||||
opacity: 1; // show
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86);
|
||||
|
||||
img {
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55);
|
||||
}
|
||||
}
|
||||
|
||||
.image__container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 69vh;
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
background: linear-gradient(-45deg, $black100, $black400 40%, $black100);
|
||||
background-size: 400% 400%;
|
||||
border-radius: $rad;
|
||||
animation: imgLoading 10s ease infinite;
|
||||
border-radius: $rad;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 69vh;
|
||||
|
||||
background-color: $black200;
|
||||
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
border-radius: $rad;
|
||||
}
|
||||
}
|
||||
|
||||
.image__info {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
//border-left: $rad solid $green;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.image__info-header {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
background-color: $black300;
|
||||
border-radius: $rad $rad 0 0;
|
||||
|
||||
svg {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
|
||||
fill: $green;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 1.25rem;
|
||||
font-stretch: ultra-expanded;
|
||||
font-weight: 600;
|
||||
|
||||
color: $green;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.image__info-content {
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
color: $white100;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.img-tools {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
> div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
//gap: 0.5rem;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
}
|
||||
}
|
||||
45
gallery/user/themes/default/ui/background.sass
Normal file
45
gallery/user/themes/default/ui/background.sass
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.background-decoration
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100vh
|
||||
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
background-color: $white
|
||||
|
||||
background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
|
||||
background-size: 1000px 640px
|
||||
animation: imgLoading 1.8s linear infinite forwards
|
||||
|
||||
user-select: none
|
||||
overflow: hidden
|
||||
|
||||
img
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
filter: blur(1rem)
|
||||
transform: scale(1.1)
|
||||
|
||||
object-fit: cover
|
||||
object-position: center center
|
||||
|
||||
span
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
background-image: linear-gradient(to bottom, rgba($white, 0), rgba($white, 1))
|
||||
|
||||
z-index: +1
|
||||
14
gallery/user/themes/default/ui/content.sass
Normal file
14
gallery/user/themes/default/ui/content.sass
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@import "wrappers/index"
|
||||
@import "wrappers/image"
|
||||
|
||||
.content
|
||||
width: calc(100% - 3.5rem)
|
||||
min-height: 100vh
|
||||
|
||||
position: relative
|
||||
left: 3.5rem
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.content
|
||||
width: 100%
|
||||
left: 0
|
||||
117
gallery/user/themes/default/ui/gallery.sass
Normal file
117
gallery/user/themes/default/ui/gallery.sass
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
.gallery
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
|
||||
display: grid
|
||||
grid-template-columns: auto auto auto auto auto auto
|
||||
gap: 0.5rem
|
||||
|
||||
@media (max-width: 1300px)
|
||||
.gallery
|
||||
grid-template-columns: auto auto auto auto
|
||||
|
||||
@media (max-width: 800px)
|
||||
.gallery
|
||||
grid-template-columns: auto auto auto
|
||||
|
||||
.gallery__item
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
height: auto
|
||||
|
||||
position: relative
|
||||
|
||||
background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
|
||||
background-size: 1000px 640px
|
||||
animation: imgLoading 1.8s linear infinite forwards
|
||||
border-radius: $rad
|
||||
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
|
||||
&:after
|
||||
content: ""
|
||||
display: block
|
||||
padding-bottom: 100%
|
||||
|
||||
.gallery__item-info
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: 0
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-end
|
||||
|
||||
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
|
||||
|
||||
z-index: +1
|
||||
|
||||
opacity: 0 // hide
|
||||
transform: scale(1.05) // scale up
|
||||
transition: all 0.5s cubic-bezier(.79, .14, .15, .86)
|
||||
|
||||
h2
|
||||
margin: 0
|
||||
padding: 0 1rem 0.5rem
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
|
||||
color: $primary
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
opacity: 0 // hide
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
p
|
||||
margin: 0
|
||||
padding: 0 1rem 0.5rem
|
||||
|
||||
font-size: 0.8rem
|
||||
font-weight: 500
|
||||
|
||||
color: $white
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
opacity: 0 // hide
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
h2, p
|
||||
opacity: 1
|
||||
|
||||
.gallery__item-image
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
//background-color: $black
|
||||
border-radius: $rad
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
@keyframes imgLoading {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto auto auto auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@media (max-width: 1550px) {
|
||||
.gallery {
|
||||
grid-template-columns: auto auto auto auto auto auto auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1300px) {
|
||||
.gallery {
|
||||
grid-template-columns: auto auto auto auto auto auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1050px) {
|
||||
.gallery {
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.gallery {
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.gallery {
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
height: auto;
|
||||
|
||||
position: relative;
|
||||
|
||||
background: linear-gradient(-45deg, $black100, $black400, $black100);
|
||||
background-size: 400% 400%;
|
||||
border-radius: $rad;
|
||||
animation: imgLoading 10s ease infinite;
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item-info {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
background-image: linear-gradient(to bottom, #00000000, rgba($black100, 0.8));
|
||||
|
||||
z-index: +1;
|
||||
|
||||
opacity: 0; // hide
|
||||
transform: scale(1.05); // scale up
|
||||
transition: all 0.5s cubic-bezier(.79, .14, .15, .86);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
padding: 0 1rem 0.5rem;
|
||||
|
||||
font-family: $font-header;
|
||||
font-size: 1rem;
|
||||
font-stretch: ultra-expanded;
|
||||
font-weight: 600;
|
||||
|
||||
color: $green;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0; // hide
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0 1rem 0.5rem;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
|
||||
color: $white100;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
opacity: 0; // hide
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
h2,
|
||||
p {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item-image {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
main {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background-color: $black100;
|
||||
color: $white100;
|
||||
|
||||
min-height: 100vh;
|
||||
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 69vh;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
user-select: none;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
object-position: center 0px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-image: linear-gradient(to bottom, #00000000, rgba($black100, 1));
|
||||
backdrop-filter: blur(1rem);
|
||||
|
||||
z-index: +1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
max-width: 100vw;
|
||||
width: 3.5rem;
|
||||
height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
background-color: $black300;
|
||||
color: $white100;
|
||||
|
||||
box-sizing: border-box;
|
||||
z-index: 69;
|
||||
transition: width 0.4s cubic-bezier(.76,0,.17,1), background-color 0.3s ease-in-out;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//gap: 0.25rem;
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
//gap: 0.5rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
text-decoration: none;
|
||||
color: $white100;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
i, svg {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: $white100;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 3rem;
|
||||
transform: translateY(-50%);
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
|
||||
background-color: $black300;
|
||||
color: $white100;
|
||||
opacity: 0;
|
||||
border-radius: $rad;
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1);
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//background-color: $black200;
|
||||
|
||||
i, svg {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
left: 3.8rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
127
gallery/user/themes/default/ui/navigation.sass
Normal file
127
gallery/user/themes/default/ui/navigation.sass
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
.navigation
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 3.5rem
|
||||
height: 100dvh
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-between
|
||||
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
background-color: $black2
|
||||
color: $white
|
||||
|
||||
z-index: 69
|
||||
|
||||
// Spacer
|
||||
> span
|
||||
height: 100%
|
||||
|
||||
.navigation-item
|
||||
margin: 0
|
||||
padding: 1rem
|
||||
|
||||
width: 3.5rem
|
||||
height: 3.5rem
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
|
||||
position: relative
|
||||
|
||||
background-color: $black2
|
||||
border: none
|
||||
|
||||
text-decoration: none
|
||||
|
||||
svg
|
||||
margin: 0
|
||||
font-size: 1.5rem
|
||||
color: $white
|
||||
transition: color 0.2s ease-out
|
||||
|
||||
span
|
||||
margin: 0
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
display: block
|
||||
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 3rem
|
||||
transform: translateY(-50%)
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
|
||||
background-color: $black2
|
||||
color: $white
|
||||
opacity: 0
|
||||
border-radius: $rad-inner
|
||||
|
||||
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
|
||||
|
||||
pointer-events: none
|
||||
|
||||
&:hover
|
||||
background-color: $black2
|
||||
|
||||
svg
|
||||
color: $primary
|
||||
|
||||
span
|
||||
opacity: 1
|
||||
left: 3.8rem
|
||||
|
||||
.navigation-item__selected
|
||||
background: $primary
|
||||
|
||||
svg
|
||||
color: $black
|
||||
|
||||
&:hover
|
||||
background: $primary
|
||||
|
||||
svg
|
||||
color: $white
|
||||
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.navigation
|
||||
width: 100vw
|
||||
height: 3.5rem
|
||||
|
||||
flex-direction: row
|
||||
justify-content: space-around
|
||||
|
||||
position: fixed
|
||||
top: unset
|
||||
bottom: 0
|
||||
left: 0
|
||||
|
||||
> span
|
||||
display: none
|
||||
|
||||
.navigation-item
|
||||
margin: 0.25rem
|
||||
padding: 0
|
||||
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
|
||||
border-radius: $rad-inner
|
||||
|
||||
svg
|
||||
margin: auto
|
||||
|
||||
width: 1.5rem
|
||||
height: 1.5rem
|
||||
|
||||
span
|
||||
display: none
|
||||
131
gallery/user/themes/default/ui/notification.sass
Normal file
131
gallery/user/themes/default/ui/notification.sass
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
@mixin notification($color)
|
||||
color: $color
|
||||
|
||||
.sniffle__notification-time
|
||||
background-color: $color
|
||||
|
||||
.notifications
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 450px
|
||||
height: auto
|
||||
|
||||
position: fixed
|
||||
top: 0.3rem
|
||||
right: 0.3rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.3rem
|
||||
|
||||
z-index: 70
|
||||
|
||||
.sniffle__notification
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 450px
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
|
||||
position: relative
|
||||
|
||||
background-color: $black
|
||||
border-radius: $rad-inner
|
||||
color: $white
|
||||
opacity: 0
|
||||
transform: scale(0.8)
|
||||
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
|
||||
transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
||||
|
||||
.sniffle__notification-icon
|
||||
margin: 0
|
||||
padding: 1rem
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
background-color: $black2
|
||||
|
||||
svg
|
||||
width: 1.25rem
|
||||
height: 1.25rem
|
||||
|
||||
.sniffle__notification-text
|
||||
margin: 0
|
||||
padding: 1rem
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-self: center
|
||||
align-self: center
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
line-height: 1
|
||||
text-align: left
|
||||
|
||||
.sniffle__notification-time
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 450px
|
||||
height: 3px
|
||||
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
left: 0px
|
||||
|
||||
background-color: $white
|
||||
|
||||
animation: notificationTimeout 4.9s linear
|
||||
|
||||
.sniffle__notification--success
|
||||
@include notification($succes)
|
||||
|
||||
.sniffle__notification--error
|
||||
@include notification($critical)
|
||||
|
||||
.sniffle__notification--warning
|
||||
@include notification($warning)
|
||||
|
||||
.sniffle__notification--info
|
||||
@include notification($info)
|
||||
|
||||
.sniffle__notification-show
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
.sniffle__notification--hide
|
||||
opacity: 0
|
||||
transform: translateX(100%)
|
||||
|
||||
transition: all 0.25s ease-in-out
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.notifications
|
||||
width: calc(100vw - 0.6rem)
|
||||
height: auto
|
||||
|
||||
.sniffle__notification
|
||||
width: 100%
|
||||
|
||||
.sniffle__notification-time
|
||||
width: 100%
|
||||
|
||||
.sniffle__notification--hide
|
||||
opacity: 0
|
||||
transform: translateY(-5rem)
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
@keyframes sniffle {
|
||||
0% {
|
||||
left: -450px;
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sniffle {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 450px;
|
||||
height: auto;
|
||||
|
||||
position: fixed;
|
||||
top: 0.3rem;
|
||||
right: 0.3rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
|
||||
z-index: 6969;
|
||||
}
|
||||
.sniffle__notification {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 450px;
|
||||
height: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: relative;
|
||||
|
||||
background-color: $black200;
|
||||
border-radius: $rad;
|
||||
color: $white100;
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
.sniffle__notification-icon {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
|
||||
width: auto;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: $black300;
|
||||
|
||||
svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
.sniffle__notification-text {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
|
||||
font-family: $font-body;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
.sniffle__notification-time {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
width: 450px;
|
||||
height: 3px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
|
||||
background-color: $white100;
|
||||
|
||||
animation: sniffle 4.9s linear;
|
||||
}
|
||||
.sniffle__notification--success {
|
||||
color: $green;
|
||||
|
||||
.sniffle__notification-time {
|
||||
background-color: $green;
|
||||
}
|
||||
}
|
||||
.sniffle__notification--error {
|
||||
color: $red;
|
||||
|
||||
.sniffle__notification-time {
|
||||
background-color: $red;
|
||||
}
|
||||
}
|
||||
.sniffle__notification--warning {
|
||||
color: $yellow;
|
||||
|
||||
.sniffle__notification-time {
|
||||
background-color: $yellow;
|
||||
}
|
||||
}
|
||||
.sniffle__notification--info {
|
||||
color: $blue;
|
||||
|
||||
.sniffle__notification-time {
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.sniffle__notification--hide {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
259
gallery/user/themes/default/ui/pop-up.sass
Normal file
259
gallery/user/themes/default/ui/pop-up.sass
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
@mixin pop-up-btn($color, $fill: false)
|
||||
@if $fill
|
||||
color: $white
|
||||
background-color: $color
|
||||
border: 2px solid $color
|
||||
|
||||
&:hover
|
||||
background-color: $white
|
||||
color: $color
|
||||
@else
|
||||
color: $color
|
||||
background-color: $white
|
||||
border: 2px solid $color
|
||||
|
||||
&:hover
|
||||
background-color: $color
|
||||
color: $white
|
||||
|
||||
.pop-up
|
||||
width: calc(100% - 3.5rem)
|
||||
height: 100vh
|
||||
|
||||
position: fixed
|
||||
top: 100%
|
||||
left: 3.5rem
|
||||
|
||||
background-color: rgba($black, 0.8)
|
||||
backdrop-filter: blur(1rem)
|
||||
|
||||
opacity: 0
|
||||
z-index: 68
|
||||
|
||||
transition: opacity 0.2s ease
|
||||
|
||||
.pop-up-wrapper
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 621px
|
||||
height: auto
|
||||
|
||||
position: absolute
|
||||
bottom: 50%
|
||||
left: 50%
|
||||
transform: translate(-50%, 50%) scale(0.8)
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: $white
|
||||
border-radius: $rad
|
||||
|
||||
overflow: hidden
|
||||
|
||||
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
||||
|
||||
.pop-up-content
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
max-height: 50vh
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
overflow-y: auto
|
||||
overflow-x: hidden
|
||||
text-size-adjust: auto;
|
||||
text-overflow: ellipsis
|
||||
|
||||
h3
|
||||
margin: 0
|
||||
|
||||
width: 100%
|
||||
|
||||
position: sticky
|
||||
top: 0
|
||||
|
||||
font-size: 2.5rem
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
color: $black
|
||||
background-color: $white
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
||||
width: 100%
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
color: $black
|
||||
|
||||
img
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
max-width: 100%
|
||||
max-height: 40vh
|
||||
|
||||
border-radius: $rad-inner
|
||||
|
||||
form
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
justify-content: center
|
||||
|
||||
.pop-up-controlls
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
justify-content: center
|
||||
|
||||
.pop-up__btn
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 2.5rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
border-radius: $rad-inner
|
||||
|
||||
cursor: pointer
|
||||
transition: background-color 0.2s ease, color 0.2s ease
|
||||
|
||||
@include pop-up-btn($black)
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
.pop-up__btn-fill
|
||||
@include pop-up-btn($black, true)
|
||||
|
||||
.pop-up__btn-primary
|
||||
@include pop-up-btn($primary)
|
||||
.pop-up__btn-primary-fill
|
||||
@include pop-up-btn($primary, true)
|
||||
|
||||
.pop-up__btn-info
|
||||
@include pop-up-btn($info)
|
||||
.pop-up__btn-info-fill
|
||||
@include pop-up-btn($info, true)
|
||||
|
||||
.pop-up__btn-warning
|
||||
@include pop-up-btn($warning)
|
||||
.pop-up__btn-warning-fill
|
||||
@include pop-up-btn($warning, true)
|
||||
|
||||
.pop-up__btn-critical
|
||||
@include pop-up-btn($critical)
|
||||
.pop-up__btn-critical-fill
|
||||
@include pop-up-btn($critical, true)
|
||||
|
||||
.pop-up__input
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 2.5rem
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
text-align: left
|
||||
line-height: 1
|
||||
|
||||
border-radius: $rad-inner
|
||||
|
||||
background-color: $white
|
||||
border: 2px solid $black
|
||||
|
||||
&:focus
|
||||
outline: none
|
||||
border-color: $primary
|
||||
|
||||
.pop-up__link
|
||||
color: $primary
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
cursor: pointer
|
||||
|
||||
.pop-up__active
|
||||
opacity: 1
|
||||
top: 0
|
||||
|
||||
.pop-up-wrapper
|
||||
transform: translate(-50%, 50%) scale(1)
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.pop-up
|
||||
width: 100%
|
||||
height: calc(100vh - 3.5rem)
|
||||
height: calc(100dvh - 3.5rem)
|
||||
|
||||
position: fixed
|
||||
left: 0
|
||||
bottom: 3.5rem
|
||||
|
||||
backdrop-filter: blur(0.5rem)
|
||||
|
||||
.pop-up-wrapper
|
||||
width: 100%
|
||||
max-height: calc(100vh - 1rem)
|
||||
max-height: calc(100dvh - 1rem)
|
||||
|
||||
left: 0
|
||||
bottom: 0
|
||||
|
||||
border-radius: $rad
|
||||
transform: translateY(5rem)
|
||||
box-shadow: 0px 8px 0px $black2;
|
||||
|
||||
.pop-up-content
|
||||
max-height: 100%
|
||||
|
||||
img
|
||||
max-height: 50vh
|
||||
|
||||
.pop-up__active
|
||||
opacity: 1
|
||||
top: unset
|
||||
|
||||
.pop-up-wrapper
|
||||
transform: translateY(0)
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
min-height: 100vh;
|
||||
|
||||
background-color: $black100;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
216
gallery/user/themes/default/ui/wrappers/image.sass
Normal file
216
gallery/user/themes/default/ui/wrappers/image.sass
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
.image-wrapper
|
||||
padding: 0
|
||||
|
||||
display: grid
|
||||
grid-template-areas: 'info image' 'info tools'
|
||||
grid-template-columns: 25rem 1fr
|
||||
grid-template-rows: 1fr auto
|
||||
gap: 0
|
||||
|
||||
height: 100vh
|
||||
|
||||
.image-fullscreen
|
||||
margin: 0
|
||||
padding: 0 0 0 3.5rem
|
||||
|
||||
width: 100%
|
||||
height: 100dvh
|
||||
|
||||
position: fixed
|
||||
top: -100%
|
||||
left: 0
|
||||
|
||||
display: flex
|
||||
opacity: 0 // hide
|
||||
|
||||
background-color: rgba($black, 0.8)
|
||||
backdrop-filter: blur(1rem)
|
||||
z-index: 21
|
||||
|
||||
box-sizing: border-box
|
||||
|
||||
img
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
max-width: 100%
|
||||
max-height: 100%
|
||||
|
||||
object-fit: contain
|
||||
object-position: center
|
||||
|
||||
transform: scale(0.8)
|
||||
|
||||
&__active
|
||||
top: 0
|
||||
|
||||
opacity: 1 // show
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||
|
||||
img
|
||||
transform: scale(1)
|
||||
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
||||
|
||||
.image-container
|
||||
margin: auto
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
display: flex
|
||||
overflow: hidden
|
||||
|
||||
grid-area: image
|
||||
|
||||
img
|
||||
margin: auto
|
||||
padding: 0
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
max-width: 100%
|
||||
max-height: 100%
|
||||
|
||||
object-fit: contain
|
||||
object-position: center
|
||||
|
||||
border-radius: $rad
|
||||
|
||||
.image-info__container
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: $black
|
||||
|
||||
overflow-y: auto
|
||||
|
||||
grid-area: info
|
||||
|
||||
.image-info
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: $black
|
||||
border-radius: $rad
|
||||
.image-info__header
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 2.5rem
|
||||
|
||||
display: flex
|
||||
justify-content: start
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: $black2
|
||||
|
||||
svg
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 1.25rem
|
||||
height: 1.25rem
|
||||
|
||||
fill: $primary
|
||||
|
||||
h2
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
font-size: 1.25rem
|
||||
font-weight: 600
|
||||
|
||||
color: $primary
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
.image-info__content
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
p
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
|
||||
color: $white
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
#image-tools
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
grid-area: tools
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.image-wrapper
|
||||
padding: 0.5rem
|
||||
|
||||
display: flex !important
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
height: auto
|
||||
|
||||
.image-container
|
||||
margin: 0 auto
|
||||
padding: 0
|
||||
|
||||
max-height: 69vh
|
||||
|
||||
img
|
||||
max-height: 69vh
|
||||
|
||||
#image-tools
|
||||
margin: 0
|
||||
|
||||
.image-info__container
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
background: none
|
||||
|
||||
.image-info__container
|
||||
border-radius: $rad
|
||||
|
||||
.image-info__header
|
||||
border-radius: $rad $rad 0 0
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.image-fullscreen
|
||||
padding: 0 0 3.5rem 0
|
||||
|
||||
.image-wrapper
|
||||
padding-bottom: 4rem
|
||||
12
gallery/user/themes/default/ui/wrappers/index.sass
Normal file
12
gallery/user/themes/default/ui/wrappers/index.sass
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.index-wrapper
|
||||
padding: 0.5rem
|
||||
|
||||
position: relative
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.index-wrapper
|
||||
padding-bottom: 4rem
|
||||
40
gallery/user/themes/default/variables.sass
Normal file
40
gallery/user/themes/default/variables.sass
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
$black: #151515
|
||||
$black2: #101010
|
||||
$white: #E8E3E3
|
||||
|
||||
$red: #B66467
|
||||
$orange: #D8A657
|
||||
$yellow: #D9BC8C
|
||||
$green: #8C977D
|
||||
$blue: #8DA3B9
|
||||
$purple: #A988B0
|
||||
|
||||
$primary: $green
|
||||
$warning: $orange
|
||||
$critical: $red
|
||||
$succes: $green
|
||||
$info: $blue
|
||||
|
||||
$rad: 8px
|
||||
$rad-inner: 3px
|
||||
|
||||
//$font: "Work Sans", sans-serif
|
||||
$font: "Work Sans", sans-serif
|
||||
|
||||
$breakpoint: 800px // responsive breakpoint for mobile
|
||||
|
||||
// Work Sans
|
||||
@font-face
|
||||
font-family: 'Work Sans'
|
||||
src: url('fonts/worksans-regular.woff2')
|
||||
font-weight: 400
|
||||
|
||||
@font-face
|
||||
font-family: 'Work Sans'
|
||||
src: url('fonts/worksans-bold.woff2')
|
||||
font-weight: 600
|
||||
|
||||
@font-face
|
||||
font-family: 'Work Sans'
|
||||
src: url('fonts/worksans-black.woff2')
|
||||
font-weight: 900
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "Mona-Sans";
|
||||
src: url("fonts/Mona-Sans.woff2") format("woff2 supports variations"),
|
||||
url("fonts/Mona-Sans.woff2") format("woff2-variations");
|
||||
font-weight: 200 900;
|
||||
font-stretch: 75% 125%;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Hubot-Sans";
|
||||
src: url("fonts/Hubot-Sans.woff2") format("woff2 supports variations"),
|
||||
url("fonts/Hubot-Sans.woff2") format("woff2-variations");
|
||||
font-weight: 200 900;
|
||||
font-stretch: 75% 125%;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
src: url('fonts/worksans-regular.woff2');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
src: url('fonts/worksans-bold.woff2');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Work Sans';
|
||||
src: url('fonts/worksans-black.woff2');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
$black100: #1a1a1a;
|
||||
$black200: #151515;
|
||||
$black300: #101010;
|
||||
$black400: #0b0b0b;
|
||||
|
||||
$white100: #e8e3e3;
|
||||
|
||||
$red: #B66467;
|
||||
$orange: #D8A657;
|
||||
$yellow: #D9BC8C;
|
||||
$green: #8C977D;
|
||||
$blue: #8DA3B9;
|
||||
$purple: #A988B0;
|
||||
|
||||
$rad: 3px;
|
||||
|
||||
$font-header: "Work Sans", sans-serif;
|
||||
$font-body: "Work Sans", sans-serif;
|
||||
Loading…
Add table
Add a link
Reference in a new issue