Difference between revisions of "Template:NAU-CHINA/MainCSS"

(Created page with ".main-content { margin:0 10% 0 10%; text-align:justify; } img { display: block; margin: 0 auto; } figure img { display: block; margin:15px auto 15px au...")
 
Line 1: Line 1:
 +
/*==========================Global===============================*/
 +
body {
 +
    overflow-y: hidden;
 +
}
 +
 +
#mw-content-text {
 +
    margin: 60px 0 0 0;
 +
}
 +
 +
figure img {
 +
    width:100%;
 +
}
 +
 +
#banner img {
 +
    width:100%;
 +
}
 +
 +
/*定义加载图像的格式*/
 +
#loading_icon {
 +
    position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 9999;
 +
    background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") no-repeat black;
 +
    background-position: left 50% top 30%;
 +
    background-size: 22vw;
 +
}
 +
 +
/*定义加载文字的格式*/
 +
#loading_icon span {
 +
    position: fixed;
 +
    top: 60vh;
 +
    left: 41vw;
 +
    font-size: 3.5vw;
 +
    font-family: 'Vladimir Script','Rage Italic','sans-serif';
 +
    color:white;
 +
    text-align:center;
 +
    /*display:none;*/
 +
}
 +
 +
/*图像指针为小手，并且可以点开*/
 +
img.zoom {
 +
    cursor: pointer;
 +
}
 +
 +
/*指针悬停时图片上浮*/
 +
.img_zoom:hover {
 +
    padding-bottom: 5px;
 +
    transition: 0.5s;
 +
    margin-top: -5px;
 +
}
 +
 +
/*小图标左侧浮动*/
 +
.img_guide {
 +
    float: left;
 +
    margin: 0 20px 0 0;
 +
}
 +
 +
/*小图标移动放大*/
 +
.img_guide {
 +
    transform: scale(0.8);
 +
    transition: 0.5s;
 +
}
 +
 +
.img_guide:hover {
 +
    transform: scale(1);
 +
    transition: 0.5s;
 +
}
 +
 +
 +
/*=========================InPages===============================*/
 +
 
.main-content {
 
.main-content {
 
     margin:0 10% 0 10%;
 
     margin:0 10% 0 10%;

Revision as of 02:46, 17 October 2018

/*==========================Global===============================*/ body { 

   overflow-y: hidden;

}

  1. mw-content-text {
   margin: 60px 0 0 0;

}

figure img { 

   width:100%;

}

  1. banner img {
   width:100%;

}

/*定义加载图像的格式*/

  1. loading_icon {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url("T--NAU-CHINA--loading_icon.gif") no-repeat black;
   background-position: left 50% top 30%;
   background-size: 22vw;

}

/*定义加载文字的格式*/

  1. loading_icon span {
   position: fixed;
   top: 60vh;
   left: 41vw;
   font-size: 3.5vw;
   font-family: 'Vladimir Script','Rage Italic','sans-serif';
   color:white;
   text-align:center;
   /*display:none;*/

}

/*图像指针为小手，并且可以点开*/ img.zoom { 

   cursor: pointer;

}

/*指针悬停时图片上浮*/ .img_zoom:hover { 

   padding-bottom: 5px;
   transition: 0.5s;
   margin-top: -5px;

}

/*小图标左侧浮动*/ .img_guide { 

   float: left;
   margin: 0 20px 0 0;

}

/*小图标移动放大*/ .img_guide { 

   transform: scale(0.8);
   transition: 0.5s;

}

.img_guide:hover { 

   transform: scale(1);
   transition: 0.5s;

}


/*=========================InPages===============================*/

.main-content { 

   margin:0 10% 0 10%;
   text-align:justify;

} img { 

   display: block;
   margin: 0 auto;

} figure img { 

   display: block;
   margin:15px auto 15px auto;
   /*width:800px;*/

} figure { 

   /*background-color:whitesmoke;*/
   margin-top:15px;
   margin-bottom:30px;
   /*border:dotted 1px #000;*/

}

figcaption { 

   font-size: 1.2em;
   text-align: center;
   font-family: 'Times New Roman','sans-serif';

} ._table { 

   /*text-align: left;*/

} .textblock { 

   margin-bottom:5em;

} .section { 

   margin-bottom:2.5em;

} .main-content h1 { 

   font-family: 'Avenir Next Condensed',sans-serif;
   color: #a01111;
   margin:32px 0 !important;
   margin-left:40px !important;
   font-size:48px;
   font-weight:bold !important;

}

.main-content h2 { 

   font-size:24px !important;
   margin:19px 0 !important;
   font-weight:bold !important;

}

  1. HQ_page p {font-size:19.2px;}


.main-content p { 

   font-family: 'Avenir Light','Helvetica',sans-serif !important;
   /*font-size: 1.2em !important;*/
   line-height:2em;

}

.scale img{ 

 background-size:contain|cover;
 width:100%;
 height: auto;

}