mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Change navbar colour in image groups
This commit is contained in:
parent
45c5a0f682
commit
c7e38dfcfb
5 changed files with 78 additions and 46 deletions
|
|
@ -3,6 +3,9 @@
|
|||
{% block head %}
|
||||
<style>
|
||||
{% if images %}
|
||||
.banner::after {
|
||||
box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }});
|
||||
}
|
||||
.banner-content p {
|
||||
color: {{ text_colour }} !important;
|
||||
}
|
||||
|
|
@ -18,6 +21,17 @@
|
|||
background: linear-gradient(180deg, rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.8), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.5)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
background-color: rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}) !important;
|
||||
}
|
||||
.navigation-item > svg {
|
||||
fill: {{ text_colour }} !important;
|
||||
color: {{ text_colour }} !important;
|
||||
}
|
||||
.navigation-item.selected::before {
|
||||
background-color: {{ text_colour }} !important;
|
||||
}
|
||||
{% endif %}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -58,11 +58,11 @@
|
|||
<div class="wrapper">
|
||||
|
||||
<div class="navigation">
|
||||
<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">
|
||||
<!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
|
||||
|
||||
<a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H80A16,16,0,0,0,64,48V64H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V192h16a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM80,48H208v69.38l-16.7-16.7a16,16,0,0,0-22.62,0L93.37,176H80Zm96,160H48V80H64v96a16,16,0,0,0,16,16h96ZM104,88a16,16,0,1,1,16,16A16,16,0,0,1,104,88Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Home
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
<a href="{{url_for('group.groups')}}" class="navigation-item {% block nav_groups %}{% endblock %}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64l27.73,20.8a16.12,16.12,0,0,0,9.6,3.2H200v16H146.43a16,16,0,0,0-8.88,2.69l-20,13.31H69.42a15.94,15.94,0,0,0-14.86,10.06L40,166.46V64Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Groups
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
{% if g.user %}
|
||||
<button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M74.34,77.66a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,0l48,48a8,8,0,0,1-11.32,11.32L136,43.31V128a8,8,0,0,1-16,0V43.31L85.66,77.66A8,8,0,0,1,74.34,77.66ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16h68a4,4,0,0,1,4,4v3.46c0,13.45,11,24.79,24.46,24.54A24,24,0,0,0,152,128v-4a4,4,0,0,1,4-4h68A16,16,0,0,1,240,136Zm-40,32a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Upload
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
{% if g.user %}
|
||||
<a href="{{url_for('gallery.profile')}}" class="navigation-item {% block nav_profile %}{% endblock %}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M231.73,221.94A8,8,0,0,1,224,232H160A8,8,0,0,1,152.27,222a40,40,0,0,1,17.11-23.33,32,32,0,1,1,45.24,0A40,40,0,0,1,231.73,221.94ZM216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16h80a8,8,0,0,0,0-16H40V64H93.33l27.74,20.8a16.12,16.12,0,0,0,9.6,3.2H216v32a8,8,0,0,0,16,0V88A16,16,0,0,0,216,72Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Profile
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
<a href="{{url_for('settings.general')}}" class="navigation-item {% block nav_settings %}{% endblock %}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,130.16q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Settings
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
{% else %}
|
||||
<button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M141.66,133.66l-40,40A8,8,0,0,1,88,168V136H24a8,8,0,0,1,0-16H88V88a8,8,0,0,1,13.66-5.66l40,40A8,8,0,0,1,141.66,133.66ZM192,32H136a8,8,0,0,0,0,16h56V208H136a8,8,0,0,0,0,16h56a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Z"></path></svg>
|
||||
<span>
|
||||
<span class="tool-tip">
|
||||
Login
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Add table
Add a link
Reference in a new issue