MediaWiki:FandomizedActivityFeed.css

/* Modernizing Activity Feed */

/* Root */


 * root {

--activity-dark-background-color: #1114; --activity-light-background-color: #eee4; --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 { padding: 1.25em 1.50em 1.25em 3.75em; 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 #myhome-activityfeed .sprite { width: 18px !important; height: 18px !important; background-image: none; background-color: var(--activity-icon-color); } .skin-oasis .sprite.edit { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-pencil-small.svg"); mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-pencil-small.svg"); background-repeat: no-repeat; margin-left: -30px; } .skin-oasis .sprite.new { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-add-small.svg") !important; mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-add-small.svg"); } .skin-oasis .sprite.move { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-arrow-small.svg"); mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-arrow-small.svg"); transform: rotate(180deg); } .skin-oasis .sprite.talk { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-bubble.svg"); mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-bubble.svg");

} .skin-oasis .sprite.categorization { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-tag-small.svg"); mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-tag-small.svg"); background-repeat: no-repeat !important; padding-right: 0px; } .activityfeed-diff img { content: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-magnifying-glass-small.svg"); background-image: none !important; } .oasis-dark-theme .activityfeed-diff img { -webkit-mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-magnifying-glass-small.svg"); mask-image: url("/extensions/wikia/DesignSystem/node_modules/design-system/dist/svg/wds-icons-magnifying-glass-small.svg"); background-color: #fff; filter: brightness(9); background-image: none !important; content: none; } /* Dark Theme */ /* Feed */ .oasis-dark-theme .activityfeed > :first-child, .oasis-dark-theme .activityfeed > li:not(:first-child) { background-color: var(--activity-dark-background-color); border-top: none; color: white; } .oasis-dark-theme table.wallfeed td { color: white; } .oasis-dark-theme .activity-type-talk { background-color: var(--activity-dark-background-color); } .oasis-dark-theme .dark_text_2 { color: #d5d4d4; } .oasis-dark-theme table.wallfeed td .avatar { border: 2px solid; border-radius: 50%; margin-top: 0; }

.oasis-dark-theme table.wallfeed td p { color: #d5d4d4 !important; } /* More Link */ .activity-feed-more { border: 1px var(--activity-dark-morelink-color) solid; } .activity-feed-more a { color: var(--activity-dark-morelink-color); text-transform: uppercase; font-weight: bold; } .activity-feed-more a:hover, .activity-feed-more:hover { color: var(--activity-dark-morelink-hover-color); border-color: var(--activity-dark-morelink-hover-color); transition: var(--activity-feed-dark-transition); text-decoration: none; }

/* ConsistentModules import by Speedit */ .skin-oasis page-Special_WikiActivity .module, .skin-oasis page-Special_WikiActivity button:not(.wds-button), .skin-oasis page-Special_WikiActivity input:not(.wds-button), .skin-oasis page-Special_WikiActivity .button, .skin-oasis page-Special_WikiActivity .wikia-single-button, .skin-oasis page-Special_WikiActivity .wikia-button { display: none !important; } /** * @section        Button styling * @element        .wds-button * @notes          WDS buttons have multiline support. *                 wikiadesignsystem.com/#/components/buttons#other:multiline */ .skin-oasis page-Special_WikiActivity .wds-button { white-space: normal; }

/** * @section        Button container styling * @element        .rail-module-details */ .skin-oasis page-Special_WikiActivity .rail-module .rail-module-details { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .skin-oasis.oasis-dark-theme page-Special_WikiActivity .rail-module-details .wds-button { height: auto; } .skin-oasis page-Special_WikiActivity .rail-module-details div + .wds-button { margin: 0 12px; } .skin-oasis page-Special_WikiActivity .rail-module-details .wds-button:nth-last-child(2):first-child, .skin-oasis page-Special_WikiActivity .rail-module-details .wds-button:nth-child(2):last-child { margin: 0; } .skin-oasis page-Special_WikiActivity .rail-module-details div { display: flex; flex: 1; background: hsla(0, 0%, 0%, 0.2); height: 1px; } .skin-oasis.oasis-dark-theme page-Special_WikiActivity .rail-module-details div { background: hsla(0, 0%, 100%, 0.2); }

/** * @section        Hotspots module redesign * @element        .HotSpotsModule */ .skin-oasis page-Special_WikiActivity .HotSpotsModule li { border: none; } .skin-oasis page-Special_WikiActivity .HotSpotsModule #myhome-hot-spots li { display: flex; padding: 5px 0; } .skin-oasis page-Special_WikiActivity .HotSpotsModule #myhome-hot-spots li span { padding: 10px; } .skin-oasis page-Special_WikiActivity .HotSpotsModule .myhome-hot-spots-fire { display: flex; align-items: center; position: relative; } .skin-oasis page-Special_WikiActivity .HotSpotsModule .myhome-hot-spots-fire .wds-icon { padding: 0 12px; height: 21px; width: 21px; min-width: auto; } .skin-oasis page-Special_WikiActivity .HotSpotsModule .myhome-hot-spots-fire div { border-radius: 12px; bottom: calc(50% + 1px); color: #fff; height: 12px; left: 0; min-width: 16px; padding: 0 3px; padding-bottom: 4px; position: absolute; text-align: center; margin: 0; } .skin-oasis page-Special_WikiActivity .HotSpotsModule .myhome-hot-spots-fire big { display: inline; font-size: 10px; font-weight: bold; line-height: 17px; vertical-align: inherit; margin: 0; } .skin-oasis page-Special_WikiActivity .HotSpotsModule .myhome-hot-spots-fire small { display: none; }

/** * @section        Insights module styling * @element        .insights-module */ .skin-oasis page-Special_WikiActivity .insights-module .insights-module-item { border: none; } .skin-oasis page-Special_WikiActivity .insights-module .insights-red-dot { transform: translateX(3px) translateY(-5px); }