1 .dropdownMenuContainer > .interactiveDropdown.open {
5 /* styling for interactive dropdowns (currently only used in the user panel) */
7 background-color: $wcfContentBackground;
9 box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
10 color: $wcfContentText;
16 /* prevent dropdown from flickering during calculation */
23 &.interactiveDropdownUserMenu {
24 > .interactiveDropdownItemsContainer {
29 color: $wcfContentLink;
32 color: $wcfContentLinkActive;
38 @include screen-sm-md {
40 flex-direction: column;
44 // override JS positioning
46 left: auto !important;
50 > .interactiveDropdownHeader,
51 > .interactiveDropdownShowAll {
55 > .interactiveDropdownItemsContainer {
60 -webkit-overflow-scrolling: touch;
70 /* drop down header */
71 .interactiveDropdownHeader {
73 background-color: $wcfSidebarBackground;
74 color: $wcfSidebarHeadlineText;
79 color: $wcfSidebarHeadlineLink;
82 color: $wcfSidebarHeadlineLinkActive;
84 text-decoration: underline;
88 .interactiveDropdownTitle {
91 @include wcfFontHeadline;
94 .interactiveDropdownLinks {
99 @include screen-sm-down {
104 /* container for dropdown items */
105 .interactiveDropdownItemsContainer {
106 border: 1px solid $wcfContentBorderInner;
110 > .interactiveDropdownItems {
115 > .ps-scrollbar-y-rail {
121 /* dropdown item list */
122 .interactiveDropdownItems {
128 border-bottom: 1px solid $wcfContentBorderInner;
132 background-color: $wcfTabularBoxBackgroundActive;
154 color: $wcfContentDimmedText;
163 @include screen-sm-down {
172 justify-content: center;
179 @include wcfFontHeadline;
183 /* outstanding / unread item */
184 .interactiveDropdownItemOutstanding {
192 background-color: rgb(49, 138, 220);
201 /* mark as read button for an item */
202 .interactiveDropdownItemMarkAsRead {
208 /* Adds a link spanning the entire item while being placed behind all other links appearing
209 within the regular text using a lower z-index. Allows for regular links to be accessible,
210 but causes the item to act as a link. */
211 .interactiveDropdownItemShadow {
217 > .interactiveDropdownItemMarkAsRead {
218 pointer-events: none;
222 > .interactiveDropdownItemShadowLink {
232 /* show all button shown in dropdown menu bottom */
233 .interactiveDropdownShowAll {
234 background-color: $wcfSidebarBackground;
235 color: $wcfSidebarHeadlineText;
241 color: $wcfSidebarHeadlineText;
242 text-decoration: underline;
246 @include screen-md-up {
247 .interactiveDropdown {
251 .interactiveDropdownItemsContainer {
257 .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
262 @include screen-sm-down {
263 .interactiveDropdown {
266 flex-direction: column;
272 .interactiveDropdownHeader {
276 .interactiveDropdownItemsContainer {
280 -webkit-overflow-scrolling: touch;
282 /* increase the clickable area of the mark as read icon */
283 .interactiveDropdownItemOutstanding {
287 .interactiveDropdownItemMarkAsRead {
292 width: 36px; /* 16px icon + 2x 10px padding */
303 transform: translateY(-50%);
309 .interactiveDropdownShowAll {