User:LegendarySims/global.css

/* -- Organized bell notifications -- */

/* -- Standing-out look for unread notification cards -- */ outline: 1px solid black; margin: 10px; box-shadow: 5px 5px 5px gray; }
 * 1) notificationContainer > .wds-notification-card.wds-is-unread {

/* -- Minimal look for read notification cards -- */ /* The transition properties in this part take effect when a hover ends */ /* Announcements are excluded from most changes because of the way they are styled */

padding-top: 5px; padding-bottom: 5px; margin: 0 0 0 3px; transition: 0.3s ease 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread) {

/* Size 0 to hide the actors text */ font-size: 0; line-height: 0.01px; /* Apparently needed for the transition */ transition: all 0.3s ease 5s, font-size 0s 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):not([data-type="announcement"]) .wds-notification-card__text {

/* However, the bolded child elements should stay visible */ font-size: 14px; line-height: 18px; transition: 0.3s ease 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):not([data-type="announcement"]) .wds-notification-card__text * {

/* Triggering a linebreak after "replied" or "mentioned" etc., while keeping it animatable for the transition */ display: inline-block; min-width: calc(100% + 0.5em); margin-left: -0.5em; transition: all 0.3s ease 2s, min-width 0s 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):not([data-type="announcement"]) .wds-notification-card__text > :first-child {

/* Getting rid of the avatar stack - without display:none in order to allow a   transition */ max-height: 0; margin: 0; overflow: hidden; transition: 0.3s ease 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread) > .wds-avatar-stack {

margin-top: 0; transition: 0.3s ease 2s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread) .wds-notification-card__snippet {

/* -- Restoring full look when hovering -- */

padding-top: 15px; padding-bottom: 15px; margin-left: 10px; transition: 0.3s ease 0.3s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover {

font-size: 14px; line-height: 18px; min-width: 0; margin-left: 0; transition: all 0.3s ease 0.3s, font-size 0s 0.3s, min-width 0s 0.3s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover .wds-notification-card__text,
 * 2) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover .wds-notification-card__text > :first-child,
 * 3) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover .wds-notification-card__text * {

max-height: 100px; margin: 8px 18px 6px 40px; transition: 0.3s ease 0.3s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover > .wds-avatar-stack {

margin-top: 8px; transition: 0.3s ease 0.3s; }
 * 1) notificationContainer > .wds-notification-card:not(.wds-is-unread):hover .wds-notification-card__snippet {

/* -- Type Coloring --*/

/* All notif cards get a left transparent border to be filled with a color later. */   border-left: 10px solid transparent; }
 * 1) notificationContainer > .wds-notification-card {

/* New messages on own wall or talk page */ border-left-color: blue; }
 * 1) notificationContainer > .wds-notification-card[data-type="message-wall-post"],
 * 2) notificationContainer > .wds-notification-card[data-type="talk-page-message"] {

/* Message wall replies */ border-left-color: cyan; }
 * 1) notificationContainer > .wds-notification-card[data-type="message-wall-reply"] {

/* Discussions replies */ border-left-color: lightgreen; }
 * 1) notificationContainer > .wds-notification-card[data-type="discussion-reply"] {

/* Discussions at-mention */ border-left-color: green; }
 * 1) notificationContainer > .wds-notification-card[data-type="post-at-mention"],
 * 2) notificationContainer > .wds-notification-card[data-type="thread-at-mention"] {

/* Discussions upvotes */ border-left-color: green; border-left-style: dotted; }
 * 1) notificationContainer > .wds-notification-card[data-type="discussion-upvote-post"],
 * 2) notificationContainer > .wds-notification-card[data-type="discussion-upvote-reply"] {

/* Article/blog comments replies */ border-left-color: orange; }
 * 1) notificationContainer > .wds-notification-card[data-type="article-comment-reply"] {

/* Article/blog comments at-mentions */ border-left-color: orangered; }
 * 1) notificationContainer > .wds-notification-card[data-type="article-comment-at-mention"],
 * 2) notificationContainer > .wds-notification-card[data-type="article-comment-reply-at-mention"] {

/* Announcments are fully highlighted */ background-color: yellow; }
 * 1) notificationContainer > .wds-notification-card[data-type="announcement"] {

/* -- Icons -- */

/* Removing original SVG icon */ visibility: hidden; }
 * 1) notificationContainer .wds-notification-card__icon-wrapper > .wds-icon {

/* General settings for all icons */ background-repeat: no-repeat; }
 * 1) notificationContainer .wds-notification-card__icon-wrapper {

/* Message Wall and talk page */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-message-small.svg'); }
 * 1) notificationContainer > .wds-notification-card[data-type*="message"] .wds-notification-card__icon-wrapper {

/* Discussion replies */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-comment-small.svg'); }
 * 1) notificationContainer > .wds-notification-card[data-type="discussion-reply"] .wds-notification-card__icon-wrapper {

/* Upvotes */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-heart-small.svg'); }
 * 1) notificationContainer > .wds-notification-card[data-type*="upvote"] .wds-notification-card__icon-wrapper {

/* Article/blog comments */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-page-small.svg'); }
 * 1) notificationContainer > .wds-notification-card[data-type*="comment"] .wds-notification-card__icon-wrapper {

/* At-mentions */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-mention-small.svg'); }
 * 1) notificationContainer > .wds-notification-card[data-type*="mention"] .wds-notification-card__icon-wrapper {

/* Announcements */ background-image: url('/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-flag-small.svg')
 * 1) notificationContainer > .wds-notification-card[data-type="announcement"] .wds-notification-card__icon-wrapper {