Difference between revisions of "Template:Shanghai Metropolis/StyleCss"

m
m
Line 1: Line 1:
−
<style>
 
 
/********************
 
/********************
 
  * 覆盖
 
  * 覆盖
 
  ********************/
 
  ********************/
 
.igem_column_wrapper {
 
.igem_column_wrapper {
−
     max-width: none;
+
     max-width: none !important;
−
     width: 100%;
+
     width: 100% !important;
 
}
 
}
  
Line 291: Line 290:
 
     margin-top: 58px;
 
     margin-top: 58px;
 
}
 
}
−
</style>
 

Revision as of 03:24, 9 September 2021

/******************** 

* 覆盖
********************/

.igem_column_wrapper { 

   max-width: none !important;
   width: 100% !important;

}


/******************** 

* 字体
********************/

@font-face { 

   font-family: SourceHanSansCN-Medium;
   src: url("https://static.igem.org/mediawiki/2021/5/5e/T--Shanghai_Metropolis--font.ttf");

}

/******************** 

* 基本
********************/
root {
   --swiper-container-height: 100%;
   --gif-logo-height: 100%;

}

body, html { 

   margin: 0;
   padding: 0;
   scroll-behavior: smooth;

}

body { 

   background-color: white;
   min-width: 1400px;

}

  • {
   color: #434343;
   box-sizing: border-box;
   font-family: SourceHanSansCN-Medium, sans-serif;

}

a, a:visited { 

   text-decoration: none;

}

ul { 

   list-style: none;
   margin: 0;
   padding: 0;

}

ul:after { 

   content: " ";
   clear: both;
   display: table;

}

.content { 

   width: 1200px;
   margin: 0 auto;

}

.content-small { 

   width: 900px;
   margin: 0 auto;

}


/*Navbar*/ .navbar { 

   height: 122px;
   background-color: white;
   padding: 0 120px;
   display: flex;
   align-items: center;

}

.navbar .logo { 

   width: 54px;
   height: 62px;
   display: inline-block;
   flex-shrink: 0;

}

.navbar .logo img { 

   width: 100%;
   height: 100%;
   object-fit: contain;

}

.navbar .list { 

   display: block;
   height: 100%;
   flex-grow: 1;
   float: right;

}

.navbar .list .item { 

   display: inline-block;
   height: 100%;
   padding: 0 20px;
   position: relative;
   float: right;

}

.navbar .list .item > a { 

   color: #4c4c4c;
   font-size: 17px;
   transition: color 0.3s;
   padding-top: 4px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

}

.navbar .list .item:after, .navbar .list .item:after { 

   content: " ";
   width: 47px;
   height: 5px;
   position: absolute;
   bottom: 6px;
   left: 50%;
   transform: translateX(-50%);
   background-color: transparent;
   transition: background-color 0.3s;

}

.navbar .list .item:hover:after, .navbar .list .item.active:after { 

   background-color: #b3b3b3;

}

.navbar .list .item:hover > a, .navbar .list .item.active > a { 

   color: #b3b3b3;

}

.navbar .child-nav { 

   display: none;
   background-color: rgba(185, 185, 185, .96);
   position: absolute;
   top: 100%;
   left: -32px;
   z-index: 9999;

}

.navbar .child-nav .child-list { 

   padding: 20px 52px;
   border: 2px solid rgba(255, 255, 255, .96);

}

.navbar .child-nav .child-item { 

   line-height: 50px;

}

.navbar .child-nav .child-item a { 

   display: block;
   color: white !important;
   border-bottom: 3px solid transparent;
   word-break: keep-all;
   white-space: nowrap;

}

.navbar .child-nav .child-item:hover a { 

   border-bottom: 3px solid white;

}

.navbar .item:hover .child-nav { 

   display: inherit;

}


/*footer*/ .footer { 

   background-color: #F5F5F7;
   padding-top: 60px;
   padding-bottom: 38px;

}

.footer hr { 

   height: 2px;

}

.footer span { 

   font-size: 14px;
   display: block;
   color: #666666;
   line-height: 24px;

}

/*article*/ .article { }

.article .title { 

   font-size: 36px;
   line-height: 46px;
   color: #4c4c4c;
   margin: 0;
   font-weight: normal;

}

.article .title.big { 

   font-size: 48px;
   line-height: 56px;

}

.article .title.blue { 

   color: #1f72cc;

}

.article p { 

   color: #4c4c4c;
   font-size: 22px;
   line-height: 36px;
   margin: 0;

}


/******************** 

* index
********************/

/*gif-logo*/ .index-page .gif-logo { 

   width: 100%;
   height: 100%;

}

.index-page .gif-logo img { 

   width: 100%;
   height: var(--gif-logo-height);
   display: block;

}

/*swiper*/ /*.index-page .swiper-container { 

   width: 1920px !important;
   height: 966px !important;

}*/ .index-page .swiper-container { 

   width: 100% !important;
   height: var(--swiper-container-height) !important;

}

.index-page .swiper-slide { 

   background-position: center !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;

}

.index-page .swiper-pagination-bullet { 

   width: 12px !important;
   height: 12px !important;

}

/*abstract*/ .index-page .abstract { 

   padding-top: 92px;

}

.index-page .abstract h2 { 

   margin-top: 40px;
   margin-bottom: 34px;

}

.index-page .abstract .bottom { 

   display: flex;

}

.index-page .abstract .bottom img { 

   margin-left: 12px;
   max-width: 400px;
   height: 100%;

}

/*promotional*/ .index-page .promotional { 

   padding-top: 110px;
   padding-bottom: 48px;

}

.index-page .promotional video { 

   width: 100%;
   height: 100%;
   margin-top: 58px;

}