Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix new styling errors

Browse source 
Fix error page
Update Notification styling
This commit is contained in:
Michał Gdula 2023-03-25 20:24:38 +00:00
parent 824c849eaa
commit cdb3836dab
16 changed files with 154 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

33
gallery/themes/default/components/banner.sass
View file

@ -68,6 +68,28 @@
line-height: 1
text-align: left
&.small
height: 3.5rem
background-color: RGB($bg-100)
.banner-content
padding: 0.5rem
flex-direction: row
justify-content: flex-start
align-items: center
gap: 1rem
h1
padding-bottom: 0.25rem
font-size: 1.5rem
text-align: left
p
font-size: 0.9rem
text-align: left
@media (max-width: $breakpoint)
.banner
width: 100vw
@ -86,4 +108,13 @@
p
font-size: 1.1rem
text-align: center
text-align: center
&.small .banner-content
justify-content: center
h1
text-align: center
p
display: none

5
gallery/themes/default/components/buttons/block.sass
View file

@ -91,7 +91,7 @@
border-color: RGBA($white, 0.3)
&:focus
border-color: RGBA($primary, 0.3)
border-color: RGB($primary)
outline: none
&.black
@ -134,6 +134,9 @@
background-color: RGBA($white, 0.2)
color: RGB($white)
&:focus-visible
outline: 2px solid RGBA($white, 0.3)
&.active
background-color: RGBA($primary, 0.2)
color: RGB($primary)

2
gallery/themes/default/components/buttons/info-button.sass
View file

@ -13,7 +13,7 @@
justify-content: center
align-items: center
background-color: RGB($bg-200)
background-color: RGB($bg-300)
color: RGB($fg-white)
border-radius: $rad
border: none

20
gallery/themes/default/components/buttons/pill.sass
View file

@ -47,14 +47,18 @@
.tool-tip
opacity: 1
top: -2.7rem
top: -2.3rem
transform: translateX(calc(-50% + 1.25rem ))
.pill__critical
color: RGB($critical)
span
color: RGB($critical)
background: RGB($critical)
color: RGB($fg-white)
svg
color: RGB($critical)
&:hover
color: RGB($fg-white)
@ -70,7 +74,7 @@
.tool-tip
margin: 0
padding: 0.5rem 0.75rem
padding: 0.35rem 0.7rem
width: auto
@ -81,8 +85,8 @@
left: 0
transform: translateX(calc(-50% + 1.25rem ))
font-size: 1rem
font-weight: 600
font-size: 0.9rem
font-weight: 700
background-color: #000000
color: RGB($fg-white)
@ -107,4 +111,8 @@
bottom: -0.46rem
transform: translateX(-50%)
color: #000000
color: #000000
@media (max-width: $breakpoint)
.tool-tip
display: none

2
gallery/themes/default/components/buttons/top-of-page.sass
View file

@ -13,7 +13,7 @@
justify-content: center
align-items: center
background-color: RGB($bg-200)
background-color: RGB($bg-300)
color: RGB($fg-white)
border-radius: $rad
border: none

49
gallery/themes/default/components/elements/notification.sass
View file

@ -33,7 +33,7 @@
position: relative
background-color: RGB($bg-100)
background-color: RGB($bg-300)
border-radius: $rad-inner
color: RGB($fg-white)
opacity: 0
@ -44,6 +44,28 @@
transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&.success
@include notification($success)
&.warning
@include notification($warning)
&.critical
@include notification($critical)
&.info
@include notification($info)
&.show
opacity: 1
transform: scale(1)
&.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
margin: 0
padding: 1rem
@ -93,34 +115,17 @@
animation: notificationTimeout 5.1s linear
@each $name, $colour in (success: $success, error: $critical, warning: $warning, info: $info)
.sniffle__notification--#{$name}
@include notification($colour)
.sniffle__notification-show
opacity: 1
transform: scale(1)
.sniffle__notification--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
@media (max-width: $breakpoint)
.notifications
width: calc(100vw - 0.6rem)
height: auto
&.hide
opacity: 0
transform: translateY(-5rem)
.sniffle__notification
width: 100%
.sniffle__notification-time
width: 100%
.sniffle__notification--hide
opacity: 0
transform: translateY(-5rem)

5
gallery/themes/default/components/elements/upload-panel.sass
View file

@ -18,7 +18,7 @@
margin: 0
padding: 0
font-size: 1.75rem
font-size: 1.5rem
font-weight: 700
color: RGB($primary)
@ -183,13 +183,14 @@
.upload-panel
width: 100%
height: calc(100vh - 3.5rem)
height: calc(100dvh - 3.5rem)
left: 0
bottom: 3.5rem
.container
width: 100%
height: calc(100% - 10rem)
height: 95%
left: 0
bottom: calc(-100vh + 3.5rem)

6
gallery/themes/default/components/image-view/info-tab.sass
View file

@ -6,7 +6,7 @@
flex-direction: column
gap: 0
background-color: RGB($bg-100)
background-color: RGB($bg-200)
overflow-y: auto
@ -19,7 +19,7 @@
position: relative
background-color: RGB($bg-100)
background-color: RGB($bg-200)
border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
@ -65,6 +65,8 @@
top: 0
z-index: +1
background-color: RGB($bg-200)
svg
margin: 0
padding: 0

2
gallery/themes/default/components/navigation.sass
View file

@ -78,7 +78,7 @@
transform: translateY(-50%)
font-size: 0.9rem
font-weight: 600
font-weight: 700
background-color: #000000
color: RGB($fg-white)