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

 
(16 intermediate revisions by the same user not shown)
Line 23: Line 23:
 
}
 
}
  
 +
#bodyContent h1, #bodyContent h2 {
 +
    margin-bottom: auto;
 +
}
 +
 +
#HQ_page table {
 +
    margin: 0;
 +
}
  
 
/********************
 
/********************
−
* 基本
+
* 基本
−
********************/
+
********************/
 +
/*
 
@font-face {
 
@font-face {
 
     font-family: SourceHanSansCN-Medium;
 
     font-family: SourceHanSansCN-Medium;
−
     src: url("https://static.igem.org/mediawiki/2021/5/5e/T--Shanghai_Metropolis--font.ttf");
+
     src: url(T--Shanghai_Metropolis--font.ttf);
 
}
 
}
 +
*/
  
 
:root {
 
:root {
−
     --swiper-container-height: 100%;
+
     --swiper-container-height: 760px;
 
     --gif-logo-height: 100%;
 
     --gif-logo-height: 100%;
 
}
 
}
Line 47: Line 56:
 
     background-color: white;
 
     background-color: white;
 
     min-width: 1400px;
 
     min-width: 1400px;
−
     font-family: SourceHanSansCN-Medium, sans-serif !important;
+
     /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/
 
}
 
}
  
Line 53: Line 62:
 
.ev71-content a:visited {
 
.ev71-content a:visited {
 
     text-decoration: none;
 
     text-decoration: none;
 +
}
 +
 +
.ev71-content ol {
 +
    margin: 0;
 +
    padding: revert !important;
 
}
 
}
  
 
.ev71-content ul {
 
.ev71-content ul {
 
     list-style: none;
 
     list-style: none;
−
    margin: 0;
 
 
     padding: 0;
 
     padding: 0;
 +
    margin: 0;
 
}
 
}
  
 +
.ev71-content ol:after,
 
.ev71-content ul:after {
 
.ev71-content ul:after {
 
     content: " ";
 
     content: " ";
Line 70: Line 85:
 
     color: #434343;
 
     color: #434343;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
−
     font-family: SourceHanSansCN-Medium, sans-serif !important;
+
     /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/
 +
    /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/
 +
    font-family: unset !important;
 
}
 
}
  
Line 76: Line 93:
 
/*content*/
 
/*content*/
 
.ev71-content .content {
 
.ev71-content .content {
−
     width: 1300px;
+
     width: 1250px;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.ev71-content .content-middle {
 +
    width: 1050px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
}
 
}
Line 93: Line 115:
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 +
    min-width: 1400px;
 
}
 
}
  
 
.navbar .logo {
 
.navbar .logo {
−
     width: 54px;
+
     width: 122px;
−
     height: 62px;
+
     height: 72px;
 
     display: inline-block;
 
     display: inline-block;
 
     flex-shrink: 0;
 
     flex-shrink: 0;
Line 125: Line 148:
 
.navbar .list .item > a {
 
.navbar .list .item > a {
 
     color: #4c4c4c;
 
     color: #4c4c4c;
−
     font-size: 17px;
+
     font-size: 18px;
 
     transition: color 0.3s;
 
     transition: color 0.3s;
 
     padding-top: 4px;
 
     padding-top: 4px;
Line 186: Line 209:
 
}
 
}
  
−
.navbar .child-nav .child-item:hover a {
+
.navbar .child-nav .child-item:hover a,
 +
.navbar .child-nav .child-item.active a {
 
     border-bottom: 3px solid white;
 
     border-bottom: 3px solid white;
 
}
 
}
Line 224: Line 248:
 
}
 
}
  
 +
/*title*/
 
.article .title {
 
.article .title {
−
     font-size: 36px;
+
     font-size: 32px;
−
     line-height: 46px;
+
    line-height: 42px;
 +
    color: #3a3a3a;
 +
    margin: 36px 0 16px !important;
 +
    padding: 0;
 +
    font-weight: normal !important;
 +
}
 +
 
 +
.article .title2 {
 +
    font-size: 24px;
 +
     line-height: 32px;
 
     color: #4c4c4c;
 
     color: #4c4c4c;
−
     margin: 0;
+
     margin: 24px 0 8px !important;
−
     font-weight: normal;
+
     padding: 0;
 
}
 
}
  
−
.article .title.big {
+
.article .title3 {
−
     font-size: 48px;
+
     font-size: 20px;
−
     line-height: 56px;
+
     line-height: 28px;
 +
    color: #4c4c4c;
 +
    margin: 6px 0 6px !important;
 +
    padding: 0;
 
}
 
}
  
−
.article .title.blue {
+
.article .title4 {
 +
    font-size: 16px;
 +
    line-height: 22px;
 +
    color: #4c4c4c;
 +
    margin: 0 !important;
 +
    padding: 0;
 +
}
 +
 
 +
.article .blue {
 
     color: #1f72cc;
 
     color: #1f72cc;
 
}
 
}
  
 +
.article .bold {
 +
    font-weight: bold !important;
 +
}
 +
 +
/*p*/
 
.article p {
 
.article p {
 
     color: #4c4c4c;
 
     color: #4c4c4c;
−
     font-size: 22px !important;
+
     font-size: 18px !important;
−
     line-height: 36px;
+
     line-height: 32px;
 
     margin: 0;
 
     margin: 0;
 
     text-align: justify;
 
     text-align: justify;
 +
}
 +
 +
.article .align-normal-all p {
 +
    text-align: left !important;
 
}
 
}
  
 
.article p.align-normal {
 
.article p.align-normal {
 +
    text-align: left !important;
 +
}
 +
 +
.article p + p {
 +
    margin-top: 12px;
 +
}
 +
 +
.article > img,
 +
section > img {
 +
    display: block;
 +
    margin: 0 auto;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
.article > img.left,
 +
section > img.left {
 +
    display: inline-block;
 +
    margin: 0;
 +
    width: auto;
 +
    max-width: 100%;
 +
}
 +
 +
/*img-container*/
 +
.article .img-container {
 +
    width: 100%;
 +
    height: 100%;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    flex-direction: column;
 +
}
 +
 +
.article .img-container img {
 +
    display: block;
 +
    max-width: 100%;
 +
    height: auto;
 +
}
 +
 +
.article .figure,
 +
.article .img-container span,
 +
.article .img-container .figure {
 +
    display: block;
 +
    text-align: center;
 +
    color: #434343;
 +
    margin: 12px auto;
 +
    font-size: 14px;
 +
    line-height: 20px;
 +
}
 +
 +
/*half*/
 +
.article .half {
 +
    width: 100%;
 +
    display: flex;
 +
}
 +
 +
.article .half img {
 +
    width: 100%;
 +
    height: auto;
 +
}
 +
 +
.article .half .left {
 +
    width: 50%;
 +
}
 +
 +
.article .half .right {
 +
    width: 50%;
 +
}
 +
 +
/*a*/
 +
.article a {
 +
    word-wrap: anywhere;
 +
}
 +
 +
/*ul*/
 +
.article ul.mark li {
 +
    padding-left: 16px;
 +
    position: relative;
 +
}
 +
 +
.article ul.mark li:before {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 8px;
 +
    display: inline;
 +
    content: "-";
 +
    color: #4c4c4c;
 +
    font-size: 16px;
 +
    line-height: 16px;
 +
}
 +
 +
.article ul.normal {
 +
    list-style: inherit;
 +
    padding: revert;
 +
}
 +
 +
.article ol li::marker,
 +
.article ul li::marker {
 +
    font-size: 17px !important;
 +
}
 +
 +
 +
/*size*/
 +
.article .m-b-28 {
 +
    margin-bottom: 28px;
 +
}
 +
 +
.article .m-t-28 {
 +
    margin-top: 28px;
 +
}
 +
 +
.article .m-b-6 {
 +
    margin-bottom: 6px;
 +
}
 +
 +
.article .m-t-12 {
 +
    margin-top: 12px;
 +
}
 +
 +
.article .m-b-12 {
 +
    margin-bottom: 12px;
 +
}
 +
 +
.article .m-t-18 {
 +
    margin-top: 18px;
 +
}
 +
 +
.article .m-b-18 {
 +
    margin-bottom: 18px;
 +
}
 +
 +
.article .m-t-24 {
 +
    margin-top: 24px;
 +
}
 +
 +
.article .m-b-24 {
 +
    margin-bottom: 24px;
 +
}
 +
 +
.article.p-t-96,
 +
.article .p-t-96 {
 +
    padding-top: 96px;
 +
}
 +
 +
.article.p-t-72,
 +
.article .p-t-72 {
 +
    padding-top: 72px;
 +
}
 +
 +
.article.p-t-54,
 +
.article .p-t-54 {
 +
    padding-top: 54px;
 +
}
 +
 +
.article.p-b-54,
 +
.article .p-b-54 {
 +
    padding-bottom: 54px;
 +
}
 +
 +
.article.p-t-30,
 +
.article .p-t-30 {
 +
    padding-top: 30px;
 +
}
 +
 +
.article.p-b-30,
 +
.article .p-b-30 {
 +
    padding-bottom: 30px;
 +
}
 +
 +
/*table*/
 +
.article table {
 +
    width: 100%;
 +
    border-collapse: collapse;
 +
    padding: 2px;
 +
}
 +
 +
.article table,
 +
.article table th,
 +
.article table td {
 +
    border: 1px solid black !important;
 +
}
 +
 +
.article table th,
 +
.article table td {
 +
    line-height: 36px;
 +
    padding: 0 12px !important;
 +
    font-size: 14px !important;
 +
}
 +
 +
/*w-384*/
 +
.article table.w-384 tr td:first-child {
 +
    width: 384px;
 +
}
 +
 +
/*w-50*/
 +
.article table.w-1-2 tr td {
 +
    width: 50%;
 +
}
 +
 +
/*w-1/3*/
 +
.article table.w-1-3 tr td {
 +
    width: 33.33%;
 +
}
 +
 +
/*experiments*/
 +
.article table.experiments {
 +
}
 +
 +
.article table.experiments th,
 +
.article table.experiments td {
 +
    line-height: 28px;
 +
}
 +
 +
.article table.experiments th {
 
     text-align: left;
 
     text-align: left;
 +
    background-color: #D9D9D9 !important;
 +
}
 +
 +
/*header*/
 +
.page-header {
 +
    width: 100%;
 +
    height: 100%;
 +
    position: relative;
 +
}
 +
 +
.page-header img {
 +
    width: 100%;
 +
    height: 100%;
 +
    display: block;
 +
}
 +
 +
.page-header h1 {
 +
    position: absolute;
 +
    bottom: 8%;
 +
    left: 12%;
 +
    margin: 0;
 +
    color: white;
 +
    font-size: 44px !important;
 +
    letter-spacing: 2px;
 
}
 
}
  
Line 286: Line 578:
 
}
 
}
  
−
/*abstract*/
+
 
−
.index-page .abstract {
+
/********************
−
    padding-top: 92px;
+
* team-members
 +
********************/
 +
.team-members-page {
 
}
 
}
  
−
.index-page .abstract .bottom {
+
.team-members-page .members {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 
 +
.team-members-page .members:after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
}
 +
 
 +
.team-members-page .members .item {
 
     display: flex;
 
     display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    padding: 16px 0;
 
}
 
}
  
−
.index-page .abstract .bottom img {
+
.team-members-page .members .item:first-child {
−
     margin-left: 32px;
+
     padding-top: 32px
−
    max-width: 400px;
+
−
    height: 100%;
+
 
}
 
}
  
−
/*promotional*/
+
.team-members-page .members .item:last-child {
−
.index-page .promotional {
+
     padding-bottom: 32px
−
    padding-top: 110px;
+
−
     padding-bottom: 48px;
+
 
}
 
}
  
−
.index-page .promotional video {
+
.team-members-page .members .item .left {
−
     width: 100%;
+
    flex-shrink: 0;
−
     height: 100%;
+
}
−
     margin-top: 58px;
+
 
 +
.team-members-page .members .item .left img {
 +
     width: 196px;
 +
     height: 196px;
 +
    display: block;
 +
}
 +
 
 +
.team-members-page .members .item .left .name {
 +
    display: block;
 +
    text-align: center;
 +
     margin-top: 8px;
 +
    font-size: 18px;
 +
    line-height: 24px;
 +
    color: #464646;
 +
    font-weight: bold;
 +
}
 +
 
 +
.team-members-page .members .item .desc {
 +
    line-height: 26px;
 +
    padding-left: 48px;
 +
    text-align: justify;
 +
    font-size: 18px;
 
}
 
}

Latest revision as of 12:45, 1 October 2021

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

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

}

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

}

  1. globalWrapper #content #top_title {
   display: none;

}

  1. bodyContent a[href ^="https://"], .link-https {
   background: unset;
   padding-right: 0;

}

  1. bodyContent h1, #bodyContent h2 {
   margin-bottom: auto;

}

  1. HQ_page table {
   margin: 0;

}

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

  • 基本
                                        • /

/* @font-face { 

   font-family: SourceHanSansCN-Medium;
   src: url(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 ol { 

   margin: 0;
   padding: revert !important;

}

.ev71-content ul { 

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

}

.ev71-content ol:after, .ev71-content ul:after { 

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

}

.ev71-content * { 

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

}


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

   width: 1250px;
   margin: 0 auto;

}

.ev71-content .content-middle { 

   width: 1050px;
   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;
   min-width: 1400px;

}

.navbar .logo { 

   width: 122px;
   height: 72px;
   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: 18px;
   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, .navbar .child-nav .child-item.active 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 { }

/*title*/ .article .title { 

   font-size: 32px;
   line-height: 42px;
   color: #3a3a3a;
   margin: 36px 0 16px !important;
   padding: 0;
   font-weight: normal !important;

}

.article .title2 { 

   font-size: 24px;
   line-height: 32px;
   color: #4c4c4c;
   margin: 24px 0 8px !important;
   padding: 0;

}

.article .title3 { 

   font-size: 20px;
   line-height: 28px;
   color: #4c4c4c;
   margin: 6px 0 6px !important;
   padding: 0;

}

.article .title4 { 

   font-size: 16px;
   line-height: 22px;
   color: #4c4c4c;
   margin: 0 !important;
   padding: 0;

}

.article .blue { 

   color: #1f72cc;

}

.article .bold { 

   font-weight: bold !important;

}

/*p*/ .article p { 

   color: #4c4c4c;
   font-size: 18px !important;
   line-height: 32px;
   margin: 0;
   text-align: justify;

}

.article .align-normal-all p { 

   text-align: left !important;

}

.article p.align-normal { 

   text-align: left !important;

}

.article p + p { 

   margin-top: 12px;

}

.article > img, section > img { 

   display: block;
   margin: 0 auto;
   width: 100%;
   height: 100%;

}

.article > img.left, section > img.left { 

   display: inline-block;
   margin: 0;
   width: auto;
   max-width: 100%;

}

/*img-container*/ .article .img-container { 

   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.article .img-container img { 

   display: block;
   max-width: 100%;
   height: auto;

}

.article .figure, .article .img-container span, .article .img-container .figure { 

   display: block;
   text-align: center;
   color: #434343;
   margin: 12px auto;
   font-size: 14px;
   line-height: 20px;

}

/*half*/ .article .half { 

   width: 100%;
   display: flex;

}

.article .half img { 

   width: 100%;
   height: auto;

}

.article .half .left { 

   width: 50%;

}

.article .half .right { 

   width: 50%;

}

/*a*/ .article a { 

   word-wrap: anywhere;

}

/*ul*/ .article ul.mark li { 

   padding-left: 16px;
   position: relative;

}

.article ul.mark li:before { 

   position: absolute;
   left: 0;
   top: 8px;
   display: inline;
   content: "-";
   color: #4c4c4c;
   font-size: 16px;
   line-height: 16px;

}

.article ul.normal { 

   list-style: inherit;
   padding: revert;

}

.article ol li::marker, .article ul li::marker { 

   font-size: 17px !important;

}


/*size*/ .article .m-b-28 { 

   margin-bottom: 28px;

}

.article .m-t-28 { 

   margin-top: 28px;

}

.article .m-b-6 { 

   margin-bottom: 6px;

}

.article .m-t-12 { 

   margin-top: 12px;

}

.article .m-b-12 { 

   margin-bottom: 12px;

}

.article .m-t-18 { 

   margin-top: 18px;

}

.article .m-b-18 { 

   margin-bottom: 18px;

}

.article .m-t-24 { 

   margin-top: 24px;

}

.article .m-b-24 { 

   margin-bottom: 24px;

}

.article.p-t-96, .article .p-t-96 { 

   padding-top: 96px;

}

.article.p-t-72, .article .p-t-72 { 

   padding-top: 72px;

}

.article.p-t-54, .article .p-t-54 { 

   padding-top: 54px;

}

.article.p-b-54, .article .p-b-54 { 

   padding-bottom: 54px;

}

.article.p-t-30, .article .p-t-30 { 

   padding-top: 30px;

}

.article.p-b-30, .article .p-b-30 { 

   padding-bottom: 30px;

}

/*table*/ .article table { 

   width: 100%;
   border-collapse: collapse;
   padding: 2px;

}

.article table, .article table th, .article table td { 

   border: 1px solid black !important;

}

.article table th, .article table td { 

   line-height: 36px;
   padding: 0 12px !important;
   font-size: 14px !important;

}

/*w-384*/ .article table.w-384 tr td:first-child { 

   width: 384px;

}

/*w-50*/ .article table.w-1-2 tr td { 

   width: 50%;

}

/*w-1/3*/ .article table.w-1-3 tr td { 

   width: 33.33%;

}

/*experiments*/ .article table.experiments { }

.article table.experiments th, .article table.experiments td { 

   line-height: 28px;

}

.article table.experiments th { 

   text-align: left;
   background-color: #D9D9D9 !important;

}

/*header*/ .page-header { 

   width: 100%;
   height: 100%;
   position: relative;

}

.page-header img { 

   width: 100%;
   height: 100%;
   display: block;

}

.page-header h1 { 

   position: absolute;
   bottom: 8%;
   left: 12%;
   margin: 0;
   color: white;
   font-size: 44px !important;
   letter-spacing: 2px;

}


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

* 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;

}


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

* team-members
********************/

.team-members-page { }

.team-members-page .members { 

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

}

.team-members-page .members:after { 

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

}

.team-members-page .members .item { 

   display: flex;
   justify-content: center;
   align-items: center;
   padding: 16px 0;

}

.team-members-page .members .item:first-child { 

   padding-top: 32px

}

.team-members-page .members .item:last-child { 

   padding-bottom: 32px

}

.team-members-page .members .item .left { 

   flex-shrink: 0;

}

.team-members-page .members .item .left img { 

   width: 196px;
   height: 196px;
   display: block;

}

.team-members-page .members .item .left .name { 

   display: block;
   text-align: center;
   margin-top: 8px;
   font-size: 18px;
   line-height: 24px;
   color: #464646;
   font-weight: bold;

}

.team-members-page .members .item .desc { 

   line-height: 26px;
   padding-left: 48px;
   text-align: justify;
   font-size: 18px;

}