This wiki is still a major work in progress, and a lot is being worked on. Please be patient.Newmaker

Difference between revisions of "MediaWiki:Common.css"

From Petscop
Jump to: navigation, search
 
(41 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
  
 +
body { font-size: 125%; }
  
 +
/* Petscop textboxes */
 +
@font-face {
 +
font-family: 'Petscop Wide';
 +
src: url('/images/3/39/Petscop_Wide.woff') format('woff'),
 +
url('/images/8/86/Petscop_Wide.ttf')  format('truetype');
 +
}
 +
 +
.petscop-font {
 +
  font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
 +
  font-size: 24px; /* 16 */
 +
  font-style: normal;
 +
  -webkit-font-smoothing: none;
 +
  font-smooth: never;
 +
  font-weight: normal !important;
 +
}
 +
 +
.petscop-textbox {
 +
  font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
 +
  font-size: 32px;
 +
  font-weight: normal !important;
 +
  border: 5px solid gray;
 +
  background-color: #0f0909;
 +
  padding: 0.3em 0.5em;
 +
  margin: 4px auto;
 +
  color: white;
 +
  border-color: #0f0909 #070404 #040101 #070404;
 +
  box-shadow: 0px 0px 0px 2px black;
 +
  min-width: 15em;
 +
  width: max-content;
 +
}
 +
 +
/* boldface breaks some things, like text colors */
 +
.petscop-textbox .mw-selflink, .petscop-font .mw-selflink  {
 +
  font-weight: normal !important;
 +
}
 +
 +
 +
.petscop-textbox-light {
 +
  border: 5px solid gray;
 +
  background-color: white;
 +
  color: black;
 +
  border-color: #eee #bbb #888 #bbb;
 +
  box-shadow: 0px 0px 0px 2px black;
 +
}
 +
 +
.petscop-textbox-pause {
 +
  border: none;
 +
  background-color: #fdf;
 +
  color: #725;
 +
  min-width: 9em;
 +
}
 +
 +
.petscop-textbox-childlibrary {
 +
  border: 3px solid #c4d;
 +
  background-color: #b8f;
 +
  color: #fff;
 +
  text-align: center;
 +
  padding: 3px;
 +
  min-width: unset;
 +
}
 +
 +
.petscop-textbox-childlibrary-inside {
 +
  border: 3px solid #519;
 +
  padding: 0.3em 0.5em;
 +
}
 +
 +
.petscop-textbox-mikegrave {
 +
  border: 3px solid #000;
 +
  background-color: #000;
 +
  color: #aaa;
 +
  text-align: center;
 +
  padding: 0px;
 +
  min-width: unset;
 +
}
 +
 +
.petscop-textbox-mikegrave-inside {
 +
  border: 5px solid #aaa;
 +
  border-width: 5px 5px;
 +
  padding: 0.3em 0.6em;
 +
}
 +
 +
.petscop-textbox p, .petscop-textbox * p {
 +
  margin: 0;
 +
  line-height: normal;
 +
}
 +
.poem hr+br {
 +
    display: none;
 +
}
 +
 +
.petscop-text-color {
 +
    color: transparent;
 +
    background: black;
 +
    -webkit-background-clip: text;
 +
    background-clip: text;
 +
}
 +
 +
.petscop-textbox-light .petscop-color-green    { background-image: linear-gradient(#0a0, #000);  }
 +
                      .petscop-color-green    { background-image: linear-gradient(#0a0, #fff);  }
 +
.petscop-textbox-light .petscop-color-red      { background-image: linear-gradient(#f00, #000);  }
 +
                      .petscop-color-red      { background-image: linear-gradient(#f00, #fff);  }
 +
.petscop-textbox-light .petscop-color-purple  { background-image: linear-gradient(#88c, #000);  }
 +
                      .petscop-color-purple  { background-image: linear-gradient(#88c, #fff);  }
 +
.petscop-textbox-light .petscop-color-yellow  { background-image: linear-gradient(#fe4, #000);  }
 +
                      .petscop-color-yellow  { background-image: linear-gradient(#fe4, #fff);  }
 +
 +
div#content a[href^="https://youtu.be"].external {
 +
    background:none !important;
 +
    padding: 0px !important;
 +
}
  
 
.breakout {
 
.breakout {
 
   float: right;
 
   float: right;
 
   border: 1px solid #888;
 
   border: 1px solid #888;
   background: #fff;
+
   background: #111;
 
   padding: 0.2em;
 
   padding: 0.2em;
 
   }
 
   }
Line 12: Line 122:
 
.breakouttitle {
 
.breakouttitle {
 
   text-align: center;
 
   text-align: center;
   background: #fcf;
+
   background: #535;
 
   border-top: 1px solid #a6a;
 
   border-top: 1px solid #a6a;
 
   border-bottom: 1px solid #a6a;
 
   border-bottom: 1px solid #a6a;
Line 19: Line 129:
  
 
input, textarea {
 
input, textarea {
   border: 1px solid #ccc;
+
   border: 1px solid #888;
   background: #f8f8f8; /* you can't fight f8 */
+
   background: #000; /* you can't fight f8 */
   color:      #000;
+
   color:      #ccc;
 
}
 
}
  
Line 30: Line 140:
 
table.prettytable {
 
table.prettytable {
 
     margin: 1em 1em 1em 0;
 
     margin: 1em 1em 1em 0;
     background: #f9f9f9;
+
     background: #111;
     border: 1px #aaa solid;
+
     border: 1px #555 solid;
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
}
 
}
 
.wikitable th, .wikitable td,
 
.wikitable th, .wikitable td,
 
.prettytable th, .prettytable td {
 
.prettytable th, .prettytable td {
     border: 1px #aaa solid;
+
     border: 1px #555 solid;
 
     padding: 0.2em;
 
     padding: 0.2em;
 
}
 
}
 
.wikitable th,
 
.wikitable th,
 
.prettytable th {
 
.prettytable th {
     background: #f2f2f2;
+
     background: #222;
 
     text-align: center;
 
     text-align: center;
 
}
 
}
Line 49: Line 159:
 
}
 
}
  
 +
.mainpage-wrapper {
 +
    display: flex;
 +
    flex-wrap: wrap;
 +
    justify-content: space-around;
 +
}
  
 
+
.mainpage-wrapper > div {
/* Petscop textboxes */
+
    min-width: 400px;
.petscop-textbox {
+
    padding: 1em;
  font-family: Ubuntu Mono, Consolas, Courier New, monospace;
+
    flex-grow: 1;
  border: 5px solid gray;
+
    flex-basis: 400px;
  background-color: white;
 
  padding: 0.0em 0.5em;
 
  float: left;
 
  clear: left;
 
  margin: 4px;
 
  color: black;
 
  border-color: #white #bbb #888 #bbb;
 
  box-shadow: 0px 0px 0px 2px black;
 
 
}
 
}

Latest revision as of 23:32, 22 November 2018

/* CSS placed here will be applied to all skins */

body { font-size: 125%; }

/* Petscop textboxes */
@font-face {
	font-family: 'Petscop Wide';
	src: url('/images/3/39/Petscop_Wide.woff') format('woff'),
	url('/images/8/86/Petscop_Wide.ttf')  format('truetype');
}

.petscop-font {
  font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
  font-size: 24px; /* 16 */
  font-style: normal;
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-weight: normal !important;
}

.petscop-textbox {
  font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
  font-size: 32px;
  font-weight: normal !important;
  border: 5px solid gray;
  background-color: #0f0909;
  padding: 0.3em 0.5em;
  margin: 4px auto;
  color: white;
  border-color: #0f0909 #070404 #040101 #070404;
  box-shadow: 0px 0px 0px 2px black;
  min-width: 15em;
  width: max-content;
}

/* boldface breaks some things, like text colors */
.petscop-textbox .mw-selflink, .petscop-font .mw-selflink  {
  font-weight: normal !important;
}


.petscop-textbox-light {
  border: 5px solid gray;
  background-color: white;
  color: black;
  border-color: #eee #bbb #888 #bbb;
  box-shadow: 0px 0px 0px 2px black;
}

.petscop-textbox-pause {
  border: none;
  background-color: #fdf;
  color: #725;
  min-width: 9em;
}

.petscop-textbox-childlibrary {
  border: 3px solid #c4d;
  background-color: #b8f;
  color: #fff;
  text-align: center;
  padding: 3px;
  min-width: unset;
}

.petscop-textbox-childlibrary-inside {
  border: 3px solid #519;
  padding: 0.3em 0.5em;
}

.petscop-textbox-mikegrave {
  border: 3px solid #000;
  background-color: #000;
  color: #aaa;
  text-align: center;
  padding: 0px;
  min-width: unset;
}

.petscop-textbox-mikegrave-inside {
  border: 5px solid #aaa;
  border-width: 5px 5px;
  padding: 0.3em 0.6em;
}

.petscop-textbox p, .petscop-textbox * p {
  margin: 0;
  line-height: normal;
}
.poem hr+br {
    display: none;
}

.petscop-text-color {
    color: transparent;
    background: black;
    -webkit-background-clip: text;
    background-clip: text;
}

.petscop-textbox-light .petscop-color-green    { background-image: linear-gradient(#0a0, #000);  }
                       .petscop-color-green    { background-image: linear-gradient(#0a0, #fff);  }
.petscop-textbox-light .petscop-color-red      { background-image: linear-gradient(#f00, #000);  }
                       .petscop-color-red      { background-image: linear-gradient(#f00, #fff);  }
.petscop-textbox-light .petscop-color-purple   { background-image: linear-gradient(#88c, #000);  }
                       .petscop-color-purple   { background-image: linear-gradient(#88c, #fff);  }
.petscop-textbox-light .petscop-color-yellow   { background-image: linear-gradient(#fe4, #000);  }
                       .petscop-color-yellow   { background-image: linear-gradient(#fe4, #fff);  }

div#content a[href^="https://youtu.be"].external {
    background:none !important;
    padding: 0px !important;
}

.breakout {
  float: right;
  border: 1px solid #888;
  background: #111;
  padding: 0.2em;
  }

.breakouttitle {
  text-align: center;
  background: #535;
  border-top: 1px solid #a6a;
  border-bottom: 1px solid #a6a;
  }


input, textarea {
  border: 1px solid #888;
  background: #000; /* you can't fight f8 */
  color:      #ccc;
}



/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
    margin: 1em 1em 1em 0;
    background: #111;
    border: 1px #555 solid;
    border-collapse: collapse;
}
.wikitable th, .wikitable td,
.prettytable th, .prettytable td {
    border: 1px #555 solid;
    padding: 0.2em;
}
.wikitable th,
.prettytable th {
    background: #222;
    text-align: center;
}
.wikitable caption,
.prettytable caption {
    font-weight: bold;
}

.mainpage-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.mainpage-wrapper > div {
    min-width: 400px;
    padding: 1em;
    flex-grow: 1;
    flex-basis: 400px;
}