Difference between revisions of "MediaWiki:Common.css"

From Industrial-Craft-Wiki
Jump to navigation Jump to search
m (Found a much better fix for this - Undo revision 17411 by Chocohead (talk))
m (Testing new infobox to massively improve Template:Block)
Line 17: Line 17:


/* Old Crafting Grid CSS (Often Unused) */
/* Old Crafting Grid CSS (Often Unused) */
/* Might remove if this doesn't break anything
.grid-input {
.grid-input {
     left: 2px;
     left: 2px;
Line 55: Line 56:
div.grid-input-slide > span.grid-input, div.grid-input-slide > span.grid-input-numbers, div.grid-output-slide > span.grid-output, div.grid-output-slide > span.grid-output-numbers {
div.grid-input-slide > span.grid-input, div.grid-input-slide > span.grid-input-numbers, div.grid-output-slide > span.grid-output, div.grid-output-slide > span.grid-output-numbers {
     display: none;
     display: none;
}
}*/


/* New Crafting Grid CSS */
/* New Crafting Grid CSS */
Line 176: Line 177:
border: solid rgba(16, 0, 16, 0.94);
border: solid rgba(16, 0, 16, 0.94);
border-width: 0 0.125em;
border-width: 0 0.125em;
}
/*************************************
* Infobox CSS                        *
*************************************/
.infobox {
    width: 23em;
    text-align: right;
    border: 1px solid #AAA;
    background-color: #F9F9F9;
    color: #000;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    font-size: 88%;
    line-height: 1.2em;
    vertical-align: top;
    border-collapse: collapse;
}
.infobox td[colspan="2"],
.infobox th[colspan="2"] {
    text-align: center;
}
.infobox td:first-child:not([colspan="2"]) {
    text-align: left;
    font-weight: bold;
    width: 50%;
    vertical-align: top;
}
.infobox th.infoboxFirstHeader {
    font-size: 120%
}
.infobox td ul,
.infobox td ol {
    text-align: left;
}
.infobox th {
    border-bottom: #AAA thin solid;
    border-top: #AAA thin solid;
}
.infobox th,
.infobox td {
    padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox tr.infoboxSubsectionBreak {
    border-top: #AAA thin solid;
}
.infobox th.infoboxSectionHeader,
.infobox th.infoboxFirstHeader {
    background-color: #CDDEFF;
}
.infoboxSubsectionBreak td {
    padding: 0;
}
}



Revision as of 21:53, 3 April 2015

/* CSS placed here will be applied to all skins */
@font-face {
    font-family: 'MinecraftFont';
    src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Minecraftia';
    src: url("/images/3/32/Minecraftia-Regular.ttf") format('truetype');
}

.pops a {
  background-color: #ffc !important;
}

/* Old Crafting Grid CSS (Often Unused) */
/* Might remove if this doesn't break anything
.grid-input {
    left: 2px;
    position: absolute;
    top: 2px;
    z-index: 1;
}
.grid-output {
    left: 10px;
    position: absolute;
    top: 10px;
    z-index: 1;
}
.grid-input-number {
    left: 22px;
    position: absolute;
    top: 17px;
    z-index: 2;
}
.grid-input-number2 {
    left: 10px;
    position: absolute;
    top: 17px;
    z-index: 2;
}
.grid-output-number {
    left: 30px;
    position: absolute;
    top: 25px;
    z-index: 2;
}
.grid-output-number2 {
    left: 18px;
    position: absolute;
    top: 25px;
    z-index: 2;
}
div.grid-input-slide > span.grid-input, div.grid-input-slide > span.grid-input-numbers, div.grid-output-slide > span.grid-output, div.grid-output-slide > span.grid-output-numbers {
    display: none;
}*/

/* New Crafting Grid CSS */
.crafting-grid-div {
    width:32px;
    height:32px;
}

/* Set Number */
.crafting-grid-number {
    position: absolute;
    left: 16px;
    top: 16px;
    font-family: Minecraftia;
    font-size:12px;
    font-weight:bolder;
    color: #FFF;
    text-shadow: 2px 2px 0 #3F3F3F;
    filter: dropshadow(color=#3F3F3F, offx=2, offy=2);
    z-index: 2;
    letter-spacing: -0.5px;
    word-spacing: 6px;
}
 
/* Might not keep this, depends whether percentages are useful */
.crafting-grid-percentage {
    background-color:white;
    color:black;
    z-index: 1;
    border:1px solid black;
    position: relative;
    top: -4px;
    left: 10px;
    text-align: center;
    padding: 0px;
    font-weight:bold;
    width:36px;
}

/* Ignore me */
span.secret-link > a.mw-redirect {
 	color: white !important;
 	text-decoration: none;
}

/* Animated Grid Cells */
.animated-grid {
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
}
 
.animated-grid.active {
    position: relative;
    width:auto;
    height:auto;
    opacity: 1;
}

/*************************************
* Tooltip CSS                        *
*************************************/
.a1 {
	height: 32px;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 32px;
}

#tooltip-display {
    font-family: Minecraftia;
	font-size: 16px;
    line-height: 1.25em;
 
	background-color: rgba(16,0,16,0.94);
    color: #fff;
    text-shadow: 0.125em 0.125em 0 #3f3f3f;
 
    border-top: 0.125em solid rgba(80,0,255, 0.31);
    border-bottom: 0.125em solid rgba(40, 0, 127, 0.31);
 
    position: absolute;
	padding: 0.125em 0.25em 0.125em 0.25em;
    margin: 0.25em 0.375em;
	z-index: 98;
 
    white-space: nowrap;
    pointer-events: none;
 
    content: attr(data-tooltip);
}
 
#tooltip-display:before {
    content: "";
    position: absolute;
    top: -0.25em;
	right: -0.125em;
	bottom: -0.25em;
	left: -0.125em;
	border: 0.125em solid rgba(16, 0, 16, 0.94);
}
 
#tooltip-display:after {
	content: "";
	position: absolute;
	top: -0.125em;
	right: -0.25em;
	bottom: -0.125em;
	left: -0.25em;
	background-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)), -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31));
	background-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)), linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31));
	background-size: 0.125em 100%;
	background-repeat: no-repeat;
	background-position: left, right;
	border: solid rgba(16, 0, 16, 0.94);
	border-width: 0 0.125em;
}

/*************************************
* Infobox CSS                        *
*************************************/

.infobox {
    width: 23em;
    text-align: right;
    border: 1px solid #AAA;
    background-color: #F9F9F9;
    color: #000;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
    font-size: 88%;
    line-height: 1.2em;
    vertical-align: top;
    border-collapse: collapse;
}
 
.infobox td[colspan="2"],
.infobox th[colspan="2"] {
    text-align: center;
}
 
.infobox td:first-child:not([colspan="2"]) {
    text-align: left;
    font-weight: bold;
    width: 50%;
    vertical-align: top;
}
 
.infobox th.infoboxFirstHeader {
    font-size: 120%
}
 
.infobox td ul,
.infobox td ol {
    text-align: left;
}
 
.infobox th {
    border-bottom: #AAA thin solid;
    border-top: #AAA thin solid;
}
 
.infobox th,
.infobox td {
    padding: 0.4em 0.6em 0.2em 0.6em;
}
 
.infobox tr.infoboxSubsectionBreak {
    border-top: #AAA thin solid;
}
 
.infobox th.infoboxSectionHeader,
.infobox th.infoboxFirstHeader {
    background-color: #CDDEFF;
}
 
.infoboxSubsectionBreak td {
    padding: 0;
}

/* Default skin for navigation boxes */
table.navbox {            /* Navbox container style */
    border: 1px solid #aaa;
    width: 100%; 
    margin: auto;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
}
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;
    /* @noflip */text-align: right;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}
.navbox, .navbox-subgroup {
    background: #fdfdfd;     /* Background color */
}
.navbox-list {
    border-color: #fdfdfd;   /* Must match background color */
}
.navbox-title,
table.navbox th {
    background: #719ee8;     /* Level 1 color */
    color: white;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: #b0c5e8;     /* Level 2 color */
    color: black;
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
    background: #e6e6ff;     /* Level 3 color */
    color: black;
}
.navbox-even {
    background: #f7f7f7;     /* Even row striping */
    color: black;
}
.navbox-odd {
    background: transparent; /* Odd row striping */
}
 
.collapseButton {          /* 'show'/'hide' buttons created dynamically */
    /* @noflip */float: right;          /* by the CollapsibleTables javascript in    */
    font-weight: normal;   /* [[MediaWiki:Common.js]] are styled here   */
    /* @noflip */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:Navbar]],    */
}                          /* so they need to be the same width.         */
 
.navbar {                  /* Navbox template links */
    font-size: 88%;        /* Default font-size */
    font-weight: normal;
}
.navbox .navbar {
    font-size: 100%;       /* Font-size when nested within navbox */
}

table.collapsed tr.collapsible {
        display: none;
}