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

Revision as of 09:37, 9 September 2021

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

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

globalWrapper {

   font-size: 100%;
   padding-bottom: 0;

}

globalWrapper #content {

   width: 100%;
   padding: 0;
   margin: 0;
   line-height: inherit;

}

globalWrapper #content #top_title {

   display: none;

}

bodyContent a[href ^="https://"], .link-https {

   background: unset;
   padding-right: 0;

}

bodyContent h1, #bodyContent h2 {

   margin-bottom: auto;

}

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

* 基本
********************/

@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: 760px;
   --gif-logo-height: 100%;

}

body, html {

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

}

body {

   background-color: white;
   min-width: 1400px;
   font-family: SourceHanSansCN-Medium, sans-serif !important;

}

.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;
   font-size: 16px;

}

.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;
   padding: 0;
   font-weight: normal !important;

}

.article .title.big {

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

}

.article .title.blue {

   color: #1f72cc;

}

.article p {

   color: #4c4c4c;
   font-size: 22px !important;
   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;

}

@@ Line 37: / Line 37: @@
 :root {
-     --swiper-container-height: 100%;
+     --swiper-container-height: 760px;
      --gif-logo-height: 100%;
 }