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
 
(21 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 */
 
/* Petscop textboxes */
Line 12: Line 12:
 
.petscop-font {
 
.petscop-font {
 
   font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
 
   font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
   font-size: 16px;
+
   font-size: 24px; /* 16 */
 +
  font-style: normal;
 
   -webkit-font-smoothing: none;
 
   -webkit-font-smoothing: none;
 
   font-smooth: never;
 
   font-smooth: never;
 +
  font-weight: normal !important;
 
}
 
}
  
Line 20: Line 22:
 
   font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
 
   font-family: 'Petscop Wide', Ubuntu Mono, Consolas, Monaco, Courier New, sans-serif;
 
   font-size: 32px;
 
   font-size: 32px;
 +
  font-weight: normal !important;
 
   border: 5px solid gray;
 
   border: 5px solid gray;
 
   background-color: #0f0909;
 
   background-color: #0f0909;
 
   padding: 0.3em 0.5em;
 
   padding: 0.3em 0.5em;
   margin: 4px auto 4px 4px;
+
   margin: 4px auto;
 
   color: white;
 
   color: white;
 
   border-color: #0f0909 #070404 #040101 #070404;
 
   border-color: #0f0909 #070404 #040101 #070404;
 
   box-shadow: 0px 0px 0px 2px black;
 
   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 {
 
.petscop-textbox-light {
Line 36: Line 47:
 
   box-shadow: 0px 0px 0px 2px black;
 
   box-shadow: 0px 0px 0px 2px black;
 
}
 
}
.petscop-textbox p {
+
 
 +
.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;
 
   margin: 0;
 
   line-height: normal;
 
   line-height: normal;
Line 57: Line 105:
 
.petscop-textbox-light .petscop-color-purple  { background-image: linear-gradient(#88c, #000);  }
 
.petscop-textbox-light .petscop-color-purple  { background-image: linear-gradient(#88c, #000);  }
 
                       .petscop-color-purple  { background-image: linear-gradient(#88c, #fff);  }
 
                       .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 {
 
div#content a[href^="https://youtu.be"].external {
Line 108: Line 157:
 
.prettytable caption {
 
.prettytable caption {
 
     font-weight: bold;
 
     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;
 
}
 
}

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;
}