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
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
|
||||
Loading…
Add table
Add a link
Reference in a new issue