Difference between revisions of "Template:Shanghai Metro/Main CSS"

 
Line 30: Line 30:
 
}
 
}
  
−
#top_menu_14 {
 
−
    display: none;
 
−
}
 
  
 
#top_menu_under {
 
#top_menu_under {

Latest revision as of 18:23, 19 October 2021

/**reset css start*/ body, html { 

   background-color: white;
   width: 100%;
   height: 100%;

}

  1. content {
   padding: 0;
   width: 100%;
   margin: 0;
   border: none;
   box-sizing: border-box;
   overflow-x: hidden;

}

  1. globalWrapper {
   padding-bottom: 0;
   box-sizing: border-box;

}

  1. sideMenu,
  2. top_title,

.patrollink,

  1. firstHeading,
  2. home_logo,
  3. sideMenu {
   display: none;

}


  1. top_menu_under {
   display: none;

}

p { 

   margin: 0;
   line-height: 0;

}

  1. mw-content-text {
   overflow-x: hidden;

}

/**reset css end*/ .clearfix:after { 

   content: ;
   display: block;
   clear: both;

}

  • {
   margin: 0;
   padding: 0;
   font-family: "微软雅黑", "Microsoft YaHei";

}

ul, ol { 

   list-style: none;

}

a { 

   text-decoration: none;
   cursor: pointer;
   color: inherit;

}

a:visited, a:link { 

   color: inherit;
   text-decoration: none;

} /**导航相关的 start*/ nav { 

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

}

.top-block { 

   height: 43px;
   width: 100%;
   background-color: #585858;

}

.top-nav-bar { 

   height: 42px;
   width: 100%;
   background-color: #52b4d5;

}

.top-nav-bar a { 

   padding-right: 0 !important;
   display: inline-block;

}

.top-nav-bar>ul { 

   /* position: relative; */
   width: 1366px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;

}

.top-nav-bar>ul>.small-logo { 

   width: 41px;
   height: 41px;
   border-radius: 100%;
   background: url('https://static.igem.org/mediawiki/2021/f/ff/T--Shanghai_Metro--logo.png') no-repeat center #fff;
   /* position: absolute; */
   background-size: 41px;
   border-radius: 100%;
   left: 0;
   display: inline-block;
   top: 0.5px;

}

.top-nav-bar>ul>li { 

   margin-left: 76px;
   height: 42px;
   line-height: 42px;
   transition: all .3s;
   -webkit-transition: all .3s;
   font-size: 16px;
   color: #f8f8f8;

}

.top-nav-bar>ul>li>.sub-nav { 

   position: absolute;
   height: 102px;
   width: 100%;
   left: 0;
   z-index: 2;
   right: 0;
   background: #f9f9fa;

}

.sub-nav>ul { 

   width: 914px;
   margin: 0 auto;
   display: flex;
   /* padding: 0 35px; */
   box-sizing: border-box;
   align-items: center;
   /*justify-content: space-between;*/
   justify-content: space-evenly;

}

.sub-nav>ul>li { 

   position: relative;
   height: 102px;
   line-height: 102px;
   transition: all .3s;
   -webkit-transition: all .3s;
   font-size: 16px;
   color: #3a3a3a;

}

.sub-nav>ul>li>a:active, .sub-nav>ul>li:active .sub-nav>ul>li>a:visited, .sub-nav>ul>li:visited, .sub-nav>ul>li>a:hover, .sub-nav>ul>li:hover, .sub-nav>ul>li>a:focus, .sub-nav>ul>li:focus, .sub-nav>ul>li>a:focus-visible, .sub-nav>ul>li:focus-visible { 

   color: #9d9d9d;
   display: inline-block;

}

.sub-nav>ul>.current-sub-nav>a { 

   color: #9d9d9d;
   display: inline-block;

}

.sub-nav>ul>li:active::after, .sub-nav>ul>li:visited::after, .sub-nav>ul>li:hover::after, .sub-nav>ul>li:focus::after, .sub-nav>ul>li:focus-visible::after, .sub-nav>ul>.current-sub-nav::after { 

   content: ;
   width: 100%;
   display: block;
   height: 4px;
   background-color: #3161b5;
   bottom: 0;
   position: absolute;

}

.top-nav-bar>ul>li>.sub-nav { 

   display: none;

}

.top-nav-bar>ul>li.active, .top-nav-bar>ul>li:hover { 

   color: #36416d;

}

.top-nav-bar>ul>li.active>.sub-nav, .top-nav-bar>ul>li:hover>.sub-nav { 

   display: block;

} /*解决前面有子菜单的hover上去被后面的子菜单遮盖*/ .top-nav-bar>ul>li:hover>.sub-nav { 

   z-index: 99;

} /**导航相关的 end*/

/**首页相关 start*/ .home-content { 

   background: #fff;
   width: 1366px;
   margin: 0 auto;
   padding-bottom: 43px;
   box-sizing: border-box;

}

.home-content>.top-banner { 

   width: 100%;
   /* height: 731px; */
   height: auto;
   margin-bottom: 41px;
   position: relative;

}

.home-content>.group-photo { 

   width: 100%;
   height: 769px;
   margin-bottom: 41px;
   position: relative;

}

.home-content>.top-banner>img, .home-content>.group-photo img { 

   width: 100%;
   /* height: 100%; */
   height: auto;
   display: block;

}

.home-content>.top-banner>span { 

   position: absolute;
   z-index: 2;
   font-size: 88px;
   color: #fff;
   left: 120px;
   bottom: 100px;

}

.home-content>.team-tips { 

   width: 100%;
   height: 711px;
   margin-bottom: 41px;
   padding: 90px 95px;
   box-sizing: border-box;
   background: #474747;

}

.home-content>.team-tips>.team-tips-title { 

   margin-bottom: 82px;
   font-family: SourceHanSansCN-Medium;
   font-size: 36px !important;
   line-height: 1;
   letter-spacing: 0px;
   color: #f3f3f3;

}

.home-content>.team-tips>.team-tips-wrap { 

   width: 100%;
   display: flex;
   /* height: 418px; */
   align-items: center;
   justify-content: space-between;

}

.home-content>.team-tips>.team-tips-wrap>.team-tips-content { 

   flex: 1;
   font-size: 24px !important;
   line-height: 36px;
   letter-spacing: 0px;
   color: #f3f3f3;
   text-align: justify;

}

.home-content>.team-tips>.team-tips-wrap>.team-tips-img { 

   display: inline-block;
   width: 418px;
   height: 418px;
   margin-left: 33px;

} /**首页相关end*/

/**子页面相关start*/ .sub-content { 

   background: #fff;
   max-width: 914px;
   margin: 0 auto;
   margin-top: 102px;
   padding-bottom: 45px;
   box-sizing: border-box;

}

.no-margin-top { 

   margin-top: 0;

}

.sub-content>.sub-title { 

   padding-top: 50px;
   padding-bottom: 50px;
   font-family: SourceHanSansCN-Bold;
   font-size: 36px;
   font-weight: normal;
   letter-spacing: 0px;
   color: #242424;
   text-align: center;
   box-sizing: border-box;

}

.sub-content>.article-title { 

   font-family: SourceHanSansCN-Medium;
   font-size: 24px;
   margin-bottom: 16px;
   letter-spacing: 0px;
   color: #3161b5;

}

.sub-content>.article-content { 

   font-family: SourceHanSansCN-Medium;
   font-size: 16px;
   letter-spacing: 0px;
   color: #4c4c4c;
   text-align: justify;
   margin-bottom: 16px;
   line-height: 24px;
   word-break: break-all;

}

.sub-content>.black-font { 

   color: #242424;
   font-family: SourceHanSansCN-Bold;

}

.sub-content>.img-wrap { 

   width: 100%;
   text-align: center;
   margin-top: 11px;
   margin-bottom: 16px;

}

.sub-content>.img-wrap>img { 

   display: inline-block;
   max-width: 100%;
   /* width: 814px;
   height: 459px; */

}

.sub-content>.img-wrap>span { 

   display: block;
   text-align: center;
   font-family: SourceHanSansCN-Medium;
   font-size: 16px;
   line-height: 16px;
   letter-spacing: 0px;
   margin-top: 18px;
   color: #aeaeae;

}

.sub-content .sub-pdf { 

   width: 100%;
   height: 800px;

}

.sub-content>.section-wrap { 

   margin-bottom: 4px;
   width: 100%;

} .sub-content>.section-wrap>.item-title{ 

   width: 100%;
   height: 62px;
   padding-left: 70px;
   box-sizing: border-box;
   font-family: SourceHanSansCN-Medium;

font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 62px; letter-spacing: 0px; color: #ffffff;

} .sub-content>.section-wrap>.item-title:hover{ 

   opacity: .7;

} .sub-content>.section-wrap>.item-content{ 

   width: 100%;
   height: auto;
   display: none;

} .sub-content>.section-wrap>.item-content>img{ 

   width: 100%;
   height: auto;

} .sub-content>.section-wrap>.item-title.in + .item-content{ 

   display: none;

} .sub-content>.section-wrap>.item-title.out + .item-content{ 

   display: block;

} .sub-content>.section-wrap>.item-title.in{ 

   background-color: #1d1d1f;

} .sub-content>.section-wrap>.item-title.out{ 

   background-color: #585858;

} .sub-content>.sub-content-members-wrap{ 

   width: 100%;
   height: auto;

} .sub-content>.sub-content-members-wrap>.member-item{ 

   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   margin-bottom: 60px;

} .sub-content>.sub-content-members-wrap>.member-item>.member-head{ 

   display: flex;
   align-items: center;
   flex-direction: column;
   width: 247px;
   padding-right: 40px;
   box-sizing: border-box;

} .sub-content>.sub-content-members-wrap>.member-item>.member-head>img{ 

   width: 207px;
   height: 207px;
   border-radius: 100%;
   margin-bottom: 13px;
   display: inline-block;

} .sub-content>.sub-content-members-wrap>.member-item>.member-head>span{ 

   display: block;

font-family: SourceHanSansCN-Medium; font-size: 20px; 

   text-align: center;

line-height: 20px; letter-spacing: 0px; color: #464646; } .sub-content>.sub-content-members-wrap>.member-item>.member-info{ 

   flex: 1;
   font-family: ArialMT;

font-size: 19px; line-height: 22px; letter-spacing: 0px; color: #464646; 

   text-align: justify;

} .no-margin { 

   margin: 0;

}

  1. sub-table {
   width: 100%;
   border: 1px solid #464646;
   box-sizing: border-box;

}

  1. sub-table tr {
   font-size: 18px;

}

  1. sub-table tr th {
   height: 100px;
   background: #d0e1f3;
   color: #464646;
   padding: 10px;
   vertical-align: middle;
   border: 1px solid #464646;
   border-collapse: collapse;

}

  1. sub-table tr td {
   height: 70px;
   padding: 10px;
   text-align: center;
   color: #464646;
   vertical-align: middle;
   border: 1px solid #464646;
   border-collapse: collapse;

}

  1. sub-table tr td a{ 
   color:#1f72cc;

} /**子页面相关end**/

/*底部样式start*/ .footer { 

   width: 100%;
   height: 195px;
   background: #f5f5f7;

}

.footer>.footer-wrap { 

   width: 1366px;
   margin: 0 auto;
   height: 100%;
   padding-top: 63px;
   box-sizing: border-box;

}

.footer p { 

   font-family: SourceHanSansCN-Medium;
   font-size: 14px;
   font-weight: normal;
   font-stretch: normal;
   line-height: 15px;
   letter-spacing: 0px;
   color: #666666;

}

.margin-bottom-14 { 

   margin-bottom: 8px;

}

.line { 

   margin: 14px 0;

}

/**底部样式end*/