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 {
212 /* Adds a link spanning the entire item while being placed behind all other links appearing
213 within the regular text using a lower z-index. Allows for regular links to be accessible,
214 but causes the item to act as a link. */
215 .interactiveDropdownItemShadow {
221 > .interactiveDropdownItemMarkAsRead {
222 pointer-events: none;
226 > .interactiveDropdownItemShadowLink {
236 /* show all button shown in dropdown menu bottom */
237 .interactiveDropdownShowAll {
238 background-color: $wcfSidebarBackground;
239 color: $wcfSidebarHeadlineText;
245 color: $wcfSidebarHeadlineText;
246 text-decoration: underline;
250 @include screen-md-up {
251 .interactiveDropdown {
255 .interactiveDropdownItemsContainer {
261 .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
266 @include screen-sm-down {
267 .interactiveDropdown {
270 flex-direction: column;
276 .interactiveDropdownHeader {
280 .interactiveDropdownItemsContainer {
284 -webkit-overflow-scrolling: touch;
286 /* increase the clickable area of the mark as read icon */
287 .interactiveDropdownItemOutstanding {
291 .interactiveDropdownItemMarkAsRead {
296 width: 36px; /* 16px icon + 2x 10px padding */
307 transform: translateY(-50%);
313 .interactiveDropdownShowAll {