MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */

/*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
- Dark/Light mode separators 
- Template Theme Colours

/* IMPORTS */
@import url("https://dovedale.wiki/index.php?title=Template:Main_page/shared/styles.css&action=render")

/* slight border radius on info box */
;.portable-infobox {
	border-radius: var(--border-radius--medium);
}

/* adding slight border to tables - much easier to read, but not for infoboxes*/
table:not(.pi-horizontal-group) th:not(:last-child),
table:not(.pi-horizontal-group) td:not(:last-child) {
	border-collapse: collapse;
	border-right: 1px solid var(--border-color-interactive);
}

/* preserve old table borders for legacy tables */
table:not(.wikitable),
table:not(.wikitable) th,
table:not(.wikitable) td {
	border-collapse: collapse;
	border: 1px solid var(--border-color-interactive);
}

/* reduce the insane shadow strength from 0.8  */
:root {
	--shadow-strength: 0.15 !important;
}


/* dove-button class*/
body.theme-fandomdesktop-dark .dove-button {
	background: #2E202A;
	border: 2px solid #1E0C1B;
	color: #FFF;
}
body.theme-fandomdesktop-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;
}

/*Dovedale Wiki Staff*/
/* give people some fancy highlights */
a[href$=":Enews"], /* Dovedale Wiki Manager */
a[href$="/Enews"],
a[href$=":Jaiden"], /* Dovedale Owner */
a[href$="/Jaiden"],
a[href$=":Aeywoo"], /* Dovedale Wiki Staff & Below */
a[href$="/Aeywoo"],
a[href$=":Bob"],
a[href$="/Bob"],
a[href$=":ABadDriverLOL"],
a[href$="/ABadDriverLOL"],
a[href$=":Dog"],
a[href$="/Dog"] { 
  color: #96F7ED !important; 
}

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

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

/* Hide title and edit tools on main page */
.page-Star_Citizen_Wiki .mw-side,
.page-Star_Citizen_Wiki .firstHeading,
.page-Star_Citizen_Wiki #siteSub {
	display: none!important;
}

/*
 * Footer icons
 * We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
	opacity: var( --opacity-icon-base );
	transition: opacity 250ms ease;
}
#footer-icons a:hover {
	opacity: var( --opacity-icon-base--hover );
}
#footer-icons a:active {
	opacity: var( --opacity-icon-base--active );
}

@media screen {
  #footer-icons a {
    background-color: unset;
  }
}

/* More space between icons */
#footer-icons ul,
#footer-icons li {
	gap: var( --space-md );
}

/* Divide footer links into two columns */
#footer-places {
	column-count: 2;
}

/* Fix misalignment in Safari and Firefox when using two columns */
#footer-places ul {
	display: initial;
}

/* Darken the footer icon in light mode */
.skin-citizen-light #footer-icons a {
	filter: invert(1) hue-rotate(180deg);
}

/* Lighten the icon in dark mode */
.skin-citizen-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-base--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");
}

/*
html.skin-citizen-dark .home-header:before,
html.skin-citizen-dark .home-header__searchIcon img {
	filter: invert( 1 );
}
*/

@media (hover:none) {
	.desktoponly {
		display: none;
	}
}

body.dovedale-theme-dark .light {
    background: rgb(255,255,255);
}

body.dovedale-theme-light .dark {
    backdrop-filter: blur(30px);
    background: rgba(12,14,18,.5);
}

/* invert table sort icons in light mode */
body.dovedale-theme-light th.headerSort {
  filter: invert(100%);
  color: hsl(40.9, 85%, 95%); /* --color-emphasized in light mode but inverted */
}