MediaWiki:Pinkpurl.css

/** * @title          Pinkpurl * @description    Adds a Pink+Purple gradient theme to the global navigation, footer, UserActivity, etc.. * @Features       Custom Scrollbar, Header, Footer, UserActivity, Masthead, Tags, Links, WikiActivity. * @author         Anonminati */

/* HEADER */ .wds-global-navigation-wrapper { box-shadow: none; } .wds-global-navigation { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); -webkit-box-shadow: none; box-shadow: none; border-bottom: 0; border-image: none; } .wds-global-navigation, .wds-global-navigation-wrapper, .wds-global-navigation__content-container, .wds-global-navigation__content-bar-left, .wds-global-navigation__content-bar-right, .wds-global-navigation__dropdown-controls { height: var(--katsu-height); } .wds-global-navigation a:hover:not(.wds-notifications__mark-all-as-read), .wds-global-navigation a:hover:not(.wds-global-navigation__link), .wds-global-navigation__user-menu .wds-global-navigation__dropdown-link.wds-sign-out button.wds-sign-out__button { color: #fff; transition: all 0.2s ease; text-shadow: 0; } .wds-global-navigation__logo, .wds-global-navigation__link, .wds-global-navigation__search, .wds-global-navigation__search-label, .wds-global-navigation__search-input, .wds-global-navigation__user-menu, .wds-global-navigation__notifications-menu, .wds-global-navigation__start-a-wiki, .wds-global-navigation__wikis-menu { background: transparent; color: #fff; } .wds-global-navigation__notifications-menu-counter, .wds-global-navigation__search-submit { background-image: linear-gradient(to bottom right,#5600ff,#ff0071) !important; border-radius: 2px; border: none; } .wds-global-navigation__search-submit .wds-icon, .wds-global-navigation__search-close .wds-icon { fill: #fff !important; } .wds-global-navigation.wds-search-is-always-visible .wds-global-navigation__search-input::-webkit-input-placeholder { color: #fff; } .wds-global-navigation__logo-image path { fill: #fff; } .wds-global-navigation__logo-image path:first-child { fill: #fff } .wds-search-is-active .wds-global-navigation__search-input-wrapper { border-bottom-color: #fff; } .wds-dropdown__content.wds-global-navigation__search-suggestions { margin-top: -1px; } .wds-global-navigation__search-suggestions, .wds-global-navigation__search-suggestions a { color: #fff } .wds-global-navigation__search-toggle-text { display: none; } .wds-global-navigation__search-toggle-icon { transform: scale(1.2); margin-right: 0px; } .wds-global-navigation .wds-global-navigation__link { color: #fff !important; transition: .3s ease; } .wds-global-navigation .wds-global-navigation__link:hover, .wds-button.wds-is-secondary.wds-global-navigation__link-button:hover { filter: brightness(150%); transition: .3s ease; } .wds-global-navigation .wds-button.wds-is-secondary.wds-global-navigation__link-button, .wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-button.wds-is-secondary.wds-global-navigation__link-button { color: #fff !important; border-color: #fff; } .wds-global-navigation .wds-dropdown .wds-dropdown__content, .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2:hover .wds-dropdown-level-2__content, .wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:before, .wds-global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list:after, .wds-global-navigation .wds-dropdown .wds-dropdown-level-2__content li, .wds-global-navigation #GlobalNavigationWallNotifications { background-color: #fff; box-shadow: none; border: none; } .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover>a { background-color: transparent; color: #fff } .wds-global-navigation .wds-dropdown__toggle-chevron { fill: #fff !important; } .wds-global-navigation .wds-icon, .wds-global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover>a .wds-icon { fill: #fff } .wds-global-navigation .wds-global-navigation__link-button .wds-icon { fill: #fff !important; } .wds-global-navigation .wds-global-navigation__notifications-dropdown .wds-icon, .wds-global-navigation .wds-dropdown .wds-dropdown-level-2__toggle .wds-icon { fill: #fff; } .wds-global-navigation .wds-dropdown .wds-dropdown-level-2__toggle:hover .wds-icon { fill: #fff } .wds-global-navigation .wds-global-navigation__search-toggle { transition: .2s ease; } .wds-global-navigation .wds-global-navigation__search-toggle:hover { filter: brightness(150%); transition: .2s ease; } .wds-global-navigation .wds-avatar .wds-avatar__image, .wds-global-navigation .wds-avatar .wds-avatar__image:hover { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); } .wds-global-navigation .wds-dropdown.wds-is-active:not(.wds-no-chevron)::after, .wds-global-navigation .wds-dropdown.wds-is-active:not(.wds-no-chevron)::before, .wds-global-navigation .wds-dropdown:hover:not(.wds-no-chevron)::after, .wds-global-navigation .wds-dropdown:hover:not(.wds-no-chevron)::before { display: none; } .wds-global-navigation .wds-dropdown, .wds-global-navigation .wds-notifications__dropdown-content, .wds-global-navigation .wds-dropdown__content .wds-list li, .wds-notification-card__last-actor, color: #ff0071; } .wds-notification-card__context-list .wds-notification-card__context-item:hover, .wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li a { color: #ff0071 !important; filter: brightness(80%); }	background-color: rgba(187, 34, 34, 0); }	border: none; }	color: #ff0071; } .wds-notification-card__text { color: #5600ff; }	color: #fff; } background-color: transparent; color: #fff; }   background-color: #fff; }   background-color: #fff; border-color: transparent; display: flex; align-items: center; justify-content: space-between; }	background-color: #fff; border-color: transparent; } .wds-global-navigation .wds-list.wds-has-lines-between > li, .wds-notifications__mark-all-as-read { border-bottom: none; } .wds-global-navigation__notifications-counter { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); color: #fff; transform: scale(0.9); font-weight: bold; } .wds-notifications__mark-all-as-read-button a,	color: #ff0071 !important; } .wds-notification-card.wds-is-unread .wds-notification-card__icon-wrapper svg { fill: #ff0071; }
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header,
 * 1) GlobalNavigationWallNotifications .notifications-markasread,
 * 1) cn-entrypoint .wds-notification-card__body p {
 * 1) GlobalNavigationWallNotifications .notification:hover {
 * 1) GlobalNavigationWallNotifications,
 * 2) GlobalNavigationWallNotifications .notification {
 * 1) GlobalNavigationWallNotifications .notification time {
 * 1) GlobalNavigationWallNotifications .notification h4,
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-for-wiki-list a {
 * 1) GlobalNavigationWallNotifications .notification.empty {
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki.show .notifications-for-wiki-list {
 * 1) GlobalNavigationWallNotifications .notifications-for-wiki .notifications-wiki-header {
 * 1) GlobalNavigationWallNotifications .notifications-markasread {
 * 1) cn-entrypoint_mark-all-as-read a {

.wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li a:hover, .wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li:hover, .wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li .wds-sign-out__button:hover, .wds-global-navigation .wds-dropdown .wds-dropdown__content li.wds-is-selected, .wds-global-navigation .wds-dropdown .wds-dropdown__content .wds-list li:hover > a { background-color: transparent !important; color: #ff0071 !important; } /* ConsistentNotifications support */ color: #ff0071; }	border-color: #fff !important; }	stroke: #4c4e9e; }	background-image: linear-gradient(to bottom right,#5600ff,#ff0071) !important; height: 9px !important; width: 9px !important; left: -3px; top: 1px; z-index: 100; } /* Default avatar */ .wds-global-navigation .wds-avatar .wds-avatar__image { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); } .wds-global-navigation .wds-avatar .wds-avatar__inner-border { border-color: #fff } .wds-global-navigation .wds-avatar .wds-avatar__image path { fill: #fff; }
 * 1) cn-entrypoint_mark-all-as-read a {
 * 1) cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar .wds-avatar__image {
 * 1) cn-entrypoint #on-site-notifications-loader .wds-spinner__stroke {
 * 1) cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar:before, #cn-entrypoint .wds-notification-card.wds-is-unread .wds-avatar:after {

/*** Variables ***/ .wds-global-navigation-wrapper { --katsu-height: 55px; }

/* FOOTER */ body:not(.oasis-dark-theme) .wds-global-footer__header-logo path:nth-child(2) { fill: #fff; }

body:not(.oasis-dark-theme) .wds-global-footer { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); font-family: Rubik; }

body:not(.oasis-dark-theme) .wds-global-footer__section-header { color: #23065d; }

body:not(.oasis-dark-theme) .wds-global-footer__section-description { color: #fff; }

body:not(.oasis-dark-theme) .wds-global-footer__link, body:not(.oasis-dark-theme) .wds-global-footer__link:active, body:not(.oasis-dark-theme) .wds-global-footer__link:focus, body:not(.oasis-dark-theme) .wds-global-footer__link:visited { color: #fff; font-family: Rubik; }

body:not(.oasis-dark-theme) .wds-global-footer__link:hover { color: #fff; }

body:not(.oasis-dark-theme) .wds-global-footer__wikia-section.wds-is-create-wiki .wds-global-footer__link:hover { color: #fff; }

body:not(.oasis-dark-theme) .wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link { font-size: 24px; }

body:not(.oasis-dark-theme) .wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link div { border-bottom-color: #ff0071; transition: border-color 0.3s; }

body:not(.oasis-dark-theme) .wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__link:hover div { border-bottom-color: #5600ff; }

body:not(.oasis-dark-theme) .wds-global-footer__bottom-bar { background: rgba(38,38,38,.1); color: #fff; }

/* General */ @media only screen and (max-width: 1083px) { .wds-global-footer__fandom-section.wds-is-fandom-overview .wds-global-footer__links-list-item, .wds-global-footer__fandom-section.wds-is-follow-us .wds-global-footer__links-list-item { margin-bottom: 5px; } }

@media only screen and (max-width: 1083px) { .wds-global-footer__links-list-item { margin-bottom: 8px; } }

/* SCROLLBAR */ /* Makes the scrollbar 8px wide */
 * -webkit-scrollbar {

width: 8px; } /* Makes the scrollbar track have a black background */
 * -webkit-scrollbar-track {

background: #fff; } /* Makes the scrollbar bar have a green background */
 * -webkit-scrollbar-thumb {

background-image: linear-gradient(to bottom right,#5600ff,#ff0071); } /* Makes the background for the scrollbar bar a darker shade of green when hovered */
 * -webkit-scrollbar-thumb:hover {

background-image: linear-gradient(to bottom right,#5600ff,#ff0071); }

/* USER ACTIVITY */ /* * @title           DarkUserActivity * @description    Dark theme for user activity. * @author         Anonminati * @using code by  JustLeafy

.page-Special_UserActivity .article-table th, .page-Special_UserActivity .WikiaTable th { background: #ff0071; text-align: center; }

.page-Special_UserActivity a { color: #fff; text-decoration: none; font-family: rubik; }

.page-Special_UserActivity .article-table th, .page-Special_UserActivity .article-table td, .page-Special_UserActivity .WikiaTable th, .page-Special_UserActivity .WikiaTable td { border-bottom: 1px #2660df solid; padding: 6px 12px; text-align: center; }

.page-Special_UserActivity .useractivity-header th { width: 25%; } .page-Special_UserActivity .article-table, .page-Special_UserActivity .WikiaTable { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); color: #fff; border-collapse: collapse; border: 0px none #0d24d6; margin: 1em 1em 1em 0; font-family: rubik; }

.page-Special_UserActivity .WikiaPage .WikiaArticle { font-size: 15px; line-height: 22px; }

/* MASTHEAD */ /* FANDOMizedMasthead — tweaks masthead to remove gradients and be more consistent with Fandom Design System tabs */ .WikiaUserPagesHeader { background: none; }

body:not(.oasis-dark-theme) .UserProfileMasthead .masthead-info-lower:before { border-color: #5600ff #ff0071 transparent transparent; }

body:not(.oasis-dark-theme) .UserProfileMasthead .masthead-info { background-image: linear-gradient(to bottom right,#5600ff,#ff0071); color: white; }

.UserProfileMasthead .masthead-info > hgroup { background-image: none; }

.UserProfileMasthead + .tabs-container .tabs li a { text-transform: uppercase; font-weight: bold; font-size: 0.8rem; border: none; }

.UserProfileMasthead + .tabs-container .tabs .selected a { border: none; border-bottom: 4px solid currentColor; background: none; }

.UserProfileMasthead .tally em { margin-right: 5px; color: white; font-family: rubik; font-weight: thin; }

.UserProfileMasthead .details span { color: #000000; font-size: 12px; font-weight: bold; text-transform: uppercase; }

.tally span { float: left; color: white; font-family: rubik; }

.UserProfileMasthead .masthead-info hgroup { background-color: #404a57; background-image: linear-gradient(to bottom right,#5600ff,#ff0071); border-top-left-radius: 5px; border-top-right-radius: 5px; color: #fff; overflow: auto; padding: 8px 25px; }

.UserProfileMasthead .globaledit-details { border-top: 1px solid #ffffff; padding-top: 10px; }

/* WIKIA WRAPPER */ .WikiaBarWrapper { bottom: 0; height: 25px; padding: 0; position: fixed; width: 100%; z-index: 5000100; box-shadow: 0 0 10px 0 #333; background-image: linear-gradient(to bottom right,#5600ff,#ff0071); transition: all 200ms ease-in 200ms; -webkit-transition: all 200ms ease-in 200ms; }

.WikiaFooter .tools-menu, .WikiaBarWrapper .tools-menu { background: #ffffff; border-width: 2px 4px 4px; border-style: solid; border-color: #6200f5; background-image: linear-gradient(to bottom right,#5600ff,#ff0071); display: none; list-style: none; padding: 0; position: absolute; border-width: 4px 4px 2px; bottom: 22px; min-width: 120px; right: 0; z-index: 1000; }

/* TAGS */ .UserProfileMasthead .masthead-info .tag { border-radius: 3px; background: #ffffff; display: inline-block; margin-left: 10px; padding: 2px 5px; position: relative; text-transform: uppercase; top: -4px; color: #6400f4; }

/* WHOLE LINKS */ a { color: #ff0071; text-decoration: none; }

/* WIKI ACTIVITY */ /* Modernizing Activity Feed */

/* Root */


 * root {

--activity-dark-background-color: #1114; --activity-light-background-color: #c1c1c144; --activity-border-color: currentColor; --activity-light-morelink-color: #3a3a3a; --activity-dark-morelink-color: #d5d4d4; --activity-light-morelink-hover-color: #6d6d6d; --activity-dark-morelink-hover-color: #a3a0a0; --activity-icon-color: currentColor; --activity-feed-hovereffect-transition: .3s; --activity-feed-hovereffect-leftmargin: 5px; --activity-feed-link-transition: .3s; } /* Light Theme */ /* Feed */ .activityfeed a:hover { text-decoration: none; filter: brightness(115%); transition: var(--activity-feed-link-transition); } .activityfeed > :first-child { background-color: var(--activity-light-background-color); } .activityfeed > li:not(:first-child) { border-top: none; background-color: var(--activity-light-background-color); } .activityfeed > li { width: 580px; padding-left: 35px; border-left: 5px solid var(--activity-border-color) !important; } span.wall-owner, span.subtle > a { font-weight: bold; } span.wall-owner > a:hover, .activityfeed .subtle > a:hover { text-decoration: none; filter: brightness(115%); transition: var(--activity-feed-link-transition); } li.activity-type-talk.activity-ns-1 { background-color: var(--activity-light-background-color); } .dark_text_2 { color: #3a3a3a; } table.wallfeed td img.avatar { border: 2px solid; border-radius: 14px; margin-top: 0; } .WikiaArticle em { font-style: normal; } .activityfeed td.activityfeed-details-label { font-weight: bold; }

/* Hover Effect */

.activityfeed > li:hover { transition: var(--activity-feed-hovereffect-transition); margin-left: var(--activity-feed-hovereffect-leftmargin); }

.activityfeed strong { font-size: 14px; } /* More Link */ .activity-feed-more { border: 1px var(--activity-light-morelink-color) solid; } .activity-feed-more a { color: var(--activity-light-morelink-color); text-transform: uppercase; font-weight: bold; } .activity-feed-more a:hover, .activity-feed-more:hover { color: var(--activity-light-morelink-hover-color); border-color: var(--activity-light-morelink-hover-color); transition: var(--activity-feed-link-transition); text-decoration: none; }

/* Wiki Activity Icons (credits go to Unai for the original code) */ .skin-oasis .sprite.edit { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-pencil-small.svg"); background-color: var(--activity-icon-color); background-image: none; height: 18px; mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-pencil-small.svg"); width: 18px; background-repeat: no-repeat; margin-left: -30px; } .skin-oasis .sprite.new { -webkit-mask-image: url("https://justleafy.wikia.com/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-plus-small.svg"); background-color: var(--activity-icon-color); background-image: none; height: 18px; mask-image: url("https://justleafy.wikia.com/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-plus-small.svg"); width: 18px; } .skin-oasis .sprite.move { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-reply-arrow-small.svg"); background-color: var(--activity-icon-color); background-image: none; height: 18px; mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-reply-arrow-small.svg"); width: 18px; transform: rotate(180deg); } .skin-oasis .sprite.talk { -webkit-mask-image: url(/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-reply-small.svg); background-color: var(--activity-icon-color); background-image: none; height: 18px !important; mask-image: url(/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-reply-small.svg); width: 18px !important; } .skin-oasis .sprite.categorization { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-tag-small.svg"); background-color: var(--activity-icon-color); background-image: none; height: 18px !important; mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-tag-small.svg"); width: 18px !important; background-repeat: no-repeat !important; padding-right: 0px; } .activityfeed-diff img { content: url("data:image/svg+xml; utf8,  "); background-image: none !important } .oasis-dark-theme .activityfeed-diff img { content: url("data:image/svg+xml; utf8,  "); background-image: none !important } /* ROUND AVATARS */
 * root {

--avatar-border: 2px; --avatar-border-color: currentColor; }

/* Rounded Avatars */

.UserProfileMasthead .masthead-avatar .avatar { border: 4px solid #6f00ea; /* background-image: linear-gradient(to bottom right,#5600ff,#ff0071); */ display: inline-block; max-height: 140px; max-width: 140px; border-radius: 100px; }

/* Fixes */ /* Fix padding in thread histories */ padding: 0; } /* Fix issue where borders don't appear in the Forums */ .Forum .ThreadList .avatar, .Chat .avatar, table.wallfeed td img.avatar { border: solid var(--avatar-border) var(--avatar-border-color) !important; border-style: solid !important; } /* Make avatars rounded in kudos messages, in the chat and in the Discussions Module (the one in the articles) */ .RelatedForumDiscussion .forum-replies .forum-reply .forum-user-avatar, .ChatHeader .User img, .Chat img, .Rail .User img, .Write img, .WallVotersModal ul li img { border: solid var(--avatar-border) var(--avatar-border-color) !important; border-radius: 50% !important; } /* Fix issue where the border width is excessive in the avatars in closed, removed or deleted thread messages */ .deleteorremove-infobox .deleteorremove-bubble div.avatar { border-width: 0 !important; }
 * 1) WallThreadHistory tr .avatar {
 * 1) Wall.Thread .avatar,

/* BUTTONS */ .WikiaPage .page-header .wds-button:not(.wds-is-text):not(.wds-is-secondary) { /* background-color: #404a57; */ background-image: linear-gradient(to bottom right,#5600ff,#ff0071); border-radius: 0px; }

.WikiaPage .page-header .wds-button:not(.wds-is-text) { border-color: #6d00eb; }

/* USERPAGE BUTTONS */ a.wikia-button, .wikia-single-button a, .wikia-menu-button, input[type="submit"]:not(.wds-button), input[type="reset"], input[type="button"], .button, button { background-color: #0a55b7; background-image: linear-gradient(to bottom right,#5600ff,#ff0071); border: 1px solid #5600ff; border-radius: 0px; color: #fff; cursor: pointer; display: inline-block; font-family: Helvetica,Arial,sans-serif; font-size: 12px; height: 19px; line-height: 20px; margin: 0; padding: 0 10px; text-decoration: none; white-space: nowrap; }

/* SPECIAL CHAT */ /* CSS needs for special chat theme. */