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

Switch to CSS vars for variables

Browse source
This commit is contained in:
Michał Gdula 2023-03-25 16:22:32 +00:00
parent 5dab4fb53d
commit b862c74bbe
22 changed files with 263 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

2
gallery/templates/groups/group.html
View file

@ -1,5 +1,5 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block nav_groups %}navigation-item__selected{% endblock %} {% block nav_groups %}selected{% endblock %}
{% block content %} {% block content %}
<div class="banner"> <div class="banner">
{% if images %} {% if images %}

2
gallery/templates/groups/list.html
View file

@ -1,5 +1,5 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block nav_groups %}navigation-item__selected{% endblock %} {% block nav_groups %}selected{% endblock %}
{% block content %} {% block content %}
<div class="banner"> <div class="banner">
<div class="banner-content"> <div class="banner-content">

2
gallery/templates/index.html
View file

@ -1,6 +1,6 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block nav_home %}navigation-item__selected{% endblock %} {% block nav_home %}selected{% endblock %}
{% block content %} {% block content %}
<div class="banner"> <div class="banner">

5
gallery/templates/layout.html
View file

@ -33,7 +33,8 @@
<script type="text/javascript" src="{{ ASSET_URL }}"></script> <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %} {% endassets %}
{% block head %}{% endblock %} <style>
</style>
</head> </head>
<body> <body>
<div class="notifications"></div> <div class="notifications"></div>
@ -89,7 +90,7 @@
</button> </button>
{% endif %} {% endif %}
<span></span> <span class="navigation-spacer"></span>
{% if g.user %} {% if g.user %}
<a href="{{url_for('gallery.profile')}}" class="navigation-item {% block nav_profile %}{% endblock %}"> <a href="{{url_for('gallery.profile')}}" class="navigation-item {% block nav_profile %}{% endblock %}">

2
gallery/templates/settings/settings_layout.html
View file

@ -1,6 +1,6 @@
{% extends 'layout.html' %} {% extends 'layout.html' %}
{% block nav_settings %}navigation-item__selected{% endblock %} {% block nav_settings %}selected{% endblock %}
{% block content %} {% block content %}
<div class="banner"> <div class="banner">
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/> <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>

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

@ -4,8 +4,8 @@
position: relative position: relative
background-color: $black background-color: RGB($bg-300)
color: $white color: RGB($fg-white)
overflow: hidden overflow: hidden
transition: opacity 0.3s ease-in-out transition: opacity 0.3s ease-in-out
@ -18,7 +18,7 @@
width: 100% width: 100%
height: 100% height: 100%
background-color: $black2 background-color: RGB($bg-200)
object-fit: cover object-fit: cover
object-position: center center object-position: center center
@ -31,7 +31,7 @@
width: 100% width: 100%
height: 100% height: 100%
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0)) background: linear-gradient(to right, RGB($primary), transparent)
z-index: +1 z-index: +1
@ -57,7 +57,7 @@
font-weight: 800 font-weight: 800
text-align: left text-align: left
color: $primary color: RGB($primary)
p p
margin: 0 margin: 0

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

@ -1,13 +1,12 @@
@mixin btn-block($color) @mixin btn-block($color)
background-color: rgba($color, 0) color: RGB($color)
color: $color
&:hover &:hover
background-color: rgba($color, 0.2) background-color: RGBA($color, 0.1)
color: $color color: RGB($color)
&:focus-visible &:focus-visible
outline: 2px solid rgba($color, 0.5) outline: 2px solid RGBA($color, 0.3)
.btn-block .btn-block
padding: 0.5rem 1rem padding: 0.5rem 1rem
@ -26,20 +25,19 @@
font-weight: 600 font-weight: 600
text-align: center text-align: center
background-color: rgba($white, 0) background-color: transparent
color: $white color: RGB($white)
border: none border: none
border-radius: $rad-inner border-radius: $rad-inner
cursor: pointer cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:hover &:hover
background-color: rgba($white, 0.2) background-color: RGBA($white, 0.1)
&:focus-visible &:focus-visible
outline: 2px solid rgba($white, 0.5) outline: 2px solid RGBA($white, 0.3)
&.primary &.primary
@include btn-block($primary) @include btn-block($primary)
@ -76,24 +74,24 @@
font-weight: 600 font-weight: 600
text-align: left text-align: left
background-color: rgba($white, 0.1) background-color: RGBA($white, 0.1)
color: $white color: RGB($white)
border: none border: none
border-bottom: 3px solid rgba($white, 0.1) border-bottom: 3px solid RGBA($white, 0.1)
border-radius: $rad-inner border-radius: $rad-inner
cursor: pointer cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:not(:focus):not([value=""]):not(:placeholder-shown) &:not(:focus):not([value=""]):not(:placeholder-shown)
border-color: rgba($white, 0.3) border-color: RGBA($white, 0.3)
&:hover &:hover
border-color: rgba($white, 0.3) border-color: RGBA($white, 0.3)
&:focus &:focus
border-color: $primary border-color: RGBA($primary, 0.3)
outline: none outline: none
&.black &.black
@ -117,8 +115,8 @@
font-weight: 600 font-weight: 600
text-align: center text-align: center
background-color: rgba($white, 0.1) background-color: RGBA($white, 0.1)
color: $white color: RGB($white)
border: none border: none
border-radius: $rad-inner border-radius: $rad-inner
@ -133,20 +131,20 @@
cursor: pointer cursor: pointer
&:hover &:hover
background-color: rgba($white, 0.2) background-color: RGBA($white, 0.2)
color: $white color: RGB($white)
&.active &.active
background-color: rgba($primary, 0.2) background-color: RGBA($primary, 0.2)
color: $primary color: RGB($primary)
&.edging &.edging
background-color: rgba($white, 0.2) background-color: RGBA($white, 0.2)
color: $white color: RGB($white)
input input
display: none // So it doesnt get in the way of the drop as that breaks things display: none // So it doesnt get in the way of the drop as that breaks things
&.error &.error
background-color: rgba($critical, 0.2) background-color: RGBA($critical, 0.2)
color: $critical color: RGB($critical)

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

@ -13,8 +13,8 @@
justify-content: center justify-content: center
align-items: center align-items: center
background-color: $black2 background-color: RGB($bg-200)
color: $white color: RGB($fg-white)
border-radius: $rad border-radius: $rad
border: none border: none
opacity: 0 opacity: 0
@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1) transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover &:hover
color: $info color: RGB($info)
svg svg
margin: 0.5rem margin: 0.5rem

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

@ -16,7 +16,7 @@
display: flex display: flex
background-color: $black background-color: RGB($bg-100)
border-radius: $rad border-radius: $rad
.pill-item .pill-item
@ -34,7 +34,7 @@
border: none border: none
background-color: transparent background-color: transparent
color: $white color: RGB($fg-white)
svg svg
width: 1.25rem width: 1.25rem
@ -43,7 +43,7 @@
&:hover &:hover
cursor: pointer cursor: pointer
color: $primary color: RGB($primary)
.tool-tip .tool-tip
opacity: 1 opacity: 1
@ -51,22 +51,22 @@
transform: translateX(calc(-50% + 1.25rem )) transform: translateX(calc(-50% + 1.25rem ))
.pill__critical .pill__critical
color: $critical color: RGB($critical)
span span
color: $critical color: RGB($critical)
&:hover &:hover
color: $white color: RGB($fg-white)
.pill__info .pill__info
color: $info color: RGB($info)
span span
color: $info color: RGB($info)
&:hover &:hover
color: $white color: RGB($fg-white)
.tool-tip .tool-tip
margin: 0 margin: 0
@ -85,7 +85,7 @@
font-weight: 600 font-weight: 600
background-color: #000000 background-color: #000000
color: $white color: RGB($fg-white)
opacity: 0 opacity: 0
border-radius: $rad-inner border-radius: $rad-inner

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

@ -13,8 +13,8 @@
justify-content: center justify-content: center
align-items: center align-items: center
background-color: $black2 background-color: RGB($bg-200)
color: $white color: RGB($fg-white)
border-radius: $rad border-radius: $rad
border: none border: none
opacity: 0 opacity: 0
@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1) transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover &:hover
color: $primary color: RGB($primary)
svg svg
margin: 0.5rem margin: 0.5rem

33
gallery/themes/default/components/elements/labels.sass Normal file
View file

@ -0,0 +1,33 @@
.label
padding: 0.4rem 0.7rem
display: block
position: absolute
font-size: 0.9rem
font-weight: 600
background-color: RGB($bg-dim)
color: RGB($fg-white)
border-radius: $rad-inner
opacity: 0
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
z-index: 999
svg
margin: 0
font-size: 1rem
width: 0.75rem
height: 0.75rem
display: block
position: absolute
top: 50%
left: -0.45rem
transform: translateY(-50%)
color: RGB($bg-dim)

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

@ -1,8 +1,8 @@
@mixin notification($color) @mixin notification($color)
color: $color color: RGB($color)
.sniffle__notification-time .sniffle__notification-time
background-color: $color background-color: RGB($color)
.notifications .notifications
margin: 0 margin: 0
@ -33,9 +33,9 @@
position: relative position: relative
background-color: $black background-color: RGB($bg-100)
border-radius: $rad-inner border-radius: $rad-inner
color: $white color: RGB($fg-white)
opacity: 0 opacity: 0
transform: scale(0.8) transform: scale(0.8)
@ -55,7 +55,7 @@
justify-content: center justify-content: center
align-items: center align-items: center
background-color: $black2 background-color: RGB($bg-200)
svg svg
width: 1.25rem width: 1.25rem
@ -89,7 +89,7 @@
bottom: 0px bottom: 0px
left: 0px left: 0px
background-color: $white background-color: RGB($fg-white)
animation: notificationTimeout 5.1s linear animation: notificationTimeout 5.1s linear

16
gallery/themes/default/components/elements/pop-up.sass
View file

@ -7,7 +7,7 @@
display: none display: none
background-color: rgba($black, 0.8) background-color: $bg-transparent
opacity: 0 opacity: 0
z-index: 101 z-index: 101
@ -38,7 +38,7 @@
display: flex display: flex
flex-direction: column flex-direction: column
background-color: $black background-color: RGB($bg-100)
border-radius: $rad border-radius: $rad
overflow: hidden overflow: hidden
@ -73,7 +73,7 @@
font-weight: 800 font-weight: 800
text-align: center text-align: center
color: $white color: RGB($fg-white)
p p
margin: 0 margin: 0
@ -84,7 +84,7 @@
font-weight: 500 font-weight: 500
text-align: center text-align: center
color: $white color: RGB($fg-white)
svg svg
width: 1rem width: 1rem
@ -99,7 +99,7 @@
text-align: center text-align: center
line-height: 1 line-height: 1
color: $primary color: RGB($primary)
cursor: pointer cursor: pointer
text-decoration: none text-decoration: none
@ -133,7 +133,7 @@
.pop-up-controlls .pop-up-controlls
margin: 0 margin: 0
padding: 0.5rem padding: 0.25rem
width: 100% width: 100%
height: auto height: auto
@ -141,9 +141,9 @@
display: flex display: flex
flex-direction: row flex-direction: row
justify-content: flex-end justify-content: flex-end
gap: 0.5rem gap: 0.25rem
background-color: $black2 background-color: RGB($bg-200)
&.active &.active
opacity: 1 opacity: 1

4
gallery/themes/default/components/elements/tags.sass
View file

@ -13,8 +13,8 @@
text-decoration: none text-decoration: none
border-radius: $rad-inner border-radius: $rad-inner
background-color: $primary background-color: RGB($primary)
color: $black color: RGB($bg-100)
border: none border: none
cursor: pointer cursor: pointer

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

@ -8,7 +8,7 @@
width: calc(100% - 3.5rem) width: calc(100% - 3.5rem)
height: 100vh height: 100vh
background-color: rgba($black, 0) background-color: transparent
overflow: hidden overflow: hidden
z-index: 68 z-index: 68
@ -21,7 +21,7 @@
font-size: 1.75rem font-size: 1.75rem
font-weight: 700 font-weight: 700
color: $primary color: RGB($primary)
p p
margin: 0 margin: 0
@ -30,7 +30,7 @@
font-size: 1rem font-size: 1rem
font-weight: 500 font-weight: 500
color: $white color: RGB($fg-white)
form form
margin: 0 margin: 0
@ -71,7 +71,7 @@
flex-direction: column flex-direction: column
gap: 1rem gap: 1rem
background-color: $black background-color: RGB($bg-200)
opacity: 0 opacity: 0
z-index: +2 z-index: +2
@ -98,7 +98,7 @@
align-items: center align-items: center
gap: 0.5rem gap: 0.5rem
background-color: $black2 background-color: RGB($bg-200)
border-radius: $rad border-radius: $rad
overflow: hidden overflow: hidden
@ -121,7 +121,7 @@
width: 100% width: 100%
height: 100% height: 100%
background-image: linear-gradient(to right, rgba($black, 0.8), rgba($black, 0)) background-image: linear-gradient(to right, RGB($bg-100), transparent)
.job__status .job__status
margin: 0 margin: 0
@ -134,7 +134,7 @@
font-size: 1rem font-size: 1rem
font-weight: 600 font-weight: 600
color: $white color: RGB($fg-white)
z-index: +3 z-index: +3
@ -148,7 +148,7 @@
bottom: 0 bottom: 0
left: -100% left: -100%
background-color: $primary background-color: RGB($primary)
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
@ -157,23 +157,23 @@
&.critical &.critical
.job__status, .progress .job__status, .progress
color: $critical color: RGB($critical)
&.success &.success
.job__status .job__status
color: $success color: RGB($success)
.progress .progress
height: 0 height: 0
animation: none animation: none
&.warning &.warning
.job__status, .progress .job__status, .progress
color: $warning color: RGB($warning)
&.critical, &.success, &.warning &.critical, &.success, &.warning
.progress .progress
height: 0 height: 0
&.open &.open
background-color: rgba($black, 0.5) background-color: $bg-transparent
.container .container
left: 0 left: 0

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

@ -36,12 +36,11 @@
flex-direction: column flex-direction: column
justify-content: flex-end justify-content: flex-end
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8)) background-image: linear-gradient(to top, $bg-transparent, transparent)
z-index: +1 z-index: +1
opacity: 0 // hide opacity: 0 // hide
transform: scale(1.05) // scale up
transition: all 0.3s cubic-bezier(.79, .14, .15, .86) transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
.image-title .image-title
@ -50,7 +49,7 @@
font-size: 1rem font-size: 1rem
font-weight: 600 font-weight: 600
color: $white color: RGB($fg-white)
text-overflow: ellipsis text-overflow: ellipsis
overflow: hidden overflow: hidden
@ -64,7 +63,7 @@
font-size: 0.8rem font-size: 0.8rem
font-weight: 500 font-weight: 500
color: $white color: RGB($fg-white)
text-overflow: ellipsis text-overflow: ellipsis
overflow: hidden overflow: hidden
@ -82,7 +81,7 @@
object-fit: cover object-fit: cover
object-position: center object-position: center
background-color: $white background-color: RGB($fg-white)
transform: scale(1.05) transform: scale(1.05)
transition: all 0.3s cubic-bezier(.79, .14, .15, .86) transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
@ -96,7 +95,6 @@
.image-filter .image-filter
bottom: 0 bottom: 0
opacity: 1 opacity: 1
transform: scale(1)
.image-title, .image-title,
.image-subtitle .image-subtitle

11
gallery/themes/default/components/image-view/background.sass
View file

@ -6,11 +6,10 @@
top: 0 top: 0
left: 0 left: 0
background-color: $white background-color: RGB($fg-white)
// background-image: linear-gradient(to right, RGB($bg-200) 15%, RGB($bg-400) 35%, RGB($bg-200) 50%)
background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%) // background-size: 1000px 640px
background-size: 1000px 640px // animation: imgLoading 1.8s linear infinite forwards
animation: imgLoading 1.8s linear infinite forwards
user-select: none user-select: none
overflow: hidden overflow: hidden
@ -24,7 +23,7 @@
width: 100% width: 100%
height: 100% height: 100%
background-color: $white background-color: RGB($fg-white)
filter: blur(1rem) filter: blur(1rem)
transform: scale(1.1) transform: scale(1.1)

2
gallery/themes/default/components/image-view/fullscreen.sass
View file

@ -13,7 +13,7 @@
display: none display: none
opacity: 0 // hide opacity: 0 // hide
background-color: rgba($black, 0.8) background-color: $bg-transparent
z-index: 21 z-index: 21
box-sizing: border-box box-sizing: border-box

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

@ -4,9 +4,9 @@
display: flex display: flex
flex-direction: column flex-direction: column
gap: 0.5rem gap: 0
background-color: $black background-color: RGB($bg-100)
overflow-y: auto overflow-y: auto
@ -19,7 +19,7 @@
position: relative position: relative
background-color: $black background-color: RGB($bg-100)
border-radius: $rad border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86) transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
@ -42,7 +42,7 @@
top: 0.6rem top: 0.6rem
right: 0.6rem right: 0.6rem
color: $primary color: RGB($primary)
z-index: +2 z-index: +2
@ -65,8 +65,6 @@
top: 0 top: 0
z-index: +1 z-index: +1
background: $black2
svg svg
margin: 0 margin: 0
padding: 0 padding: 0
@ -74,16 +72,16 @@
width: 1.25rem width: 1.25rem
height: 1.25rem height: 1.25rem
fill: $primary fill: RGB($primary)
h2 h2
margin: 0 margin: 0
padding: 0 padding: 0
font-size: 1.25rem font-size: 1.1rem
font-weight: 600 font-weight: 600
color: $primary color: RGB($primary)
text-overflow: ellipsis text-overflow: ellipsis
overflow: hidden overflow: hidden
@ -96,12 +94,10 @@
flex-direction: column flex-direction: column
gap: 1rem gap: 1rem
color: $white color: RGB($fg-white)
overflow-x: hidden overflow-x: hidden
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
p p
margin: 0 margin: 0
padding: 0 padding: 0
@ -181,10 +177,14 @@
align-items: center align-items: center
border-radius: 50% border-radius: 50%
// border: 1px solid $white border: 1px solid RGB($white)
.img-groups .img-groups
width: 100% width: 100%
display: flex display: flex
gap: 0.5rem gap: 0.5rem
@media (max-width: 1100px)
.info-container
gap: 0.5rem

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

@ -14,15 +14,11 @@
top: 0 top: 0
left: 0 left: 0
background-color: $black2 background-color: RGB($bg-100)
color: $white color: RGB($fg-white)
z-index: 69 z-index: 69
// Spacer
> span
height: 100%
.logo .logo
margin: 0 margin: 0
padding: 0 padding: 0
@ -35,33 +31,44 @@
flex-direction: row flex-direction: row
align-items: center align-items: center
.navigation-spacer
height: 100%
.navigation-item .navigation-item
margin: 0 margin: 0
padding: 1rem padding: 0
width: 3.5rem width: 3.5rem
height: 3.5rem height: 3.5rem
min-height: 3.5rem
display: flex
flex-direction: row
align-items: center
position: relative position: relative
background-color: $black2 display: flex
flex-direction: row
justify-content: center
align-items: center
background-color: transparent
border: none border: none
text-decoration: none text-decoration: none
> svg > svg
margin: 0 margin: 0
font-size: 1.5rem padding: 0.5rem
color: $white
transition: color 0.2s ease-out width: 2.5rem
height: 2.5rem
color: RGB($fg-white)
border-radius: $rad-inner
transition: color 0.2s ease-out, transform 0.2s ease-out
span span
margin: 0 margin: 0
padding: 0.5rem 0.75rem padding: 0.35rem 0.7rem
display: block display: block
@ -70,11 +77,11 @@
left: 3rem left: 3rem
transform: translateY(-50%) transform: translateY(-50%)
font-size: 1rem font-size: 0.9rem
font-weight: 600 font-weight: 600
background-color: #000000 background-color: #000000
color: $white color: RGB($fg-white)
opacity: 0 opacity: 0
border-radius: $rad-inner border-radius: $rad-inner
@ -99,27 +106,26 @@
color: #000000 color: #000000
&:hover &:hover
background-color: $black2
> svg > svg
color: $primary background: RGB($bg-300)
span span
opacity: 1 opacity: 1
left: 3.9rem left: 3.9rem
.navigation-item__selected &.selected::before
background: $primary content: ''
display: block
> svg position: absolute
color: $black top: 3px
left: 0
&:hover width: 3px
background: $primary height: calc(100% - 6px)
> svg
color: $white
background-color: RGB($primary)
border-radius: $rad-inner
@media (max-width: $breakpoint) @media (max-width: $breakpoint)
.navigation .navigation
@ -146,14 +152,15 @@
width: 3rem width: 3rem
height: 3rem height: 3rem
min-height: 3rem
border-radius: $rad-inner
svg
margin: auto
width: 1.5rem
height: 1.5rem
span span
display: none display: none
&.selected::before
top: unset
bottom: 0
left: 0
width: 100%
height: 3px

16
gallery/themes/default/style.sass
View file

@ -8,6 +8,7 @@
@import "components/elements/pop-up" @import "components/elements/pop-up"
@import "components/elements/upload-panel" @import "components/elements/upload-panel"
@import "components/elements/tags" @import "components/elements/tags"
@import "components/elements/labels"
@import "components/navigation" @import "components/navigation"
@import "components/banner" @import "components/banner"
@ -32,7 +33,7 @@ html, body
min-height: 100vh min-height: 100vh
max-width: 100vw max-width: 100vw
background-color: $white background-color: RGB($fg-white)
scroll-behavior: smooth scroll-behavior: smooth
overflow-x: hidden overflow-x: hidden
@ -46,8 +47,8 @@ html, body
display: flex display: flex
flex-direction: column flex-direction: column
background-color: $white background-color: RGB($bg-bright)
color: $black color: RGB($bg-100)
.big-text .big-text
height: 20rem height: 20rem
@ -57,7 +58,7 @@ html, body
justify-content: center justify-content: center
align-items: center align-items: center
color: $black color: RGB($bg-100)
h1 h1
margin: 0 2rem margin: 0 2rem
@ -83,7 +84,7 @@ html, body
justify-content: center justify-content: center
align-items: center align-items: center
background-color: $black background-color: RGB($bg-bright)
h1 h1
margin: 0 2rem margin: 0 2rem
@ -102,10 +103,7 @@ html, body
font-weight: 400 font-weight: 400
text-align: center text-align: center
color: $white color: $fg-black
#contrast-check
transition: color 0.15s ease-in-out
@media (max-width: $breakpoint) @media (max-width: $breakpoint)

92
gallery/themes/default/variables.sass
View file

@ -1,30 +1,78 @@
$black: #151515 $bg-transparent: rgba(var(--bg-dim), 0.8)
$black2: #101010 $bg-dim: var(--bg-dim)
$gray: #666 $bg-bright: var(--bg-bright)
$white: #E8E3E3 $bg-100: var(--bg-100)
$bg-200: var(--bg-200)
$bg-300: var(--bg-300)
$bg-400: var(--bg-400)
$bg-500: var(--bg-500)
$bg-600: var(--bg-600)
$red: #B66467 $fg-dim: var(--fg-dim)
$orange: #D98C5F $fg-white: var(--fg-white)
$yellow: #D9BC8C $fg-black: var(--fg-black)
$green: #8C977D
$blue: #8DA3B9
$purple: #A988B0
$primary: $green $black: var(--black)
$warning: $orange $white: var(--white)
$critical: $red $red: var(--red)
$success: $green $orange: var(--orange)
$info: $blue $yellow: var(--yellow)
$green: var(--green)
$blue: var(--blue)
$purple: var(--purple)
$rad: 6px $primary: var(--primary)
$rad-inner: 3px $warning: var(--warning)
$critical: var(--critical)
$success: var(--success)
$info: var(--info)
$animation-smooth: cubic-bezier(0.76, 0, 0.17, 1) $rad: var(--rad)
$animation-bounce: cubic-bezier(.68,-0.55,.27,1.55) $rad-inner: var(--rad-inner)
$font: "Manrope", sans-serif $animation-smooth: var(--animation-smooth)
$animation-bounce: var(--animation-bounce)
$font: 'Manrope', sans-serif
$breakpoint: 800px $breakpoint: 800px
\:root
--bg-dim: 16, 16, 16
--bg-bright: 232, 227, 227
--bg-100: 21, 21, 21
--bg-200: #{red(adjust-color(rgb(21, 21, 21), $lightness: 2%)), green(adjust-color(rgb(21, 21, 21), $lightness: 2%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 2%))}
--bg-300: #{red(adjust-color(rgb(21, 21, 21), $lightness: 4%)), green(adjust-color(rgb(21, 21, 21), $lightness: 4%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 4%))}
--bg-400: #{red(adjust-color(rgb(21, 21, 21), $lightness: 6%)), green(adjust-color(rgb(21, 21, 21), $lightness: 6%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 6%))}
--bg-500: #{red(adjust-color(rgb(21, 21, 21), $lightness: 8%)), green(adjust-color(rgb(21, 21, 21), $lightness: 8%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 8%))}
--bg-600: #{red(adjust-color(rgb(21, 21, 21), $lightness: 10%)), green(adjust-color(rgb(21, 21, 21), $lightness: 10%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 10%))}
--fg-dim: 102, 102, 102
--fg-white: 232, 227, 227
--fg-black: 16, 16, 16
--black: 21, 21, 21
--white: 232, 227, 227
--red: 182, 100, 103
--orange: 217, 140, 95
--yellow: 217, 188, 140
--green: 140, 151, 125
--blue: 141, 163, 185
--purple: 169, 136, 176
--primary: 183, 169, 151
--warning: var(--orange)
--critical: var(--red)
--success: var(--green)
--info: var(--blue)
--rad: 6px
--rad-inner: calc(var(--rad) / 2)
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
--animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
@font-face @font-face
font-family: 'Work Sans' font-family: 'Work Sans'
src: url('fonts/worksans-regular.woff2') src: url('fonts/worksans-regular.woff2')
@ -43,5 +91,5 @@ $breakpoint: 800px
@font-face @font-face
font-family: 'Manrope' font-family: 'Manrope'
src: url('fonts/Manrope[wght].woff2') format('woff2') src: url('fonts/Manrope[wght].woff2') format('woff2')
font-style: normal; font-style: normal
font-display: swap; font-display: swap