Use prettier for SCSS (#3895)

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

diff --git a/wcfsetup/install/files/style/ui/userLogin.scss b/wcfsetup/install/files/style/ui/userLogin.scss
index 9b5fb87ed5057407628c35e49871190e240f8fcb..385b2b85e61400adebd726411501f5903de4d2d9 100644 (file)
--- a/wcfsetup/install/files/style/ui/userLogin.scss
+++ b/wcfsetup/install/files/style/ui/userLogin.scss
@@ -1,63 +1,80 @@
+@mixin thirdPartyLoginButtons {
+       border-width: 0;
+       color: rgba(255, 255, 255, 1);
+
+       > .icon {
+               flex: 0 0 24px;
+       }
+
+       > span:not(.icon) {
+               flex: 1 1 auto;
+               margin-left: 5px;
+       }
+
+       /* branding */
+       &.googleLoginButton {
+               background-color: rgb(255, 255, 255);
+               border: 1px solid rgb(233, 233, 233);
+               color: rgb(51, 51, 51);
+
+               &:hover {
+                       background-color: rgb(255, 255, 255);
+               }
+
+               .fa-google {
+                       background-image: url(data:image/png;base64,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);
+                       background-repeat: no-repeat;
+                       background-size: contain;
+
+                       &::before {
+                               display: none;
+                       }
+               }
+       }
+
+       &.facebookLoginButton {
+               background-color: rgb(59, 89, 152);
+
+               &:hover {
+                       background-color: rgb(48, 72, 123);
+               }
+       }
+
+       &.twitterLoginButton {
+               background-color: rgb(85, 172, 238);
+
+               &:hover {
+                       background-color: rgb(48, 154, 234);
+               }
+       }
+
+       &.githubLoginButton {
+               background-color: rgb(68, 68, 68);
+
+               &:hover {
+                       background-color: rgb(48, 48, 48);
+               }
+       }
+}
+
 .loginForm > form {
        .userLoginButtons {
                margin-top: 20px;
                text-align: center;
        }
-       
+
        .thirdPartyLogin {
                flex: 0 0 100%;
-               
+
                & + .thirdPartyLogin {
                        margin-top: 10px;
                }
-               
+
                .thirdPartyLoginButton {
                        align-items: center;
                        display: flex;
-                       border-width: 0;
-                       color: rgba(255, 255, 255, 1);
-                       
-                       > .icon {
-                               flex: 0 0 24px;
-                       }
-                       
-                       > span:not(.icon) {
-                               flex: 1 1 auto;
-                               margin-left: 5px;
-                       }
-                       
-                       /* branding */
-                       &.googleLoginButton {
-                               background-color: rgb(221, 75, 57);
-                               
-                               &:hover {
-                                       background-color: rgb(202, 53, 35);
-                               }
-                       }
-                       
-                       &.facebookLoginButton {
-                               background-color: rgb(59, 89, 152);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 72, 123);
-                               }
-                       }
-                       
-                       &.twitterLoginButton {
-                               background-color: rgb(85, 172, 238);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 154, 234);
-                               }
-                       }
-                       
-                       &.githubLoginButton {
-                               background-color: rgb(68, 68, 68);
-                               
-                               &:hover {
-                                       background-color: rgb(48, 48, 48);
-                               }
-                       }
+
+                       @include thirdPartyLoginButtons;
                }
        }
 }
@@ -67,33 +84,33 @@
                -webkit-column-count: 2;
                -moz-column-count: 2;
                column-count: 2;
-               
+
                -webkit-column-gap: 40px;
                -moz-column-gap: 40px;
                column-gap: 40px;
-               
+
                > .section {
                        /* Sections should never be split, but Firefox, IE and Edge don't seem
                           to care about this despite advertising the support for it. We can work
                           around this by using `overflow: hidden` which magically does the job,
                           but doesn't affect Chrome which properly breaks anyway. */
-                       
+
                        margin-top: 0;
                        overflow: hidden; /* Fix for Firefox, IE and Edge */
-                       
+
                        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
                        page-break-inside: avoid; /* Firefox */
                        break-inside: avoid; /* IE 10+ */
-                       
+
                        &.loginFormLogin {
                                page-break-after: always;
                                break-after: always;
                                -webkit-column-break-after: always;
                        }
-                       
+
                        &.loginFormRegister {
                                margin-top: 0;
-                               
+
                                & + .loginFormThirdPartyLogin {
                                        margin-top: 30px;
                                }
@@ -107,7 +124,7 @@
        .contentHeader ~ .loginForm {
                margin-top: 30px;
        }
-       
+
        /* force columns to be 300px wide in login overlay */
        .dialogContent .loginForm:not(.loginFormLoginOnly) .section {
                width: 300px;
@@ -117,3 +134,13 @@
 .loginFormLogin > .section {
        margin-top: 30px !important;
 }
+
+/* CSS does not allow selectors starting with a number. 
+   Therefore we are using the unicode character to identify
+   the correct selector. In a nutshell: the selector is #3rdParty.section */
+#\33 rdParty.section .thirdPartyLoginButton {
+       align-items: center;
+       display: inline-flex;
+
+       @include thirdPartyLoginButtons;
+}