Difference between revisions of "MediaWiki:Common.css"

From The Viking Age Compendium
Jump to: navigation, search
m
m
 
(30 intermediate revisions by 2 users 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.page-Main_Page h1.firstHeading { display:none; }
  
 
#ca-history { display:none!important; }
 
#ca-history { display:none!important; }
Line 13: Line 15:
  
 
/* CSS Responsive Gallery */
 
/* CSS Responsive Gallery */
.wrap {
+
.galleryItem {
  overflow: hidden;
+
float: left;
  margin: 10px;
+
width: 16%;
 +
margin: 2% 2% 50px 2%;
 
}
 
}
.box {
+
 
  float: left;
+
@media only screen and (max-width : 940px),
  position: relative;
+
only screen and (max-device-width : 940px){
  width: 20%;
+
.galleryItem {width: 21%;}
  padding-bottom: 10%;
+
 
}
 
}
.boxInner {
+
  position: absolute;
+
@media only screen and (max-width : 720px),
  left: 10px;
+
only screen and (max-device-width : 720px){
  right: 10px;
+
.galleryItem {width: 29.33333%;}
  top: 10px;
+
  bottom: 10px;
+
  overflow: hidden;
+
 
}
 
}
.boxInner img {
+
  width: 100%;
+
@media only screen and (max-width : 530px),
 +
only screen and (max-device-width : 530px){
 +
.galleryItem {width: 46%;}
 
}
 
}
.boxInner .titleBox {
+
  position: absolute;
+
@media only screen and (max-width : 320px),
  bottom: 0;
+
only screen and (max-device-width : 320px){
  left: 0;
+
.galleryItem {width: 96%;}
  right: 0;
+
  margin-bottom: -50px;
+
  background: #000;
+
  background: rgba(0, 0, 0, 0.5);
+
  color: #FFF;
+
  padding: 10px;
+
  text-align: center;
+
  -webkit-transition: all 0.3s ease-out;
+
  -moz-transition: all 0.3s ease-out;
+
  -o-transition: all 0.3s ease-out;
+
  transition: all 0.3s ease-out;
+
 
}
 
}
  
@media only screen and (max-width : 480px) {
+
 
  /* Smartphone view: 1 tile */
+
@media (max-width: 420px) {
  .box {
+
    .MenuBox {
      width: 100%;
+
        display: block;
      padding-bottom: 50%;
+
        width: 100%;
  }
+
    }
}
+
 
@media only screen and (max-width : 650px) and (min-width : 481px) {
+
    .MenuBox2 {
  /* Tablet view: 2 tiles */
+
       display: table-caption;
  .box {
+
    }
       width: 50%;
+
 
      padding-bottom: 25%;
+
    .MenuBox1 {
  }
+
       display: table-footer-group;
}
+
    }
@media only screen and (max-width : 1050px) and (min-width : 651px) {
+
  /* Small desktop / ipad view: 3 tiles */
+
  .box {
+
       width: 33.3%;
+
      padding-bottom: 16.2%;
+
  }
+
}
+
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
+
  /* Medium desktop: 4 tiles */
+
  .box {
+
      width: 25%;
+
      padding-bottom: 12.5%;
+
  }
+
 
}
 
}
 +
 
/* CSS Responsive Gallery END*/
 
/* CSS Responsive Gallery END*/
  
Line 124: Line 103:
 
  * @author: Unknown
 
  * @author: Unknown
 
  * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 
  * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
*/
+
 
  
 
.zoom_img img{
 
.zoom_img img{
Line 139: Line 118:
 
transform:scale(2);
 
transform:scale(2);
 
}
 
}
 +
*/
 +
 +
/* Size External Images */
 +
.externalimage-holder {
 +
    position: relative;
 +
    height: auto;
 +
    float: left;
 +
    border-radius: 10px;
 +
    -moz-border-radius: 10px;
 +
    -webkit-border-radius: 10px;
 +
    -khtml-border-radius: 10px;
 +
    -icab-border-radius: 10px;
 +
    -o-border-radius: 10px;
 +
    color: #ffffff;
 +
    background: green;
 +
    text-align:center;
 +
    margin: 0 0 10px 10px;
 +
}
 +
.externalimage-holder img {
 +
    width: 100%;
 +
    height: inherit;
 +
    border-radius: 10px;
 +
    -moz-border-radius: 10px;
 +
    -webkit-border-radius: 10px;
 +
    -khtml-border-radius: 10px;
 +
    -icab-border-radius: 10px;
 +
    -o-border-radius: 10px;
 +
    float: left;
 +
   
 +
}
 +
[[Category:Wiki]]

Latest revision as of 18:59, 5 May 2017

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

body.page-Main_Page h1.firstHeading { display:none; }

#ca-history { display:none!important; }
/* #filehistory {display: none} */ /* Hides the "File history" header */
/* .special {display: none}  */ /* Hides the Edit history */
#metadata {display: none} /* Hides the "Metadata" header */
#mw_metadata {display: none} /* Hides the Metadata graph */

#ca-talk { display:none!important; }

/* Hides Mobile only elements */
#mf-HideOnDesktop { display: none; }

/* CSS Responsive Gallery */
.galleryItem {
	float: left;	
	width: 16%;
	margin:  2% 2% 50px 2%;	
}

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}
 
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29.33333%;}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 46%;}
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	
}


@media (max-width: 420px) {
    .MenuBox {
        display: block;
        width: 100%;
    }
  
    .MenuBox2 {
      display: table-caption;
    }
  
    .MenuBox1 {
      display: table-footer-group;
    }
}

/* CSS Responsive Gallery END*/


.tocnumber { display: none !important; }
.toc { width: 200px; } 

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).*/
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 { display: none; }

#toc { float:right };

#footer-places-Privacy_policy { display:none;}
#footer-places-disclaimer { display:none;}
#footer-places-about { display:none;}

.hidden {display:none}

/*Add this text at the end of [[Mediawiki:Commons.css]]
/*For HarvardReferences extension */
.harvVisitedLink { 
	background-color: #AAAAAA;
}
.harvReferenceLink { 
	background-color: #FFFF00;
}
.harvNone { 
	background-color: inherit;
}
.harvBackground { 
	background-color: #DDEEFF;
}

/* CSS Hover Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]


.zoom_img img{
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}

.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}
 */

/* Size External Images */
.externalimage-holder {
    position: relative;
    height: auto;
    float: left;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -icab-border-radius: 10px;
    -o-border-radius: 10px;
    color: #ffffff; 
    background: green; 
    text-align:center; 
    margin: 0 0 10px 10px;
}
.externalimage-holder img {
    width: 100%;
    height: inherit;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -icab-border-radius: 10px;
    -o-border-radius: 10px;
    float: left;
    
}
[[Category:Wiki]]