failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-01-29 01:28:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up Styling

Browse source
This commit is contained in:
Michał 2023-05-29 10:41:08 +00:00
parent bc2ed9e2be
commit b30e336ae6
13 changed files with 320 additions and 472 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
onlylegs/static/sass/components/banner.sass
View file

@ -20,26 +20,10 @@
background-color: RGB($fg-black)
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
height: 30rem
max-height: 69vh
background-color: RGB($bg-300)
img
position: absolute
inset: 0
@ -125,7 +109,6 @@
.banner-small
height: 3.5rem
background-color: RGB($bg-100)
.banner-content
padding: 0 0.5rem

4
onlylegs/static/sass/components/buttons/block.sass
View file

@ -59,6 +59,10 @@
&.black
@include btn-block($black)
&.disabled, &:disabled
color: RGB($fg-dim)
cursor: unset
.input-checkbox
padding: 0
display: flex

4
onlylegs/static/sass/components/buttons/pill.sass
View file

@ -68,6 +68,10 @@
color: RGB($primary)
&.disabled, &:disabled
color: RGB($fg-dim)
cursor: unset
.pill__critical
color: RGB($critical)

4
onlylegs/static/sass/components/gallery.sass
View file

@ -222,3 +222,7 @@
@media (max-width: 800px)
.gallery-grid
grid-template-columns: auto auto auto
.gallery-item
margin: 0.35rem
position: relative

260
onlylegs/static/sass/components/image-view.sass Normal file
View 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

42
onlylegs/static/sass/components/image-view/background.sass
View file

@ -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

28
onlylegs/static/sass/components/image-view/image.sass
View file

@ -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

232
onlylegs/static/sass/components/image-view/info-tab.sass
View file

@ -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

59
onlylegs/static/sass/components/image-view/view.sass
View file

@ -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

36
onlylegs/static/sass/components/navigation.sass
View file

@ -1,36 +1,20 @@
.navigation
margin: 0
padding: 0
nav
width: 3.5rem
height: 100%
height: 100dvh
display: flex
flex-direction: column
justify-content: space-between
position: fixed
top: 0
left: 0
background-color: RGB($bg-100)
color: RGB($fg-white)
background-color: transparent
color: inherit
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
height: 100%
@ -50,6 +34,7 @@
align-items: center
background-color: transparent
color: inherit
border: none
text-decoration: none
@ -58,7 +43,7 @@
padding: 0.5rem
font-size: 1.3rem
border-radius: $rad-inner
color: RGB($fg-white)
color: inherit
> .nav-pfp
padding: 0.4rem
@ -115,25 +100,22 @@
left: 3.9rem
&.selected
> i
color: RGB($primary)
&::before
content: ''
display: block
position: absolute
top: 3px
left: 0
left: 3px
width: 3px
height: calc(100% - 6px)
background-color: RGB($primary)
background-color: currentColor
border-radius: $rad-inner
@media (max-width: $breakpoint)
.navigation
nav
width: 100vw
height: 3.5rem
@ -145,6 +127,8 @@
bottom: 0
left: 0
background-color: RGB($background)
> span
display: none

16
onlylegs/static/sass/components/notification.sass
View file

@ -22,23 +22,22 @@
margin: 0
padding: 0
width: 450px
width: 24rem
height: auto
position: fixed
top: 0.3rem
bottom: 0.3rem
right: 0.3rem
display: flex
flex-direction: column
flex-direction: column-reverse
z-index: 621
.sniffle__notification
margin: 0 0 0.3rem 0
margin-top: 0.3rem
padding: 0
width: 450px
height: auto
max-height: 100px
@ -56,7 +55,7 @@
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)
transition: opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&::after
content: ""
@ -89,10 +88,8 @@
&.hide
margin: 0
max-height: 0
opacity: 0
transform: translateX(100%)
transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
.sniffle__notification-icon
@ -130,6 +127,7 @@
@media (max-width: $breakpoint)
.notifications
bottom: 3.8rem
width: calc(100vw - 0.6rem)
height: auto
@ -138,7 +136,7 @@
&.hide
opacity: 0
transform: translateY(-5rem)
transform: translateY(1rem)
.sniffle__notification-time
width: 100%

83
onlylegs/static/sass/style.sass
View file

@ -18,10 +18,9 @@
@import "components/buttons/pill"
@import "components/buttons/block"
@import "components/image-view/view"
@import "components/image-view"
@import "components/settings"
// Reset
*
box-sizing: border-box
font-family: $font
@ -37,66 +36,49 @@
::-webkit-scrollbar-thumb:hover
background: RGB($fg-white)
html, body
html
margin: 0
padding: 0
min-height: 100vh
max-width: 100vw
background-color: RGB($fg-white)
scroll-behavior: smooth
overflow-x: hidden
.wrapper
body
margin: 0
padding: 0 0 0 3.5rem
max-width: 100%
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
flex-direction: column
background-color: RGB($bg-bright)
color: RGB($bg-100)
.big-text
height: 20rem
display: flex
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
position: relative
background: RGBA($white, 1)
color: RGB($fg-black)
border-top-left-radius: $rad
overflow: hidden
@media (max-width: $breakpoint)
main
border-top-left-radius: 0
.error-page
width: 100%
height: 100vh
min-height: 100%
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: RGB($bg-bright)
h1
margin: 0 2rem
@ -113,23 +95,8 @@ html, body
font-size: 1.25rem
font-weight: 400
text-align: center
color: $fg-black
@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
height: calc(100vh - 3.5rem)
h1
font-size: 4.5rem

7
onlylegs/static/sass/variables.sass
View file

@ -37,6 +37,11 @@ $font: 'Rubik', sans-serif
$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
--bg-dim: 16, 16, 16
--bg-bright: 232, 227, 227
@ -66,7 +71,7 @@ $breakpoint: 800px
--success: var(--green)
--info: var(--blue)
--rad: 8px
--rad: 0.5rem
--rad-inner: calc(var(--rad) / 2)
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)