+
{% block banner_subtitle%}{% endblock %}
Settings
All the red buttons in one place, what could go wrong?
-{% endblock %}
-{% block nav_settings %}navigation-item__selected{% endblock %}
-{% block wrapper_class %}settings-wrapper{% endblock %}
-{% block content %}
General
Server
diff --git a/gallery/themes/default/components/banner.sass b/gallery/themes/default/components/banner.sass
new file mode 100644
index 0000000..f10bbaf
--- /dev/null
+++ b/gallery/themes/default/components/banner.sass
@@ -0,0 +1,96 @@
+.banner
+ width: 100%
+ height: 40vh
+
+ position: relative
+
+ background-color: $black
+ color: $black
+
+ overflow: hidden
+ transition: opacity 0.3s ease-in-out
+
+ img
+ position: absolute
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ background-color: $black
+
+ object-fit: cover
+ object-position: center center
+
+ span
+ position: absolute
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
+
+ z-index: +1
+
+ .banner-content
+ padding: 1rem
+
+ width: 100%
+ height: inherit
+
+ position: relative
+
+ display: flex
+ flex-direction: column
+ justify-content: flex-end
+ gap: 0.5rem
+
+ z-index: +2
+
+ h1
+ margin: 0
+ padding: 0
+
+ font-size: 6.9rem
+ font-weight: 700
+ line-height: 1
+ text-align: left
+
+ color: $black
+
+ p
+ margin: 0
+ padding: 0
+
+ font-size: 1rem
+ font-weight: 600
+ line-height: 1
+ text-align: left
+
+ color: $black
+
+@media (max-width: $breakpoint)
+ .banner
+ width: 100vw
+ height: 25vh
+
+ span
+ background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
+
+ .banner-content
+ padding: 0.5rem
+
+ display: flex
+ justify-content: center
+ align-items: center
+
+ h1
+ font-size: 3.5rem
+ text-align: center
+
+ p
+ font-size: 1.1rem
+ text-align: center
\ No newline at end of file
diff --git a/gallery/themes/default/buttons/jumpUp.sass b/gallery/themes/default/components/buttons/jumpUp.sass
similarity index 100%
rename from gallery/themes/default/buttons/jumpUp.sass
rename to gallery/themes/default/components/buttons/jumpUp.sass
diff --git a/gallery/themes/default/buttons/pill.sass b/gallery/themes/default/components/buttons/pill.sass
similarity index 100%
rename from gallery/themes/default/buttons/pill.sass
rename to gallery/themes/default/components/buttons/pill.sass
diff --git a/gallery/themes/default/ui/notification.sass b/gallery/themes/default/components/elements/notification.sass
similarity index 100%
rename from gallery/themes/default/ui/notification.sass
rename to gallery/themes/default/components/elements/notification.sass
diff --git a/gallery/themes/default/ui/pop-up.sass b/gallery/themes/default/components/elements/pop-up.sass
similarity index 100%
rename from gallery/themes/default/ui/pop-up.sass
rename to gallery/themes/default/components/elements/pop-up.sass
diff --git a/gallery/themes/default/ui/upload-panel.sass b/gallery/themes/default/components/elements/upload-panel.sass
similarity index 100%
rename from gallery/themes/default/ui/upload-panel.sass
rename to gallery/themes/default/components/elements/upload-panel.sass
diff --git a/gallery/themes/default/components/gallery.sass b/gallery/themes/default/components/gallery.sass
new file mode 100644
index 0000000..d7ff471
--- /dev/null
+++ b/gallery/themes/default/components/gallery.sass
@@ -0,0 +1,112 @@
+.gallery-grid
+ margin: 0
+ padding: 0.5rem
+
+ width: 100%
+
+ display: grid
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+ gap: 0.5rem
+
+.gallery-item
+ margin: 0
+ padding: 0
+
+ height: auto
+
+ position: relative
+
+ border-radius: $rad
+
+ box-sizing: border-box
+ overflow: hidden
+
+ span
+ margin: 0
+ padding: 0.5rem
+
+ width: 100%
+ height: 100%
+
+ position: absolute
+ left: 0
+ bottom: 0
+
+ display: flex
+ flex-direction: column
+ justify-content: flex-end
+
+ background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
+
+ z-index: +1
+
+ opacity: 0 // hide
+ transform: scale(1.05) // scale up
+ transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
+
+ h2
+ margin: 0
+ padding: 0
+
+ font-size: 1rem
+ font-weight: 600
+
+ color: $primary
+
+ text-overflow: ellipsis
+ overflow: hidden
+
+ opacity: 0 // hide
+ transition: all 0.2s ease-in-out
+
+ p
+ margin: 0
+ padding: 0
+
+ font-size: 0.8rem
+ font-weight: 500
+
+ color: $white
+
+ text-overflow: ellipsis
+ overflow: hidden
+
+ opacity: 0 // hide
+ transition: all 0.2s ease-in-out
+
+ img
+ width: 100%
+ height: 100%
+
+ position: absolute
+ top: 0
+ left: 0
+ right: 0
+ bottom: 0
+
+ object-fit: cover
+ object-position: center
+
+ background-color: $white
+
+ transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
+
+ &:after
+ content: ""
+ display: block
+ padding-bottom: 100%
+
+ &:hover
+ span
+ opacity: 1
+ transform: scale(1)
+
+ h2, p
+ opacity: 1
+
+ img
+ transform: scale(1.1)
+
+@media (max-width: 800px)
+ .gallery-grid
+ grid-template-columns: auto auto auto
diff --git a/gallery/themes/default/ui/background.sass b/gallery/themes/default/components/image-view/background.sass
similarity index 91%
rename from gallery/themes/default/ui/background.sass
rename to gallery/themes/default/components/image-view/background.sass
index 3a6b926..14d8c1b 100644
--- a/gallery/themes/default/ui/background.sass
+++ b/gallery/themes/default/components/image-view/background.sass
@@ -1,7 +1,4 @@
-.background-decoration
- margin: 0
- padding: 0
-
+.background
width: 100%
height: 100vh
@@ -17,6 +14,7 @@
user-select: none
overflow: hidden
+ z-index: 1
img
position: absolute
@@ -42,4 +40,4 @@
width: 100%
height: 100%
- z-index: +1
+ z-index: +1
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/fullscreen.sass b/gallery/themes/default/components/image-view/fullscreen.sass
new file mode 100644
index 0000000..46b11f6
--- /dev/null
+++ b/gallery/themes/default/components/image-view/fullscreen.sass
@@ -0,0 +1,51 @@
+.image-fullscreen
+ margin: 0
+ padding: 0 0 0 3.5rem
+
+ width: 100%
+ height: 100dvh
+
+ position: fixed
+ top: -100%
+ left: 0
+
+ display: flex
+ opacity: 0 // hide
+
+ background-color: rgba($black, 0.8)
+ z-index: 21
+
+ box-sizing: border-box
+
+ img
+ margin: auto
+ padding: 0
+
+ width: auto
+ height: auto
+ max-width: 100%
+ max-height: 100%
+
+ object-fit: contain
+ object-position: center
+
+ transform: scale(0.8)
+
+.image-fullscreen__active
+ top: 0
+
+ opacity: 1 // show
+
+ transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+
+ img
+ transform: scale(1)
+ transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
+.image-fullscreen__hide
+ opacity: 0 // hide
+
+ transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
+
+ img
+ transform: scaleY(0) // scale(0.8)
+ transition: transform 0.2s ease
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/image.sass b/gallery/themes/default/components/image-view/image.sass
new file mode 100644
index 0000000..6436e14
--- /dev/null
+++ b/gallery/themes/default/components/image-view/image.sass
@@ -0,0 +1,21 @@
+.image-container
+ margin: auto
+ padding: 0.5rem
+
+ 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
\ No newline at end of file
diff --git a/gallery/themes/default/components/image-view/info-tab.sass b/gallery/themes/default/components/image-view/info-tab.sass
new file mode 100644
index 0000000..31306e1
--- /dev/null
+++ b/gallery/themes/default/components/image-view/info-tab.sass
@@ -0,0 +1,185 @@
+.info-container
+ width: 100%
+ height: 100%
+
+ display: flex
+ flex-direction: column
+
+ background-color: $black
+
+ overflow-y: auto
+
+.info-tab
+ width: 100%
+ max-height: 100%
+
+ display: flex
+ flex-direction: column
+
+ position: relative
+
+ background-color: $black
+ border-radius: $rad
+
+ transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
+
+ &.collapsed
+ height: 2.5rem
+
+ .collapse-indicator
+ transform: rotate(90deg)
+
+ .info-table
+ padding: 0
+ opacity: 0
+
+.collapse-indicator
+ width: 1.25rem
+ height: 1.25rem
+
+ position: absolute
+ top: 0.6rem
+ right: 0.6rem
+
+ color: $primary
+
+ z-index: +2
+
+ transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
+ user-select: none
+
+.info-header
+ margin: 0
+ padding: 0.5rem
+
+ width: 100%
+ height: 2.5rem
+
+ display: flex
+ justify-content: start
+ align-items: center
+ gap: 0.5rem
+
+ position: sticky
+ top: 0
+ z-index: +1
+
+ background: $black2
+
+ svg
+ margin: 0
+ padding: 0
+
+ width: 1.25rem
+ height: 1.25rem
+
+ fill: $primary
+
+ h2
+ margin: 0
+ padding: 0
+
+ font-size: 1.25rem
+ font-weight: 600
+
+ color: $primary
+
+ text-overflow: ellipsis
+ overflow: hidden
+
+.info-table
+ margin: 0
+ padding: 0.5rem
+
+ display: flex
+ flex-direction: column
+ gap: 0.5rem
+
+ color: $white
+
+ overflow-x: hidden
+
+ transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+
+ p
+ margin: 0
+ padding: 0
+
+ font-size: 1rem
+ font-weight: 500
+
+ text-overflow: ellipsis
+ overflow: hidden
+
+ table
+ margin: 0
+ padding: 0
+
+ max-width: 100%
+
+ overflow-x: hidden
+ border-collapse: collapse
+
+ tr
+ margin: 0
+ padding: 0
+
+ width: 100%
+
+ white-space: nowrap
+
+ td
+ padding-bottom: 0.5rem
+
+ td:first-child
+ padding-right: 0.5rem
+
+ width: 50%
+ max-width: 0
+
+ overflow: hidden
+ text-overflow: ellipsis
+ white-space: nowrap
+
+ font-size: 1rem
+ font-weight: 500
+ td:last-child
+ padding: 0
+
+ width: 50%
+ max-width: 0
+
+ overflow: hidden
+ text-overflow: ellipsis
+ white-space: nowrap
+
+ font-size: 1rem
+ font-weight: 500
+
+ td.empty-table
+ opacity: 0.3
+
+ tr:last-of-type td
+ padding-bottom: 0
+
+.img-colours
+ margin: 0
+ padding: 0
+
+ width: 100%
+
+ display: flex
+ gap: 0.5rem
+
+ span
+ margin: 0
+ padding: 0
+
+ width: 100%
+ height: 2rem
+
+ display: flex
+ justify-content: center
+ align-items: center
+
+ border-radius: $rad
diff --git a/gallery/themes/default/components/image-view/view.sass b/gallery/themes/default/components/image-view/view.sass
new file mode 100644
index 0000000..a39645f
--- /dev/null
+++ b/gallery/themes/default/components/image-view/view.sass
@@ -0,0 +1,66 @@
+@import 'background'
+@import 'fullscreen'
+@import 'info-tab'
+@import 'image'
+
+
+.image-grid
+ padding: 0
+
+ position: relative
+
+ display: grid
+ grid-template-areas: 'info image' 'info tools'
+ grid-template-columns: 25rem 1fr
+ grid-template-rows: 1fr auto
+ gap: 0
+
+ height: 100vh
+
+ z-index: 3
+
+#image-info
+ grid-area: info
+#image-tools
+ grid-area: tools
+ padding: 0 0 0.5rem 0
+#image-container
+ grid-area: image
+
+
+@media (max-width: 1100px)
+ .image-grid
+ padding: 0.5rem
+
+ display: flex
+ flex-direction: column
+ gap: 0.5rem
+
+ height: auto
+
+ .image-container
+ margin: 0 auto
+ padding: 0
+
+ max-height: 69vh
+
+ img
+ max-height: 69vh
+
+ #image-tools
+ padding: 0
+
+ .info-container
+ gap: 0.5rem
+ background: transparent
+
+ .info-header
+ border-radius: $rad $rad 0 0
+
+ .info-tab.collapsed .info-header
+ border-radius: $rad
+
+@media (max-width: $breakpoint)
+ .image-fullscreen
+ padding: 0 0 3.5rem 0
+
\ No newline at end of file
diff --git a/gallery/themes/default/ui/navigation.sass b/gallery/themes/default/components/navigation.sass
similarity index 100%
rename from gallery/themes/default/ui/navigation.sass
rename to gallery/themes/default/components/navigation.sass
diff --git a/gallery/themes/default/style.sass b/gallery/themes/default/style.sass
index 2522d8e..bb00ce7 100644
--- a/gallery/themes/default/style.sass
+++ b/gallery/themes/default/style.sass
@@ -4,18 +4,18 @@
@import "variables"
@import "animations"
-@import "ui/notification"
-@import "ui/pop-up"
-@import "ui/upload-panel"
+@import "components/elements/notification"
+@import "components/elements/pop-up"
+@import "components/elements/upload-panel"
-@import "ui/navigation"
-@import "ui/content"
-@import "ui/background"
-@import "ui/banner"
-@import "ui/gallery"
+@import "components/navigation"
+@import "components/banner"
+@import "components/gallery"
-@import "buttons/jumpUp"
-@import "buttons/pill"
+@import "components/buttons/jumpUp"
+@import "components/buttons/pill"
+
+@import "components/image-view/view"
// Reset
*
@@ -36,9 +36,57 @@ html, body
.wrapper
margin: 0
- padding: 0
+ padding: 0 0 0 3.5rem
min-height: 100vh
+ display: flex
+ flex-direction: column
+
background-color: $white
color: $black
+
+
+.error-page
+ width: 100%
+ height: 100vh
+
+ display: flex
+ flex-direction: column
+ justify-content: center
+ align-items: center
+
+ background-color: $black
+
+ h1
+ margin: 0 2rem
+
+ font-size: 6.9rem
+ font-weight: 900
+ text-align: center
+
+ color: $primary
+
+ p
+ margin: 0 2rem
+
+ max-width: 40rem
+ font-size: 1.25rem
+ font-weight: 400
+ text-align: center
+
+ color: $white
+
+@media (max-width: $breakpoint)
+ .wrapper
+ padding: 0 0 3.5rem 0
+
+ .error-page
+ height: calc(100vh - 3.5rem)
+
+ h1
+ font-size: 4.5rem
+
+ p
+ max-width: 100%
+ font-size: 1rem
\ No newline at end of file
diff --git a/gallery/themes/default/ui/banner.sass b/gallery/themes/default/ui/banner.sass
deleted file mode 100644
index 7f15403..0000000
--- a/gallery/themes/default/ui/banner.sass
+++ /dev/null
@@ -1,104 +0,0 @@
-.banner
- margin: 0
- padding: 0
-
- width: calc(100vw - 3.5rem)
- height: 40vh
-
- position: relative
- top: 0
- left: 3.5rem
-
- background-color: $black
- color: $black
-
- overflow: hidden
- transition: opacity 0.3s ease-in-out
-
- img
- position: absolute
- top: 0
- left: 0
-
- width: 100%
- height: 100%
-
- background-color: $black
-
- object-fit: cover
- object-position: center center
-
- span
- position: absolute
- top: 0
- left: 0
-
- width: 100%
- height: 100%
-
- background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
-
- z-index: +1
-
-.banner__content
- margin: 0
- padding: 1rem
-
- width: 100%
- height: 100%
-
- position: relative
-
- display: flex
- flex-direction: column
- justify-content: flex-end
- gap: 0.5rem
-
- z-index: +2
-
- h1
- margin: 0
- padding: 0
-
- font-size: 6.9rem
- font-weight: 700
- line-height: 1
- text-align: left
-
- color: $black
-
- p
- margin: 0
- padding: 0
-
- font-size: 1rem
- font-weight: 600
- line-height: 1
- text-align: left
-
- color: $black
-
-@media (max-width: $breakpoint)
- .banner
- width: 100vw
- height: 25vh
-
- left: 0
-
- span
- background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
-
- .banner__content
- padding: 0.5rem
-
- display: flex
- justify-content: center
- align-items: center
-
- h1
- font-size: 3.5rem
- text-align: center
-
- p
- font-size: 1.1rem
- text-align: center
\ No newline at end of file
diff --git a/gallery/themes/default/ui/content.sass b/gallery/themes/default/ui/content.sass
deleted file mode 100644
index 3f579a1..0000000
--- a/gallery/themes/default/ui/content.sass
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "wrappers/index"
-@import "wrappers/image"
-@import "wrappers/settings"
-@import "wrappers/error"
-
-.content
- width: calc(100% - 3.5rem)
- min-height: 100vh
-
- position: relative
- left: 3.5rem
-
-@media (max-width: $breakpoint)
- .content
- width: 100%
- left: 0
diff --git a/gallery/themes/default/ui/gallery.sass b/gallery/themes/default/ui/gallery.sass
deleted file mode 100644
index 73159e4..0000000
--- a/gallery/themes/default/ui/gallery.sass
+++ /dev/null
@@ -1,115 +0,0 @@
-.gallery
- margin: 0
- padding: 0
-
- width: 100%
-
- display: grid
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
- gap: 0.5rem
-
-@media (max-width: 800px)
- .gallery
- grid-template-columns: auto auto auto
-
-.gallery__item
- margin: 0
- padding: 0
-
- height: auto
-
- position: relative
-
- // background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
- // background-size: 1000px 640px
- // animation: imgLoading 1.8s linear infinite forwards
- border-radius: $rad
-
- box-sizing: border-box
- overflow: hidden
-
- &:after
- content: ""
- display: block
- padding-bottom: 100%
-
- &:hover
- .gallery__item-info
- opacity: 1
- transform: scale(1)
-
- h2, p
- opacity: 1
-
- .gallery__item-image
- transform: scale(1.1)
-
-.gallery__item-info
- margin: 0
- padding: 0.5rem
-
- width: 100%
- height: 100%
-
- position: absolute
- left: 0
- bottom: 0
-
- display: flex
- flex-direction: column
- justify-content: flex-end
-
- background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
-
- z-index: +1
-
- opacity: 0 // hide
- transform: scale(1.05) // scale up
- transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
-
- h2
- margin: 0
- padding: 0
-
- font-size: 1rem
- font-weight: 600
-
- color: $primary
-
- text-overflow: ellipsis
- overflow: hidden
-
- opacity: 0 // hide
- transition: all 0.2s ease-in-out
-
- p
- margin: 0
- padding: 0
-
- font-size: 0.8rem
- font-weight: 500
-
- color: $white
-
- text-overflow: ellipsis
- overflow: hidden
-
- opacity: 0 // hide
- transition: all 0.2s ease-in-out
-
-.gallery__item-image
- width: 100%
- height: 100%
-
- position: absolute
- top: 0
- left: 0
- right: 0
- bottom: 0
-
- object-fit: cover
- object-position: center
-
- background-color: $white
-
- transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
diff --git a/gallery/themes/default/ui/wrappers/error.sass b/gallery/themes/default/ui/wrappers/error.sass
deleted file mode 100644
index 4aca0df..0000000
--- a/gallery/themes/default/ui/wrappers/error.sass
+++ /dev/null
@@ -1,35 +0,0 @@
-.error-wrapper
- display: flex
- flex-direction: column
- justify-content: center
- align-items: center
-
- background-color: $black
-
- h1
- margin: 0 2rem
-
- font-size: 6.9rem
- font-weight: 900
- text-align: center
-
- color: $primary
-
- p
- margin: 0 2rem
-
- max-width: 40rem
- font-size: 1.25rem
- font-weight: 400
- text-align: center
-
- color: $white
-
-@media (max-width: $breakpoint)
- .error-wrapper
- h1
- font-size: 4.5rem
-
- p
- max-width: 100%
- font-size: 1rem
\ No newline at end of file
diff --git a/gallery/themes/default/ui/wrappers/image.sass b/gallery/themes/default/ui/wrappers/image.sass
deleted file mode 100644
index b5aa49f..0000000
--- a/gallery/themes/default/ui/wrappers/image.sass
+++ /dev/null
@@ -1,351 +0,0 @@
-.image-wrapper
- padding: 0
-
- display: grid
- grid-template-areas: 'info image' 'info tools'
- grid-template-columns: 25rem 1fr
- grid-template-rows: 1fr auto
- gap: 0
-
- height: 100vh
-
-.image-fullscreen
- margin: 0
- padding: 0 0 0 3.5rem
-
- width: 100%
- height: 100dvh
-
- position: fixed
- top: -100%
- left: 0
-
- display: flex
- opacity: 0 // hide
-
- background-color: rgba($black, 0.8)
- z-index: 21
-
- box-sizing: border-box
-
- img
- margin: auto
- padding: 0
-
- width: auto
- height: auto
- max-width: 100%
- max-height: 100%
-
- object-fit: contain
- object-position: center
-
- transform: scale(0.8)
-
-.image-fullscreen__active
- top: 0
-
- opacity: 1 // show
-
- transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
- img
- transform: scale(1)
- transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
-.image-fullscreen__hide
- opacity: 0 // hide
-
- transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
-
- img
- transform: scaleY(0) // scale(0.8)
- transition: transform 0.2s ease
-
-.image-container
- margin: auto
- padding: 0.5rem
-
- width: 100%
- height: 100%
-
- display: flex
- overflow: hidden
-
- grid-area: image
-
- img
- margin: auto
- padding: 0
-
- width: auto
- height: auto
- max-width: 100%
- max-height: 100%
-
- object-fit: contain
- object-position: center
-
- // box-shadow: 0 0 0.5rem rgba($black, 0.5)
-
-.image-info__container
- margin: 0
- padding: 0
-
- width: 100%
- height: 100%
-
- display: flex
- flex-direction: column
-
- background-color: $black
-
- overflow-y: auto
-
- grid-area: info
-
-.image-info
- margin: 0
- padding: 0
-
- width: 100%
-
- display: flex
- flex-direction: column
-
- position: relative
-
- background-color: $black
- border-radius: $rad
-
-.image-info__collapse
- margin: 0
- padding: 0
-
- width: 1.25rem
- height: 1.25rem
-
- display: flex
- justify-content: center
- align-items: center
-
- position: absolute
- top: 0.6rem
- right: 0.6rem
-
- cursor: pointer
- z-index: +2
-
- transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
-
- svg
- margin: 0
- padding: 0
-
- fill: $primary
-
-.image-info__header
- margin: 0
- padding: 0.5rem
-
- width: 100%
- height: 2.5rem
-
- display: flex
- justify-content: start
- align-items: center
- gap: 0.5rem
-
- position: sticky
- top: 0
- z-index: +1
-
- background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))
-
- svg
- margin: 0
- padding: 0
-
- width: 1.25rem
- height: 1.25rem
-
- fill: $primary
-
- h2
- margin: 0
- padding: 0
-
- font-size: 1.25rem
- font-weight: 600
-
- color: $primary
-
- text-overflow: ellipsis
- overflow: hidden
-
-.image-info__content
- margin: 0
- padding: 0.5rem
-
- display: flex
- flex-direction: column
- gap: 0.5rem
-
- color: $white
-
- overflow-x: hidden
-
- transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
- p
- margin: 0
- padding: 0
-
- font-size: 1rem
- font-weight: 500
-
- text-overflow: ellipsis
- overflow: hidden
-
- table
- margin: 0
- padding: 0
-
- max-width: 100%
-
- overflow-x: hidden
- border-collapse: collapse
-
- tr
- margin: 0
- padding: 0
-
- width: 100%
-
- white-space: nowrap
-
- td
- padding-bottom: 0.5rem
-
- td:first-child
- padding-right: 0.5rem
-
- width: 50%
- max-width: 0
-
- overflow: hidden
- text-overflow: ellipsis
- white-space: nowrap
-
- font-size: 1rem
- font-weight: 500
- td:last-child
- padding: 0
-
- width: 50%
- max-width: 0
-
- overflow: hidden
- text-overflow: ellipsis
- white-space: nowrap
-
- font-size: 1rem
- font-weight: 500
-
- td.empty-table
- opacity: 0.3
-
- tr:last-of-type td
- padding-bottom: 0
-
-.img-colours
- margin: 0
- padding: 0
-
- width: 100%
-
- display: flex
- gap: 0.5rem
-
- span
- margin: 0
- padding: 0
-
- width: 100%
- height: 2rem
-
- display: flex
- justify-content: center
- align-items: center
-
- border-radius: $rad
-
-.image-info__collapsed
- height: 2.5rem
-
- .image-info__collapse
- transform: rotate(90deg)
-
- .image-info__content
- padding: 0
- opacity: 0
-
-#image-tools
- margin-bottom: 0.5rem
-
- grid-area: tools
-
-@media (max-width: 1100px)
- .image-wrapper
- padding: 0.5rem
-
- display: flex !important
- flex-direction: column
- gap: 0.5rem
-
- height: auto
-
- .image-container
- margin: 0 auto
- padding: 0
-
- max-height: 69vh
-
- img
- max-height: 69vh
-
- #image-tools
- margin: 0
-
- .image-info__container
- margin: 0
- padding: 0
-
- width: 100%
- height: auto
-
- display: flex
- flex-direction: column
- gap: 0.5rem
-
- background: none
-
- .image-info__container
- border-radius: $rad
-
- .image-info__header
- border-radius: $rad $rad 0 0
-
- .image-info__collapsed
- .image-info__header
- border-radius: $rad
-
-@media (max-width: $breakpoint)
- .image-fullscreen
- padding: 0 0 3.5rem 0
-
- .image-wrapper
- padding-bottom: 4rem
-
- .image-info__header
- background-image: none
- background-color: $black2
\ No newline at end of file
diff --git a/gallery/themes/default/ui/wrappers/index.sass b/gallery/themes/default/ui/wrappers/index.sass
deleted file mode 100644
index 9533649..0000000
--- a/gallery/themes/default/ui/wrappers/index.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-.index-wrapper
- padding: 0.5rem
-
- position: relative
-
- display: flex
- flex-direction: column
- gap: 0.5rem
-
-@media (max-width: $breakpoint)
- .index-wrapper
- padding-bottom: 4rem
diff --git a/gallery/themes/default/ui/wrappers/settings.sass b/gallery/themes/default/ui/wrappers/settings.sass
deleted file mode 100644
index eea9523..0000000
--- a/gallery/themes/default/ui/wrappers/settings.sass
+++ /dev/null
@@ -1,115 +0,0 @@
-@mixin settings-btn($color, $fill: false)
- @if $fill
- color: $white
- background-color: $color
- border: 2px solid $color
-
- &:hover
- background-color: $white
- color: $color
- @else
- color: $color
- background-color: $white
- border: 2px solid $color
-
- &:hover
- background-color: $color
- color: $white
-
-@mixin settings-log($color)
- font-size: 1rem
- font-weight: 600
-
- color: $white
- background-color: $black
- background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
- //border-left: 3px solid $color
-
-
-.settings-wrapper
- margin: 0
- padding: 0.5rem
-
- display: flex
- flex-direction: column
- gap: 0
-
-.settings-nav
- width: 100%
- height: auto
-
- position: sticky
- top: 0
- left: 0
-
- display: flex
- flex-direction: row
- justify-content: center
- gap: 0.5rem
-
- background-color: $white
-
-.settings-nav__item
- margin: 0
- padding: 0.5rem
-
- width: 100%
- height: 2.5rem
-
- display: flex
- justify-content: center
- align-items: center
-
- font-size: 1rem
- font-weight: 600
- text-align: center
- line-height: 1
- text-decoration: none
-
- border-radius: $rad
-
- cursor: pointer
- transition: background-color 0.2s ease, color 0.2s ease
-
- @include settings-btn($black)
-
- &:focus
- outline: none
-
-.settings-nav__item-selected
- @include settings-btn($black, true)
-
-.settings-list
- margin: 0
- padding: 0
-
- width: 100%
- height: auto
-
- display: flex
- flex-direction: column
- gap: 0.5rem
-
-.log
- margin: 0
- padding: 1rem
-
- height: auto
-
- display: flex
- flex-direction: column
- gap: 0.5rem
-
- border-radius: $rad
-
- @include settings-log($critical)
-
-@media (max-width: 450px)
- .settings-nav
- position: relative
-
- flex-direction: column
- gap: 0.5rem
-
- .settings-wrapper
- padding-bottom: 4rem
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index 0c48796..bc28c92 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
[tool.poetry]
name = "onlylegs"
-version = "23.03.03"
+version = "23.03.09"
description = "Gallery built for fast and simple image management"
authors = ["Fluffy-Bean
"]
license = "MIT"