Common.css

@import url('https://fonts.googleapis.com/css2?family=Gafata&display=swap');

/* ------------------------------------------- */
/* ---- Changes colour of Staff Member edits - */
/* ------------------------------------------- */
a[href$=":Caglarefek23"] { color: #ff6f00; }
a[href$=":KylaraE"] { font-weight: bold; }

/* ------------------------------------------- */
/* ----- Main page header -------------------- */
/* ------------------------------------------- */
.page-Dune_Wiki .page-header__title,
.page-Dune_Wiki .page-header__separator {
    display: none;
}

/* ------------------------------------------- */
/* ---- portable infobox---------------------- */
/* ------------------------------------------- */

.portable-infobox .pi-title {
	text-align: center;
	font-weight: bold;
}

.portable-infobox .pi-header {
	text-align: center;
}

.portable-infobox .pi-navigation {
	text-align: center;
	border: none;
	font-size: 80%;
}

.portable-infobox .pi-section-label {
	font-size: 12px;
	height: 25px;
}

.portable-infobox .pi-section-navigation {
    flex-wrap: wrap;
}

.portable-infobox .pi-section-tab {
    width: 30px;
}

.portable-infobox .pi-caption {
	font-size: 11px;
	line-height: 1;
}

.portable-infobox .wds-tabs {
    flex-wrap: wrap;
}

.portable-infobox.pi-theme-comic .pi-item[data-item-name=pi-data-span-2-center] div {
	width: 100%;
	text-align: center;
}

/* ------------------------------------------- */
/* ---- navboxes ----------------------------- */
/* ------------------------------------------- */

.navbox, #navbox {
    width: 100%;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-color: var(--theme-accent-color);
}

.navbox .navbox {
	border-width: 0;
}

.navbox-group, 
.navbox-subgroup .navbox-group, 
.navbox-title {
	background-color: #80808025;
}

/* ---------------------------------------------------------------- */
/* ---- for Template:ImageInfo ------------------------------------ */
/* ---------------------------------------------------------------- */

.portable-infobox.type-fileInfo {
	font-size: inherit;
	max-width: none;
	float: none;
	width: auto;
	margin-left: 0;
}

.portable-infobox.type-fileInfo .pi-data-label {
	font-size: inherit;
	max-width: 150px;
	flex-basis: 120px;
	flex-grow: 1;
}

.portable-infobox.type-fileInfo .pi-data-value.pi-font {
	font-size: inherit;
}

.portable-infobox.type-fileInfo .pi-data-value:not(:first-child) {
  flex-basis: 180px;
  flex-grow: 10;
}

/* ---------------------------------------------------------------- */
/* ---- book cover galleries -------------------------------------- */
/* ---------------------------------------------------------------- */

.book-covers-gallery .wikia-gallery-item .thumb {
	height: 277px !important;
}

.book-covers-gallery .wikia-gallery-item .thumb .gallery-image-wrapper {
	height: inherit !important;
}

.book-covers-gallery .wikia-gallery-item .thumb .gallery-image-wrapper .image.lightbox {
	height: inherit !important;
}

/* ---------------------------------------------------------------- */
/* ---- Canon notice icons ---------------------------------------- */
/* ---------------------------------------------------------------- */

.pageCanonIcon {
	position: relative; 
	display: block;
	clear: right; 
	float: right; 
	border: 2px solid #c5b7a8; 
	padding: 8px 14px; 
	top: -10px; 
	min-width: 185px; 
	min-height: 70px; 
	margin-bottom: 12px;
	margin-left: 12px;
}
.theme-fandomdesktop-light .pageCanonIcon {
	border-color: black;
}

.pageCanonIcon .pageCanonText {
	visibility: hidden;
	width: 250px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 100%;
	left: 50%;
	margin-left: -175px;
}
.theme-fandomdesktop-light .pageCanonIcon .pageCanonText {
	background-color: white;
	color: black;
}

.pageCanonIcon:hover .pageCanonText {
	visibility: visible;
}

.theme-fandomdesktop-light .pageCanonIcon img {
	filter: brightness(100) invert(1);
}
.theme-fandomdesktop-light .pageCanonIcon.noInvert img {
	filter: none;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */

/* Container for the image showcase for main page refresh template */
#image-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;  /* 6px space between the images */
  margin: 10px 0;
  padding: 10px;
}

/* Individual image box for main page refresh template */
.image-box {
  width: 100px;
  height: 250px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.3s, border-color 0.3s;
}

/* make canon notices visible in dark mode */
.theme-fandomdesktop-dark .canon-notice img {
	filter: invert(.8) sepia(1) hue-rotate(-25deg);
}
.theme-fandomdesktop-dark .canon-notice.noInvert img {
	filter: none;
}

/* ---------------------------------------------------------------- */