• Welcome to the Kancolle Wiki!
  • If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord

Difference between revisions of "MediaWiki:Common.css"

From Kancolle Wiki
Jump to navigation Jump to search
(Maximum organization of CSS, whoever did the syntax for this should remember to DOUBLE CHECK THEIR CODE. Everything should now function correctly according to the stylesheet and not break randomly)
Line 1: Line 1:
/***** CSS placed here will be applied to all skins on the entire site. *****/
+
/*****************************************************************************************/
/*Vertical Alignment for MainPage and more*/
+
/*** This page is the central stylesheet for the entire wiki. Any additions or changes ***/
#mainpage {
+
/*** that are made here will be reflected globally around the website. Do NOT          ***/
 +
/*** modify unless you know exactly what you are doing. Consult me if you have        ***/
 +
/*** something in mind but don't know how to make it happen. You will only end up      ***/
 +
/*** breaking things already in place.                                                ***/
 +
/*** - Gensui Hime                                                                    ***/
 +
/*****************************************************************************************/
 +
/**Mainpage CSS Stylesheet**/
 +
#mainpage { /*Main Page box*/
 
width: 100%;
 
width: 100%;
 
padding: 1px 3px 1px 3px;
 
padding: 1px 3px 1px 3px;
box-sizing: border-box;
+
box-sizing: border-box; /*Resizing*/
 
-webkit-box-sizing: border-box;
 
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
Line 14: Line 21:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
}
 
}
#mp-leftcolumn {
+
#mp-leftcolumn { /*Left Column - Static 450px*/
float:left;
+
float:left; /*Image links can go here. (Non-resizeable)*/
 
width:450px;
 
width:450px;
 
margin-right:0.4%;
 
margin-right:0.4%;
Line 21: Line 28:
 
}
 
}
  
#mp-rightcolumn {
+
#mp-rightcolumn { /*Right Column - Fluid*/
width:auto;
+
width:auto; /*Various text based boxes can be inserted.*/
 
overflow:hidden;
 
overflow:hidden;
 
margin-left:0.1%;
 
margin-left:0.1%;
 
}
 
}
#coretitle {
+
#coretitle { /*Main Link Titlebox*/
 
text-align:center;
 
text-align:center;
 
border:1px solid lightgrey;
 
border:1px solid lightgrey;
Line 32: Line 39:
 
background-color:#E9F3FE;
 
background-color:#E9F3FE;
 
}
 
}
#tophead {
+
#tophead { /*Wiki Description Box*/
 
border:double white;
 
border:double white;
 
border-radius:14px;
 
border-radius:14px;
Line 42: Line 49:
 
min-width:160px;
 
min-width:160px;
 
}
 
}
#logo {
+
#logo { /*Logo inside tophead*/
 
float:left;
 
float:left;
 
width:150px;
 
width:150px;
 
}
 
}
#kcheader {
+
#kcheader { /*Element could not be fluid, so added a scrollbar.*/
 
width:auto;
 
width:auto;
 
overflow: scroll;
 
overflow: scroll;
 
height:150px;
 
height:150px;
overflow-x:hidden;
+
overflow-x:hidden; /*Hide bottom scroll because it's pointless*/
 
scrollbar-base-color:#E9F3FE;
 
scrollbar-base-color:#E9F3FE;
 
}
 
}
/* Language specific CSS */
+
/**************************************************************/
:lang(zh) {
+
/* Global Language Stylesheet */
 +
/* Set fonts for lang type */
 +
:lang(zh) { /*All Chinese languages?*/
 
font-family: Microsoft Yahei, 微软雅黑, Serif;
 
font-family: Microsoft Yahei, 微软雅黑, Serif;
 
}
 
}
Line 62: Line 71:
 
}
 
}
 
   
 
   
:lang(zh-tw) {
+
:lang(zh-tw) { /*Taiwanese*/
 
font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
 
font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
 
}
 
}
 
   
 
   
:lang(ja) {
+
:lang(ja) { /*Japanese*/
 
font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
 
font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
 
}
 
}
/*Global Button Settings*/
+
 
 +
/*************************************/
 +
/* Button Stylesheet */
 +
/*Button Settings*/
 
.globalbutton {
 
.globalbutton {
 
-webkit-border-radius: 13;
 
-webkit-border-radius: 13;
Line 83: Line 95:
 
text-align:center;
 
text-align:center;
 
}
 
}
 
+
.globalbutton:hover { /*When mouse hover*/
.globalbutton:hover {
 
 
background: #2b9ce3;
 
background: #2b9ce3;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
.globalbutton:focus {
+
.globalbutton:active { /*When mouse press*/
 +
background: #1d90d8;
 +
text-decoration: none;
 +
}
 +
.globalbutton:focus { /*Removes blue outline*/
 
outline:0 !important;
 
outline:0 !important;
 
}
 
}
Line 104: Line 119:
 
     font-weight:bold;
 
     font-weight:bold;
 
}
 
}
 
+
/************************************************/
/* Sitenotice AutoScroll CSS */
+
/* Scrolling Text CSS - Combined with Common.js */
 
#scrollDiv{
 
#scrollDiv{
 
width: 100%;
 
width: 100%;
Line 118: Line 133:
 
}
 
}
  
 +
/******************************/
 +
/      Everything Else        */
 +
/******************************/
 
/* For template documentation */
 
/* For template documentation */
 
.template-documentation {
 
.template-documentation {

Revision as of 18:41, 1 October 2015

/*****************************************************************************************/
/*** This page is the central stylesheet for the entire wiki. Any additions or changes ***/
/*** that are made here will be reflected globally around the website. Do NOT          ***/
/*** modify unless you know exactly what you are doing. Consult me if you have         ***/
/*** something in mind but don't know how to make it happen. You will only end up      ***/
/*** breaking things already in place.                                                 ***/
/*** - Gensui Hime                                                                     ***/
/*****************************************************************************************/
/**Mainpage CSS Stylesheet**/
#mainpage {					/*Main Page box*/
	width: 100%;
	padding: 1px 3px 1px 3px;
	box-sizing: border-box;			/*Resizing*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#mainpage * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
#mp-leftcolumn {				/*Left Column - Static 450px*/
	float:left;				/*Image links can go here. (Non-resizeable)*/
	width:450px;
	margin-right:0.4%;
	
}

#mp-rightcolumn {				/*Right Column - Fluid*/
	width:auto;				/*Various text based boxes can be inserted.*/
	overflow:hidden;
	margin-left:0.1%;
}
#coretitle {					/*Main Link Titlebox*/
	text-align:center;
	border:1px solid lightgrey;
	border-radius:8px;
	background-color:#E9F3FE;
}
#tophead {					/*Wiki Description Box*/
	border:double white;
	border-radius:14px;
	border-width:4px;
	padding: 6px 6px 6px 6px;
	background-color:#E9F3FE;
	margin-bottom:0.3%;
	min-height:150px;
	min-width:160px;
}
#logo {						/*Logo inside tophead*/
	float:left;
	width:150px;
}
#kcheader {					/*Element could not be fluid, so added a scrollbar.*/
	width:auto;
	overflow: scroll;
	height:150px;
	overflow-x:hidden;			/*Hide bottom scroll because it's pointless*/
	scrollbar-base-color:#E9F3FE;
}
/**************************************************************/
/* Global Language Stylesheet */
/* Set fonts for lang type */
:lang(zh) {					/*All Chinese languages?*/
	font-family: Microsoft Yahei, 微软雅黑, Serif;
}
 
:lang(zh-cn) {
	font-family: Microsoft Yahei, 微软雅黑, Serif;
}
 
:lang(zh-tw) {					/*Taiwanese*/
	font-family: Microsoft Jhenghei, 微軟正黑體, Serif;
}
 
:lang(ja) {					/*Japanese*/
	font-family: Yu Gothic, 遊ゴシック, Meiryo, メイリオ, Serif;
}

/*************************************/
/* Button Stylesheet */
/*Button Settings*/
.globalbutton {
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	font-family: Arial;
	color: #ffffff;
	font-size: 15px;
	background: #3baef5;
	padding: 4px 5px 4px 5px;
	text-decoration: none;
	max-width:300px;
	text-align:center;
}
.globalbutton:hover {				/*When mouse hover*/
	background: #2b9ce3;
	text-decoration: none;
}
.globalbutton:active {				/*When mouse press*/
	background: #1d90d8;
	text-decoration: none;
}
.globalbutton:focus {				/*Removes blue outline*/
	outline:0 !important;
}

/*Remove this after all instances of Globalbutton are added*/
.wikia-menu-button {
    button:focus {outline:0;}
    border-style: double;
    border-radius:9px;
    border-width: 4px;
    border-color: white;
    background-color:#E9F3FE;
    max-width:300px;
    text-align:center;
    font-weight:bold;
}
/************************************************/
/* Scrolling Text CSS - Combined with Common.js */
#scrollDiv{
	width: 100%;
	height: 25px;
	line-height: 25px;
	overflow: hidden;
}
#scrollDiv li{
	height: 25px;
	padding-left: 10px;
	list-style: none;
}

/******************************/
/      Everything Else        */
/******************************/
/* For template documentation */
.template-documentation {
	clear: both;
	margin: 1em 0 0 0;
	border: 1px solid #aaa;
	background-color: #ecfcf4;
	padding: 1em;
}

/* Default skin for navigation boxes */
table.navbox {								/* Navbox container style */
	border: 1px solid #7384B5;
	width: 100%;
	margin: auto;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
}
 
/* Navbox Layout */
	table.navbox + table.navbox {			/* Single pixel border between adjacent navboxes */
	margin-top: -1px;						/* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
	text-align: center;						/* Title and above/below styles */
	padding-left: 1em;
	padding-right: 1em;
}
.navbox-group {								/* Group style */
	white-space: nowrap;
	text-align: right;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
}
.navbox-list {
	text-align: left;
}
.collapseButton {          					/* 'show'/'hide' buttons created dynamically */
	float: right;							/* by the CollapsibleTables javascript in    */
	font-weight: normal;					/* [[MediaWiki:Common.js]]are styled here    */
	text-align: right;						/* so they can be customised.                */
	width: auto;
}
.navbox .collapseButton {					/* In navboxes, the show/hide button balances */
	width: 6em;								/* the vde links from [[Template:Tnavbar]],   */
}											/* so they need to be the same width.         */
.navbox-title, .navbox-above, .navbox-below {
	padding-left:1em;
	padding-right:1em;
	text-align:center;
}
 
/* Navbox Colors */
.navbox, .navbox-subgroup {
	background: #fdfdfd;     /* Background color */
}
.navbox-list {
	border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
	background:#CEDAFF;     /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
	background: #DDE6FF;     /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
	background: #DDE6FF;     /* Level 3 color */
}
.navbox-even {
	background: #f7f7f7;     /* Even row striping */
}
.navbox-odd {
	background: transparent; /* Odd row striping */
}


/* Mark redirects in Special:Allpages and Special:Watchlist
-------------------------------*/
.allpagesredirect {
	font-style: italic;
}
.allpagesredirect:after {
	color: #808080; content: " (redirect)"
}
.watchlistredir {
	font-style: italic;
}

/* 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 #aaa;
	border-left: 10px solid #1e90ff;  /* Default "notice" blue */
	background: #fbfbfb;
}
	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 #1e90ff;    /* Blue */
}
table.ambox-speedy {
	border-left: 10px solid #b22222;    /* Red */
	background: #fee;                   /* Pink */
}
table.ambox-delete {
	border-left: 10px solid #b22222;    /* Red */
}
table.ambox-content {
	border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
	border-left: 10px solid #f4c430;    /* Yellow */
}
table.ambox-move {
	border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
	border-left: 10px solid #bba;       /* Gray-gold */
}
 
/* Image message box styles */
table.imbox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 3px solid #1e90ff;    /* Default "notice" blue */
	background: #fbfbfb;
}
.imbox .mbox-text .imbox {  /* For imboxes inside imbox-text cells. */
	margin: 0 -0.5em;       /* 0.9 - 0.5 = 0.4em left/right.        */
	display: block;         /* Fix for webkit to force 100% width.  */
}
.mbox-inside .imbox {       /* For imboxes inside other templates.  */
	margin: 4px;
}
 
table.imbox-notice {
	border: 3px solid #1e90ff;    /* Blue */
}
table.imbox-speedy {
	border: 3px solid #b22222;    /* Red */
	background: #fee;             /* Pink */
}
table.imbox-delete {
	border: 3px solid #b22222;    /* Red */
}
table.imbox-content {
	border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
	border: 3px solid #f4c430;    /* Yellow */
}
table.imbox-move {
	border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
	border: 3px solid #bba;       /* 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 #aaa;
	background: #DFE8FF;    /* Default "notice" blue */
}
 
table.cmbox-notice {
	background: #D8E8FF;    /* Blue */
}
table.cmbox-speedy {
	margin-top: 4px;
	margin-bottom: 4px;
	border: 4px solid #b22222;    /* Red */
	background: #FFDBDB;          /* Pink */
}
table.cmbox-delete {
	background: #FFDBDB;    /* 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 #aaa;       /* Default "notice" gray */
	background: #f9f9f9;
}
 
table.ombox-notice {
	border: 1px solid #aaa;       /* Gray */
}
table.ombox-speedy {
	border: 2px solid #b22222;    /* Red */
	background: #fee;             /* Pink */
}
table.ombox-delete {
	border: 2px solid #b22222;    /* Red */
}
table.ombox-content {
	border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
	border: 1px solid #f4c430;    /* Yellow */
}
table.ombox-move {
	border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
	border: 2px solid #bba;       /* Gray-gold */
}
/* For template documentation */
.template-documentation {
	clear: both;
	margin: 1em 0 0 0;
	border: 1px solid #aaa;
	background-color: #ecfcf4;
	padding: 1em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
	/* @noflip */
	float: right;
	font-weight: normal;
	/* @noflip */
	margin-left: 0.5em;
	/* @noflip */
	text-align: right;
	width: auto;
}
/* In navboxes, the show/hide button balances the v·d·e links
   from [[Template:Navbar]], so they need to be the same width. */
.navbox .collapseButton {
	width: 6em;
}
 
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
	font-weight: normal;
	/* @noflip */
	text-align: right;
}
.navbox .mw-collapsible-toggle {
	width: 6em;
}

/* Standard Navigationsleisten, aka box hiding thingy
from .de.  Documentation at [[Wikipedia:NavFrame]]. */
div.NavFrame {
	margin: 0;
	padding: 4px;
	border: 1px solid #aaa;
	text-align: center;
	border-collapse: collapse;
	font-size: 95%;
}
	div.NavFrame + div.NavFrame {
	border-top-style: none;
	border-top-style: hidden;
}
div.NavPic {
	background-color: #fff;
	margin: 0;
	padding: 2px;
	/* @noflip */
	float: left;
}
div.NavFrame div.NavHead {
	line-height: 1.6em;
	font-weight: bold;
	background-color: #ccf;
	position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
	font-size: 100%;
}
div.NavEnd {
	margin: 0;
	padding: 0;
	line-height: 1px;
	clear: both;
}
a.NavToggle {
	position: absolute;
	top: 0;
	/* @noflip */
	right: 3px;
	font-weight: normal;
	font-size: 90%;
}
 /* Fix table style*/
tr.fix {
        position: fixed;
        top: 0;
        margin-left: 0;
}
 
table.fix {
        margin-top: 0px;
}