Difference between revisions of "MediaWiki:Common.css"

From Public Play Space Community
 
 
(143 intermediate revisions by one other user not shown)
Line 1: Line 1:
//* CSS placed here will be applied to all skins */
/* Adding varying font faces for the PPS Wiki Similar or Identical to their Style: */
 
@font-face {
/*Main page*/
    font-family: 'Montserrat';
/**MAIN PAGE STYLESHEET**/
    src: url('/resources/assets/fonts/Montserrat-Regular.woff') format('woff');
 
    font-weight: 300;
table#mainpagenavigation {
    font-style: normal;
/*border: 1px solid #000000;*/
box-shadow:rgba(0,0,0,0.25) 0 0 0.75em;
}
}
 
@font-face {
.page-Main_Page h1.firstHeading#firstHeading {
    font-family: 'Montserrat Bold';
display:none;
    src: url('/resources/assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
}


#mainpagenavigation {
/* Settings for the default fonts being used through the entire wiki: */
display:block;
body {
border-collapse:collapse;
  font-family: "Montserrat", normal;
text-align:left
}
}


#mainpagenavigation th {
#content h1{
/*font-size:1.7692307692em;*/
  font-family: "Montserrat Bold", normal;
font-size:20px;
  font-size: 350%;
color:#fff;
  line-height: 1;
/*text-shadow:rgba(0,0,0,0.75) 0 0 .25em;*/
background-color:#4fb9cf;
font-weight:400;
height:48px;
text-align:center;
font-size-adjust:0.43
}
}
 
#content h2 {
#mainpagenavigation th.header_sub {
  font-family: "Montserrat", normal;
height:24px;
  font-size: 250%;
  line-height: 1;
}
}
 
#content h3 {
#mainpagenavigation th h3{
  font-family: "Montserrat Bold", normal;
font-size:25px;
  font-size: 250%;
padding-top:0px;
  line-height: 1;
color:#fff;
 
background-color:#444;
font-weight:400;
height:48px;
text-align:center;
font-size-adjust:0.43
}
}
 
#content h4 {
#mainpagenavigation td {
  font-family: "Montserrat", normal;
background-color:#fff;
  font-size: 200%;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffffffff);
  line-height: 1;
background-image: linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -o-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -moz-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -webkit-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -ms-linear-gradient(top, #bbb 0%, #fff 2%, #fff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(.02, #fff), color-stop(1, #fff));
/*height:250px;*/
}
}
 
#content {
#mainpagenavigation td.content {vertical-align:top;padding:.5em 1.5em;}
  overflow: unset !important;
#mainpagenavigation td.separator {border-right:#aaa solid 1px}
 
/*Editing tags on the main page*/
#mainpagenavigation h5{
position:absolute;
margin-left:180px;
}
}
/*Main page (padding, not used)*/
/* body.page-Main_Page.ns-subject #content,body.page-Main_Page_editcopy.ns-subject #content {padding-left:1em;padding-right:1em}*/
/*Float the table of contents right*/
#toc { float: right };
.toctoggle { float: right };




/* Style for horizontal lists (separator following item).
/* Alterations in the Logo to make it fit neater on the page: */
  IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
#logo {
  @source mediawiki.org/wiki/Snippets/Horizontal_lists
     background-size: 75px;
  @revision 6 (2014-05-09)
     background-repeat: no-repeat;
  @author [[User:Edokter]]
        background-position: left;
*/
     display: inline-block;
.hlist dl,
     padding-left: 80px;
.hlist ol,
     text-decoration: none;
.hlist ul {
     vertical-align: middle;
     margin: 0;
     text-transform: uppercase;
     padding: 0;
    letter-spacing: 2px;
}
     word-spacing: 1px;
/* Display list items inline */
     height: 100%;
.hlist dd,
        font-family: "Montserrat Bold", normal;
.hlist dt,
.hlist li {
    margin: 0;
     display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dt:after {
     content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
     font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
     content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
     font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
     font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
     content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
    white-space: nowrap;
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}
}


/*Don't float the horizontal list by default*/
/* Alterations for aligning the Devices section properly: */
#toc.toc.hlist {
.infobox {
float:none;
    padding: 0.0em;
    float: right;
    clear: right;
    font-size: 250%;
    text-align: right;
        font-family: "Montserrat Bold", normal;
    margin: 0em 1em 0em 0em;
}
}


/*learned things header*/
/* Settings for the GAME SPACE PLAY category boxes: */
.learned_heading {
.infobox2 {
#background-color:#d0eed0;
    padding: 0.0em;
background-color:#c9f9ff;
    float: right;
padding: 1px 1px 10px 12px;
    clear: both;
    font-size: 100%;
    text-align: left;
        font-family: "Montserrat Bold", normal;
    margin: 0em 1em 0em 0em;
    position: relative;
    left: -1000px;
}
}


/*boxes with steps in the editor*/
/*menu icons */
.editor_location_box {
#user-icon{
margin-top:25px;
    background-image: url(/skins/Poncho/images/user_dark.png?c4f8e);
margin-bottom:25px;
}
}
 
#menu-icon{
.editor_steps_box {
    background-image: url(/skins/Poncho/images/menu_dark.png?701c4);
display:inline-block;
border-style:dashed;
border-color:#808080;
background-color:#e4e4ee;
padding-right:40px;
margin-left:40px;
vertical-align:top;
margin-bottom:10px;
}
}


.editor_steps_box .editor_steps_title{
/* To make images responsive */
margin-left:20px;
.res-img{
    max-width:100%;
    height:auto;
}
}


.editor_steps_box_wrapper{
/* change transparency, used for inactive selection options in matrix so we only need one image per subcategory*/
margin-left:40px;
.inactive{
  opacity: 0.25;
}
}
 
.inactive:hover{
.editor_steps_box_wrapper .editor_steps_box{
  opacity: 0.65;
margin:0;
max-width:50%;
}
}
 
.active{
.editor_steps_box_wrapper .editor_steps_image {
  opacity: 1.00;
display:inline;
}
}


.editor_steps_box_wrapper .editor_steps_image > div {
/* To make text rotate (used in table headers)*/
max-width:40%;
.rotate {        
display:inline-block;
-moz-transform:rotate(-90deg);        
margin:0;
-webkit-transform: rotate(-90deg);        
float:right;
-o-transform: rotate(-90deg);  
clear:both;
}
}


/*Workaround because of applied width to style*/
.longtitle{
.editor_steps_box_wrapper .editor_steps_image > div > div {
  font-family: "Montserrat Bold", normal;
width:auto !important;
  font-size: 100%;
  -moz-transform:rotate(-90deg);         
  -webkit-transform: rotate(-90deg);       
  -o-transform: rotate(-90deg);  
}
}


.editor_steps_box_wrapper .editor_steps_image img{
/* for adding full width expandable blocks*/
max-width:100%;
.expandableblock{
height:auto;
  font-family: "Montserrat Bold", normal;
  font-size: 350%;
  line-height: 0%;
}
}


/*Support namespace styling*/
/* for adding tooltips*/
.ns-4500 #content, .ns-501 #content { background-color: #f3f3f3; }
.tooltip {
.ns-4500 div.thumb, .ns-501 div.thumb { border-color: #f3f3f3; }
  position: relative;
 
  display: inline-block;
/*Infobox styling*/
/* Infobox template style */
.infobox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
.infobox td,
.infobox th {
    vertical-align: top;
}
.infobox caption {
    font-size: larger;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}
}


.infobox.sisterproject {
.tooltip .tooltiptext {
    width: 20em;
  visibility: hidden;
    font-size: 90%;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border-color: black;
  border-style: solid;
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
}


.infobox.standard-talk {
.tooltip:hover .tooltiptext {
    border: 1px solid #c0c090;
  visibility: visible;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}
}


/* styles for bordered infobox with merged rows */
/* Hide the Subcategories and Pages section in the Categories Page to use own custom style */
.infobox.bordered .mergedtoprow td,
.mw-subcategories {  
.infobox.bordered .mergedtoprow th {
display: none;  
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}
}
 
.mw-pages{  
.infobox.bordered .mergedrow td,
display: none;  
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}
}
 
.mw-category-generated{
/* Styles for geography infoboxes, eg countries,
display: none;  
  country subdivisions, cities, etc.            */
.infobox.geography {
    text-align: left;
    border-collapse: collapse;
    line-height: 1.2em;
    font-size: 90%;
}
}


.infobox.geography  td,
li.gallerybox div.thumb{
.infobox.geography  th {
     border: 0px solid #ffffff;
     border-top: solid 1px #aaa;
     background-color: #ffffff;
    padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
     border-top: solid 1px #aaa;
    padding: 0.4em 0.6em 0.2em 0.6em;
}
}


.infobox.geography .mergedrow td,
.gallerytext{
.infobox.geography .mergedrow th {
max-height: 1.6em;
    border: 0;
line-height: 1.6em;
    padding: 0 0.6em 0.2em 0.6em;
text-align: center;
}
}


.infobox.geography .mergedbottomrow td,
/* modification done by hekman.m@buas.nl to give the standard Poncho the same look as our ealier PonchoPPS... */
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: solid 1px #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}


.infobox.geography .maptable td,
#poncho-logo {
.infobox.geography .maptable th {
    font-family: "Montserrat Bold", normal;
     border: 0;
    text-transform: uppercase;
     padding: 0;
    background-size: 75px;
    background-repeat: no-repeat;
    color: inherit;
    display: inline-block;
    font-size: 1.5em;
    height: 100%;
    line-height: 1.5;
    padding: .33em .33em .33em 80px;
    letter-spacing: 2px;
    vertical-align: middle;
     text-decoration: none;
     background-position: left;
}
}


/* Code styling */
.image img {
code{
     max-width: 100%;
     color:black;
     height: auto;
    background-color:#f9f9f9;
     border:1px solid #ddd;
    border-radius:2px;
    padding:1px 4px
}
}


/*Infobox basic styling*/
a.new {
.tygron-abox {
     color: #ba0000;
     width: 60%;
    margin: auto;
 
    background-color: #dddddd;
    border: 2px solid #bbbbbb;
    padding: 10px;
}
}


/*Page breaks*/
#content h1, #firstHeading {
.pageBreakBlock {
     font-family: "Montserrat Bold", normal;
     display:none;
     font-size: 350%;
}
     line-height: 1.2;
@media print {
     .pageBreak {
        page-break-after: always;
     }
    .pageBreakBlock {
        display:block;
    }
}
}


 
#content h2 {
 
   font-family: "Montserrat", normal;
 
  font-size: 250%;
.menu-container{
  line-height: 1.2;
display: flex;
background-color: #044f82;
 
}
 
.menu-container > div{
  background-color: #f1f1f1;
 
  margin: 15px;
  padding: 30px;
   font-size: 30px;
}
 
 
 
 
/* ------------------------------------------------------------------------- */
 
.infobox {
    background-image: linear-gradient(#c6c6c6, #f2f2f2);
    border: 1px solid #aaa;
    border-radius: 10px 10px 10px 10px;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
}
.infobox-image {
    text-align: center;
}
}
.infobox th {
#content h3 {
    text-align: center;
  font-family: "Montserrat Bold", normal;
    vertical-align: top;
  font-size: 250%;
    width: 120px;
  line-height: 1.2;
}
}
.infobox td {
#content h4 {
    vertical-align: top;
  font-family: "Montserrat", normal;
  font-size: 200%;
  line-height: 1.2;
}
}

Latest revision as of 09:10, 26 October 2021

/* Adding varying font faces for the PPS Wiki Similar or Identical to their Style: */
@font-face {
    font-family: 'Montserrat';
    src: url('/resources/assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat Bold';
    src: url('/resources/assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* Settings for the default fonts being used through the entire wiki: */
body {
  font-family: "Montserrat", normal;
}

#content h1{
  font-family: "Montserrat Bold", normal;
  font-size: 350%;
  line-height: 1;
}
#content h2 {
  font-family: "Montserrat", normal;
  font-size: 250%;
  line-height: 1;
}
#content h3 {
  font-family: "Montserrat Bold", normal;
  font-size: 250%;
  line-height: 1;
}
#content h4 {
  font-family: "Montserrat", normal;
  font-size: 200%;
  line-height: 1;
}
#content {
  overflow: unset !important;
}


/* Alterations in the Logo to make it fit neater on the page: */
#logo {
    background-size: 75px;
    background-repeat: no-repeat;
        background-position: left;
    display: inline-block;
    padding-left: 80px;
    text-decoration: none;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 2px;
    word-spacing: 1px;
    height: 100%;
        font-family: "Montserrat Bold", normal;
}

/* Alterations for aligning the Devices section properly: */
.infobox {
    padding: 0.0em;
    float: right;
    clear: right;
    font-size: 250%;
    text-align: right;
        font-family: "Montserrat Bold", normal;
    margin: 0em 1em 0em 0em;
}

/* Settings for the GAME SPACE PLAY category boxes: */
.infobox2 {
    padding: 0.0em;
    float: right;
    clear: both;
    font-size: 100%;
    text-align: left;
        font-family: "Montserrat Bold", normal;
    margin: 0em 1em 0em 0em;
    position: relative;
    left: -1000px;
}

/*menu icons */
#user-icon{
    background-image: url(/skins/Poncho/images/user_dark.png?c4f8e);
}
#menu-icon{
    background-image: url(/skins/Poncho/images/menu_dark.png?701c4);
}

/* To make images responsive */
.res-img{
    max-width:100%;
    height:auto;
}

/* change transparency, used for inactive selection options in matrix so we only need one image per subcategory*/
.inactive{
  opacity: 0.25;
}
.inactive:hover{
  opacity: 0.65;
}
.active{
  opacity: 1.00;
}

/* To make text rotate (used in table headers)*/
.rotate {         
-moz-transform:rotate(-90deg);          
-webkit-transform: rotate(-90deg);         
-o-transform: rotate(-90deg); 
}

.longtitle{
  font-family: "Montserrat Bold", normal;
  font-size: 100%;
  -moz-transform:rotate(-90deg);          
  -webkit-transform: rotate(-90deg);         
  -o-transform: rotate(-90deg); 
}

/* for adding full width expandable blocks*/
.expandableblock{
  font-family: "Montserrat Bold", normal;
  font-size: 350%;
  line-height: 0%;
}

/* for adding tooltips*/
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border-color: black;
  border-style: solid;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Hide the Subcategories and Pages section in the Categories Page to use own custom style */
.mw-subcategories { 
display: none; 
}
.mw-pages{ 
 display: none; 
}
.mw-category-generated{ 
 display: none; 
}

li.gallerybox div.thumb{
    border: 0px solid #ffffff;
    background-color: #ffffff;
}

.gallerytext{
max-height: 1.6em;
line-height: 1.6em;
text-align: center;
}

/* modification done by hekman.m@buas.nl to give the standard Poncho the same look as our ealier PonchoPPS... */

#poncho-logo {
    font-family: "Montserrat Bold", normal;
    text-transform: uppercase;
    background-size: 75px;
    background-repeat: no-repeat;
    color: inherit;
    display: inline-block;
    font-size: 1.5em;
    height: 100%;
    line-height: 1.5;
    padding: .33em .33em .33em 80px;
    letter-spacing: 2px;
    vertical-align: middle;
    text-decoration: none;
    background-position: left;
}

.image img {
    max-width: 100%;
    height: auto;
}

a.new {
    color: #ba0000;
}

#content h1, #firstHeading {
    font-family: "Montserrat Bold", normal;
    font-size: 350%;
    line-height: 1.2;
}

#content h2 {
  font-family: "Montserrat", normal;
  font-size: 250%;
  line-height: 1.2;
}
#content h3 {
  font-family: "Montserrat Bold", normal;
  font-size: 250%;
  line-height: 1.2;
}
#content h4 {
  font-family: "Montserrat", normal;
  font-size: 200%;
  line-height: 1.2;
}