ATTENTION! The process of updating WiKi to version Eco 10.x has begun. Those wishing to participate can find out more Information on our ECO Contribution Wiki Discord.

MediaWiki:Common.css: Difference between revisions

From Eco - English Wiki
No edit summary
Tag: Reverted
No edit summary
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Custom font */
/* Custom Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap');
Line 11: Line 11:
     background-image: url(https://wiki.play.eco/cubes.png);
     background-image: url(https://wiki.play.eco/cubes.png);
     /*background-color: #F5F5F5;*/
     /*background-color: #F5F5F5;*/
}
.ace_editor * {
    font-family: monospace !important;
}
}


/* Banner */
/* Banner */
.headbanner{
.headbanner span img {
width: 100%;
width: 100%;
height: auto;
height: auto;
Line 28: Line 32:
}
}


/* Table of Contents*/
/* Table of Contents */
.toc {
.toc {
     border: 5px solid #A9A9A9;
     border: 5px solid #A9A9A9;
Line 38: Line 42:
}
}


/* Twitter */
/* Infoboxes */
.twitter-timeline-rendered {
    margin: auto !important;
}
 
/* Infoboxes*/
.infobox {
.infobox {
     border: 5px solid #7BC2CE;
     border: 5px solid #7BC2CE;
Line 54: Line 53:
}
}


/* Icon Frames and Background*/
/* Icon Frames and Background */
.iconContainer {
.iconContainer {
     width: 100px;
     width: 100px;
Line 84: Line 83:
}
}


.iconBlue, .iconGreen, .iconBrown, .iconSoftYellow , .iconYellow, .iconCream, .iconGold, .iconOrange, .iconWhite, .iconBrightBlue {
.iconBlue, .iconGreen, .iconBrown, .iconSoftYellow , .iconYellow, .iconCream, .iconGold, .iconOrange, .iconWhite, .iconBrightBlue, .iconGrey {
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: center;
     background-position: center;
Line 91: Line 90:
     height: 64px;
     height: 64px;
     margin: 18px;
     margin: 18px;
    display: block;
}
}


Line 110: Line 110:
}
}


/* Icon CraftingRecipes Frames and Background*/
/* Icon CraftingRecipes Frames and Background */
.iconRecipe {
.iconRecipe {
     background-image: url("https://wiki.play.eco/images/6/65/IconBackground_Blue.png");
     background-image: url("https://wiki.play.eco/images/6/65/IconBackground_Blue.png");
Line 121: Line 121:
}
}


/* Icon Frames and Background.*/
.iconRecipe img {
height: 44px;
width: 44px;
}
 
/* Icon Frames and Background */
.iconBlue {  
.iconBlue {  
     background: radial-gradient(#547cb3 40%, #324a6a);
     background: radial-gradient(#547cb3 40%, #324a6a);
Line 178: Line 183:
}
}


/* Default style for navigation boxes */
/* Navigation Boxes */
.navbox {                     /* Navbox container style */
.navbox {
box-sizing: border-box;
/* IGNORE EDITOR CALLING THESE ERRORS! It's valid css, just save anyways */
border: 1px solid #a2a9b1;
    --navbox-border: #a3bdff;
width: 100%;
    --navbox-title-background: #4cbb5e;
clear: both;
    --navbox-header-background: #7a98e4;
font-size: 88%;
    --navbox-header-color: #040404;
text-align: center;
    --navbox-header-link-color: #040404;
padding: 1px;
    --navbox-list-link-color: #122f78;
margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
 
width: 100%;
background: var(--navbox-border);
    color: #040404;
margin: 1em auto;
font-size: 84%;
clear: both;
padding: 2px;
border-spacing: 0;
border: 2px solid var(--navbox-border);
border-radius: 3px;
}
}
 
.navbox .navbox-title a, .navbox .navbox-header a, .navbox .navbox-group a, .navbox .mw-collapsible-toggle a:hover {
.navbox .navbox {
color: var(--navbox-header-link-color);
margin-top: 0;           /* No top margin for nested navboxes */
}
}
.navbox + .navbox {
.navbox + .navbox {
margin-top: -1px;         /* Single pixel border between adjacent navboxes */
margin-top: -16px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
 
.navbox .navbox-title {
.navbox-inner,
color: var(--theme-accent-label-color);
.navbox-subgroup {
background: var(--navbox-title-background);
width: 100%;
font-weight: bold;
}
.navbox .navbox-vde {
float: left;
width: 65px;
}
.navbox .navbox-title-padright {
padding-right: 65px;
}
.navbox .navbox-title-padleft {
padding-left: 65px;
}
.navbox .navbox-subgroup {
border-spacing: 0;
width: 100%;
}
.navbox .navbox-gutter {
height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
background: var(--navbox-border);
}
.navbox .navbox-section-row > td {
padding: 0;
height: 100%;
}
.navbox .navbox-section {
width: 100%;
border-spacing: 0;
}
.navbox .navbox-above, .navbox .navbox-below, .navbox .navbox-image {
color: var(--theme-accent-label-color);
background: var(--navbox-header-background);
text-align: center;
}
.navbox .navbox-group, .navbox .navbox-header {
background: var(--navbox-header-background);
color: var(--navbox-header-color);
font-weight: bold;
height: 100%;
padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
padding-left: 65;
}
.navbox .navbox-group {
min-width: 150px;
}
.navbox .navbox-group, .navbox .navbox-image-left {
border-right: 2px solid var(--navbox-border);
}
.navbox .navbox-image-right {
border-left: 2px solid var(--navbox-border);
}
.navbox .navbox-list {
background: var(--theme-article-background-color);
color: var(--theme-article-text-color);
width: 100%;
height: 100%;
padding: 0;
}
}
 
.navbox .navbox-list div {
.navbox-group,
padding: 0px 4px;
.navbox-title,
.navbox-abovebelow {
padding: 0.25em 1em;      /* Title, group and above/below styles */
line-height: 1.5em;
text-align: center;
}
}
 
.navbox .navbox-list.no-group {
th.navbox-group {             /* Group style */
text-align: center;
white-space: nowrap;
padding-top: 2px;
/* @noflip */
padding-bottom: 2px;
text-align: right;
}
}
 
.navbox .navbox-list a {
.navbox,
color: var(--navbox-list-link-color);
.navbox-subgroup {
background-color: #fdfdfd; /* Background color */
}
}
 
.navbox .mw-collapsible-toggle {
.navbox-list {
width: 65px;
line-height: 1.5em;
border-color: #fdfdfd;   /* Must match background color */
}
}


/* cell spacing for navbox cells */
.hlist ul {
tr + tr > .navbox-abovebelow,
    margin: 0;
tr + tr > .navbox-group,
    list-style: none;
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
border-top: 2px solid #fdfdfd; /* Must match background color */
}
}
 
.hlist li, .hlist ul ul {
.navbox th,
    display: inline;
.navbox-title {
background-color: #ccccff;     /* Level 1 color */
}
}
 
.hlist li a {
.navbox-abovebelow,
    white-space: nowrap;
th.navbox-group,
.navbox-subgroup .navbox-title {
background-color: #ddddff;     /* Level 2 color */
}
}
 
.hlist ul ul:before {
.navbox-subgroup .navbox-group,
    content: "(";
.navbox-subgroup .navbox-abovebelow {
background-color: #e6e6ff;     /* Level 3 color */
}
}
 
.hlist ul ul:after {
.navbox-even {
    content: ")";
background-color: #f7f7f7;     /* Even row striping */
}
}
 
.hlist li:after {
.navbox-odd {
    content: " • ";
background-color: transparent; /* Odd row striping */
}
}
 
.hlist li:last-child:after, .hlist ul ul li:last-child:after {
.navbox .hlist td dl,
    content: none;
.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 */
}
}

Latest revision as of 08:29, 30 August 2023

/* Custom Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap');

/* Framework */
* {
	font-family: 'Roboto', sans-serif;
}

body {
    background-image: url(https://wiki.play.eco/cubes.png);
    /*background-color: #F5F5F5;*/
}

.ace_editor * {
    font-family: monospace !important;
}

/* Banner */
.headbanner span img {
	width: 100%;
	height: auto;
}

/* Headline */
.mw-headline a {
    font-family: "Pathway Gothic One";
    font-size: 15px;
    font-weight: bold;
    padding: 0.25em;
    text-transform: uppercase;
}

/* Table of Contents */
.toc {
    border: 5px solid #A9A9A9;
    padding: 10px;
    float: right;
    margin: 0px 30px 30px 30px;
    width: 300px;
    clear: right;
}

/* Infoboxes */
.infobox {
    border: 5px solid #7BC2CE;
    padding: 0;
    color: #333333;
    float: right;
    margin: 0px 30px 30px 30px;
    width: 300px;
    clear: right;
}

/* Icon Frames and Background */
.iconContainer {
    width: 100px;
    height: 100px;
    margin: auto;
    position: relative;
}

.iconContainerSmall {
    width: 64px;
    height: 64px;
    margin: auto;
    position: relative;
}

.iconStack {
    position: absolute;
    width: 100%;
    height: 100%;
}

.iconNormal {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    width: 64px;
    height: 64px;
    margin: 18px;
}

.iconBlue, .iconGreen, .iconBrown, .iconSoftYellow , .iconYellow, .iconCream, .iconGold, .iconOrange, .iconWhite, .iconBrightBlue, .iconGrey {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    width: 64px;
    height: 64px;
    margin: 18px;
    display: block;
}

.iconBorder { 
    background-image: url("https://wiki.play.eco/images/9/95/IconFrame.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: inherit;
    width: inherit;
    pointer-events: none;
}

.iconBorder.borderGreen {
    background-image:url(https://wiki.play.eco/images/b/be/IconFrameGreen.png);
}
.iconBorder.borderYellow {
    background-image:url(https://wiki.play.eco/images/e/e7/IconFrameYellow.png);
}

/* Icon CraftingRecipes Frames and Background */
.iconRecipe {
    background-image: url("https://wiki.play.eco/images/6/65/IconBackground_Blue.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    width: 44px;
    height: 44px;
    margin: 10px;
}

.iconRecipe img {
	height: 44px;
	width: 44px;
}

/* Icon Frames and Background */
.iconBlue { 
    background: radial-gradient(#547cb3 40%, #324a6a);
}

.iconGreen { 
    background-image: url("https://wiki.play.eco/images/3/3e/IconBackground_Green.png");
}

.iconBrown { 
    background-image: url("https://wiki.play.eco/images/6/65/IconBackground_Brown.png");
}

.iconSoftYellow { 
    background-image: url("https://wiki.play.eco/images/4/4c/IconBackground_SoftYellow.png");
}

.iconYellow { 
    background-image: url("https://wiki.play.eco/images/b/b6/IconBackground_Yellow.png");
}

.iconCream { 
    background-image: url("https://wiki.play.eco/images/5/5f/IconBackground_Cream.png");
}

.iconGold { 
    background-image: url("https://wiki.play.eco/images/9/92/IconBackground_Gold.png");
}

.iconOrange { 
    background-image: url("https://wiki.play.eco/images/5/57/IconBackground_Orange.png");
}

.iconWhite { 
    background-image: url("https://wiki.play.eco/images/4/45/IconBackground_White.png");
}

.iconBrightBlue { 
    background-image: url("https://wiki.play.eco/images/9/9a/IconBackground_BrightBlue.png");
}

.iconGrey { 
    background-image: url("https://wiki.play.eco/images/9/9e/IconBackground_Grey.png");
}

.paperBasic { 
    background-image: url("https://wiki.play.eco/images/3/31/PaperBackground_Basic.png");
}

.paperAdvanced { 
    background-image: url("https://wiki.play.eco/images/5/56/PaperBackground_Advanced.png");
}

.paperModern { 
    background-image: url("https://wiki.play.eco/images/7/79/PaperBackground_Modern.png");
}

/* Navigation Boxes */
.navbox {
	/* IGNORE EDITOR CALLING THESE ERRORS! It's valid css, just save anyways */
    --navbox-border: #a3bdff;
    --navbox-title-background: #4cbb5e;
    --navbox-header-background: #7a98e4;
    --navbox-header-color: #040404;
    --navbox-header-link-color: #040404;
    --navbox-list-link-color: #122f78;

	 width: 100%;
	 background: var(--navbox-border);
     color: #040404;
	 margin: 1em auto;
	 font-size: 84%;
	 clear: both;
	 padding: 2px;
	 border-spacing: 0;
	 border: 2px solid var(--navbox-border);
	 border-radius: 3px;
}
.navbox .navbox-title a, .navbox .navbox-header a, .navbox .navbox-group a, .navbox .mw-collapsible-toggle a:hover {
	color: var(--navbox-header-link-color);
}
.navbox + .navbox {
	 margin-top: -16px;
	 border-top-left-radius: 0;
	 border-top-right-radius: 0;
}
.navbox .navbox-title {
	 color: var(--theme-accent-label-color);
	 background: var(--navbox-title-background);
	 font-weight: bold;
}
.navbox .navbox-vde {
	 float: left;
	 width: 65px;
}
.navbox .navbox-title-padright {
	 padding-right: 65px;
}
.navbox .navbox-title-padleft {
	 padding-left: 65px;
}
.navbox .navbox-subgroup {
	 border-spacing: 0;
	 width: 100%;
}
.navbox .navbox-gutter {
	 height: 2px;
}
.navbox .navbox-subgroup .navbox-gutter {
	 background: var(--navbox-border);
}
.navbox .navbox-section-row > td {
	 padding: 0;
	 height: 100%;
}
.navbox .navbox-section {
	 width: 100%;
	 border-spacing: 0;
}
.navbox .navbox-above, .navbox .navbox-below, .navbox .navbox-image {
	 color: var(--theme-accent-label-color);
	 background: var(--navbox-header-background);
	 text-align: center;
}
.navbox .navbox-group, .navbox .navbox-header {
	 background: var(--navbox-header-background);
	 color: var(--navbox-header-color);
	 font-weight: bold;
	 height: 100%;
	 padding: 2px 4px;
}
.navbox .navbox-header-collapsible {
	 padding-left: 65;
}
.navbox .navbox-group {
	 min-width: 150px;
}
.navbox .navbox-group, .navbox .navbox-image-left {
	 border-right: 2px solid var(--navbox-border);
}
.navbox .navbox-image-right {
	 border-left: 2px solid var(--navbox-border);
}
.navbox .navbox-list {
	 background: var(--theme-article-background-color);
	 color: var(--theme-article-text-color);
	 width: 100%;
	 height: 100%;
	 padding: 0;
}
.navbox .navbox-list div {
	 padding: 0px 4px;
}
.navbox .navbox-list.no-group {
	 text-align: center;
	 padding-top: 2px;
	 padding-bottom: 2px;
}
.navbox .navbox-list a {
	 color: var(--navbox-list-link-color);
}
.navbox .mw-collapsible-toggle {
	 width: 65px;
}

.hlist ul {
     margin: 0;
     list-style: none;
}
.hlist li, .hlist ul ul {
     display: inline;
}
.hlist li a {
     white-space: nowrap;
}
.hlist ul ul:before {
     content: "(";
}
.hlist ul ul:after {
     content: ")";
}
.hlist li:after {
     content: " • ";
}
.hlist li:last-child:after, .hlist ul ul li:last-child:after {
     content: none;
}