Use prettier for SCSS (#3895)

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

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 7d7d92b6f08004b144044e274342e4be37f6c082..bc45a034ba54f60af9ddfb73b33bcb99fbd7b713 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -6,51 +6,61 @@
 .interactiveDropdown {
        background-color: $wcfContentBackground;
        border-radius: 2px;
-       box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        color: $wcfContentText;
        pointer-events: all;
        position: absolute;
        visibility: hidden;
        z-index: 450;
-       
+
        /* prevent dropdown from flickering during calculation */
        left: -200%;
-       
+
        > .elementPointer {
                display: none;
        }
-       
-       &.interactiveDropdownUserMenu > .interactiveDropdownItemsContainer {
-               overflow: visible;
-               max-height: none;
+
+       &.interactiveDropdownUserMenu {
+               > .interactiveDropdownItemsContainer {
+                       overflow: visible;
+                       max-height: none;
+
+                       a {
+                               color: $wcfContentLink;
+
+                               &:hover {
+                                       color: $wcfContentLinkActive;
+                               }
+                       }
+               }
        }
-       
+
        @include screen-sm-md {
                display: flex;
                flex-direction: column;
                position: fixed;
                width: 350px;
-               
+
                // override JS positioning
                bottom: 0 !important;
                left: auto !important;
                top: 0 !important;
                right: 0 !important;
-               
+
                > .interactiveDropdownHeader,
                > .interactiveDropdownShowAll {
                        flex: 0 0 auto;
                }
-               
+
                > .interactiveDropdownItemsContainer {
                        flex: 1 1 auto;
                        max-height: none;
                        overflow: auto;
-                       
+
                        -webkit-overflow-scrolling: touch;
                }
        }
-       
+
        @include screen-lg {
                position: fixed;
                top: 50px !important;
@@ -64,28 +74,28 @@
        color: $wcfSidebarHeadlineText;
        display: flex;
        padding: 10px;
-       
+
        a {
                color: $wcfSidebarHeadlineLink;
-               
+
                &:hover {
                        color: $wcfSidebarHeadlineLinkActive;
-                       
+
                        text-decoration: underline;
                }
        }
-       
+
        .interactiveDropdownTitle {
                flex: 1 1 auto;
-               
+
                @include wcfFontHeadline;
        }
-       
+
        .interactiveDropdownLinks {
                flex: 0 0 auto;
                margin-left: 5px;
        }
-       
+
        @include screen-sm-down {
                padding: 10px;
        }
@@ -95,13 +105,13 @@
 .interactiveDropdownItemsContainer {
        border: 1px solid $wcfContentBorderInner;
        border-width: 1px 0;
-       
+
        &.ps-container {
                > .interactiveDropdownItems {
                        position: relative;
                        z-index: 100;
                }
-               
+
                > .ps-scrollbar-y-rail {
                        z-index: 200;
                }
@@ -113,55 +123,59 @@
        > li {
                padding: 10px;
                position: relative;
-               
+
                &:not(:last-child) {
                        border-bottom: 1px solid $wcfContentBorderInner;
                }
-               
+
                &:hover {
                        background-color: $wcfTabularBoxBackgroundActive;
                }
-               
+
                a {
-                       color: $wcfContentLink;
-                       
+                       color: inherit;
+
                        &:hover {
-                               color: $wcfContentLinkActive;
+                               color: inherit;
                        }
                }
-               
+
+               h3 a {
+                       font-weight: 600;
+               }
+
                .box48 {
                        align-items: center;
                        overflow: hidden;
                }
-               
+
                small {
                        align-items: center;
                        color: $wcfContentDimmedText;
                        display: flex;
                        margin-top: 3px;
-                       
+
                        .separatorLeft {
                                margin-left: 0.25em;
                        }
                }
-               
+
                @include screen-sm-down {
                        padding: 10px;
                }
        }
-       
+
        .loading,
        .noItems {
                align-items: center;
                display: flex;
                justify-content: center;
                padding: 20px 10px;
-               
+
                > .fa-spinner {
                        margin-right: 5px;
                }
-               
+
                @include wcfFontHeadline;
        }
 }
@@ -169,11 +183,11 @@
 /* outstanding / unread item */
 .interactiveDropdownItemOutstanding {
        display: flex;
-       
+
        > .box48 {
                flex: 1 1 auto;
        }
-       
+
        small::after {
                background-color: rgb(49, 138, 220);
                border-radius: 50%;
@@ -189,6 +203,10 @@
        align-self: center;
        flex: 0 0 auto;
        margin-left: 5px;
+
+       a {
+               pointer-events: all;
+       }
 }
 
 /* Adds a link spanning the entire item while being placed behind all other links appearing
@@ -198,17 +216,13 @@
        > .box48 {
                position: relative;
        }
-       
+
        > .box48,
        > .interactiveDropdownItemMarkAsRead {
                pointer-events: none;
                z-index: 20;
-               
-               a {
-                       pointer-events: all;
-               }
        }
-       
+
        > .interactiveDropdownItemShadowLink {
                bottom: 0;
                left: 0;
@@ -226,7 +240,7 @@
        display: block;
        padding: 10px;
        text-align: center;
-       
+
        &:hover {
                color: $wcfSidebarHeadlineText;
                text-decoration: underline;
@@ -237,13 +251,13 @@
        .interactiveDropdown {
                min-width: 350px;
        }
-       
+
        .interactiveDropdownItemsContainer {
                max-height: 400px;
                overflow: hidden;
                position: relative;
        }
-       
+
        .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
                max-width: 400px;
        }
@@ -258,44 +272,44 @@
                position: fixed;
                right: 0;
        }
-       
+
        .interactiveDropdownHeader {
                flex: 0 0 auto;
        }
-       
+
        .interactiveDropdownItemsContainer {
                flex: 1 1 auto;
                overflow: auto;
-               
+
                -webkit-overflow-scrolling: touch;
-               
+
                /* increase the clickable area of the mark as read icon */
                .interactiveDropdownItemOutstanding {
                        padding-right: 41px;
                }
-               
+
                .interactiveDropdownItemMarkAsRead {
                        bottom: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 36px; /* 16px icon + 2x 10px padding */
-                       
+
                        > a {
                                display: block;
                                height: 100%;
                                text-align: center;
-                               
+
                                > .icon {
                                        position: relative;
                                        top: 50%;
-                                       
+
                                        transform: translateY(-50%);
                                }
                        }
                }
        }
-       
+
        .interactiveDropdownShowAll {
                flex: 0 0 auto;
        }