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

Line 20: Line 20:
  
 
/********************
 
/********************
−
  * 字体
+
  * 基本
 
  ********************/
 
  ********************/
 
@font-face {
 
@font-face {
Line 27: Line 27:
 
}
 
}
  
−
/********************
 
−
* 基本
 
−
********************/
 
 
:root {
 
:root {
 
     --swiper-container-height: 100%;
 
     --swiper-container-height: 100%;
Line 70: Line 67:
 
}
 
}
  
 +
 +
/*content*/
 
.ev71-content .content {
 
.ev71-content .content {
−
     width: 1200px;
+
     width: 1300px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
}
 
}
Line 152: Line 151:
 
}
 
}
  
 +
/*二级*/
 
.navbar .child-nav {
 
.navbar .child-nav {
 
     display: none;
 
     display: none;
Line 171: Line 171:
  
 
.navbar .child-nav .child-item a {
 
.navbar .child-nav .child-item a {
−
     display: block;
+
     display: inline-block;
 
     color: white !important;
 
     color: white !important;
 
     border-bottom: 3px solid transparent;
 
     border-bottom: 3px solid transparent;
 
     word-break: keep-all;
 
     word-break: keep-all;
 
     white-space: nowrap;
 
     white-space: nowrap;
 +
    height: 42px;
 
}
 
}
  
Line 184: Line 185:
 
.navbar .item:hover .child-nav {
 
.navbar .item:hover .child-nav {
 
     display: inherit;
 
     display: inherit;
 +
}
 +
 +
/*Team 避免撑开盒子*/
 +
.navbar .item:first-child:hover .child-nav {
 +
    display: inherit;
 +
    left: -64px;
 
}
 
}
  
Line 204: Line 211:
 
     line-height: 24px;
 
     line-height: 24px;
 
}
 
}
 +
  
 
/*article*/
 
/*article*/
Line 231: Line 239:
 
     line-height: 36px;
 
     line-height: 36px;
 
     margin: 0;
 
     margin: 0;
 +
    text-align: justify;
 +
}
 +
 +
.article p.align-normal {
 +
    text-align: left;
 
}
 
}
  
Line 250: Line 263:
  
 
/*swiper*/
 
/*swiper*/
−
/*.index-page .swiper-container {
 
−
    width: 1920px !important;
 
−
    height: 966px !important;
 
−
}*/
 
 
.index-page .swiper-container {
 
.index-page .swiper-container {
 
     width: 100% !important;
 
     width: 100% !important;
Line 273: Line 282:
 
.index-page .abstract {
 
.index-page .abstract {
 
     padding-top: 92px;
 
     padding-top: 92px;
−
}
 
−
 
−
.index-page .abstract h2 {
 
−
    margin-top: 40px;
 
−
    margin-bottom: 34px;
 
 
}
 
}
  
Line 285: Line 289:
  
 
.index-page .abstract .bottom img {
 
.index-page .abstract .bottom img {
−
     margin-left: 12px;
+
     margin-left: 32px;
 
     max-width: 400px;
 
     max-width: 400px;
 
     height: 100%;
 
     height: 100%;

Revision as of 06:57, 9 September 2021

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

* 覆盖
********************/
  1. globalWrapper {
   font-size: 100% !important;
   padding-bottom: 0 !important;

}

  1. globalWrapper #content {
   width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   line-height: inherit !important;

}

  1. globalWrapper #content #top_title {
   display: none !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;

}

.ev71-content a, .ev71-content a:visited { 

   text-decoration: none;

}

.ev71-content ul { 

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

}

.ev71-content ul:after { 

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

}

.ev71-content * { 

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

}


/*content*/ .ev71-content .content { 

   width: 1300px;
   margin: 0 auto;

}

.ev71-content .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: inline-block;
   color: white !important;
   border-bottom: 3px solid transparent;
   word-break: keep-all;
   white-space: nowrap;
   height: 42px;

}

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

   border-bottom: 3px solid white;

}

.navbar .item:hover .child-nav { 

   display: inherit;

}

/*Team 避免撑开盒子*/ .navbar .item:first-child:hover .child-nav { 

   display: inherit;
   left: -64px;

}


/*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;
   text-align: justify;

}

.article p.align-normal { 

   text-align: left;

}


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

* 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: 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 .bottom { 

   display: flex;

}

.index-page .abstract .bottom img { 

   margin-left: 32px;
   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;

}