Difference between revisions of "Template:Shanghai City United/Main CSS"

Revision as of 15:29, 11 October 2021 (view source) Htr0214 (Talk | contribs) ← Older edit		Latest revision as of 13:04, 19 October 2021 (view source) Htr0214 (Talk | contribs)
Line 30:		Line 30:
	}		}
−	#top_menu_14 {
−	display: none;
−	}
	#top_menu_under {		#top_menu_under {

---

Latest revision as of 13:04, 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;
   background: #b9c6d1 !important;
   margin-top: -5px;

} body {

   background: #b9c6d1 !important;
   height: auto !important;

} /**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: 133px;

}

.top-nav-bar {

   height: 133px;
   width: 100%;
   padding: 0 11% 0 9%; 
   box-sizing: border-box;
   background-color: #fff;

}

.top-nav-bar a {

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

}

.top-nav-bar>ul {

   position: relative;
   width: 100%;
   display: flex;
   background: url('https://static.igem.org/mediawiki/2021/9/94/T--Shanghai_City_United--logo.png') no-repeat left center;
   background-size: 134px 133px;
   justify-content: flex-end;
   align-items: center;

}

.top-nav-bar>ul>li {

   margin-left: 2%;
   height: 133px;
   position: relative;
   line-height: 133px;
   transition: all .3s;
   -webkit-transition: all .3s;
   padding: 0 12px;
   box-sizing: border-box;
   font-size: 17px;
   color: #504f4f;
   z-index: 1;

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

   color: #feef0c;
   background: #b9c6d1;

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

   padding: 31px 25px 24px 25px;
   position: absolute;
   z-index: 1;
   left: -60px;
   top: 100%;
   background: #7d7d7d;
   color: #fff;
   white-space: nowrap;
   box-sizing: border-box;

} .sub-nav>ul {

   width: 100%;
   display: flex;
   box-sizing: border-box;
   align-items: center;
   flex-direction: column;

}

.sub-nav>ul>li {

   position: relative;
   width: 100%;
   height: 37px;
   display: inline-block;
   line-height: 37px;
   margin-bottom: 10px;
   transition: all .3s;
   -webkit-transition: all .3s;
   font-size: 17px;
   text-align: left !important;
   color: #fff;

}

.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: #fff;
   display: inline-block;

}

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

   color: #fff;
   display: inline-block;

}

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

   content: ;
   width: 100%;
   display: block;
   height: 3px;
   background-color: #fcc32d;
   bottom: 0;
   position: relative;

}

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

   display: none;

} /* .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-top-banner {

   width: 100%;
   height: auto;
   margin-top: 3px;

} .home-top-banner img {

   width: 100%;
   height: auto;

} .home-content {

   background: #b9c6d1;
   width: 75.52%;
   margin: 0 auto;
   box-sizing: border-box;

}

.home-content>.group-photo {

   width: 100%;
   position: relative;
   /* height: 924px; */
   margin: 20px 0;
   display: block;
   box-sizing: border-box;

}

.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: 593px; */
   padding: 67px 106px 92px 113px;
   box-sizing: border-box;
   background: #fff;

}

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

   font-family: Arial-BoldMT !important;

font-size: 48px !important; line-height: 48px; letter-spacing: 1px; color: #3c3c3c;

   margin-bottom: 79px;
   position: relative;
   text-align: center !important;

} .home-content>.team-tips>.team-tips-title:after {

   content: "";
   width: 38px;

height: 7px; background-color: #c74751;

   position: absolute;
   bottom: -20px;
   left: calc(50% - 19px);

}

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

   text-align: justify;
   font-family: TimesNewRomanPSMT;

font-size: 28px; line-height: 36px; letter-spacing: 1px; color: #3c3c3c;

   margin-bottom: 127px;

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

   width: 100%;
   height: auto;
   padding: 0 23px 0 17px;
   box-sizing: border-box;

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

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

} /**首页相关end*/

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

   background: #fff;
   width: 75.52%;
   margin: 0 auto;
   padding: 93px 99px 167px 109px;
   box-sizing: border-box;

}

.no-margin-top {

   margin-top: 0;

}

.sub-content>.sub-title {

   font-family: TimesNewRomanPS-BoldMT;

font-size: 45px; line-height: 45px; letter-spacing: 1px; color: #3c3c3c;

   margin-bottom: 149px;
   position: relative;
   text-align: center;

} .sub-content>.sub-title:after {

   content: "";
   width: 38px;

height: 7px; background-color: #c74751;

   position: absolute;
   bottom: -20px;
   left: calc(50% - 19px);

}

.sub-content>.article-title {

   /* font-family: SourceHanSansCN-Medium; */
   font-size: 36px;
   margin-bottom: 39px;
   letter-spacing: 0px;
   /* color: #3161b5; */
   color: #3c3c3c;
   font-family: TimesNewRomanPS-BoldMT;

}

.sub-content>.article-content {

   font-family: TimesNewRomanPSMT;

font-size: 24px;

   letter-spacing: 0px;
   color: #3c3c3c;
   text-align: justify;
   margin-bottom: 16px;
   line-height: 36px;
   word-break: break-all;

} .margin-bottom-45 {

   margin-bottom: 45px !important;

}

.sub-content>.img-wrap {

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

}

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

} .member-title {

   font-family: SourceHanSansCN-Bold !important;

font-size: 45px !important;

   line-height: 50px;
   margin-bottom: 40px !important;

} .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;

} .sub-banner {

   width: 100%;
   position: relative;

} .sub-banner img {

   display: block;
   width: 100%;

} .sub-banner span {

   display: inline-block;
   max-width: 100%;
   position: absolute;
   left: 233px;
   bottom: 104px;
   font-family: SourceHanSansCN-Bold;

font-size: 60px; font-weight: normal; color: #ffffff; }

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: 251px;

}

.footer>.footer-wrap {

   width: 100%;
   height: 100%;
   padding-top: 66px;
   text-align: center;
   box-sizing: border-box;

} .footer .footer-contact { font-family: SourceHanSansCN-Regular; font-size: 24px;

   line-height: 24px;

color: #090909;

   margin-bottom: 15px;

} .footer p {

   font-family: SourceHanSansCN-Regular !important;
   font-size: 24px !important;
   line-height: 24px;
   letter-spacing: 0px;
   color: #090909;
   text-align: center !important;

}

.margin-bottom-10 {

   margin-bottom: 10px;

}

.margin-bottom-20 {

   margin-bottom: 20px;

} .line {

   margin: 14px 0;

}

/**底部样式end*/