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

Change navbar colour in image groups

Browse source
This commit is contained in:
Michał Gdula 2023-04-02 21:15:51 +00:00
parent 45c5a0f682
commit c7e38dfcfb
5 changed files with 78 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,32 +1,43 @@
.banner
width: 100%
height: 50vh
height: 30rem
position: relative
background-color: RGB($bg-300)
color: RGB($fg-white)
overflow: hidden
transition: opacity 0.3s ease-in-out
&::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)
img
position: absolute
top: 0
left: 0
inset: 0
width: 100%
height: 100%
background-color: RGB($bg-300)
background-color: inherit
object-fit: cover
object-position: center center
.banner-filter
position: absolute
top: 0
left: 0
inset: 0
width: 100%
height: 100%
@ -39,9 +50,10 @@
padding: 1rem
width: 100%
height: inherit
height: 100%
position: relative
position: absolute
inset: 0
display: flex
flex-direction: column
@ -49,24 +61,26 @@
z-index: +2
h1
h1, p
margin: 0
padding: 0
width: 100%
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
text-align: left
h1
font-size: 6.9rem
font-weight: 800
text-align: left
color: RGB($primary)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
&.small
height: 3.5rem
@ -81,18 +95,21 @@
gap: 1rem
h1
width: auto
padding-bottom: 0.25rem
font-size: 1.5rem
text-align: left
p
width: auto
font-size: 0.9rem
text-align: left
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
width: 100%
height: 17rem
&::after
display: none
.banner-content
padding: 0.5rem
@ -109,11 +126,12 @@
font-size: 1.1rem
text-align: center
&.small .banner-content
justify-content: center
&.small
.banner-content
justify-content: center
h1
text-align: center
h1
text-align: center
p
display: none
p
display: none

10
gallery/themes/default/components/gallery.sass
View file

@ -16,7 +16,7 @@
position: relative
border-radius: $rad
border-radius: $rad-inner
box-sizing: border-box
overflow: hidden
@ -26,7 +26,8 @@
padding: 0.5rem
width: 100%
height: 30%
min-height: 30%
height: auto
position: absolute
left: 0
@ -104,7 +105,7 @@
position: relative
border-radius: $rad
border-radius: $rad-inner
box-sizing: border-box
overflow: hidden
@ -114,7 +115,8 @@
padding: 0.5rem
width: 100%
height: 30%
min-height: 30%
height: auto
position: absolute
left: 0

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

@ -61,12 +61,12 @@
width: 2.5rem
height: 2.5rem
color: RGB($fg-white)
border-radius: $rad-inner
color: RGB($fg-white)
transition: color 0.2s ease-out, transform 0.2s ease-out
span
.tool-tip
margin: 0
padding: 0.35rem 0.7rem
@ -89,7 +89,7 @@
pointer-events: none
svg
> svg
margin: 0
font-size: 1rem
@ -107,7 +107,7 @@
&:hover
> svg
background: RGB($bg-300)
background: RGBA($fg-white, 0.1)
span
opacity: 1
@ -129,7 +129,7 @@
height: calc(100% - 6px)
background-color: RGB($primary)
border-radius: 0 $rad-inner $rad-inner 0
border-radius: $rad-inner
@media (max-width: $breakpoint)
.navigation
@ -158,7 +158,7 @@
height: 3rem
min-height: 3rem
span
.tool-tip
display: none
&.selected::before
@ -167,6 +167,4 @@
left: 0
width: 100%
height: 3px
border-radius: $rad-inner
height: 3px