Use prettier for SCSS (#3895)
[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / wsc31.scss
index 939e5e01931e0a0e962227ce3a12db7c70ff2fa8..d14a2e20b3052edd22d5ba9552a0abe62346ada3 100644 (file)
@@ -8,12 +8,12 @@
                        padding: 30px 0;
                }
        }
-       
+
        // reduced margin-top
        .paginationTop {
                margin-top: 30px;
        }
-       
+
        // sheet-like presentation of content containers
        .content > .section,
        .content > form,
@@ -21,7 +21,7 @@
                border: 1px solid $wcfContentContainerBorder;
                background-color: $wcfContentContainerBackground;
                padding: 20px;
-               
+
                @include screen-sm-down {
                        border-left-width: 0;
                        border-right-width: 0;
                        margin-right: -10px;
                        padding: 10px;
                }
-               
+
                > .section:first-child {
                        margin-top: 0;
                }
-               
+
                .section {
                        &:not(:first-child) {
                                margin-top: 0;
                        }
-                       
+
                        & + .section {
                                margin-top: 40px;
                        }
                }
        }
-       
+
        .content > .section + .sectionContainer,
        .content > form + .sectionContainer {
                margin-top: 40px;
        }
-       
+
        .content > form {
                margin-top: 40px;
        }
-       
+
        .contentHeader + .section,
        .contentHeader + form,
        .contentHeader + .sectionContainer {
                margin-top: 30px;
        }
-       
+
        .content > .section .tabMenuContent > .section:first-child,
        .content > .section .tabMenuContent > form > .section:first-child {
                margin-top: 20px;
        }
-       
+
        // borders used to visually separate lists from adjacent containers
        .content > .section {
                > .messageList {
                        border-top-width: 0;
-                       
+
                        @include screen-sm-down {
                                &:first-child {
                                        margin-top: -11px;
                                }
                        }
-                       
+
                        > :first-child {
                                padding-top: 0;
-                               
+
                                // 30px added to account for `padding-top: 0` above
                                &.anchorFixedHeader:target {
                                        margin-top: -79px;
-                                       
+
                                        &::after {
                                                height: 80px;
                                        }
-                                       
+
                                        > .message {
                                                transform: translateY(79px);
                                        }
                                }
                        }
-                       
+
                        > :last-child {
                                border-bottom-width: 0;
                                padding-bottom: 0;
                        }
                }
-               
+
                > .tabularList:last-child {
                        border-bottom-width: 0;
                }
-               
+
                > .containerList {
                        > :first-child {
-                               border-top-width: 0
+                               border-top-width: 0;
                        }
-                       
+
                        > :last-child {
                                border-bottom-width: 0;
                        }
                }
        }
-       
+
        // drop-shadow for submenu lists
        .mainMenu .boxMenu .boxMenuDepth1 {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.23);
        }
-       
+
        // individual variables for the editor toolbar
        .redactor-toolbar {
                background-color: $wcfEditorButtonBackground;
-               
+
                > li {
                        > a {
                                color: $wcfEditorButtonText;
-                               
+
                                &.redactor-button-disabled {
                                        color: $wcfEditorButtonTextDisabled !important;
                                }
-                               
+
                                &.redactor-act,
                                &.dropact {
                                        background-color: $wcfEditorButtonBackgroundActive;
                                        color: $wcfEditorButtonTextActive;
                                }
-                               
+
                                @include screen-lg {
                                        &:hover {
                                                background-color: $wcfEditorButtonBackgroundActive;
                                        }
                                }
                        }
-                       
+
                        @include screen-sm-up {
                                &.redactor-toolbar-separator::before {
                                        border-left: 1px solid $wcfEditorButtonText;
                                }
                        }
                }
-               
+
                @include screen-xs {
                        &.redactorToolbarOverride > .redactor-toolbar-separator::before {
                                border-left: 1px solid $wcfEditorButtonText;
                        }
-                       
+
                        .redactorToolbarToggle::before {
                                border-left: 1px solid $wcfEditorButtonText;
                        }
                }
        }
-       
+
        // adjust editor and message tab menu background color
        .redactor-box,
        .messageTabMenuNavigation > ul,
        .messageContent.loading > .messageContentLoadingOverlay {
                background-color: $wcfContentContainerBackground;
        }
-       
+
        .messageTabMenuNavigation > ul > li.active > a::after {
                border-bottom-color: $wcfContentContainerBackground;
        }
-       
-       // use the `alert` variables rather than fixed values 
+
+       // use the `alert` variables rather than fixed values
        .innerError {
                background-color: $wcfStatusErrorBackground;
                color: $wcfStatusErrorText;
-               
+
                &::before {
                        border-bottom-color: $wcfStatusErrorBackground;
                }
        }
-       
+
        // adjust color values to account for a significant darker sidebar background
        .interactiveDropdownHeader .icon {
                color: inherit;
                        color: $wcfSidebarDimmedText;
                }
        }
-       .messageReduced  {
+       .messageReduced {
                .messageTitle a {
                        color: $wcfSidebarText;
                }
-               
+
                .messageHeaderMetaData {
                        .messagePublicationTime,
                        > li:not(:last-child)::after {
        }
        .userMention {
                color: $wcfSidebarLink;
-               
+
                &:hover {
                        color: $wcfSidebarLinkActive;
                }
                        }
                }
        }
-       
+
        // message clipboard checkbox
        @include screen-sm-down {
                .messageQuickOptions > .jsMessageClipboardCheckbox {
                        top: -1px;
                }
        }
-       
+
        // tab menu overflow
        .tabMenuOverlayLeft {
-               background: linear-gradient(to left, transparentize($wcfContentContainerBackground, 100%) 0%, $wcfContentContainerBackground 50%);
+               background: linear-gradient(
+                       to left,
+                       transparentize($wcfContentContainerBackground, 100%) 0%,
+                       $wcfContentContainerBackground 50%
+               );
        }
        .tabMenuOverlayRight {
-               background: linear-gradient(to right, transparentize($wcfContentContainerBackground, 100%) 0%, $wcfContentContainerBackground 50%);
+               background: linear-gradient(
+                       to right,
+                       transparentize($wcfContentContainerBackground, 100%) 0%,
+                       $wcfContentContainerBackground 50%
+               );
        }
-       
+
        // background-color when saving messages
        .messageContent.loading > .messageContentLoadingOverlay {
                background-color: $wcfContentContainerBackground;