mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-02-13 17:00:05 +00:00
Clean up Styling
This commit is contained in:
parent
bc2ed9e2be
commit
b30e336ae6
onlylegs/static/sass
|
@ -20,26 +20,10 @@
|
||||||
background-color: RGB($fg-black)
|
background-color: RGB($fg-black)
|
||||||
color: RGB($fg-white)
|
color: RGB($fg-white)
|
||||||
|
|
||||||
&::after
|
|
||||||
content: ''
|
|
||||||
|
|
||||||
width: $rad
|
|
||||||
height: calc(#{$rad} * 2)
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
bottom: calc(#{$rad} * -2)
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
background-color: RGB($bg-bright)
|
|
||||||
border-radius: $rad 0 0 0
|
|
||||||
box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
|
|
||||||
|
|
||||||
.banner
|
.banner
|
||||||
height: 30rem
|
height: 30rem
|
||||||
max-height: 69vh
|
max-height: 69vh
|
||||||
|
|
||||||
background-color: RGB($bg-300)
|
|
||||||
|
|
||||||
img
|
img
|
||||||
position: absolute
|
position: absolute
|
||||||
inset: 0
|
inset: 0
|
||||||
|
@ -125,7 +109,6 @@
|
||||||
|
|
||||||
.banner-small
|
.banner-small
|
||||||
height: 3.5rem
|
height: 3.5rem
|
||||||
background-color: RGB($bg-100)
|
|
||||||
|
|
||||||
.banner-content
|
.banner-content
|
||||||
padding: 0 0.5rem
|
padding: 0 0.5rem
|
||||||
|
|
|
@ -59,6 +59,10 @@
|
||||||
&.black
|
&.black
|
||||||
@include btn-block($black)
|
@include btn-block($black)
|
||||||
|
|
||||||
|
&.disabled, &:disabled
|
||||||
|
color: RGB($fg-dim)
|
||||||
|
cursor: unset
|
||||||
|
|
||||||
.input-checkbox
|
.input-checkbox
|
||||||
padding: 0
|
padding: 0
|
||||||
display: flex
|
display: flex
|
||||||
|
|
|
@ -68,6 +68,10 @@
|
||||||
|
|
||||||
color: RGB($primary)
|
color: RGB($primary)
|
||||||
|
|
||||||
|
&.disabled, &:disabled
|
||||||
|
color: RGB($fg-dim)
|
||||||
|
cursor: unset
|
||||||
|
|
||||||
.pill__critical
|
.pill__critical
|
||||||
color: RGB($critical)
|
color: RGB($critical)
|
||||||
|
|
||||||
|
|
|
@ -222,3 +222,7 @@
|
||||||
@media (max-width: 800px)
|
@media (max-width: 800px)
|
||||||
.gallery-grid
|
.gallery-grid
|
||||||
grid-template-columns: auto auto auto
|
grid-template-columns: auto auto auto
|
||||||
|
|
||||||
|
.gallery-item
|
||||||
|
margin: 0.35rem
|
||||||
|
position: relative
|
260
onlylegs/static/sass/components/image-view.sass
Normal file
260
onlylegs/static/sass/components/image-view.sass
Normal file
|
@ -0,0 +1,260 @@
|
||||||
|
.info-container
|
||||||
|
padding: 0.5rem 0 0 0.5rem
|
||||||
|
width: 27rem
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
bottom: 0
|
||||||
|
background-image: linear-gradient(90deg, $bg-transparent, transparent)
|
||||||
|
overflow-y: auto
|
||||||
|
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||||
|
z-index: 2
|
||||||
|
-ms-overflow-style: none
|
||||||
|
scrollbar-width: none
|
||||||
|
&::-webkit-scrollbar
|
||||||
|
display: none
|
||||||
|
|
||||||
|
&.collapsed
|
||||||
|
left: -27rem
|
||||||
|
@media (max-width: 1100px)
|
||||||
|
.info-container
|
||||||
|
padding: 0 0.5rem 0 0.5rem
|
||||||
|
width: 100%
|
||||||
|
position: relative
|
||||||
|
background: none
|
||||||
|
// While probably not the best way of doing this
|
||||||
|
// Not bothered to fight with CSS today
|
||||||
|
&.collapsed
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
details
|
||||||
|
margin-bottom: 0.5rem
|
||||||
|
padding: 0.5rem
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
background-color: RGB($bg-300)
|
||||||
|
color: RGB($fg-white)
|
||||||
|
border-radius: $rad
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
summary
|
||||||
|
height: 1.5rem
|
||||||
|
display: flex
|
||||||
|
flex-direction: row
|
||||||
|
justify-content: flex-start
|
||||||
|
align-items: center
|
||||||
|
position: relative
|
||||||
|
color: RGB($primary)
|
||||||
|
|
||||||
|
> i
|
||||||
|
margin-right: 0
|
||||||
|
font-size: 1.25rem
|
||||||
|
|
||||||
|
&.collapse-indicator
|
||||||
|
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
|
h2
|
||||||
|
margin: 0 0.5rem
|
||||||
|
font-size: 1.1rem
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
|
&[open]
|
||||||
|
summary
|
||||||
|
margin-bottom: 0.5rem
|
||||||
|
|
||||||
|
> i.collapse-indicator
|
||||||
|
transform: rotate(90deg)
|
||||||
|
|
||||||
|
p
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
.link
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
color: RGB($primary)
|
||||||
|
|
||||||
|
cursor: pointer
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
.pfp
|
||||||
|
width: 1.1rem
|
||||||
|
height: 1.1rem
|
||||||
|
|
||||||
|
border-radius: $rad-inner
|
||||||
|
|
||||||
|
object-fit: cover
|
||||||
|
|
||||||
|
table
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
overflow-x: hidden
|
||||||
|
border-collapse: collapse
|
||||||
|
|
||||||
|
tr
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
td
|
||||||
|
padding-bottom: 0.5rem
|
||||||
|
|
||||||
|
max-width: 0
|
||||||
|
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
|
> *
|
||||||
|
vertical-align: top
|
||||||
|
|
||||||
|
td:first-child
|
||||||
|
padding-right: 0.5rem
|
||||||
|
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
td:last-child
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
white-space: normal
|
||||||
|
word-break: break-word
|
||||||
|
|
||||||
|
tr:last-of-type td
|
||||||
|
padding-bottom: 0
|
||||||
|
|
||||||
|
.img-colours
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
button
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
width: 1.6rem
|
||||||
|
height: 1.6rem
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
border-radius: $rad-inner
|
||||||
|
border: none
|
||||||
|
|
||||||
|
i
|
||||||
|
font-size: 1rem
|
||||||
|
opacity: 0
|
||||||
|
transition: opacity 0.15s ease-in-out
|
||||||
|
|
||||||
|
&:hover i
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
.img-groups
|
||||||
|
width: 100%
|
||||||
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
|
gap: 0.5rem
|
||||||
|
|
||||||
|
.image-container
|
||||||
|
padding: 0.5rem
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 27rem
|
||||||
|
right: 0
|
||||||
|
bottom: 0
|
||||||
|
z-index: 2
|
||||||
|
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1), padding 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||||
|
|
||||||
|
picture
|
||||||
|
margin: auto
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
display: flex
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
img
|
||||||
|
margin: auto
|
||||||
|
padding: 0
|
||||||
|
width: auto
|
||||||
|
height: auto
|
||||||
|
max-width: 100%
|
||||||
|
max-height: 100%
|
||||||
|
object-fit: contain
|
||||||
|
object-position: center
|
||||||
|
border-radius: $rad
|
||||||
|
|
||||||
|
&.collapsed
|
||||||
|
padding: 0
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
picture img
|
||||||
|
border-radius: 0
|
||||||
|
@media (max-width: 1100px)
|
||||||
|
.image-container
|
||||||
|
position: relative
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
picture
|
||||||
|
margin: 0 auto
|
||||||
|
max-height: 69vh
|
||||||
|
|
||||||
|
img
|
||||||
|
max-height: 69vh
|
||||||
|
|
||||||
|
&.collapsed
|
||||||
|
padding: 0.5rem
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
picture img
|
||||||
|
border-radius: $rad
|
||||||
|
|
||||||
|
.background
|
||||||
|
position: absolute
|
||||||
|
inset: 0
|
||||||
|
background-color: RGB($bg-300)
|
||||||
|
background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%)
|
||||||
|
background-size: 1000px 640px
|
||||||
|
animation: imgLoading 1.8s linear infinite forwards
|
||||||
|
user-select: none
|
||||||
|
overflow: hidden
|
||||||
|
z-index: 1
|
||||||
|
|
||||||
|
img
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100vh
|
||||||
|
background-color: RGB($fg-white)
|
||||||
|
filter: blur(1rem) saturate(1.2)
|
||||||
|
transform: scale(1.1)
|
||||||
|
object-fit: cover
|
||||||
|
object-position: center center
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
inset: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
z-index: +1
|
||||||
|
|
||||||
|
@media (max-width: 1100px)
|
||||||
|
#fullscreenImage
|
||||||
|
display: none
|
|
@ -1,42 +0,0 @@
|
||||||
.background
|
|
||||||
width: 100%
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
background-color: RGB($bg-300)
|
|
||||||
background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%)
|
|
||||||
background-size: 1000px 640px
|
|
||||||
animation: imgLoading 1.8s linear infinite forwards
|
|
||||||
|
|
||||||
user-select: none
|
|
||||||
overflow: hidden
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
img
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
background-color: RGB($fg-white)
|
|
||||||
|
|
||||||
filter: blur(1rem) saturate(1.2)
|
|
||||||
transform: scale(1.1)
|
|
||||||
|
|
||||||
object-fit: cover
|
|
||||||
object-position: center center
|
|
||||||
|
|
||||||
span
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
z-index: +1
|
|
|
@ -1,28 +0,0 @@
|
||||||
.image-container, picture
|
|
||||||
margin: auto
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
img
|
|
||||||
margin: auto
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: auto
|
|
||||||
height: auto
|
|
||||||
max-width: 100%
|
|
||||||
max-height: 100%
|
|
||||||
|
|
||||||
object-fit: contain
|
|
||||||
object-position: center
|
|
||||||
|
|
||||||
@media (max-width: 1100px)
|
|
||||||
.image-container, picture
|
|
||||||
margin: 0 auto
|
|
||||||
max-height: 69vh
|
|
||||||
|
|
||||||
img
|
|
||||||
max-height: 69vh
|
|
|
@ -1,232 +0,0 @@
|
||||||
.info-container
|
|
||||||
padding: 0.5rem 0 0.5rem 0.5rem
|
|
||||||
|
|
||||||
width: 27rem
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
background-image: linear-gradient(90deg, $bg-transparent, transparent)
|
|
||||||
|
|
||||||
overflow-y: auto
|
|
||||||
z-index: +4
|
|
||||||
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
|
||||||
-ms-overflow-style: none
|
|
||||||
scrollbar-width: none
|
|
||||||
&::-webkit-scrollbar
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&.collapsed
|
|
||||||
left: -27rem
|
|
||||||
|
|
||||||
.info-tab
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
background-color: RGB($bg-300)
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
&.collapsed
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
.collapse-indicator
|
|
||||||
transform: rotate(90deg)
|
|
||||||
|
|
||||||
.info-header
|
|
||||||
border-radius: $rad
|
|
||||||
|
|
||||||
.info-table
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.collapse-indicator
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
position: absolute
|
|
||||||
top: 0.6rem
|
|
||||||
right: 0.6rem
|
|
||||||
|
|
||||||
background-color: transparent
|
|
||||||
color: RGB($primary)
|
|
||||||
border: none
|
|
||||||
|
|
||||||
z-index: +2
|
|
||||||
|
|
||||||
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
> i
|
|
||||||
font-size: 1.1rem
|
|
||||||
color: RGB($primary)
|
|
||||||
|
|
||||||
.info-header
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: start
|
|
||||||
align-items: center
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
background-color: RGB($bg-200)
|
|
||||||
border-radius: $rad $rad 0 0
|
|
||||||
|
|
||||||
> i
|
|
||||||
font-size: 1.25rem
|
|
||||||
color: RGB($primary)
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
font-size: 1.1rem
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
color: RGB($primary)
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.info-table
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 1rem
|
|
||||||
|
|
||||||
color: RGB($fg-white)
|
|
||||||
|
|
||||||
overflow-x: hidden
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
text-overflow: ellipsis
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.link
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
color: RGB($primary)
|
|
||||||
|
|
||||||
cursor: pointer
|
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
.pfp
|
|
||||||
width: 1.1rem
|
|
||||||
height: 1.1rem
|
|
||||||
|
|
||||||
border-radius: $rad-inner
|
|
||||||
|
|
||||||
object-fit: cover
|
|
||||||
|
|
||||||
table
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
overflow-x: hidden
|
|
||||||
border-collapse: collapse
|
|
||||||
|
|
||||||
tr
|
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
td
|
|
||||||
padding-bottom: 0.5rem
|
|
||||||
|
|
||||||
max-width: 0
|
|
||||||
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
vertical-align: top
|
|
||||||
|
|
||||||
> *
|
|
||||||
vertical-align: top
|
|
||||||
|
|
||||||
td:first-child
|
|
||||||
padding-right: 0.5rem
|
|
||||||
|
|
||||||
width: 50%
|
|
||||||
|
|
||||||
overflow: hidden
|
|
||||||
text-overflow: ellipsis
|
|
||||||
white-space: nowrap
|
|
||||||
td:last-child
|
|
||||||
width: 50%
|
|
||||||
|
|
||||||
white-space: normal
|
|
||||||
word-break: break-word
|
|
||||||
|
|
||||||
tr:last-of-type td
|
|
||||||
padding-bottom: 0
|
|
||||||
|
|
||||||
.img-colours
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
button
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 1.6rem
|
|
||||||
height: 1.6rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
border-radius: $rad-inner
|
|
||||||
border: none
|
|
||||||
|
|
||||||
i
|
|
||||||
font-size: 1rem
|
|
||||||
opacity: 0
|
|
||||||
transition: opacity 0.15s ease-in-out
|
|
||||||
|
|
||||||
&:hover i
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.img-groups
|
|
||||||
width: 100%
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
gap: 0.5rem
|
|
||||||
|
|
||||||
@media (max-width: 1100px)
|
|
||||||
.info-container
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
&.collapsed
|
|
||||||
left: unset
|
|
||||||
|
|
||||||
.info-container
|
|
||||||
background: transparent
|
|
|
@ -1,59 +0,0 @@
|
||||||
@import 'background'
|
|
||||||
@import 'info-tab'
|
|
||||||
@import 'image'
|
|
||||||
|
|
||||||
|
|
||||||
.image-grid
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
z-index: 3
|
|
||||||
|
|
||||||
.image-block
|
|
||||||
margin: 0 0 0 27rem
|
|
||||||
padding: 0.5rem
|
|
||||||
|
|
||||||
width: calc(100% - 27rem)
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
gap: 0
|
|
||||||
|
|
||||||
z-index: 3
|
|
||||||
transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
|
||||||
|
|
||||||
.pill-row
|
|
||||||
margin-top: 0.5rem
|
|
||||||
|
|
||||||
&.collapsed
|
|
||||||
.image-block
|
|
||||||
margin: 0
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
@media (max-width: 1100px)
|
|
||||||
.image-grid
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
.image-block
|
|
||||||
margin: 0
|
|
||||||
padding: 0.5rem 0.5rem 0 0.5rem
|
|
||||||
|
|
||||||
width: 100%
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
transition: margin 0s, width 0s
|
|
||||||
|
|
||||||
.pill-row
|
|
||||||
#fullscreenImage
|
|
||||||
display: none
|
|
||||||
|
|
||||||
|
|
|
@ -1,36 +1,20 @@
|
||||||
.navigation
|
nav
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 3.5rem
|
width: 3.5rem
|
||||||
height: 100%
|
height: 100%
|
||||||
height: 100dvh
|
height: 100dvh
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
justify-content: space-between
|
|
||||||
|
|
||||||
position: fixed
|
position: fixed
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
left: 0
|
||||||
|
|
||||||
background-color: RGB($bg-100)
|
background-color: transparent
|
||||||
color: RGB($fg-white)
|
color: inherit
|
||||||
|
|
||||||
z-index: 69
|
z-index: 69
|
||||||
|
|
||||||
.logo
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
width: 3.5rem
|
|
||||||
height: 3.5rem
|
|
||||||
min-height: 3.5rem
|
|
||||||
|
|
||||||
display: flex
|
|
||||||
flex-direction: row
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
.navigation-spacer
|
.navigation-spacer
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
|
@ -50,6 +34,7 @@
|
||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
|
color: inherit
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
@ -58,7 +43,7 @@
|
||||||
padding: 0.5rem
|
padding: 0.5rem
|
||||||
font-size: 1.3rem
|
font-size: 1.3rem
|
||||||
border-radius: $rad-inner
|
border-radius: $rad-inner
|
||||||
color: RGB($fg-white)
|
color: inherit
|
||||||
|
|
||||||
> .nav-pfp
|
> .nav-pfp
|
||||||
padding: 0.4rem
|
padding: 0.4rem
|
||||||
|
@ -115,25 +100,22 @@
|
||||||
left: 3.9rem
|
left: 3.9rem
|
||||||
|
|
||||||
&.selected
|
&.selected
|
||||||
> i
|
|
||||||
color: RGB($primary)
|
|
||||||
|
|
||||||
&::before
|
&::before
|
||||||
content: ''
|
content: ''
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
top: 3px
|
top: 3px
|
||||||
left: 0
|
left: 3px
|
||||||
|
|
||||||
width: 3px
|
width: 3px
|
||||||
height: calc(100% - 6px)
|
height: calc(100% - 6px)
|
||||||
|
|
||||||
background-color: RGB($primary)
|
background-color: currentColor
|
||||||
border-radius: $rad-inner
|
border-radius: $rad-inner
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
@media (max-width: $breakpoint)
|
||||||
.navigation
|
nav
|
||||||
width: 100vw
|
width: 100vw
|
||||||
height: 3.5rem
|
height: 3.5rem
|
||||||
|
|
||||||
|
@ -145,6 +127,8 @@
|
||||||
bottom: 0
|
bottom: 0
|
||||||
left: 0
|
left: 0
|
||||||
|
|
||||||
|
background-color: RGB($background)
|
||||||
|
|
||||||
> span
|
> span
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
|
|
@ -22,23 +22,22 @@
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
width: 450px
|
width: 24rem
|
||||||
height: auto
|
height: auto
|
||||||
|
|
||||||
position: fixed
|
position: fixed
|
||||||
top: 0.3rem
|
bottom: 0.3rem
|
||||||
right: 0.3rem
|
right: 0.3rem
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column-reverse
|
||||||
|
|
||||||
z-index: 621
|
z-index: 621
|
||||||
|
|
||||||
.sniffle__notification
|
.sniffle__notification
|
||||||
margin: 0 0 0.3rem 0
|
margin-top: 0.3rem
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
width: 450px
|
|
||||||
height: auto
|
height: auto
|
||||||
max-height: 100px
|
max-height: 100px
|
||||||
|
|
||||||
|
@ -56,7 +55,7 @@
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
overflow: hidden
|
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)
|
transition: opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
|
||||||
|
|
||||||
&::after
|
&::after
|
||||||
content: ""
|
content: ""
|
||||||
|
@ -89,10 +88,8 @@
|
||||||
&.hide
|
&.hide
|
||||||
margin: 0
|
margin: 0
|
||||||
max-height: 0
|
max-height: 0
|
||||||
|
|
||||||
opacity: 0
|
opacity: 0
|
||||||
transform: translateX(100%)
|
transform: translateX(100%)
|
||||||
|
|
||||||
transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
|
transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
|
||||||
|
|
||||||
.sniffle__notification-icon
|
.sniffle__notification-icon
|
||||||
|
@ -130,6 +127,7 @@
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
@media (max-width: $breakpoint)
|
||||||
.notifications
|
.notifications
|
||||||
|
bottom: 3.8rem
|
||||||
width: calc(100vw - 0.6rem)
|
width: calc(100vw - 0.6rem)
|
||||||
height: auto
|
height: auto
|
||||||
|
|
||||||
|
@ -138,7 +136,7 @@
|
||||||
|
|
||||||
&.hide
|
&.hide
|
||||||
opacity: 0
|
opacity: 0
|
||||||
transform: translateY(-5rem)
|
transform: translateY(1rem)
|
||||||
|
|
||||||
.sniffle__notification-time
|
.sniffle__notification-time
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
|
@ -18,10 +18,9 @@
|
||||||
@import "components/buttons/pill"
|
@import "components/buttons/pill"
|
||||||
@import "components/buttons/block"
|
@import "components/buttons/block"
|
||||||
|
|
||||||
@import "components/image-view/view"
|
@import "components/image-view"
|
||||||
@import "components/settings"
|
@import "components/settings"
|
||||||
|
|
||||||
// Reset
|
|
||||||
*
|
*
|
||||||
box-sizing: border-box
|
box-sizing: border-box
|
||||||
font-family: $font
|
font-family: $font
|
||||||
|
@ -37,66 +36,49 @@
|
||||||
::-webkit-scrollbar-thumb:hover
|
::-webkit-scrollbar-thumb:hover
|
||||||
background: RGB($fg-white)
|
background: RGB($fg-white)
|
||||||
|
|
||||||
html, body
|
html
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
||||||
min-height: 100vh
|
|
||||||
max-width: 100vw
|
|
||||||
|
|
||||||
background-color: RGB($fg-white)
|
|
||||||
|
|
||||||
scroll-behavior: smooth
|
scroll-behavior: smooth
|
||||||
overflow-x: hidden
|
|
||||||
|
|
||||||
.wrapper
|
body
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0 0 0 3.5rem
|
padding: 0 0 0 3.5rem
|
||||||
|
|
||||||
|
max-width: 100%
|
||||||
min-height: 100vh
|
min-height: 100vh
|
||||||
|
|
||||||
|
display: grid
|
||||||
|
grid-template-rows: auto 1fr auto
|
||||||
|
|
||||||
|
background-color: RGB($background)
|
||||||
|
color: RGB($foreground)
|
||||||
|
|
||||||
|
overflow-x: hidden
|
||||||
|
@media (max-width: $breakpoint)
|
||||||
|
body
|
||||||
|
padding: 0 0 3.5rem 0
|
||||||
|
|
||||||
|
main
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
|
position: relative
|
||||||
background-color: RGB($bg-bright)
|
background: RGBA($white, 1)
|
||||||
color: RGB($bg-100)
|
color: RGB($fg-black)
|
||||||
|
border-top-left-radius: $rad
|
||||||
.big-text
|
overflow: hidden
|
||||||
height: 20rem
|
@media (max-width: $breakpoint)
|
||||||
|
main
|
||||||
display: flex
|
border-top-left-radius: 0
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
color: RGB($bg-100)
|
|
||||||
|
|
||||||
h1
|
|
||||||
margin: 0 2rem
|
|
||||||
|
|
||||||
font-size: 4rem
|
|
||||||
font-weight: 900
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 2rem
|
|
||||||
|
|
||||||
max-width: 40rem
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 400
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.error-page
|
.error-page
|
||||||
width: 100%
|
min-height: 100%
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
justify-content: center
|
justify-content: center
|
||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
background-color: RGB($bg-bright)
|
|
||||||
|
|
||||||
h1
|
h1
|
||||||
margin: 0 2rem
|
margin: 0 2rem
|
||||||
|
|
||||||
|
@ -113,23 +95,8 @@ html, body
|
||||||
font-size: 1.25rem
|
font-size: 1.25rem
|
||||||
font-weight: 400
|
font-weight: 400
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
color: $fg-black
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
@media (max-width: $breakpoint)
|
||||||
.wrapper
|
|
||||||
padding: 0 0 3.5rem 0
|
|
||||||
|
|
||||||
.big-text
|
|
||||||
height: calc(75vh - 3.5rem)
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 3.5rem
|
|
||||||
|
|
||||||
.error-page
|
.error-page
|
||||||
height: calc(100vh - 3.5rem)
|
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: 4.5rem
|
font-size: 4.5rem
|
||||||
|
|
||||||
|
|
|
@ -37,6 +37,11 @@ $font: 'Rubik', sans-serif
|
||||||
$breakpoint: 800px
|
$breakpoint: 800px
|
||||||
|
|
||||||
|
|
||||||
|
// New variables, Slowly moving over to them because I suck at planning ahead and coding reeee
|
||||||
|
$background: var(--bg-100)
|
||||||
|
$foreground: var(--fg-white)
|
||||||
|
|
||||||
|
|
||||||
\:root
|
\:root
|
||||||
--bg-dim: 16, 16, 16
|
--bg-dim: 16, 16, 16
|
||||||
--bg-bright: 232, 227, 227
|
--bg-bright: 232, 227, 227
|
||||||
|
@ -66,7 +71,7 @@ $breakpoint: 800px
|
||||||
--success: var(--green)
|
--success: var(--green)
|
||||||
--info: var(--blue)
|
--info: var(--blue)
|
||||||
|
|
||||||
--rad: 8px
|
--rad: 0.5rem
|
||||||
--rad-inner: calc(var(--rad) / 2)
|
--rad-inner: calc(var(--rad) / 2)
|
||||||
|
|
||||||
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
|
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
|
||||||
|
|
Loading…
Reference in a new issue