@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
+/* Also see MediaWiki:Gadget-DesignTokens.css */
-/* Replicate into MediaWiki:Mobile.css as necessary */
-/*Mainpage no Title*/
+/*Skip white background to display white logos when using Template:Thumb-Alpha*/
+.thumbalpha > figure[typeof~="mw:File/Thumb"] > a > img {
+	background-color: transparent !important;
+}
-/* Small update for the MediaWiki Version 1.32.2 and Vector 22:07, 14 October 2018 */
+/*1.44 text visibility corrections*/
+figure[typeof~="mw:File/Thumb"] > figcaption{/*Image thumbnail text*/
+	color:var(--iopw-sys-palette-on-surface);
+}
+.cdx-message__content{
+	text-shadow: none;
+}
+.tabber__tab, .tabber__tab:visited{/*Tab titles*/
+	color: var(--iopw-sys-palette-primary-lighter);
+}
+.ext-WikiEditor-ManualWidget{/*Text color in dynamic preview tool*/
+	color:black;
+}
+.wikiEditor-ui .wikiEditor-ui-view {/*Text color in dynamic preview tool*/
+  color: white !important;
+}
 #pagehistory li.selected {
@@ Line 26: / Line 44: @@
 .mediawiki input[type='text'] {
    color: var(--iopw-sys-palette-on-input);
-   background-color: (--iopw-sys-palette-input);
+   background-color: var(--iopw-sys-palette-input);
    &::selection {
      color: var(--iopw-sys-palette-on-primary);
@@ Line 38: / Line 56: @@
      color: var(--iopw-sys-palette-gray-99);
      background-color: #8a8a8a2b;
+}
+.mw-message-box {
+	text-shadow: none;
 }
@@ Line 87: / Line 109: @@
 }
-.rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
+.mw-rcfilters-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
      background-color: var(--iopw-sys-palette-primary-darker);
      color: var(--iopw-sys-palette-on-primary);
@@ Line 683: / Line 705: @@
 	overflow: hidden;
 	max-width: 800px;
-	height:90px;
-	position:relative;
 }
@@ Line 695: / Line 715: @@
 .gradientDivs > h4 > .mw-editsection {display:none;}
 .gradientDivs > div > div{background: linear-gradient(115deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 60%, transparent 90%);width:80%;padding:0 5px 0 5px;}
-.gradientDivs > div > p {width:75%;text-align:right;position:absolute;bottom:1em;}
+.gradientDivs > div > p {width:75%;text-align:right;}
 /* Stats Graph */
@@ Line 839: / Line 859: @@
    flex-flow: wrap;
    background-color: rgba(100, 100, 100, 0.3);
+}
+.obtain-panel {
+	display: grid;
+	grid: auto / minmax(auto, max-content) 1fr;
+	grid-gap: 0.3rem;
+	& .obtainflagcontainer {
+	  color: var(--iopw-sys-palette-gray-00);
+	  text-shadow: none;
+	  display: flex;
+	  gap: 0.3rem;
+	  align-items: flex-start;
+	  flex-wrap: wrap;
+	  /* Remove in the future: */
+	  float: none;
+	  width: none;
+	}
+	& .obtainflag {
+	  border-radius: 0.2rem;
+	  padding-left: 0 0.2rem;
+	  white-space: nowrap;
+	  /* Remove in the future: */
+	  border: none;
+	  clear: both;
+	}
 }
@@ Line 862: / Line 909: @@
 .obtainflag.obtain-drop   { background:yellow; }
 .obtainflag.obtain-reward { background:salmon; }
+.obtainflag.obtain-gacha { background:pink; }
 .obtainflag.obtain-hoc-fragments { background: #f9d988; }
 .obtainflag.obtain-assimilation { background-color: #8abfee; }
@@ Line 902: / Line 950: @@
 .profile-card .range { background-image: url('/images/b/b1/HOC_Range.png'); background-size: 13px 13px; background-repeat: no-repeat; padding-left: 14px; padding-right: 2px; position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: bold; color: orange; background-color: black; line-height: 14px; }
 .profile-card .indexnumber { position: absolute; bottom: 5px; left: 80px; color: white;}
+.entity-name {
+	display: inline-block;
+	& .entity-icon {
+		width: 1rem;
+    	display: inline-block;
+    	height: 1rem;
+    	vertical-align: text-bottom;
+    	background-size: contain;
+    	background-position: center;
+    	margin-right: 0.1rem;
+	}
+}
+/** GFL1 Fairy name */
+.gfl-name-fairy {
+	&.fairy-battle {
+		color: var(--gfl-sys-unit-fairy-battle);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-battle);
+	}
+	&.fairy-strategy {
+		color: var(--gfl-sys-unit-fairy-strategy);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-unit-fairy-strategy);
+	}
+}
+/** GFL1 Equipment name */
+.gfl-name-equip {
+	&.rarity-2 {
+		color: var(--gfl-sys-rarity-2star);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-2star);
+	}
+	&.rarity-3 {
+		color: var(--gfl-sys-rarity-3star);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-3star);
+	}
+	&.rarity-4 {
+		color: var(--gfl-sys-rarity-4star);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-4star);
+	}
+	&.rarity-5 {
+		color: var(--gfl-sys-rarity-5star);
+		text-shadow: 0 0 0.2rem var(--gfl-sys-rarity-5star);
+	}
+}
 /* Equipment named card */
 .equipmentnamedcard {
-   width: 80px;
+   width: 5rem;
    text-align: center;
    display: inline-block;
-   margin-right: 15px;
+   margin-right: 1rem;
    vertical-align: top;
 }
 .equipmentnamedcard .equipmentcard {
-   margin-left: 5px;
+   margin-left: 0.3125rem;
-   margin-right: 5px;
+   margin-right: 0.3125rem;
 }
@@ Line 928: / Line 1,022: @@
 .equipmentcard {
    display: inline-block;
-  background-color: #303030;
-  border: 2px solid #d0d0d0;
-  width: 64px;
-  height: 60px;
    position: relative;
    overflow: hidden;
+  background-color: var(--iopw-sys-palette-gray-20);
+  border: 2px solid var(--iopw-sys-palette-gray-80);
+  width: 4rem;
+  height: 3.75rem;
+  background-repeat: no-repeat;
+  background-size: auto 0.45rem, contain;
+  background-position: top right, top left;
+  &.rarity2 { background-image: url(/images/2/25/2Stars.png), url(/images/9/96/2starE.png); }
+  &.rarity3 { background-image: url(/images/d/dd/3Stars.png), url(/images/9/91/3starE.png); }
+  &.rarity4 { background-image: url(/images/4/41/4Stars.png), url(/images/2/2e/4starE.png); }
+  &.rarity5 { background-image: url(/images/8/81/5Stars.png), url(/images/d/d4/5starE.png); }
+  & .overlay-link {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  & .type {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1.6rem;
+  }
+  & .equipimage {
+    position: absolute;
+    margin-top: 3px;
+    top: 0;
+    left: 0;
+  }
 }
-.equipmentcard .equipmentcardfiller {
-  position: absolute;
+.event-node-difficulties .tabs-content {
-  z-index: 5;
+	width: 100%;
 }
-.equipmentcard img.typeicon {
+.event-map-summary {
-  position: absolute;
+	float: right;
-  z-index: 2;
+	width: 450px;
-  top: 0;
+	max-width: 450px;
-  left: 0;
-}
-.equipmentcard .raritystars {
-  position: absolute;
-  margin-top: 1px;
-  margin-left: auto;
-  margin-right: 1px;
-  height: 8px;
-  z-index: 3;
-  top: 0px;
-  right: 0px;
-}
-.equipmentcard .equipimage {
-  position: absolute;
-  margin-top: 3px;
-  top: 0;
-  left: 0;
-}
-.event-node-difficulties .tabs-content {
-	width: 100%;
-}
-.event-map-summary {
-	float: right;
-	width: 450px;
-	max-width: 450px;
 }
@@ Line 1,075: / Line 1,171: @@
 /*image*/
+.mediawiki .thumb .thumbimage {
+	width: 100%;
+	height: 100%;
+}
 div.thumbinner {
      border: 0;
      background-color: rgba(255,255,255,0.25);
+}
+.layout-image {
+	display: block;
+	height: 100%;
+	width: 100%;
+	background-repeat: no-repeat;
 }
@@ Line 1,096: / Line 1,204: @@
    & .doll-image {
-	margin-top: 0.75rem;
+	background-size: contain;
-	width: 100%;
+	background-position-y: 0.8rem;
-	height: auto;
+  }
-	object-fit: contain;
-}
    & .rarity-class {
 	position: absolute;
-	top: 0.05rem;
+	top: 0;
-	left: 0.05rem;
+	left: 0;
-	width: 3.3125rem;
+	background-position: 0.075rem 0.075rem;
-	height: auto;
+	pointer-events: none;
-}
+  }
    & .index {
@@ Line 1,123: / Line 1,229: @@
 	position: absolute;
 	left: 0;
-}
+	user-select: none;
+  }
    & .card-frame {
@@ Line 1,133: / Line 1,240: @@
 	top: 0;
 	left: 0;
-}
+  }
    & > .plainlinks.card-frame > .external.text {
@@ Line 1,141: / Line 1,248: @@
 	width: 100%;
 	height: 100%;
-}
+  }
    & .name {
@@ Line 1,162: / Line 1,269: @@
 	position: absolute;
 	overflow: hidden;
-}
+	user-select: none;
+  }
    &.doll-rarity-2 .name { background-image: url("/images/b/b1/Infobox_name_2star.png"); }
@@ Line 1,174: / Line 1,282: @@
 .card-bg {
    background-image:url("/images/5/5a/Infobox_bg.png");
-   width:256px;
+   width:auto;
    height:456px;
    padding:10px;
@@ Line 1,557: / Line 1,665: @@
 	div#left-navigation{margin-left:0;}
 	.mw-body {margin-left:0;}
+	.aboutcontainer {flex-flow:row wrap;}
+	#aboutwiki, #aboutgame {width:100%;}
 }
+.floatright {
+	margin: 0;
+	float: right;
+}
+.floatleft {
+	margin: 0;
+	float: left;
+}
-/* floatright */
-div.floatright, table.floatright {margin: 0;}
-/* floatleft */
-div.floatleft, table.floatleft {margin: 0;}
-/* standard link colors */
-a, .mw-body a.external  { color: var(--iopw-sys-palette-primary); } /* normal unvisited links */
-a:visited .mw-body a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: var(--iopw-sys-palette-primary-darker); } /* visited links */
-.mw-body a.new { color: var(--iopw-sys-palette-font-negative); } /* new links */
-.mw-body a.extiw, .mw-body a.external {
-	background-position: center right;
-	background-repeat: no-repeat;
-	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
-	padding-right: 13px;
-}
 /* plain links*/
@@ Line 1,615: / Line 1,712: @@
 	background: rgba(50,50,50,0.5);
 	overflow: auto;
+}
+.gfwiki-message-box + .gfwiki-message-box {
+	margin-top: 1rem;
 }
@@ Line 1,782: / Line 1,882: @@
 }
 /* mutilmediaViewer 信息栏修复 */
+.mw-mmv-image-metadata {
+	margin-top: 0;
+}
 .mw-mmv-image-metadata-column.mw-mmv-image-metadata-desc-column {
      width: 30%;
@@ Line 1,975: / Line 2,078: @@
 	display:inline-block;
 	box-sizing:border-box;
+	width:800px;
+	color:white;
 }
@@ Line 2,042: / Line 2,147: @@
 	background-position: -1.5em -0.2em,left top;
 	margin-right: 10px;
+	color:white;
 }
@@ Line 2,096: / Line 2,202: @@
    flex-wrap: wrap;
    gap: var(--iopw-sys-size-2);
-   justify-content: center;
+   margin-left: auto;
+  margin-right: auto;
    & .game-thumb {
@@ Line 2,106: / Line 2,213: @@
    & .game-thumb-img {
      position: absolute;
-    object-fit: cover;
      filter: brightness(50%);
      transition: 0.35s ease-in-out;
+    & .mw-file-element {
+	  object-fit: cover;
+	  width: 100%;
+	  height: 100%;
+	}
    }
@@ Line 2,480: / Line 2,591: @@
      z-index: 1;
-     bottom: 100%;
+     top: 17px;
-     left: 50%;
+     left: 10px;
-    margin-left: -150px; /* Use half of the width, to center the tooltip */
 }
@@ Line 2,497: / Line 2,607: @@
 .tooltip:hover .tooltiptext {
      visibility: visible;
+    display: block;
 }
 .tooltiptext .tooltiptext-content {
    margin: 17px;
    margin-bottom: 20px;
+  display: block;
 }
 .tooltiptext-corners {
@@ Line 2,629: / Line 2,741: @@
 	display: inline-block;
 	height: 250px;
-	width: 128px;
+	width: 126px;
 	overflow: hidden;
 	margin-right: 20px;
@@ Line 2,647: / Line 2,759: @@
 .pnc-index-entry .back {
 	position: absolute;
-	top: 20px;
+	bottom: -30px;
-	left: 0px;
 }
 .pnc-index-entry .hero {
 	position: absolute;
-	top: 0px;
-	left: 1px;
-	width: 126px;
 }
 .pnc-index-entry .front {
 	position: absolute;
-	bottom: 0px;
+	bottom: -28px;
 }
 .pnc-index-entry .company {
@@ Line 2,668: / Line 2,776: @@
 }
 .pnc-index-entry .rarity {
-	position: absolute;
+	position: relative;
-	bottom: 32px;
+	top: 190px;
 	left: 4px;
-	height: 16px;
 }
 .pnc-index-entry .name {
@@ Line 2,737: / Line 2,844: @@
 .heading-holder .tagline {
 	display:none;
+}
+/* More readable standard toggle button */
+.mw-collapsible-toggle-default .mw-collapsible-text{
+	color: #3877df;
 }

MediaWiki:Common.css: Difference between revisions