Use prettier for SCSS (#3895)

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / imageViewer.scss

diff --git a/wcfsetup/install/files/style/ui/imageViewer.scss b/wcfsetup/install/files/style/ui/imageViewer.scss
index 4e59145c595abd7074bdb69b9c1d3edeb9495407..cfbcd22dcb10f2720331990a3af63a7558a7b94d 100644 (file)
--- a/wcfsetup/install/files/style/ui/imageViewer.scss
+++ b/wcfsetup/install/files/style/ui/imageViewer.scss
@@ -12,32 +12,32 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
        right: 0;
        top: 0;
        z-index: 399;
-       
+
        .icon {
                color: rgb(158, 158, 158);
        }
-       
+
        &.open {
                display: block;
                opacity: 1;
        }
-       
+
        &.maximized:not(.wcfImageViewerMobile) {
                > header {
                        top: -100px;
                }
-               
+
                > div {
                        bottom: 0;
                        border-color: fade($wcfImageViewerBorderColor, 0%);
                        top: 0;
                }
-               
+
                > footer {
                        bottom: -100px;
                }
        }
-       
+
        &.wcfImageViewerMobile {
                > header,
                > footer {
@@ -47,25 +47,25 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                        visibility: visible;
                        z-index: 402;
                }
-               
+
                &.maximized {
                        > header,
                        > footer {
                                opacity: 0;
                                visibility: hidden;
-                               
-                               transition: visibility 0s linear .24s, opacity .24s linear;
+
+                               transition: visibility 0s linear 0.24s, opacity 0.24s linear;
                        }
-                       
+
                        > div > ul > li.pointer {
                                opacity: 0;
                        }
                }
-               
+
                > div {
                        bottom: 0;
                        top: 0;
-                       
+
                        > ul {
                                > li {
                                        background-color: rgba(224, 224, 224, 1);
@@ -74,45 +74,45 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                        opacity: 0;
                                        position: absolute;
                                        top: 50%;
-                                       transition: opacity .24s;
-                                       
+                                       transition: opacity 0.24s;
+
                                        &.pointer {
                                                opacity: 1;
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonFull,
                                        &.wcfImageViewerSlideshowButtonNext,
                                        &.wcfImageViewerSlideshowButtonPrevious {
                                                /* places buttons above images at all times */
                                                z-index: 30;
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonPrevious {
                                                left: 10px;
-                                               
+
                                                > span {
                                                        left: -3px;
                                                        position: relative;
                                                        top: 2px;
                                                }
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonNext {
                                                right: 10px;
-                                               
+
                                                > span {
                                                        position: relative;
                                                        right: -1px;
                                                        top: 2px;
                                                }
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonFull {
                                                bottom: 80px;
                                                left: 50%;
                                                top: auto;
                                                transform: translateX(-50%);
-                                               
+
                                                > span {
                                                        font-size: 32px;
                                                        left: 2px;
@@ -120,7 +120,7 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                                        top: 3px;
                                                }
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonToggle,
                                        &.wcfImageViewerSlideshowButtonEnlarge {
                                                display: none;
@@ -128,19 +128,19 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                }
                        }
                }
-               
+
                > footer {
                        > .wcfImageViewerButtonPrevious,
                        > .wcfImageViewerButtonNext {
                                display: none;
                        }
-                       
+
                        > div {
                                margin: 0;
                        }
                }
        }
-       
+
        > header,
        > div,
        > footer {
@@ -151,51 +151,51 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                right: 0;
                z-index: 400;
        }
-       
+
        > header {
                height: 100px;
                overflow: hidden;
                padding: 1rem;
                top: 0;
-               
+
                > div {
                        > a > img {
                                height: 64px;
                                width: 64px;
                        }
                }
-               
+
                h1,
                h2,
                h3 {
                        color: $wcfImageViewerFontColor;
-                       
+
                        > a {
                                color: $wcfImageViewerFontColor;
                        }
                }
-               
+
                h1 {
                        font-size: 1.75rem;
                }
-               
+
                h2 {
                        font-size: 1.25rem;
                }
-               
+
                h3 {
                        color: $wcfImageViewerFontColor;
-                       font-size: .85rem;
-                       margin-top: .25rem;
+                       font-size: 0.85rem;
+                       margin-top: 0.25rem;
                }
-               
+
                > .wcfImageViewerButtonClose {
                        position: absolute;
                        right: 26px;
                        top: 26px;
                }
        }
-       
+
        > div {
                background-color: rgba(0, 0, 0, 1);
                border-bottom: 1px solid $wcfImageViewerBorderColor;
@@ -204,61 +204,61 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                top: 100px;
                transition-property: top, bottom, border-color;
                transition-timing-function: linear;
-               transition-duration: .24s;
+               transition-duration: 0.24s;
                z-index: 401;
-               
+
                &.loading:before {
                        @extend .icon48;
                        @extend .fa-spinner;
-                       
+
                        content: "" !important;
                        display: block;
                        left: calc(50% - 34px);
                        position: absolute;
                        top: calc(50% - 34px);
                }
-               
+
                > img {
                        opacity: 0;
                        position: absolute;
                        top: 50%;
-                       transition: opacity .24s linear;
+                       transition: opacity 0.24s linear;
                        z-index: 10;
-                       
+
                        &.animateTransformation {
-                               transition: left .24s, margin-top .24s, height .24s, width .24s, opacity .24s;
+                               transition: left 0.24s, margin-top 0.24s, height 0.24s, width 0.24s, opacity 0.24s;
                        }
-                       
+
                        &.active {
                                opacity: 1;
                                z-index: 20;
                        }
                }
        }
-       
+
        &:not(.wcfImageViewerMobile) {
                .icon:hover {
                        color: rgb(255, 255, 255);
                }
-               
+
                > header {
-                       transition: top .24s linear;
+                       transition: top 0.24s linear;
                }
-               
+
                > footer {
-                       transition: bottom .24s linear;
+                       transition: bottom 0.24s linear;
                }
-               
+
                > div {
                        cursor: pointer;
-                       
+
                        > img,
                        > ul {
                                cursor: default;
                        }
-                       
+
                        > ul {
-                               background-color: rgba(0, 0, 0, .9);
+                               background-color: rgba(0, 0, 0, 0.9);
                                border: 1px solid $wcfImageViewerBorderColor;
                                border-bottom-width: 0;
                                border-radius: 2px 2px 0 0;
@@ -268,18 +268,18 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                position: absolute;
                                transform: translateX(-50%);
                                z-index: 30;
-                               
+
                                > li {
                                        flex: 0 0 auto;
-                                       
+
                                        &:not(.pointer) > .icon {
                                                color: rgb(66, 66, 66) !important;
                                        }
-                                       
+
                                        &.pointer > span.icon {
                                                cursor: pointer;
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonToggle > span,
                                        &.wcfImageViewerSlideshowButtonEnlarge > span,
                                        &.wcfImageViewerSlideshowButtonFull > span {
@@ -292,13 +292,13 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                                                }
                                                */
                                        }
-                                       
+
                                        &.wcfImageViewerSlideshowButtonEnlarge,
                                        &.wcfImageViewerSlideshowButtonFull {
                                                border-left: 1px solid $wcfImageViewerBorderColor;
                                                box-sizing: border-box;
                                        }
-                                       
+
                                        > span {
                                                vertical-align: middle;
                                        }
@@ -306,17 +306,17 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                        }
                }
        }
-       
+
        > footer {
                bottom: 0;
                height: 100px;
                padding: 10px;
-               
+
                &:hover > div > ul > li > img {
                        filter: none;
                        -webkit-filter: none;
                }
-               
+
                > span {
                        bottom: 0;
                        font-size: 48px;
@@ -324,74 +324,74 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
                        opacity: 0;
                        position: absolute;
                        top: 0;
-                       transition: opacity .24s;
+                       transition: opacity 0.24s;
                        width: 30px;
                        z-index: 2;
-                       
+
                        &.pointer {
-                               opacity: .6;
-                               
+                               opacity: 0.6;
+
                                &:hover {
                                        opacity: 1;
                                }
                        }
-                       
+
                        &.wcfImageViewerButtonPrevious {
                                left: 5px;
                        }
-                       
+
                        &.wcfImageViewerButtonNext {
                                right: 5px;
                        }
                }
-               
+
                > div {
                        height: 80px;
                        margin: 0 35px;
                        overflow: hidden;
                        white-space: nowrap;
-                       
+
                        > ul {
                                display: flex;
                                font-size: 0;
                                height: 80px;
                                z-index: 1;
-                               
-                               transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .24s;
-                               
+
+                               transition: margin-left cubic-bezier(0.5, 1.595, 0.56, 0.98) 0.24s;
+
                                > li {
                                        align-items: center;
                                        display: flex;
                                        flex: 0 0 80px;
-                                       opacity: .6;
+                                       opacity: 0.6;
                                        position: relative;
-                                       transition: opacity .24s;
-                                       
+                                       transition: opacity 0.24s;
+
                                        &.active,
                                        &:hover {
                                                opacity: 1;
                                        }
-                                       
+
                                        &:not(:last-child) {
                                                margin-right: 10px;
                                        }
-                                       
+
                                        &.active > img {
                                                filter: none;
                                                -webkit-filter: none;
                                        }
-                                       
-                                       &.loading{
+
+                                       &.loading {
                                                &:before {
                                                        @extend .icon48;
                                                        @extend .fa-spinner;
                                                }
-                                               
+
                                                > img {
                                                        opacity: 0;
                                                }
                                        }
-                                       
+
                                        > img {
                                                max-height: 80px;
                                                max-width: 80px;
@@ -406,22 +406,22 @@ $wcfImageViewerFontColor: rgba(211, 211, 211, 1);
        .wcfImageViewer {
                > header {
                        height: 80px;
-                       
+
                        > .wcfImageViewerButtonClose {
                                right: 16px;
                                top: 16px;
                        }
                }
-               
+
                > footer {
                        height: 80px;
-                       
+
                        > div {
                                height: 60px;
-                               
+
                                > ul {
                                        height: 60px;
-                                       
+
                                        > li {
                                                height: 60px;
                                        }