MediaWiki:Common.css: Difference between revisions

Help

Revision as of 19:59, 3 November 2022

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
/**
 * Used files: [[File:Old Fandom Logo White.svg]], [[File:WDS Dropdown Icon Orange.svg]]
 */
:root {
    --oasis-revived-font: Helvetica Neue, helvetica, arial, sans-serif;
    
	--theme-page-background-color--opacity: 1;
	--theme-header-background-color: var(--theme-sticky-nav-background-color);
	--theme-header-text-color: var(--theme-sticky-nav-text-color);
	--theme-header-text-color--hover: var(--theme-sticky-nav-text-color--hover);
	--background-img-position: center center;
	--background-img-size: cover;
	--background-img-repeat: no-repeat;
	--background-img-attachment: fixed;
	
	--fandom-accent-color: #00d6d6;
	--fandom-accent-color--rgb:0, 214, 214;
	--fandom-accent-color--hover:#fff;
	--fandom-accent-color--hover--rgb:255,255,255;
	--fandom-link-color--fadeout: rgba(0,214,214,.2);
	--fandom-link-color: #00d6d6;
	--fandom-link-color--rgb: 0, 214, 214;
	--fandom-link-color--hover: #007070;
	--fandom-border-color: #dee7e5;
	--fandom-text-color: #39424d;
	--fandom-text-color--rgb: 57, 66, 77;
	--fandom-global-nav-background-color: #002a32;
	--fandom-global-nav-link-color: #00d6d6;
	--fandom-global-nav-link-color--hover: #fff;
	--fandom-global-nav-icon-color: #00d6d6;
	--fandom-global-nav-icon-background-color: none;
	--fandom-global-nav-icon-background-color--hover: rgba(255, 255, 255, 0.25);
	--fandom-global-nav-icon-background-color--active: rgba(255, 255, 255, 0.4);
	--fandom-global-nav-icon-border-color: #00d6d6;
	--fandom-global-nav-icon-border-color--hover: #fff;
	--fandom-global-nav-icon-border-color--active: #fff;
	--fandom-global-nav-bottom-icon-color: #00d6d6;
	--fandom-global-nav-start-wiki-color: #00d6d6;
	--fandom-global-nav-start-wiki-color--hover: #82a7a3;
	--fandom-global-nav-counter-background-color: #fff;
	--fandom-global-nav-counter-label-color: #000;
	
	--fandom-dropdown-background-color: #002a32;
	--fandom-notifications-background-color: #fff;
	--fandom-notifications-read-card-background-color: #fff;
	--fandom-notifications-unread-card-background-color: #f6f6f6;
	--fandom-notifications-footer-text-color: #656e78;
	--fandom-banner-notification-background-color: #fff;
	--fandom-banner-notifications-close-icon: var(--fandom-text-color);
}
a:active, a:focus, a:hover {
	text-decoration: none
}

/* Page background opacity */
.main-container .resizable-container {
	background-color: rgba(var(--theme-page-background-color--rgb), var(--theme-page-background-color--opacity))
}

.notifications-placeholder {
	bottom: 18px;
	left: 18px;
}

.page__main, .page__right-rail {
	background: inherit;
}

/* Global Navigation */
/** Removing sticky header **/
.fandom-sticky-header {
	display: none;
}

/** Rotate bar background and style text **/
.global-navigation {
	flex-direction: row;
	width: 100%;
	height: 55px;
	bottom: auto;
	box-shadow: none;
	font-family: Rubik,Helvetica Neue,Helvetica,Arial,sans-serif;
	padding: 0 12px;
	align-items: center;
	z-index: 10001;
}

/** Global navigation (main) items direction **/
.global-navigation__top, .global-navigation__nav {
	display: flex;
}
.global-navigation__nav .global-navigation__icon:not(.global-navigation__search) {
	display: none;
}

/** Fandom logo size **/
.global-navigation__logo {
	height: 27px;
	width: 126px;
}
.global-navigation__logo > * {
	display: none;
}
.global-navigation__logo:after {
	content: ' ';
	height: 27px;
	width: 126px;
	background-image: url(https://static.wikia.nocookie.net/dev/images/a/a3/Old_Fandom_Logo_White.svg/revision/latest);
	display: block;
}

/** Hide tooltip on global nav **/
.wds-tooltip.is-right {
	z-index: 10000;
}

/** Removing option icons **/
.global-navigation__nav .global-navigation__search {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0;
	position: fixed;
	height: 34px;
	width: 34px;
}
.global-navigation .global-navigation__links {
	flex-direction: row;
	display: inline-flex;
	align-items: center;
	height: 100%;
}
.global-navigation .notifications .global-navigation__icon {
	width: 30px;
	height: 30px;
}

/** Correcting alignment for other elements **/
.global-navigation__link, .global-navigation__links > .wds-dropdown {
	margin-top: 0;
	padding: 0;
	margin-left: 30px;
}
@media only screen and (max-width: 1023px) {
	.global-navigation__link {
		margin-left: 18px;
	}
}
.global-navigation__link:not([data-tracking-label="start-a-wiki"]) {
	display: flex;
	justify-content: center;
	height: 100%;
}

/** Flexbox fixes **/
.global-navigation__nav {
	align-items: center;
}

/** Style of options text **/
.global-navigation__label {
	font-size: 18px;
	font-weight: 700;
	margin-top: 0;
	overflow: visible;
	align-items: center;
	transition: color .3s,font-size .2s,margin-left .2s;
	max-width: unset;
}
@media only screen and (max-width: 1279px) {
	.global-navigation__label {
		font-size: 16px;
	}
}
.global-navigation__label:focus,
.global-navigation__label:hover {
	color: #fff;
}

.global-navigation__bottom .global-navigation__icon,.global-navigation__bottom .global-navigation__icon svg {
	transition:.3s
}
.global-navigation .global-navigation__icon:hover,.global-navigation .global-navigation__link:hover .global-navigation__icon, .wds-dropdown:hover .global-navigation__icon {
	background-color: transparent;
	border-color: transparent;
}
.global-navigation .global-navigation__icon:hover svg,.global-navigation .global-navigation__link:hover .global-navigation__icon svg, .wds-dropdown:hover .global-navigation__icon svg {
	color:#fff;
	fill:#fff;
}

/** Dropdown colors **/
.global-navigation .wds-dropdown {
	--wds-dropdown-background-color: #fff;
	--wds-dropdown-border-color: #bed1cf;
	--wds-dropdown-text-color: #3a3a3a;
	--wds-dropdown-linked-item-color: #088488;
	--wds-dropdown-linked-item-background-color: rgba(8,132,136,0.1);
	--wds-dropdown-scrollable-shadow-color: rgba(58,58,58,0.1);
}

/** Dropdown position **/
.global-navigation .wds-dropdown.wds-open-to-right .wds-dropdown__content {
	bottom: unset;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 3px;
}
.global-navigation .wds-dropdown.wds-open-to-right:not(.wds-is-not-hoverable):hover:before {
	display: block !important;
	bottom: -1px;
	content: "";
	left: 50%;
	pointer-events: none;
	position: absolute;
	z-index: 2;
	border: 8px solid transparent;
	border-bottom: 8px solid var(--wds-dropdown-background-color);
	margin-left: -8px;
	top: unset;
	transform: unset;
}
.global-navigation__bottom .wds-dropdown.is-attached-to-bottom .wds-dropdown__content {
	position: absolute;
}

/** Start a wiki **/
.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__label {
	display: none;
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 3px;
	box-sizing: content-box;
	font-size: 12px;
	font-weight: 600;
	justify-content: center;
	letter-spacing: .15px;
	line-height: 16px;
	margin-left: 0;
	min-height: 18px;
	padding: 7px 18px;
	transition-duration: .3s;
	transition-property: color;
	white-space: nowrap;
	max-width: fit-content;
	color: var(--fandom-global-nav-start-wiki-color);
}
@media only screen and (min-width: 1024px) {
	.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__label {
		display: flex;
	}
}
.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__label:hover {
	color: var(--fandom-global-nav-start-wiki-color--hover);
}

/** Joined classes necessary. Removing overflow cover **/
.global-navigation__label.text-overflow:after {
	display: none;
}

/** Order of elements **/
.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__label {
	position: absolute;
	width: 118px;
	right: 12px;
	top: 10px;
}
.global-navigation__bottom {
	position: absolute;
	right: 147px;
	display: flex;
	flex-direction: row-reverse;
    bottom: unset;
}
@media only screen and (max-width: 1023px) {
	.global-navigation__bottom {
		right: 13px;
	}
	.global-navigation__search {
		right: 130px;
	}
}

/** User and notification icon **/
.global-navigation__bottom .wds-dropdown {
	margin-left: 7px;
}
.global-navigation__bottom .wds-dropdown__toggle,
.global-navigation__bottom .global-navigation__icon {
	justify-content: center;
	align-items: center;
	width: inherit;
}
.global-navigation .global-navigation__link.wds-dropdown .wds-dropdown__toggle,
.global-navigation__bottom .wds-dropdown__toggle {
	display: flex;
	flex-direction: row;
}
.global-navigation .wds-dropdown__toggle:after {
	content: ' ';
	background-image: url(https://static.wikia.nocookie.net/dev/images/2/2e/WDS_Dropdown_Icon_Orange.svg/revision/latest);
	height: 12px;
	min-width: 12px;
	width: 12px;
	margin-left: 6px;
}
.global-navigation .wds-dropdown:hover .wds-dropdown__toggle:after {
	transform: rotate(180deg);
}
.global-navigation__bottom .global-navigation__icon {
	height: inherit;
	border: none;
}
.global-navigation__bottom > * {
	display: flex;
	align-items: center;
}

/*** Small icon with no. of unread notifications ***/
.global-navigation__bottom .global-navigation__icon .notifications__counter {
	left: -2px;
	top: -3px;
}

/** Remove dropdown arrow for user profile **/
.wds-dropdown.wds-open-to-right:before, .wds-dropdown.wds-open-to-right:after {
	display: none !important;
}

/** Reversing list of options in user dropdown **/
.global-navigation__bottom .wds-dropdown.is-attached-to-bottom .wds-dropdown__content ul.wds-list {
	transform: rotate(180deg);
}
.global-navigation__bottom .wds-dropdown.is-attached-to-bottom .wds-dropdown__content ul.wds-list li {
	transform: rotate(-180deg);
}

/** Revert box shadow **/
.global-navigation__bottom.is-overflowing {
	box-shadow:none!important;
}

/** Global navigation dropdown menu button's colors when hovered**/
.global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li.wds-is-selected > a:not(.wds-button),
.global-navigation .wds-dropdown__content .wds-list.wds-is-linked > li:hover > a:not(.wds-button),
.global-navigation__signout-button:hover {
	background-color: var(--wds-dropdown-linked-item-background-color);
	color: var(--wds-dropdown-linked-item-color);
}

/** Notifications icon alignment **/
.global-navigation__bottom .notifications {
	margin-bottom: 0;
}

/** Makes all dropdown menus have white background and shadow **/
.global-navigation .wds-dropdown .wds-dropdown__content,.global-navigation .wds-dropdown__content {
	border-radius:4px;
	background-color: #fff;
	box-shadow: 0 0 20px 0 rgba(26,26,26,.3);
	border:0
}
.global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before {
	background:#fff;
}

/* idk what this does but i got it from webarchive */
.global-navigation .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list {
	background-image: radial-gradient(farthest-side at 50% 0,rgba(26,26,26,.12),transparent),radial-gradient(farthest-side at 50% 100%,rgba(26,26,26,.12),transparent);
	background-position: 0 0,0 100%;
	background-repeat: no-repeat;
	background-size: 100% 9px;
	max-height: 270px;
	overflow-y: auto;
	position: relative;
	z-index: 1;
}

/** Notifications dropdown div **/
.global-navigation .notifications .wds-dropdown.wds-is-not-hoverable.is-attached-to-bottom div.wds-dropdown__content {
	top: 55px;
	right: 0;
	min-height: 80px;
	max-height: 435px;
	width: 356px;
	left: auto;
	transform: none;
	background-color: #fff;
	color: #39424d;
	border: 0;
	box-shadow: 0 0 20px 0 rgba(26, 26, 26, .3);
}
.NotificationCard-module_card__6Nucq {
	--notification-card-background-color: #fff !important;
}

/** Notifications scrollable and font size **/
.global-navigation .global-navigation__bottom .notifications div.wds-dropdown__content div.wds-tab__content.wds-is-current {
	overflow-y: auto;
	font-size: 14px;
}

.global-navigation .notifications .wds-dropdown__content {
	background-color:var(--fandom-notifications-background-color);
	color:var(--fandom-text-color);
}
.global-navigation .notifications .wds-dropdown.wds-open-to-right::after {
	border-right-color:var(--fandom-notifications-background-color);
}
.NotificationCard-module_card__6Nucq.NotificationCard-module_isUnread__18vlB {
	--notification-card-background-color: var(--fandom-notifications-unread-card-background-color) !important;
}

/*** Small icon next to tab with unread notif ***/
.NotificationsDropdown-module_tabber__1qKxW .wds-tabs__tab-label .NotificationsDropdown-module_tabTotal__p7gqN {
	background: #089196;
}
.theme-fandomdesktop-dark .NotificationsDropdown-module_tabber__1qKxW .wds-tabs__tab-label .NotificationsDropdown-module_tabTotal__p7gqN {
	background: #00d6d6;
}

/*** Mark all as read ***/
.global-navigation__bottom .NotificationsDropdown-module_markAllAsRead__2yUse {
	color: #089196;
}
.global-navigation__bottom .NotificationsDropdown-module_markAllAsRead__2yUse:hover,
.theme-fandomdesktop-dark .global-navigation__bottom .NotificationsDropdown-module_markAllAsRead__2yUse {
	color: #00d6d6;
}
.theme-fandomdesktop-dark .global-navigation__bottom .NotificationsDropdown-module_markAllAsRead__2yUse:hover {
	color: #fff;
}
.theme-fandomdesktop-dark .global-navigation__bottom .wds-dropdown__content .NotificationCard-module_card__2YXOh {
	--notification-card-background-color: #002a32;
	border-bottom: 1px solid #656e78;
}

/*** Unread notifications ***/
.theme-fandomdesktop-dark .global-navigation__bottom .wds-dropdown__content .NotificationCard-module_card__2YXOh.NotificationCard-module_isUnread__25iz- {
	--notification-card-background-color: #004b52;
}
.global-navigation__bottom .NotificationCard-module_card__2YXOh.NotificationCard-module_isUnread__25iz- .NotificationCard-module_unreadStatusDot__q1FDX,
.global-navigation__bottom .NotificationCard-module_card__2YXOh.NotificationCard-module_isUnread__25iz- .NotificationCard-module_unreadStatusDot__q1FDX:hover {
	background-color: #089196;
	border: #089196;
}
.theme-fandomdesktop-dark .NotificationCard-module_card__2YXOh.NotificationCard-module_isUnread__25iz- .NotificationCard-module_unreadStatusDot__q1FDX,
.theme-fandomdesktop-dark .NotificationCard-module_card__2YXOh.NotificationCard-module_isUnread__25iz- .NotificationCard-module_unreadStatusDot__q1FDX:hover {
	background-color: #00d6d6;
	border: #00d6d6;
}

/** Making space for the global nav, using the space on the left for page body **/
.main-container {
	margin-left: 0;
	width: 100%;
	margin-top: 55px;
}
.resizable-container {
	margin-top: 10px;
}

/** Styling for the custom search added by the OasisRevived script **/
.global-navigation__search-container {
	position: fixed;
	height: 55px;
	top: 0;
}
@media only screen and (max-width: 1023px) {
	.global-navigation__search-container,
	.global-navigation__search.global-navigation__icon {
		right: 128px;
	}
}
@media only screen and (min-width: 1024px) {
	.global-navigation__search-container,
	.global-navigation__search.global-navigation__icon  {
		right: 267px;
	}
}
@media only screen and (min-width: 1500px) {
	.global-navigation__search-container {
		flex: unset;
		width: 450px;
		margin-left: 34px;
		margin-right: 6px;
	}
}
.global-navigation__search {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-top: 0;
	width: inherit;
}
.global-navigation__search-toggle {
	align-items: center;
	cursor: pointer;
	display: flex;
	transition: color .3s;
}
@media only screen and (min-width: 1500px) {
	.global-navigation__search-toggle {
		pointer-events: none;
	}
}
.global-navigation__search-toggle-icon.wds-icon-small {
	margin-right: 8px;
}
@media only screen and (max-width: 1023px) {
	.global-navigation__search-toggle-icon.wds-icon-small {
		display: none;
	}
}
@media only screen and (min-width: 1024px) {
	.wds-global-navigation__search-toggle-icon:not(.wds-icon-small) {
		display: none;
	}
}
@media only screen and (max-width: 1023px) {
	.global-navigation__search-toggle-text {
		display: none;
	}
}
@media only screen and (min-width: 1500px) {
	.global-navigation__search-toggle-text {
		display: none;
	}
}
.global-navigation__search-input-wrapper {
	align-items: center;
	display: none;
	flex: 0 1 auto;
	padding-bottom: 3px;
	transition: flex .2s;
}
@media only screen and (min-width: 1500px) {
	.global-navigation__search-input-wrapper {
		border-bottom: 2px solid #00d6d6;
		width: 100%;
		display: flex;
	}
}
.wds-global-navigation__suggestions-anchor {
	display: flex;
	flex: 1 1 auto;
}
input.global-navigation__search-input {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	flex: 1 1 auto;
	font-family: sans-serif;
	font-size: 14px;
	height: 28px;
	padding: 0;
	width: 430px;
	outline: none;
	color: #fff;
	caret-color: #fff;
}
input.global-navigation__search-input::placeholder {
	color: #fff;
}

/* Community header */
.community-header-wrapper {
	height: 105px;
}
.fandom-community-header {
	background-color: var(--theme-header-background-color);
	color: var(--theme-header-text-color);
	height: 105px;
}
.fandom-community-header a {
	color: var(--theme-header-text-color);
}
.fandom-community-header a:hover {
	color: var(--theme-header-text-color--hover);
}
.wiki-tools .wds-button.wds-is-secondary {
	--wds-secondary-button-label-color: var(--theme-header-text-color);
	--wds-secondary-button-label-color--hover: var(--theme-header-text-color--hover);
}
@media only screen and (max-width: 1083px) {
	.fandom-community-header {
		height: 115px;
	}
}

/** Removing gap between header and page **/
.page {
	margin-top: 0;
}
html:not(.ve-activated) .page.has-right-rail .page__main, .page__main, .page__right-rail {
	border-radius: 0;
}

/** Wiki wordmark **/
.fandom-community-header__image {
	margin-right: 0;
}
.fandom-community-header__image img {
	height: 65px;
	margin: 20px 0 20px 20px;
}
@media only screen and (max-width: 1083px) {
	.fandom-community-header__image img {
		height: 49px;
		max-width: 175px;
		margin-bottom: 0;
		max-height: none;
	}
}

/** Area of wiki title and those small icons **/
.fandom-community-header__top-container {
	align-items: normal;
	height: 59px;
}
@media only screen and (max-width: 1083px) {
	.fandom-community-header__top-container {
		height: 69px;
	}
}

/** Article counter **/
.page-counter {
	margin: 17px 0 20px 20px;
}
.page-counter__value {
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
}
.page-counter__label {
	font-size: 12px;
	line-height: 1;
	margin-top: 3px;
	font-weight: 600;
}

/** Wiki title wrapper **/
.fandom-community-header__community-name-wrapper {
	flex: 1;
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	margin: 25px 0 0 18px;
	overflow: hidden;
}
@media only screen and (max-width: 1083px) {
	.fandom-community-header__community-name-wrapper {
		word-wrap: break-word;
		font-size: 24px;
		margin-top: 20px;
		max-height: 72px;
		white-space: normal;
	}
}

/** Wiki title text **/
.fandom-community-header__community-name-wrapper a.fandom-community-header__community-name {
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}

/** Wiki title text hover **/
.fandom-community-header__community-name-wrapper a.fandom-community-header__community-name:hover {
	text-decoration: none;
}

/** Those small icons. Preventing stretched borders **/
.main-container .resizable-container header .wiki-tools.wds-button-group {
	align-items: center;
	margin: 20px 20px auto 15px
}

/** Community header tabs padding and order **/
.fandom-community-header__local-navigation ul {
	order: 1;
	padding-left: 6px;
}
.fandom-community-header__local-navigation ul div:first-child {
	order: 2;
}
.fandom-community-header__local-navigation .wds-dropdown__toggle.first-level-item {
	margin: 0 11px;
}
.fandom-community-header .fandom-community-header__local-navigation .large-navigation {
	display: none;
}
@media only screen and (min-width: 1084px) and (max-width: 1279px) {
	.fandom-community-header__local-navigation {
		grid-column: inherit;
	}
}
@media only screen and (min-width: 1084px) {
	.fandom-community-header .fandom-community-header__local-navigation .extra-large-navigation {
		display: flex;
	}
	.fandom-community-header__image {
		grid-row: 1/3;
	}
}
@media only screen and (max-width: 1083px) {
	.fandom-community-header .fandom-community-header__local-navigation .medium-navigation {
		display: flex;
	}
}

/* Move background image to front */
.main-container {
	background-image: var(--theme-body-background-image);
	background-position: var(--background-img-position);
	background-size: var(--background-img-size);
	background-repeat: var(--background-img-repeat);
	background-attachment: var(--background-img-attachment);
}

/* Make left icon buttons on articles smaller */
.page-side-tools button, .page-side-tools a {
	height: 32px;
	width: 32px;
}
.page-side-tools svg {
	height: 16px;
	width: 16px;
	min-width: 16px;
}
@media only screen and (max-width: 1279px) {
	.page-side-tools__wrapper {
		transform: translateX(-60%);
	}
}

/* Dropdown menus in Oasis had white wiki background */
.wds-dropdown__content,.wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-nested .wds-dropdown-level-nested__content {
	background:var(--theme-page-background-color);
	border-radius:4px;
}
.wds-dropdown::before {
	border-bottom: 9px solid var(--theme-border-color);
}
.wds-dropdown::after {
	border-bottom: 8px solid var(--theme-page-background-color);
}
.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::after, .wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list::before {
	background:var(--theme-page-background-color);
}

/* Wikia Bar */
/** Main styling **/
@media only screen and (min-width: 1024px) {
	#WikiaBar .WikiaBarWrapper .wikia-bar {
		width: 1026px;
	}
}
@media only screen and (min-width: 1596px) {
	#WikiaBar .WikiaBarWrapper .wikia-bar {
		width: 1300px;
	}
}
.WikiaBarWrapper {
	align-items: center;
	text-align: center;
	box-shadow: 0 0 10px #333;
	position: fixed;
	border-radius: 0;
	bottom: 0;
	width: 100%;
	z-index: 200;
	right: auto;
}

/** Bar collapsing animation **/
.WikiaBarWrapper .hidden {
	bottom: -25px;
	transition: all .2s ease-in;
	z-index: -1;
}

/** Most of the bar **/
.WikiaBarWrapper .wikia-bar {
	display: inherit!important;
	height: 25px;
	margin: auto;
	text-align: center;
}

/** Toolbar **/
.WikiaBarWrapper .wikia-bar .toolbar {
	align-self: auto;
	height: 20px;
	padding: 5px 0 0;
}

/** Padding of the tools area **/
.WikiaBarWrapper .tools {
	padding: 0 10px;
}

/** Prevent underlined text when hover **/
.WikiaBarWrapper ul.tools li a:hover {
	text-decoration: none;
}

/** Line between tools **/
.WikiaBarWrapper ul.tools > li {
	border-right: 1px solid var(--theme-accent-label-color);
	margin: 0;
	padding: 2px 10px;
	height: 16px;
}

/** Items position (currently doesn't work) **/
@media only screen and (max-width: 1083px) {
	.WikiaBarWrapper div.wikia-bar > div.toolbar > ul.tools {
		width: 818px;
	}
}
@media only screen and (min-width: 1024px) {
	.WikiaBarWrapper > div.wikia-bar > div.toolbar > ul.tools {
		width: 1026px;
	}
}
@media only screen and (min-width: 1084px) and (max-width: 1595px) {
	.WikiaBarWrapper > div.wikia-bar > div.toolbar > ul.tools {
		width: 1106px;
	}
}

/** Hide wikia bar - toggle position **/
.WikiaBarWrapper .arrow {
	position: fixed;
	bottom: 2.5px;
	float: left;
	right: 0;
}

/** Show wikia bar (wrench) - toggle position **/
.WikiaBarCollapseWrapper {
	bottom: 0;
	right: 0;
}

/** Show wikia bar (wrench) - toggle style **/
.WikiaBarCollapseWrapper .wikia-bar-collapse {
	border-radius: 0;
	height: 27px;
	padding: 5px;
	width: 28px;
	box-shadow: 0 0 10px #333;
}

/** Fix My Tools arrow animation and position **/
.WikiaBarWrapper .mytools.menu:not(:hover) svg {
	transform: rotate(180deg);
	transition: .25s all ease;
}
.WikiaBarWrapper .mytools.menu:hover svg {
	transition: .25s all ease;
}

/** My Tools dropdown **/
.WikiaBarWrapper .tools-menu {
	text-align: left;
	background: var(--theme-page-background-color--secondary);
}

/** My Tools dropdown links **/
.WikiaBarWrapper .tools-menu > li >a  {
	color: var(--theme-page-text-color);
}

/** Compatibility with OldWikiaBar **/
body div#WikiaBarWrapper.WikiaBarWrapper div.toolbar ul.tools > li:not(:first-child)::before {
	display: none;
}

/* TOC */
/** General style **/
.page-content #toc {
	border-radius: 0;
	padding: 5px;
	margin: 1em 0;
}

/** TOC title **/
.toc .toctitle {
	border-bottom: 0;
	justify-content: normal;
	font-size: 12px;
	padding: 3px 2px;
}
.toc .toctitle h2 {
	font-size: 14px;
	margin-top: 3px;
	padding: 0 5px 3px 0;
}
.toc .toctogglespan:before,
.toc .toctogglespan:after {
	font-size: 12px;
}

/** Removing small icon near title **/
.toc .toctitle h2 .wds-icon {
	display: none;
}

/** Padding for content **/
.toc ul {
	padding: 0;
}
.toc ul li {
	margin: 0
}
.toc ul li .toclevel-2 {
	margin-left: 2em;
}
.toc ul li .toclevel-3 {
	margin-left: 2em;
}
.toc ul li .toclevel-4 {
	margin-left: 2em;
}
.toc ul li .toclevel-5 {
	margin-left: 2em;
}

/** Links **/
.toc ul li a {
	color: var(--theme-link-color);
	display: initial;
	font-weight: normal!important;
	padding: 0;
}

/** No background and color change when hovering links **/
.toc ul li a:hover {
	background: none;
}
.toc ul li a:hover .tocnumber {
	color: var(--theme-page-text-color);
}

/** Number color **/
.toc ul li a .tocnumber {
	color: var(--theme-page-text-color);
}

/** No dot after number **/
.toc ul li a .tocnumber:after {
	display: none;
}

/* User Masthead */
body.skin-fandomdesktop #userProfileApp {
	background-color: rgba(var(--theme-page-background-color--rgb),var(--theme-page-background-color--opacity));
	padding: 18px 0 0 0;
}

/* Achievements on User Profile Page */
/** Most of the text **/
body.skin-fandomdesktop .UserProfileAchievementsModule,
body.skin-fandomdesktop .UserProfileAchievementsModule a {
	font-family: inherit;
}

/** Right rail **/
html:not(.ve-activated) .page.has-right-rail .page__right-rail {
	width: 300px;
	margin-left: 20px;
}
html:not(.ve-activated) .page.has-right-rail .page__right-rail.is-rail-hidden {
	margin-left: 0;
	width: 0;
}
.right-rail-wrapper {
	padding: 0;
}
.rail-module {
	background-color: transparent;
	border-bottom: 0;
	margin: 30px 10px 10px;
	padding: 0;
}
.rail-module h2 {
	border-bottom: 1px solid var(--theme-border-color);
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	margin-bottom: 16px;
	min-height: 30px;
	padding: 0;
	padding-left: 2px;
	padding-bottom: 1px;
	width: 100%;
	background-image: none;
	line-height: 1;
}
.rail-module h2.has-icon svg {
	margin-right: 7px;
}

/** Title of earned badges **/
.rail-module .badges-profile-title {
	background-image: none;
	border-bottom: 1px solid var(--theme-border-color);
	min-height: 30px;
	width: 100%;
}

/** Link to Leaderboard **/
.UserProfileAchievementsModule .data .data-details.ranking > p > a {
	font-family: inherit;
}

/** More Badges You Can Earn! - Title text **/
.UserProfileAchievementsModule .title-challeneges {
	border-bottom: 1px solid var(--theme-border-color);
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
	min-height: 30px;
}

/* Removing fixed header for tables */
.article-table .fixed-header, .wikitable .fixed-header {
	box-shadow: none;
	outline: none;
	transform: none;
	transition: none;
}

/* Tabs in Wiki, Social and Image Activity */
.activity-tabs.with-bottom-border .wds-tabs__tab-label {
    font-family: Helvetica Neue, helvetica, arial, sans-serif; /* Fallback */
	font-family: var(--oasis-revived-font);
	align-items: center;
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	height: 40px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0 11px;
	text-decoration: none;
	transition: color 0.1s ease 0s;
}

/** No underlined text **/
.activity-tabs.with-bottom-border .wds-tabs__tab-label:active,
.activity-tabs.with-bottom-border .wds-tabs__tab-label:focus {
	text-decoration: none;
}

/**No bottom and top margin for tabs **/
.page-content li.wds-tabs__tab {
	margin: 0;
}

/* Search pop-up */
.search-modal, .search-modal:before {
	left: 0;
}

.search-modal .search-modal__content {
	border-color:#404a57;
}
.search-modal::before {
	background-color: rgba(0, 0, 0, .5)
}
.SearchInput-module_form__fAwdT .wds-button[type="button"]:hover {
	color:rgba(255,255,255,.7)
}
.search-modal .search-seeding, .highlight__wiki-btn, .search-modal input[class^="SearchInput-module_input"], .search-modal .SearchInput-module_form__fAwdT .wds-button[type="button"] {
	color: #fff;
}
.SearchResults-module_results__k8itn.wds-list.wds-is-linked > li > a {
	color: var(--fandom-link-color)!important;
	transition: 0.1s;
}
.SearchResults-module_results__k8itn.wds-list.wds-is-linked > li > a.SearchResults-module_isSelected__7oTZQ, .SearchResults-module_results__k8itn.wds-list.wds-is-linked > li > a:hover {
	background-color: var(--fandom-link-color--fadeout);
	color:#fff
}
.search-modal .wds-button:hover,.search-modal .wds-button:focus,.search-modal .wds-button:active {
	color: #fff;
	background-color: var(--fandom-link-color--hover);
	border-color: var(--fandom-link-color--hover);
}

/* Default body font */
body.skin-fandomdesktop {
    font-family: Helvetica Neue, helvetica, arial, sans-serif; /* Fallback */
	font-family: var(--oasis-revived-font);
	font-size: 14px;
}

/* Main article */
.resizable-container {
	background-color: var(--theme-page-background-color);
}
.page .page__main {
	font-size: 16px;
	line-height: 1.5;
}

/** Headers **/
.page-content h2 {
	line-height: 1;
	margin: 0.5em 0 0.2em;
	padding: 0 0 3px;
	font-size: 28px;
}

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
	font-family: var(--oasis-revived-font);
}

/** Article text styling and padding **/
.page-content p {
	margin: 0.4em 0 0.5em;
	line-height: 1.5;
}

.page-content p+p {
	margin: 1em 0;
}

/** List styling and padding **/
.page-content ul {
	list-style: square;
}
.page-content li {
	margin: 3px 0;
}
.mw-content-ltr ol, .mw-content-ltr ul {
	margin: 0.4em 0 0.5em 2.5em;
}

/** Article content wrapper padding **/
.page .page__main {
	padding: 0 0 0 24px;
}
.page {
	padding-right: 24px;
}
@media only screen and (min-width: 1024px) {
	.page .page__main {
		padding: 0 0 0 10px;
	}
	.page {
		padding-right: 10px;
	}
}
@media only screen and (min-width: 1084px) {
	.page .page__main {
		padding: 0 0 0 20px;
	}
	.page {
		padding-right: 20px;
	}
}
@media only screen and (min-width: 1596px) {
	.page .page__main {
		padding: 0 0 0 30px;
	}
	.page {
		padding-right: 30px;
	}
}

/* Article header */
.page-header {
	padding: 16px 0 8px;
	border-bottom: 1px solid var(--theme-border-color);
	margin-bottom: 18px;
}
.page-header__title {
	font-weight: 700;
	line-height: 1;
}
.page-header__categories {
	font-size: 12px;
	line-height: 1;
}
.page-header__categories-in {
	font-weight: 600;
}
.page-header__categories *:not(.page-header__categories-in) {
	font-style: italic;
	line-height: 16px;
}

/*** Page header buttons ***/
.page-header__actions {
	align-items: flex-end;
	display: inline-flex;
	justify-content: flex-start;
	padding-top: 0;
	padding-bottom: 6px;
}
.page-header__bottom .page-header__actions .page-header__action-button {
	align-items: center;
	background-color: var(--theme-accent-color);
	border: 1px solid var(--theme-accent-color);
	border-radius: 3px;
	color: var(--theme-accent-label-color);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .15px;
	margin: 0;
	margin-right: 1px;
	outline: none;
	padding: 7px 12px;
	text-decoration: none;
	text-transform: uppercase;
	transition-duration: .3s;
	transition-property: background-color,border-color,color;
	vertical-align: top;
	height: unset;
}
.page-header__bottom .page-header__actions .page-header__action-button:hover {
	background-color: var(--theme-accent-color--hover);
	border: 1px solid var(--theme-accent-color--hover);
}
.page-header__bottom .page-header__actions .wds-button:first-child {
	border-radius: 3px 0 0 3px;
}
.page-header__bottom .page-header__actions .wds-dropdown:last-child .wds-button {
	border-radius: 0 3px 3px 0;
	cursor: default;
}
.page-header__bottom .page-header__actions .page-header__action-button:before {
	display: none;
}

/* Article footer */
.page-footer__categories header,
.page-footer__languages header {
	display: none;
}
.page-footer .wds-collapsible-panel.wds-is-collapsed .wds-collapsible-panel__content {
	display: block;
}

/** Categories **/
.page-footer__categories {
	background-color: var(--theme-page-background-color);
	background-image: none;
	border: 1px solid var(--theme-border-color);
	clear: both;
	font-size: 12px;
	line-height: normal;
	margin: 10px 0;
	padding: 0;
	position: relative;
}
.page-footer__categories .wds-collapsible-panel__content {
	padding: 10px 20px 10px;
}
.CategorySelect.articlePage .add {
	padding: 0 10px;
}
.CategorySelect.articlePage .category, .CategorySelect.articlePage .last, .CategorySelect.articlePage .placeholder, .CategorySelect.articlePage .special-categories-label,.CategorySelect.articlePage .category.new {
	margin-bottom:0
}
.CategorySelect.articlePage.editMode > .toolbar {
	margin-top: 5px;
	padding-bottom: 0;
	padding-top: 10px;
}
.CategorySelect.articlePage .container {
	padding: 0;
}
.CategorySelect.articlePage.editMode .container {
	padding: 5px 20px 5px 0;
}

/** Languages **/
.page-footer__languages {
	border: none;
	display: flex;
	flex-direction: row;
	padding: 10px 0 0;
}
.page-footer__languages .wds-collapsible-panel__content {
	align-items: baseline;
	clear: both;
	display: flex;
	margin: 10px;
}
.page-footer__languages:before {
	content: 'Languages: ';
	font-size: 18px;
	line-height: 1.25;
	font-weight: 500;
	margin: 0.5em 0 0.2em;
}
.page-footer__languages .wds-collapsible-panel__content a {
	font-size: 14px;
	margin: 0;
	padding: 0;
	line-height: 24px;
	padding-left: 5px;
	padding-right: 9px;
	margin-bottom: 6px;
	border: 0;
	border-left: 1px solid #7f9998;
}
.page-footer__languages .wds-collapsible-panel__content a:first-child {
	padding-left: 0;
	border: 0;
}

/** License description **/
.page-footer .license-description {
	clear: both;
	font-size: 12px;
	margin: 18px 12px;
	padding: 0;
}

/* Special:ThemeDesigner */
.theme-designer {
	margin-left: 0;
}

/* Special:AdminDashboard */
/** General and Advanced tabs **/
#AdminDashboardTabs.wds-tabs {
	flex-direction: row-reverse;
}

#AdminDashboardTabs .tab.wds-tabs__tab {
	color: var(--theme-page-text-color);
	margin: 0;
	border: solid var(--theme-border-color);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-width: 1px 1px 0;
	margin-left: 4px;
}

#AdminDashboardTabs .tab.wds-tabs__tab.wds-is-current {
	box-shadow: none;
	color: var(--theme-page-text-color);
	background: var(--theme-page-background-color--secondary);
}

#AdminDashboardTabs .tab.wds-tabs__tab > .wds-tabs__tab-label {
	font-weight: normal;
	height: 19px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	padding: 2px 25px 0;
}

#AdminDashboardTabs .tab.wds-tabs__tab > .wds-tabs__tab-label > .link:hover,
#AdminDashboardTabs .tab.wds-tabs__tab > .wds-tabs__tab-label > .link:focus {
	color: var(--theme-page-text-color);
}

/** Hide global nav outside preview **/
.ns-special.page-Special_ThemeDesigner .global-navigation {
	display: none;
}

/* Diff page */
.diff td.diff-deletedline, .diff td.diff-addedline {
	background-color: var(--theme-page-background-color--secondary);
}
.diff-editfont-monospace .diff-addedline, .diff-editfont-monospace .diff-deletedline, .diff-editfont-monospace .diff-context {
    font-family: var(--oasis-revived-font);
    font-size: 88%;
    line-height: 1.6;
}

/* SVG after external links */
a.external.text:after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 13px;
	width: 13px;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath fill='%2336b' d='M5.002 1.01h7v7l-2-2-3 2v-1l3-2.25 1 1V2.01h-3.75l1 1-2.25 3h-1l2-3z'/%3E%3Cpath fill='%2336b' d='M7.002 3.01h-5v8h8v-5h-1v4h-6v-6h4z'/%3E%3Cpath fill='%2315a5ea' d='M4.082 5.51c0-.621.621-.621.621-.621 1.864.621 3.107 1.864 3.728 3.728 0 0 0 .621-.62.621-1.245-1.864-1.866-2.485-3.73-3.728z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath fill='%2336b' d='M5.002 1.01h7v7l-2-2-3 2v-1l3-2.25 1 1V2.01h-3.75l1 1-2.25 3h-1l2-3z'/%3E%3Cpath fill='%2336b' d='M7.002 3.01h-5v8h8v-5h-1v4h-6v-6h4z'/%3E%3Cpath fill='%2315a5ea' d='M4.082 5.51c0-.621.621-.621.621-.621 1.864.621 3.107 1.864 3.728 3.728 0 0 0 .621-.62.621-1.245-1.864-1.866-2.485-3.73-3.728z'/%3E%3C/svg%3E") no-repeat center;
}

/* Fix issue with text before a list */
.page-content p+ol, .page-content p+ul, .page-content section+ol, .page-content section+ul {
	margin-top: 0;
}

/*Media lightbox*/
.skin-fandomdesktop .LightboxModal {
	margin-left: 0;
	width: 90%;
	margin-top: 55px; /*so that it doesn't display behind global nav*/
}

/* Discussions-specific CSS */
body[data-app-name="feeds-and-posts"] .app-wrapper {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    margin-top: 55px;
}
@media only screen and (min-width: 768px) {
    body[data-app-name="feeds-and-posts"] .post-form-wrapper {
        top: 55px;
    }
    body[data-app-name="feeds-and-posts"] .is-sticky-rail {
        top: 75px;
    }
}

/* Global footer */
.global-footer {
	background: var(--fandom-global-nav-background-color);
	font-family: Rubik,Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.25;
	word-wrap: break-word;
}
.global-footer .global-footer__bottom {
	background: rgba(38,38,38,.5)
}

.global-footer .global-footer__content a {
	color: var(--fandom-global-nav-link-color);
}

.global-footer h2 a {
	display: none;
}

.global-footer h2::after {
    content: ' ';
    height: 49px;
	width: 164px;
    background-image: url(https://static.wikia.nocookie.net/dev/images/a/a3/Old_Fandom_Logo_White.svg/revision/latest);
    display: block;
    margin: auto;
	background-repeat: no-repeat;
	background-position: center
}
.global-footer__header {
	width:164px
}
@media only screen and (min-width: 1024px) {
	.global-footer__header {
		margin-bottom:12px;
	}
}
.global-footer__section-header {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 7px;
	margin-top: 0;
	padding: 0;
	text-transform: uppercase;
}
.global-footer__bottom a, .global-footer__bottom a:visited {
	color: var(--fandom-link-color);
	text-decoration: none;
}
.global-footer__section-social-links .wds-icon {
	color: #fff;
	opacity: .3;
	transition: opacity .3s;
}
.global-footer__section-social-links .wds-icon:hover {
	color: #fff;
	opacity:1;
}
.global-footer .global-footer__content .global-footer__link:hover {
	color: #fff;
	text-decoration: none;
}