MediaWiki:Common.css

/*Welcome to the Dovedale Wiki CSS Page. Please note that any changes here reflect on every single page where applied. Exercise caution when editing this page. 
*/
/* List of items NOT ported over from the fandom wiki: 
- Tabber CSS
- Template Theme Colours
*/

/* Smooth HTML Scrolling */
html {
	scroll-behavior: smooth;
}

/* dove-button class*/
html.skin-citizen-dark .dove-button {
	background: #2e202a;
	border: 2px solid #1e0c1b;
	color: #FFF;
}
html.skin-citizen-light .dove-button {
	background: #C3B1E1;
	border: 2px solid rgba(65, 31, 145, .8);
	color: #000;
}
.dove-button span {
	display: inline-block;
	position: relative;
	transition: .2s;
}
.dove-button:hover span {
	padding-right: 1.5em;
}
.dove-button span::after {
	content: "➜";
	position: absolute;
	opacity: 0;
	right: -20px;
	transition: .2s;
}
.dove-button:hover span::after {
	opacity: 1;
	right: 0;
}

.dove-button {
	display: inline-block;
	background: rgba(65, 31, 145,0.2);
	border: 1px solid #6e6290;
	padding: 5px 10px;
	border-radius: 12px;
}

/* ImageMap upgrades */
.responsive-imagemap img {
	width: 100%;
	height: auto;
}

figure:has(> .mw-ext-imagemap-inner) {
	overflow: scroll;
}

/* Cool Logo Effects */
.citizen-header__logo {
	transition: all .75s;
}
.fcitizen-header__logo:hover {
	transform: scale(1.05);
	filter: drop-shadow(0 0 8px #000);
}


/* Lighten the icon in dark mode */
body.dovedale-theme-light .mw-logo-icon {
	filter: invert(1) hue-rotate(180deg);
}

/* Sidebar Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
	pointer-events: none;
	margin-left: var( --space-xs );
	padding-left: var( --space-md );
	padding-right: var( --space-xs );
	border-left: 1px solid var( --border-color-base );
	border-radius: 0;
	letter-spacing: 0.05em;
	font-weight: var( --font-weight-normal );
	color: var( --color-subtle ) !important;
}

/* Sidebar Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
	font-size: 0;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
	display: block;
	content: "";
	width: var( --size-icon );
	height: var( --size-icon );
	background: transparent center/contain no-repeat;
	opacity: var( --opacity-icon-base );
	filter: var( --filter-invert );
}

#n-sidebar-icon-discord a:before {
	background-image: url( https://dovedale.wiki/images/1/17/Discord-icon.svg )
}
#n-sidebar-icon-roblox a:before {
	background-image: url( https://dovedale.wiki/images/7/70/Roblox-icon.svg )
}
#n-sidebar-icon-kofi a:before {
	background-image: url( https://dovedale.wiki/images/8/87/Kofi-icon.svg )
}

/* Template:Main_page/header Styles */
home-header {
	position: relative;
	margin-bottom: 2rem;
	padding-top: 1rem;
	line-height: var( --line-height-xx-small );
}

/* Home Header */
#content:has(.home-header) {
	position: relative;
}
#content:has(.home-header):before {
	content: " ";
	display: block;
	position: absolute;
	width: auto;
	height: 100%;
	opacity: 0.2;
	background: linear-gradient(180deg, rgba(0,0,0,0) 1039px, var(--color-surface-0) 1139px), url("https://dovedale.wiki/images/thumb/1/14/V2_Main_Page_Background.png/1280px-V2_Main_Page_Background.png.webp");
	background-repeat: no-repeat;
	background-position:100% auto;
	background-size: cover;
	pointer-events: none;
}

.home-header__pretitle {
	margin-bottom: var(--space-xs);
	color: var(--color-subtle);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.home-header__title {
	margin: 0;
	font-size: 3rem;
	/*text-transform: uppercase;*/
	letter-spacing: 0.025em;
	line-height: 1;
}

.home-header__subtitle {
	margin-top: var( --space-xs );
	font-size: 0.875rem;
}

.home-header__search {
	padding: var( --space-md );
	margin-top: var( --space-lg );
	margin-bottom: var( --space-md );
	margin-left: auto;
	margin-right: auto;
	border: 1px solid;
	border-color: var( --border-color-interactive );
	border-radius: var( --border-radius-pill );
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: var( --font-weight-medium );
	text-align: center;
}

.home-header__search:hover {
	background-color: var( --background-color-button-quiet--hover );
}

.home-header__searchIcon img {
	margin-right: var( --space-md );
	opacity: var( --opacity-icon-base );
}

/* Fix vertical alignment problem */
.home-header__search .keyboard-key {
	display: inline;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
/*
html.skin-citizen-dark .home-header:before,
html.skin-citizen-dark .home-header__searchIcon img {
	filter: invert( 1 );
}
*/
@media ( hover: none ) {
	.desktoponly {
		display: none;
	}
}

/*error at line 156 as the editor doesn't understand variables, it should be fine */

/*Light Dark Mode separators*/ 

/* Hide elements with light/dark classes depending on the theme */
.dovedale-theme-dark .light {
	display: none;
}

.dovedale-theme-light .dark {
	display: none;
}

/* Disable the annoying little info icon on image maps on the main page*/
.page-Main_Page.ns-0 .mw-ext-imagemap-desc-link {
		display: none;
}

/*FlexPages CSS*/
.main-page-layout-container {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

@media (max-width: 768px) {
		.main-page-layout-container {
			flex-direction: column;
		}
 }
 
 /*IMAGE MAP WIDTH*/

.imagemap img {
	max-width: 100%;
	height: auto;
	overflow: scroll;
}

.imagemap img::-webkit-scrollbar {
	display: none;
}

/* British Rail Double Arrow Wordmark */

.mw-logo-wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.mw-logo-wordmark:after {
	width: 2em;
	height: 2em;
	display: block;
	content: url(https://dovedale.wiki/images/6/65/British_Rail_Double_Arrow.svg);
	top: .4em;
	position: relative;
}

.dovedale-theme-dark .mw-logo-wordmark:after {
	filter: brightness(0) invert(1);
}

/*About Me BUTTONS*/
.about-buttons {
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */
	border-radius: 10px; /* Rounded corners */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Subtle shadow */
}

/*
Temporarily added styles for Module:InfoboxNeue
These should be added back to Module:InfoboxNeue/common.css
*/

/* the tabber is the infobox gallery */
/* infobox images inside a gallery tabber are excluded from the rule */
.infobox__image:not(.infobox__content .tabber .infobox__image),
.infobox__content > .tabber {
	position: relative;
	margin-bottom: -2rem;
}

.infobox__image:not(.infobox__content .tabber .infobox__image)::after,
.infobox__content > .tabber::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient(
		to top,
		var(--color-surface-2) 0%,
		hsla(220, 25%, 15%, 0) 100%
	);
	pointer-events: none;
}

/* also select tabbers to make the hover effect work on them */
.infobox__image::after,
.infobox__image ~ .infobox__indicator,
.infobox__image ~ .infobox__header,
.infobox__content > .tabber::after,
.infobox__content > .tabber ~ .infobox__indicator,
.infobox__content > .tabber ~ .infobox__header {
	transition: var(--transition-hover);
	transition-property: opacity;
}

/* also select tabbers to make the hover effect work on them */
/* .infobox__image elements inside gallery tabbers are not excluded here because
they do not have a ::after pseudo-element anyways */
.infobox__image:hover::after,
.infobox__image:hover ~ .infobox__indicator,
.infobox__image:hover ~ .infobox__header,
.infobox__content > .tabber:hover::after,
.infobox__content > .tabber:hover ~ .infobox__indicator,
.infobox__content > .tabber:hover ~ .infobox__header {
	opacity: 0;
}

/* Move indicators down if a gallery tabber is present instead of an image */
.tabber + .infobox__indicator {
	margin-top: calc(2.5 * var(--space-unit)) !important; /* TODO remove !important after moving this */
}

/*
End of the styles for Module:InfoboxNeue
*/

/*
Styles for Module:Mbox - added here temporarily until TemplateStyles allow
using these kind of selectors
*/
/* Invert icons in dark mode */
body.dovedale-theme-dark .mbox-icon:not(:is(.mbox-colour-icon *)) img {
	filter: invert(1);
}
/*
End of styles for Module:Mbox
*/

/* Disable subtitle on Main Page*/
body.page-Main_Page #siteSub {
	display: none;
}

/* Guide sections: Add a border radius to the first and
last guide section element in an article section*/
section .citizen-overflow-wrapper:has(.guide-section):first-of-type > .citizen-overflow-content > .guide-section {
	border-top-left-radius: var(--border-radius-medium) !important;
	border-top-right-radius: var(--border-radius-medium) !important;
}

section .citizen-overflow-wrapper:has(.guide-section):last-of-type > .citizen-overflow-content > .guide-section {
	border-bottom-left-radius: var(--border-radius-medium) !important;
	border-bottom-right-radius: var(--border-radius-medium) !important;
}

/* Fix collapsed guide section tables not taking up the full width and having too much margin */
/* These styles need to be here because the outer citizen-overflow-wrapper have
to be changed in order to style guide sections properly */

.citizen-overflow-wrapper:has(.guide-section) {
	max-width: 100%;
	margin: 0 !important;
}

/* Transparent bg for drawer card/sitemenu */
.citizen-drawer__card {
	backdrop-filter: blur(30px);
	background: rgba(39, 53, 69, 0.5);
}
/* Fix white theme flashing on page load */
.async-hide { opacity: 1 !important; }

/* User page V2 */
.profile-user-group {
	color: #f7f7f7;
	background-color: #5d67ab;
}

.external-link.tooltip:hover::after {
	color: #000000;
}

/* main page cards - credit to the jet lag wiki! */
	/** 7.1. Seasons wrapper **/
.jltg-mp-seasons {
	display: grid;
	place-items: stretch;
	place-content: stretch;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

	/** 7.2. Seasons card **/
.jltg-mp-seasons__card {
	background-color: var(--color-surface-0);
	border-radius: 1.5rem;
	overflow: hidden;
	position: relative;
	display: grid;
transition: .2s background-color
}

.jltg-mp-seasons__card img {
	width: 100%;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center;
	grid-area: 1/1/-1/-1;
}

.jltg-mp-seasons__text {
	display: grid;
	align-items: end;
	height: 100%;
	width: 100%;
	background: linear-gradient(0deg, rgba(35, 33, 54, 1) 0%, rgba(35, 33, 54, .8) 20%, rgba(0,0,0,0) 100%);
	opacity: 0;
	transition: bottom .2s,opacity .2s;
	padding: 1.5rem;
	position: absolute;
	bottom: -25px;
}

.jltg-mp-seasons__card:hover {
background-color: var(--color-surface-3);
transition: .2s background-color
}

.jltg-mp-seasons__card:hover .jltg-mp-seasons__text {
	opacity: 1;
	bottom: 0;
}

.jltg-mp-seasons__text p {
	margin: 0;
	line-height: 1.4;
}

.jltg-mp-seasons a {
	text-decoration: none;
	font-weight: 500;
color: white!important;
}

.jltg-mp-seasons a span {
	font-size: 1.25rem;
	display: block;
	line-height: 1.1;
	font-weight: 700;
}

.jltg-mp-seasons a::after {
	content: "";
	position: absolute;
	inset: 0;
}