+++ /dev/null
-.interactiveDropdown {
- background-color: @wcfContainerAccentBackgroundColor;
- border: 1px solid @wcfDropdownBorderColor;
- color: @wcfDropdownColor;
- display: block;
- position: absolute;
- z-index: 450;
-
- .boxShadow(0, 3px, rgba(0, 0, 0, .25), 8px);
-
- &:not(.open) {
- display: none !important;
- }
-
- > .pointer {
- border: 10px solid transparent;
- border-bottom-color: @wcfDropdownBorderColor;
- border-top-width: 0;
- content: "";
- display: inline-block;
- position: absolute;
- top: -10px;
- z-index: 100;
-
- > span {
- border: 8px solid transparent;
- border-bottom-color: @wcfContainerAccentBackgroundColor;
- border-top-width: 0;
- content: "";
- display: inline-block;
- left: -8px;
- position: absolute;
- top: 2px;
- z-index: 101;
- }
- }
-
- &.interactiveDropdownUserMenu {
- > .interactiveDropdownItemsContainer {
- overflow: visible;
- max-height: none;
- }
-
- > .pointer {
- border-width: 0 7px 7px 7px;
- top: -7px;
-
- > span {
- border-width: 0 5px 5px 5px;
- left: -5px;
- }
- }
- }
-}
-
-.interactiveDropdownHeader {
- padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
-
- > .interactiveDropdownTitle {
- font-family: "Segoe UI Semibold";
- font-weight: bold;
- }
-
- > .interactiveDropdownLinks {
- float: right;
-
- > li {
- display: inline-block;
- margin-left: (@wcfGapSmall + @wcfGapTiny);
- }
- }
-
- &:after {
- clear: both;
- }
-}
-
-.interactiveDropdownItemsContainer {
- border: 1px solid @wcfDropdownBorderColor;
- border-width: 1px 0;
- max-height: 300px;
-
- &.ps-container {
- > .interactiveDropdownItems {
- position: relative;
- z-index: 100;
- }
-
- > .ps-scrollbar-y-rail {
- z-index: 200;
- }
- }
-}
-
-.interactiveDropdownItems > li {
- background-color: @wcfDropdownBackgroundColor;
-
- .transition(~"background-color, background-position", .3s, linear);
-
- &.loading,
- &.noItems {
- padding: @wcfGapLarge @wcfGapMedium;
- text-align: center;
-
- @extend .wcfFontHeadline;
- }
-
- &:not(.loading):not(.noItems) {
- overflow: hidden;
- padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
- position: relative;
-
- .textShadow(@wcfContainerAccentBackgroundColor);
-
- &:not(:last-child) {
- border-bottom: 1px solid @wcfDropdownBorderColor;
- }
-
- &:hover {
- background-color: @wcfDropdownHoverBackgroundColor;
- }
-
- &.interactiveDropdownItemOutstanding {
- background-color: @wcfDropdownHoverBackgroundColor;
- background-repeat: no-repeat;
- background-size: 200%;
-
- .linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%");
-
- &:hover {
- background-position: 100%;
- }
- }
-
- &.interactiveDropdownItemOutstandingIcon > div.box32 {
- padding-right: 16px + (@wcfGapSmall + @wcfGapTiny);
- }
-
- &.notificationItem {
- .userLink {
- font-weight: bold;
- }
- }
-
- &.interactiveDropdownItemShadow {
- > .box32 {
- position: relative;
- }
-
- > .box32,
- > .interactiveDropdownItemMarkAsRead {
- pointer-events: none;
- z-index: 20;
-
- a {
- pointer-events: all;
- }
- }
-
- > .interactiveDropdownItemShadowLink {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 10;
- }
- }
-
- &.groupedNotificationItem > .box32 > .framed > span.fa-users:before {
- position: relative;
- top: 3px;
- }
- }
-}
-
-.interactiveDropdownItems.interactiveDropdownItemsUserMenu > li {
- &.dropdownDivider {
- padding: 0 !important;
- }
-
- &:not(.dropdownDivider) {
- border-bottom-width: 0 !important;
- padding: (@wcfGapSmall + @wcfGapTiny);
- }
-
- > .box32 > .containerHeadline {
- > h3 {
- @extend .wcfFontHeadline
- }
- }
-
- > .box64 {
- position: relative;
-
- > .containerHeadline > .interactiveDropdownUserMenuLinkList {
- bottom: 0;
- position: absolute;
- }
- }
-
- .interactiveDropdownUserMenuLinkList > li {
- display: inline-block;
-
- @extend .wcfFontSmall;
-
- &:after {
- content: " \2013 ";
- }
-
- &:last-child:after {
- content: "";
- }
- }
-}
-
-.interactiveDropdownShowAll {
- display: block;
- padding: @wcfGapSmall (@wcfGapSmall + @wcfGapTiny);
- text-align: center;
-}
-
-@media only screen and (min-width: 801px) {
- .interactiveDropdown {
- min-width: 350px;
-
- > .interactiveDropdownItemsContainer {
- overflow: hidden;
- position: relative;
-
- > .interactiveDropdownItems > li:not(.loading) {
- max-width: 400px;
- box-sizing: border-box;
-
- &.interactiveDropdownItemOutstandingIcon {
- > div.interactiveDropdownItemMarkAsRead {
- opacity: .6;
- position: absolute;
- right: (@wcfGapSmall + @wcfGapTiny);
- top: 50%;
-
- transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
-
- .transition(opacity, .3s, linear);
- }
-
- &:hover > div.interactiveDropdownItemMarkAsRead {
- opacity: 1;
- }
- }
- }
- }
- }
-}
-
-@media only screen and (max-width: 800px) {
- .interactiveDropdown {
- border-width: 1px 0;
- box-sizing: border-box;
- left: 0 !important;
- right: 0 !important;
- width: 100%;
-
- > .interactiveDropdownItemsContainer {
- overflow-x: auto;
-
- > .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead {
- bottom: 0;
- position: absolute;
- right: 0;
- top: 0;
- width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny);
-
- > a {
- display: block;
- height: 100%;
- text-align: center;
-
- > .icon {
- position: relative;
- top: 50%;
-
- transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- }
- }
- }
- }
- }
-}