python-gallery/gallery/themes/default/components/elements/pop-up.sass

.pop-up
    width: 100%
    height: 100vh

    position: fixed
    inset: 0

    display: none

    background-color: rgba($black, 0.8)
    opacity: 0

    z-index: 101
    transition: opacity 0.2s ease

    .pop-up__click-off
        width: 100%
        height: 100vh

        position: absolute
        top: 0
        left: 0

        z-index: +1

    .pop-up-wrapper
        margin: 0
        padding: 0

        width: 621px
        height: auto

        position: absolute
        bottom: 50%
        left: 50%
        transform: translate(-50%, 50%) scale(0.8)

        display: flex
        flex-direction: column

        background-color: $black
        border-radius: $rad
        overflow: hidden

        z-index: +2
        transition: transform 0.2s $animation-smooth

    .pop-up-content
        margin: 0
        padding: 1rem

        width: 100%
        height: auto

        display: flex
        flex-direction: column
        gap: 1rem

        overflow-y: auto
        overflow-x: hidden
        text-size-adjust: auto
        text-overflow: ellipsis

        h3
            margin: 0

            width: 100%

            position: sticky
            top: 0

            font-size: 2.25rem
            font-weight: 600
            text-align: center
            line-height: 1

            color: $white
            background-color: $black
        
        p
            margin: 0

            width: 100%

            font-size: 1rem
            font-weight: 500
            text-align: center
            line-height: 1

            color: $white

        img
            margin: auto
            padding: 0

            width: auto
            height: auto
            max-width: 100%
            max-height: 40vh

            border-radius: $rad-inner

        form
            margin: 0
            padding: 0

            width: 100%
            height: auto

            display: flex
            flex-direction: column
            gap: 0.5rem

            justify-content: center

    .pop-up-controlls
        margin: 0
        padding: 0.5rem

        width: 100%
        height: auto

        display: flex
        flex-direction: row
        justify-content: flex-end
        gap: 0.5rem

        background-color: $black2

    &.active
        opacity: 1

        .pop-up-wrapper
            transform: translate(-50%, 50%) scale(1)

.pop-up__link
    color: $primary
    text-decoration: none

    &:hover
        text-decoration: underline
        cursor: pointer

@media (max-width: $breakpoint)
    .pop-up
        .pop-up-wrapper
            width: calc(100% - 1rem)
            max-height: 95vh

        .pop-up-content
            max-height: 100%

            img 
                max-height: 50vh

        .pop-up-controlls button
            width: 100%
    
        &.active
            opacity: 1
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`.pop-up`
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`width: 100%`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`height: 100vh`

			`position: fixed`
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`inset: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`display: none`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`background-color: rgba($black, 0.8)`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`opacity: 0`

Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`z-index: 101`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`transition: opacity 0.2s ease`

Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up__click-off`
Moved some scripts to a utils folder Renamed upload route to file as its more approprete Fixed random CSS issues that occur on older browsers or Safari 2023-03-14 22:07:17 +00:00			`width: 100%`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`height: 100vh`
Added settings page Added logging to a .log file Fixed Images loosing colour and rotation on thumbnail generation Added more info to README 2023-03-01 23:29:34 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`position: absolute`
			`top: 0`
			`left: 0`
Added settings page Added logging to a .log file Fixed Images loosing colour and rotation on thumbnail generation Added more info to README 2023-03-01 23:29:34 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`z-index: +1`
Added settings page Added logging to a .log file Fixed Images loosing colour and rotation on thumbnail generation Added more info to README 2023-03-01 23:29:34 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up-wrapper`
			`margin: 0`
			`padding: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`width: 621px`
			`height: auto`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`position: absolute`
			`bottom: 50%`
			`left: 50%`
			`transform: translate(-50%, 50%) scale(0.8)`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`display: flex`
			`flex-direction: column`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`background-color: $black`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`border-radius: $rad`
			`overflow: hidden`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`z-index: +2`
			`transition: transform 0.2s $animation-smooth`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up-content`
			`margin: 0`
Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`padding: 1rem`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`width: 100%`
			`height: auto`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`display: flex`
			`flex-direction: column`
Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`gap: 1rem`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`overflow-y: auto`
			`overflow-x: hidden`
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`text-size-adjust: auto`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`text-overflow: ellipsis`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`h3`
			`margin: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`width: 100%`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`position: sticky`
			`top: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Make buttons more consistent Rename JumpUp button to top-of-page 2023-03-12 18:19:43 +00:00			`font-size: 2.25rem`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`font-weight: 600`
			`text-align: center`
			`line-height: 1`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`color: $white`
			`background-color: $black`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00
			`p`
			`margin: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`width: 100%`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`font-size: 1rem`
			`font-weight: 500`
			`text-align: center`
			`line-height: 1`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`color: $white`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`img`
			`margin: auto`
			`padding: 0`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`width: auto`
			`height: auto`
			`max-width: 100%`
			`max-height: 40vh`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`border-radius: $rad-inner`

			`form`
			`margin: 0`
			`padding: 0`

			`width: 100%`
			`height: auto`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`display: flex`
			`flex-direction: column`
			`gap: 0.5rem`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`justify-content: center`

			`.pop-up-controlls`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`margin: 0`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`padding: 0.5rem`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
			`width: 100%`
			`height: auto`

			`display: flex`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`flex-direction: row`
			`justify-content: flex-end`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00			`gap: 0.5rem`

Pop-ups are dark and dont require close button Change style of block buttons 2023-03-15 17:03:24 +00:00			`background-color: $black2`

Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`&.active`
			`opacity: 1`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up-wrapper`
			`transform: translate(-50%, 50%) scale(1)`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
			`.pop-up__link`
			`color: $primary`
			`text-decoration: none`

			`&:hover`
			`text-decoration: underline`
			`cursor: pointer`

			`@media (max-width: $breakpoint)`
			`.pop-up`
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up-wrapper`
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`width: calc(100% - 1rem)`
			`max-height: 95vh`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`.pop-up-content`
			`max-height: 100%`
Move user data to ~/.config/onlylegs location Update location of default themes folder 2023-03-02 13:19:10 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`img`
			`max-height: 50vh`
Move user data to ~/.config/onlylegs location Update location of default themes folder 2023-03-02 13:19:10 +00:00
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`.pop-up-controlls button`
			`width: 100%`
Unifying style of the gallery Fixed HTML and Sass layout Moved upload and login pages to popups Added deletion confirmation 2023-01-25 15:13:56 +00:00
Clean up Pop-Up JS Fix missing Width and Height data stopping images from loading 2023-03-10 15:55:34 +00:00			`&.active`
Choose or drop image for upload Fix up some JS Update Icons 2023-03-23 12:54:00 +00:00			`opacity: 1`