查看“MediaWiki:Common.css”的源代码

/* 这里放置的CSS将应用于所有皮肤 */
/* PC手机双端分别显示 */
@media (min-width: 1120px) {
	.client-pe {
		display: none;
	}
}

@media (max-width: 1119px) {
	.client-pc {
		display: none;
	}
}

/* 限制body宽度到1920px */
body{
    max-width: 1920px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

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

/* per-game banner images */
/*body {
    background-image: url(images/background.png);
    background-repeat: no-repeat;
}
body.page-Filia,body.rootpage-Filia {
    background-image: url(images/background.webp);
    background-attachment: fixed;
    background-size: cover;
}*/

.responsive-imagemap img { width: 100%; height: auto; }
.responsive-img img { width: 100%; height: auto; }
.big-pixly-image .image {width: 100%; height: auto; }
.big-pixly-image img { width: 100%; height: auto; image-rendering: pixelated; }

/* -----------------------------------------------------------------------------
                            Cargo Rules
----------------------------------------------------------------------------- */
/* disable the tfoot which dupes thead */

table.dataTable tfoot {
  display: none;
}

/* move images to start of line. else they will be at end of line when there are notes */
table.dataTable div.tright {
  float: left;
}

.stripe tbody tr:nth-child(odd) {
	background-color: var(--color-surface-1);
}

.stripe tbody tr:nth-child(odd):hover {
	background-color: var(--color-surface-3);
}

/* -----------------------------------------------------------------------------
                            Tier List Rules
----------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .tierList {
    display: grid;
    grid-template-columns: minmax(58px, auto) 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    /* box-shadow: var(--card-shadow-dlw); */
    border-radius: var(--border-radius--small);
    font-size: 0.875em;
    background-color:var(--color-surface-2);
    border-color: var(--border-color-base);
    overflow: hidden;
  }
}
@media (max-width: 899px) {
  .tierList {
    display: grid;
    grid-template-columns: minmax(58px, auto) 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    box-shadow: var(--card-shadow-dlw);
    border-radius: var(--border-radius--small);
    font-size: 0.875em;
    background-color:var(--color-surface-1);
    border-color: var(--border-color-base);
    overflow: hidden;
  }
}
.tierHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em 0;
  font-size: 1em;
  font-weight: 600;
  color: black;
}
.tierGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.tierUnderline {
  border-bottom: 1px solid var(--border-color-base--darker);
}
.generalUnderline {
  border-bottom: 1px solid var(--border-color-base);
}
.tierGroup>div {
  margin: 4px 10px;
}
.CharaInfoLabel {
  text-align: right;
  width: 50%;
  vertical-align: text-top;
}

/* -----------------------------------------------------------------------------
                            ColumnList Specific Rules
----------------------------------------------------------------------------- */

.columns2 {
  -webkit-columns: 16em 2;
  -moz-columns: 16em 2;
  columns: 16em 2;
}



/* -----------------------------------------------------------------------------
                        Cargo Based Move Boxes Styling
----------------------------------------------------------------------------- */

.grid-container {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: auto auto;
  gap: 0px 0px;
  grid-template-areas: "name data" "gallery description";
}
.move-box {
  box-shadow: var(--CardShadow);
  border-radius: var(--StandardBorderCurve);
}
.name {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  height: 1em;
  gap: 0px 0px;
  grid-template-areas: ".";
  grid-area: name;
  text-align: center;
}
#moveName {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.1em;
}
.gallery {
  grid-area: gallery;
  align-content: center;
  text-align: center;
  overflow: hidden;
}
.description {
  grid-area: description;
  padding: 0.25em 1em;
}
.data {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0px 0px;
  grid-template-areas: ". . . . . . . ." ". . . . . . . .";
  grid-area: data;
  text-align: center;
  border-bottom: 1px solid grey;
}
.data-cell {
  font-size: 20px;
}
#startup {
  color: #4caf50;
}
#active {
  color: #f44336;
}
#recovery {
  color: #2196f3;
}

/* Movelist Toggles */
.movelist-toggles {
  display: flex;
  justify-content: center;
  box-shadow: var(--card-shadow-dlw);
  background-color: var(--color-surface-1);
  border-radius: var(--border-radius--small);
}

.movelist-toggle-button {
    display: inline-flex;
    align-items: center;
    padding: 18px;
    font-weight: bold;
    scroll-snap-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-base--subtle);
}
.movelist-toggle-button:hover {
	background-color: var(--color-surface-3);
	color: var(--color-base--emphasized);
}

.movelist-toggle-on {
	background-color: var(--color-surface-2);
}

/******************************* Gallery Module *******************************/
@media all and (max-width: 720px) {
	.mod-gallery {
		width: 100% !important;
	}
}

.mod-gallery {
	display: table;
}

.mod-gallery-default {
	background: transparent;
	margin-top: 0.3em;
}

.mod-gallery-center {
	margin-left: auto;
	margin-right: auto;
}

.mod-gallery-left {
	float: left;
}

.mod-gallery-right {
	float: right;
}

.mod-gallery-none {
	float: none;
}

.mod-gallery-collapsible {
	width: 100%;
}

.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
	display: table-row;
}

.mod-gallery .title > div {
	display: table-cell;
	padding: 0.2em 0 0.6em 1.6em;
	text-align: center;
	font-weight: bold;
}

.mod-gallery .main > div {
	display: table-cell;
}

.mod-gallery .gallery {
	line-height: 1.35em;
}

.mod-gallery .footer > div {
	display: table-cell;
	padding: 0.2em 0 0.6em 1.6em;
	text-align: right;
	font-size: 80%;
	line-height: 1em;
}

.mod-gallery .title > div *,
.mod-gallery .footer > div * {
	overflow: visible;
}

.mod-gallery .gallerybox img {
	background: none !important;
}

.mod-gallery .bordered-images .thumb img {
	border: solid #eaecf0 1px;
}

.mod-gallery .whitebg .thumb {
	background: #fff !important;
}

/********************************** Tooltips **********************************/
.tooltip {
  border-bottom: 1px dashed var(--color-base);
  white-space: nowrap;
}
.tooltiptext {
	display: none;
}

/******* CLR template styling added back until templatestyles bug is fixed *******/
.colorful-text-1 { color: var(--color-pink); }
.colorful-text-2 { color: var(--color-blue); }
.colorful-text-3 { color: var(--color-green); }
.colorful-text-4 { color: var(--color-red); }
.colorful-text-5 { color: var(--color-orange); }
.colorful-text-6 { color: var(--color-magenta); }

/* balance badge template */
.balance-badge {
	color: var(--balance-badge-font-color);
	border-radius: var(--border-radius--small);
	font-weight: var(--font-weight-bold);
	font-size: 0.75em;
	letter-spacing: -0.008em;
	padding: 2px 4px;
}

.balance-badge.added {
  background-color: LemonChiffon;
}

.balance-badge.new {
  background-color: PeachPuff;
}

.balance-badge.removed {
  background-color: Lavender;
}

.balance-badge.reworked {
  background-color: LightBlue;
}

.balance-badge.buff {
  background-color: DarkSeaGreen;
}

.balance-badge.nerf {
  background-color: LightPink;
}

/**** Character Label styling added back until templatestyles is fixed ****/
.charaLabel {
  display: inline;
}

.charaLabel > img {
    color: transparent!important;
    font-size: 0!important;
    line-height: 0!important;
    vertical-align: middle!important;
    white-space: nowrap!important;
    --width: 0;
    --height: 16px;
    --small-scale: 0.75;
    --gap: 0;
    --base-gap: 2px;
}

/**** Input Badge styling added back until templatestyles is fixed ****/
.input-badge {
  border: 1px solid;
  border-radius: var(--border-radius--small);
  border-color: var(--border-color-base);
  padding: .25em .35em;
  font-weight: bold;
  background-color: var( --color-surface-2 );
}

/* -----------------------------------------------------------------------------
                            Template:RainbowText styles
----------------------------------------------------------------------------- */
/* In Common.css for Cargo compatibility. */

.rainbow-shadow {
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -1px 1px #ef3550,
               -2px 2px #f48fb1,
               -3px 3px #7e57c2,
               -4px 4px #2196f3,
               -5px 5px #26c6da,
               -6px 6px #43a047,
               -7px 7px #eeff41;
}

.rainbow-shadow-huge {
  font-weight: 900;
  font-size: 6em;
  padding-left: 1.8rem;
  padding-bottom: 0.8rem;
  letter-spacing: 0.15rem;
  color: var(--rainbow-text-base-color);
  text-shadow: -4px 4px #ef3550,
               -8px 8px #f48fb1,
               -12px 12px #7e57c2,
               -16px 16px #2196f3,
               -20px 20px #26c6da,
               -24px 24px #43a047,
               -28px 28px #eeff41,
               -32px 32px #f9a825,
               -36px 36px #ff5722;
}


/*------------------------------ Tippy Tooltips ------------------------------*/
.tippy-box {
    background-color: var(--color-surface-2);
    color: var(--color-base);
    border-radius: var(--border-radius--small);
    font-size: 0.875rem;
    line-height: var(--line-height-sm);
    outline: 0;
    box-shadow: var(--card-shadow-dlw), rgba(255, 255, 255, 0.067) 0px 1px 0px inset;
}
.tippy-content {
	text-align: center;
	padding: var(--space-sm) var(--space-md);
}
.tippy-arrow {
	color: var(--color-surface-2);
}
.tooltip-dashed-underline {
	text-decoration: dashed underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: from-font;
}

/*滚动条样式*/

.frameChart div::-webkit-scrollbar-button, .frameChart::-webkit-scrollbar-button {
	display: none;
}

.frameChart div::-webkit-scrollbar-track, .frameChart::-webkit-scrollbar-track {
	height: 8px;
	background-color: var(--color-surface-3);
}

.frameChart div::-webkit-scrollbar-thumb, .frameChart::-webkit-scrollbar-thumb {
	height: 8px;
	background-color: var(--color-base);
	border-radius: 4px;
}

.progress {
  height: 2px;
  background: lime;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 50%;
  animation: scaleProgress auto linear forwards,
    colorChange auto linear forwards;
  animation-timeline: scroll(self);
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes colorChange {
  0% {
    background-color: yellow;
  }
  100% {
    background-color: lime;
  }
}

/*调整视频大小*/
figure.embedvideo, figure.embedvideo .embedvideo-wrapper, figure.embedvideo .embedvideo-wrapper video {
	width: 100% !important;
	height: auto !important;
}