MediaWiki:Mobile.css

/* 这里放置的CSS将影响使用移动版网站的用户 */


h1, h2, h3 {
	font-weight: bolder;
}

hr {
	margin: 0px;
}

/* 修正展开按钮样式 */
.wikitable > caption {
	min-width: 42px;
}

.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}
/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}
.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
	content: ")";
	font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}
.hlist ol > li {
	counter-increment: listitem;
}
.hlist ol > li:before {
	content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) "\a0";
}


/* 修复单元格莫名空行 */
td {
    vertical-align: middle;
}
/* 修复子页面列表和common-box宽度不足 */
.mw-prefixindex-list-table,
.common-box {
    width: 100%!important;
}
/* 侧边栏和替换logo图片隐藏 */
#sidebar-character,
#wglogo {
    display: none;
}
/* code 内边距修复 */
code {
    padding: 3px
}
/* 搜索栏边框 */
.header .search-box input.search {
    padding: 7px 3px;
    border: 1px solid #CCC;
    border-radius: none;
}
/* 图片宽度 */
#mw-content-text img {
max-width:70vw
}
/* 图片高度 */
#mw-content-text img {
max-height:70vh
}
/* 表格强制不换行，使用最小字体 */
.wikitable {
  white-space: nowrap;
}

table.wraptable {
  white-space: normal;
}

/*手机端*/
@media screen and (max-width: 640px) {
  body {
    font-size: small;
  }
  .wikitable,
  .infobox {
    font-size: x-small
  }
}


/*黑幕 */
.heimu {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}

.heimu:hover,
.heimu:active,
.heimu:focus {
    transition: color .15s linear;
    color: #fff;
}

div > .richtab {
  margin-left: 0.1em;
  margin-right: 0.1em;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.richtab:after {
    content: " ";
    display: table;
    clear: left;
}
.richtab > li {
  float: left;
  margin-bottom: -1px;
  position: relative;
  display: block;
}
.richtab > li > span {
  position: relative;
  display: block;
}
.richtab > li > span > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 0 0 0 0;
}
.richtab > li > span > a:hover {
  border-color: #cccccc #cccccc #cccccc;
}
.richtab > li.active > span > a,
.richtab > li.active > span > a:hover,
.richtab > li.active > span > a:focus {
  color: #333333;
  background-color: rgba(217, 214, 214, 0.9);
  border: 1px solid #cccccc;
  border-bottom-color: transparent;
  cursor: default;
}
.richtab-content > .tab-pane {
  display: none;
}
.richtab-content > .active {
  display: block;
}

.infobox {
  float: right;
}

.infobox-title {
	text-align: center;
}

.tbrl {
  writing-mode: vertical-rl;
}

.story-vlbl {
	white-space: nowrap;
}

.tinyedit {
  font-size: small;
  white-space: nowrap;  
  padding-top: 1em;
}

.tinyedit a.external {
  background-image: none;
  padding-right: 0px;
  color: #36b;
}

.tinyedit a.external:visited {
  color: #36b;
}

/********************
**Styles for mboxes**
********************/
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {     /* The message body cell(s) */
    border: none; 
    padding: 0.25em 0.9em;       /* 0.9em left/right */
    width: 100%;    /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                  /* The left image cell */
    border: none; 
    padding: 2px 0 2px 0.9em;    /* 0.9em left, 0px right */
    text-align: center; 
}
td.mbox-imageright {             /* The right image cell */
    border: none;
    padding: 2px 0.9em 2px 0;    /* 0px left, 0.9em right */
    text-align: center; 
}
td.mbox-empty-cell {         /* An empty narrow cell */
    border: none;
    padding: 0px;
    width: 1px;
}
 
/* Article message box styles */
table.ambox {
    margin: 0px 10%;   /* 10% = Will not overlap with other elements */
    border: 1px solid #a2a9b1; 
    border-left: 10px solid #36c;    /* Default "notice" blue */
    background: #f8f9fa; 
}
table.ambox + table.ambox {   /* Single border between stacked boxes. */
    margin-top: -1px;
}
.ambox th.mbox-text, 
.ambox td.mbox-text {            /* The message body cell(s) */
    padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
    padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
    padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}
 
table.ambox-notice {
    border-left: 10px solid #36c;    /* Blue */
}
table.ambox-speedy {
    border-left: 10px solid #b32424;    /* Red */
    background: #fee7e6;                   /* Pink */
}
table.ambox-delete {
    border-left: 10px solid #b32424;    /* Red */
}
table.ambox-content {
    border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
    border-left: 10px solid #fc3;    /* Yellow */
}
table.ambox-move {
    border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
    border-left: 10px solid #a2a9b1;       /* Gray-gold */
}
 
/* Image message box styles */
table.imbox {
    margin: 4px 10%; 
    border-collapse: collapse; 
    border: 3px solid #36c;    /* Default "notice" blue */
    background: #f8f9fa;
}
.imbox .mbox-text .imbox {    /* For imboxes inside imbox-text cells. */
    margin: 0 -0.5em;    /* 0.9 - 0.5 = 0.4em left/right. */
}
.mbox-inside .imbox {    /* For imboxes inside other templates. */
    margin: 4px;
}
 
table.imbox-notice {
    border: 3px solid #36c;    /* Blue */
}
table.imbox-speedy {
    border: 3px solid #b32424;    /* Red */
    background: #fee7e6;             /* Pink */
}
table.imbox-delete {
    border: 3px solid #b32424;    /* Red */
}
table.imbox-content {
    border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
    border: 3px solid #fc3;    /* Yellow */
}
table.imbox-move {
    border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
    border: 3px solid #a2a9b1;       /* Gray-gold */
}
table.imbox-license {
    border: 3px solid #88a;       /* Dark gray */
    background: #f7f8ff;          /* Light gray */
}
table.imbox-featured {
    border: 3px solid #cba135;    /* Brown-gold */
}
 
/* Category message box styles */
table.cmbox {
    margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1; 
    background: #eaf3ff;    /* Default "notice" blue */
}
 
table.cmbox-notice {
    background: #eaf3ff;    /* Blue */
}
table.cmbox-speedy {
    margin-top: 4px;
    margin-bottom: 4px;
    border: 4px solid #b32424;    /* Red */
    background: #fee7e6;          /* Pink */
}
table.cmbox-delete {
    background: #fee7e6;    /* Red */
}
table.cmbox-content {
    background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
    background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
    background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
    background: #EFEFE1;    /* Gray-gold */
}
 
/* Other pages message box styles */
table.ombox {
    margin: 4px 10%; 
    border-collapse: collapse; 
    border: 1px solid #a2a9b1;       /* Default "notice" gray */
    background: #f8f9fa;
}
 
table.ombox-notice {
    border: 1px solid #a2a9b1;       /* Gray */
}
table.ombox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee7e6;             /* Pink */
}
table.ombox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.ombox-content {
    border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
    border: 1px solid #fc3;    /* Yellow */
}
table.ombox-move {
    border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
    border: 2px solid #a2a9b1;       /* Gray-gold */
}
 
/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090;    /* Default "notice" gray-brown */
    background: #f8eaba;
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" */
    margin: 2px 0;               /* class ensures that this declaration overrides other */
    width: 100%;  /* For Safari and Opera */     /* styles (including mbox-small above) */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
    line-height: 1.5em;          /* also "nested", so reset styles that are   */   
    font-size: 100%;             /* set in "mbox-small" above.                */
}
 
table.tmbox-speedy {
    border: 2px solid #b32424;    /* Red */
    background: #fee7e6;             /* Pink */
}
table.tmbox-delete {
    border: 2px solid #b32424;    /* Red */
}
table.tmbox-content {
    border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
    border: 2px solid #fc3;    /* Yellow */
}
table.tmbox-move {
    border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #c0c090;    /* Gray-brown */
}
 
/* Disambig and set index box styles */
table.dmbox {
    clear: both; 
    margin: 0.9em 1em; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    background: transparent;
    font-size: small;
}
 
/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background: #f8f9fa;     /* Default "system" gray */
}
table.fmbox-system {
    background: #f8f9fa;
}
table.fmbox-warning {
    border: 1px solid #bb7070;  /* Dark pink */
    background: #ffdbdb;        /* Pink */
}
table.fmbox-editnotice {
    background: transparent;
}
/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
#mw-protect-cascadeon {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background: #ffdbdb;
    padding: 0.25em 0.9em;
}
/* Div based "system" style fmbox messages. Used in 
   [[MediaWiki:Noarticletext]]. */
div.noarticletext,
div.fmbox-system {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #a2a9b1;
    background: #f8f9fa;
    padding: 0.25em 0.9em;
}
 
/* These mbox-small classes must be placed after all other 
   ambox/tmbox/ombox etc classes. "body.mediawiki" is so 
   they override "table.ambox + table.ambox" above. */
body.mediawiki table.mbox-small {   /* For the "small=yes" option. */
    clear: right;
    float: right;
    margin: 4px 0 4px 1em;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}
body.mediawiki table.mbox-small-left {   /* For the "small=left" option. */
    margin: 4px 1em 4px 0;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}

/* CODE FOR COMPACT AMBOX */

/* Remove borders, backgrounds, padding, etc. */
.compact-ambox table.ambox {
    border: none;
    border-collapse: collapse;
    background: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}
body.mediawiki .compact-ambox table.mbox-small-left {
    font-size: 100%;
    width: auto;
    margin: 0;
}
/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
    padding: 0 !important;
    margin: 0 !important;
}
.compact-ambox table .mbox-text-span {
    display: list-item;
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url("data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=");
}
/* Style for compact ambox */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
	display: none;
}

/* nav box*/
.navbox {                     /* Navbox container style */
    border: 1px solid #a2a9b1;
    width: 100%; 
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
.navbox-inner,
.navbox-subgroup {
    width: 100%;
}
.navbox th,
.navbox-title,
.navbox-abovebelow {
    text-align: center;       /* Title and above/below styles */
    padding-left: 1em;
    padding-right: 1em;
}
th.navbox-group {             /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}
.navbox,
.navbox-subgroup {
    background: #fdfdfd;      /* Background color */
}
.navbox-list {
    border-color: #fdfdfd;    /* Must match background color */
}
.navbox th,
.navbox-title {
    background: #ccccff;      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background: #ddddff;      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;      /* Level 3 color */
}
.navbox-even {
    background: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
    background: transparent;  /* Odd row striping */
}
table.navbox + table.navbox {  /* Single pixel border between adjacent navboxes */
    margin-top: -1px;          /* (doesn't work for IE6, but that's okay)       */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
    white-space: nowrap;      /* Nowrap list items in navboxes */
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
    white-space: normal;      /* But allow parent list items to be wrapped */
}
ol + table.navbox,
ul + table.navbox {
    margin-top: 0.5em;        /* Prevent lists from clinging to navboxes */
}

.navbox .wiki-navbar {
    display: block;
}
.navbox-title .wiki-navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
    width: 8em;
}



.hash-switch:not(.hash-value-spoiler):not(.hash-active) {
   display: none;
}

.hash-switch .hash-value-spoiler:not(.hash-active) {
    -webkit-filter: blur(3px); /* Chrome, Opera */
       -moz-filter: blur(3px);
        -ms-filter: blur(3px);   
            filter: blur(3px);
}

/* 可视化编辑器中强制显示 */
.ve-ce-leafNode .hash-switch:not(.hash-active) {
   display: block;
}

.banner-switch {
	position: absolute;
	right: 1px;
	bottom: 32px;
	z-index: 5;
}

.banner-switch span.hash-switch {
	display: inline-block !important;
	padding: 5px;
}

.banner-switch span.hash-switch a {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: lightblue;
	border: 2px solid transparent;
    border-radius: 50%;
}

.banner-switch span.hash-switch:not(.hash-active) a {
	background-color: #fff;
	border: 2px solid lightblue;
}

.home-title {
	position: relative;
    font-size: 2em;
    font-weight: 800;
}

.home-title a {
    color: #FCF3CF;
}

.home-title .sub-title {
	font-size: 50%;
    position: relative;
    top: -2em;
    opacity: 0.5;
    border-bottom: 1px solid #FCF3CF;
}

.home-links a {
	color:#f8f9fa;
}

.home-links a:hover {
	color: lightblue;
}

.home-links a:visited {
	color:#fefefe;
}

@media screen and (min-width: 480px) and (max-width: 1000px) {
  .auto-screen-scale {
  	width: 50%;
    height: 50%;
  }
}

@media screen and (max-width: 480px) {
  .auto-screen-scale {
  	width: 30%;
    height: 30%;
  }
  .home-title {
  	font-size: 1.5em;
  }
}

.page-首页 .mw-body {
	background-color: #2c2c2c;
    color: #fff;
    border-color: #2c2c2c;
}

.page-首页 .firstHeading {
	display: none;
}

.page-首页 .mw-jump {
	display: none;
}

.page-首页 .homepage-gallery {
    margin-top: -1.2em;
    margin-bottom: 2.5em;
}

.page-首页 .homepage-gallery .work-title {
	color: #F7DC6F;
	position: relative;
    display: block;
    font-size: 1.5em;
    text-align: left;
    left: -2em;
    top: -1.35em;
    font-weight: 500;
    z-index: 0;
    transform: rotate3d(1,1,1,25deg);
    transition: opacity 0.2s ease-out 0.2s;
}

.page-首页 .homepage-gallery a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 3px;
	box-sizing: border-box;
	transform: rotate3d(1, 1, 1, 25deg);
	z-index: 2;
	opacity: 0.85;
	transition: filter 0.15s ease-out, z-index 0.15s ease-out, opacity 0.15s ease-out, transform 0.25s ease-out;
	/*overflow: hidden;*/
}

.page-首页 .homepage-gallery p a:hover {
	/*border-color: #444;*/
	-moz-filter:brightness(1.05);
	-webkit-filter:brightness(1.05);
	-o-filter:brightness(1.05);
	-ms-filter:brightness(1.05);
	filter:brightness(1.05);
	transform: rotate3d(1, 1, 1, 0deg) translateZ(120px);
	z-index: 3;
	opacity: 1;
}

.page-首页 .homepage-gallery p a:hover + .work-title {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.page-首页 .homepage-gallery a > img {
	display: block;
	width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    box-shadow: #02020285 -11px 7px 4px;
    transform: scale(0.9);
}

.page-首页 .homepage-gallery p a:hover img {
	transform: scale(1.15);
	box-shadow: #00000090 -2px 1px 5px;
}

.character-gallery ul li {
	display: inline-block;
}

.character-gallery ul li .character-gallery-avatar:hover {
	transform: scale(1.5);
	border: 2px solid lightblue;
	
}
.character-gallery ul li .character-gallery-avatar {
	width: 100px;
	height: 100px;
	transition: transform 0.1s ease-out;
}

.page-作品_命运石之门 .firstHeading,
.page-作品_机器人笔记 .firstHeading,
.page-作品_命运石之门 .mw-jump-link,
.page-作品_机器人笔记 .mw-jump-link,
.page-作品_命运石之门 #contentSub,
.page-作品_机器人笔记 #contentSub
{
	display: none;
}

.page-作品_命运石之门 .banner,
.page-作品_机器人笔记 .banner {
	font-size: 1rem;
	position: relative;
    top: calc(-1.25em - 1px);
	width: calc(100% + 2em + 1px);
	left: calc(-1em - 1px);
}

@media screen and (min-width: 982px) {
	.page-作品_命运石之门 .banner,
	.page-作品_机器人笔记 .banner {
		width: calc(100% + 3em + 1px);
		left: calc(-1.5em - 1px);
	}
}


.debug-treechart > tbody > tr > td {
	border: 1px solid;
}