Template:Fudan/css.css
/*****
- Font Styles
- /
- FudanBody .slides h3{
color: #ff8c28; font: 40px Futura;
}
- FudanBody .slides h5{
color: #ff7617; font: 20px Futura;
}
- FudanBody nav ul a{
color: #60A9C2;
}
- FudanBody .dropdown-content li a{
color: #60A9C2;
}
- FudanBody a{
text-decoration: none; outline: none; color: #60A9C2;
}
- FudanBody .floatingBtn .btn{
position: fixed; bottom: 40px; width: 50px; height: 50px; padding: 0; text-align: center; color: white; background: #60A9C2; opacity: 0.8;
}
- FudanBody .floatingBtn .btn:first-child{
right: 100px;
}
- FudanBody .floatingBtn .btn:last-child{
right: 40px;
}
- FudanBody #nav-mobile li a{
color: #000000; text-align: center;
}
- FudanBody #nav-mobile>li>a{
font-size: 16px; font-weight: 300; letter-spacing: 1px;
}
- FudanBody #nav-mobile>li>ul a{
font-size: 14px; font-weight: 200;
}
- contentBanner div.col{
color: white; padding: 0;
}
- contentBanner div.col>h1{
font-size: 40px; margin-left: 20%; text-align: left;
}
- contentBanner div.col>span{
font-size: 20px; margin-right: 20%; text-align: justify;
} @media only screen and (max-width: 991px){
#contentBanner div.col>h1{
font-size: 30px;
word-break: break-all;
}
#contentBanner div.col>span{
font-size: 17px;
}
} @media only screen and (max-width: 600px){
#contentBanner div.col>h1{
margin: 0 10%;
}
#contentBanner div.col>span{
margin: 0 10%;
}
}
- pageContent h3{
font-size: 30px; margin: 40px 0 10px 0;
}
- pageContent h4{
font-size: 24px; margin: 50px 0 0 10px;
}
- pageContent p{
font-size: 17px; margin: 15px 0 0 0; text-align: justify;
}
- pageContent #FudanFooter h3{
margin: 10px 0 10px 0;
}
- acknowledgementPhoto span{
position: absolute; bottom: 5%; z-index: 10; display: none; color: #fff; background: rgba(0,0,0,0.8); font-size: 20px;
}
/*****
- Structure Styles
- /
- content{
z-index: auto; /* #slide-out is not on the top of all elements when using default z-index number(2) */
} div{
box-sizing: content-box; /* Solve the conflict between Materialize(inherit) and igem.org default setting */
}
- FudanBody div{
box-sizing: border-box;
}
- top_menu_14{
position: absolute; /* Override the default fixed login bar */ z-index: 996;
}
- globalWrapper{ /* Solve the overflow of login */
overflow: hidden; padding: 0;
}
- FudanWrapper {
position: relative; width: 100%;
}
- FudanBody {
position: relative; width: 100%; overflow: hidden;
}
- FudanBody ul{
margin: 0; line-height: inherit;
}
- FudanBody img{
vertical-align: inherit;
}
- FudanBody .fa{
height: inherit; line-height: inherit; font-size: inherit;
}
- FudanBody .container{
width: 90%;
} @media only screen and (max-width: 600px) {
#emptyBar{
height: 56px;
}
} @media only screen and (min-width: 601px) {
#emptyBar{
height: 75px;
}
}
- topNav{
position: fixed; z-index: 996;
}
- nav-mobile>li>a{
cursor:default; width: 135px;
}
- FudanBody #nav-mobile>li:last-child>a{
width: 50px; color: #888;
}
- nav-mobile li ul{
top: 1px;
}
- teamLogo{
padding: 0 40px 0 40px;
}
- teamLogo img{
height: 100%;
}
- teamLogo {
margin: 5px 0; height: 46px;
} @media only screen and (min-width: 601px) {
#teamLogo {
margin: 5px 0;
height: 65px;
}
}
- navList{
line-height: inherit;
}
- navList.sidenav-trigger {
margin: 0 10px;
}
- FudanBody .slider .indicators{
bottom: 60px; z-index: 100;
}
- homepageDivider{
width: 100%; height: 20px; position: relative; top: -40px;
}
- homepageContent{
position: relative; top: -20px;
}
- contentBanner{
position: relative; min-height: 300px; background: #60A9C2;
}
- contentBanner div.row{
height: 100%;
}
- contentBanner div.col{
height: 100%;
} @media only screen and (max-width: 600px){
#contentBanner div.col:first-child{
height: 40%;
}
#contentBanner div.col:last-child{
height: 60%;
}
} .contactUS li{
display: block; margin: 5px 0; word-break: break-all;
}
- pageContentNav,
- FudanBody .sidenav{
overflow-y: auto;
}
- FudanBody .sidenav{
height: auto; bottom: 0;
} ul#pageContentNav{
background-color: #fff; border: 0; position: fixed; width: 150px; right: 10%;
}
- pageContentNav li,
- FudanBody .sidenav li{
float: none; line-height: 30px; color: #000;
}
- pageContentNav li div.description,
- FudanBody .sidenav li div.description{
line-height: 24px;
}
- FudanBody #nav-mobile li >a.thisPageLink,
- pageContentNav li > a.thisPageLink,
- FudanBody .sidenav li > a.thisPageLink {
background-color: #f2c825;
}
- pageContentNav li.onThisPageNav.active,
- FudanBody .sidenav li.onThisPageNav.active {
background-color: rgba(96, 169, 194, 0.05);
}
- pageContentNav li > a,
- FudanBody .sidenav li > a{
color: #000; display: block; font-size: 14px; font-weight: 500; height: 30px; line-height: 30px; padding: 0 10px;
}
- pageContentNav li.onThisPageNav > a:hover,
- FudanBody .sidenav li.onThisPageNav > a:hover{
background-color: rgba(96, 169, 194, 0.05); border-left: solid #60A9C2 2px; transition-duration: 0ms;
}
- pageContentNav li.onThisPageNav > a.active,
- FudanBody .sidenav li.onThisPageNav > a.active{
border-left: solid #60A9C2 4px; background-color: rgba(96, 169, 194, 0.05);
} @media only screen and (min-width: 992px) {
#pageContent main{
margin: 0 200px 0 0;
}
}
- pageContent{
display: flex; min-height: 100vh; flex-direction: column;
}
- FudanBody main{
flex: 1 0 auto;
}
- FudanBody .sidenavBanner{
position: relative; padding: 32px 32px 0; margin-bottom: 8px;
}
- FudanBody .sidenavBanner > a{
height: auto; padding: 0; display: block; line-height: 48px;
}
- FudanBody .sidenavBanner .background{
overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
- slide-out{
overflow-y: scroll;
}
- slide-out .background{
background: #60A9C2;
}
- figDescription{
position: fixed; top: 64px; width: 100%; height: 600px; z-index: 900; display: none; background: white;
}
- figDescription .card{
position: fixed; top: 450px; left: 50px; width: 30%; border-radius: 10px; overflow: hidden; opacity: 0.95;
}
- FudanBody .section{
margin-top: 50px;
}
- FudanBody .section:first-child{
margin-top: 70px;
}
- FudanBody .section:last-child{
margin-bottom: 150px;
}
- FudanBody #abstractContent{
width: 300px; height: 300px; position: fixed; background: #fff; left:50%; top:50%; margin: -150px 0 0 -150px; overflow-y: scroll; border-radius: 10px; padding: 30px 0 20px 0; display: none; z-index: 998;
}
- FudanBody #abstractContent > a{
height: 30px; width: 30px; position: absolute; right:10px; top:10px;
} @media only screen and (min-width: 601px) and (min-height: 501px) {
#FudanBody #abstractContent{
width: 700px;
height: 500px;
margin: -250px 0 0 -350px;
}
#FudanBody #abstractContent > a{
font-size: 40px;
line-height: 40px;
position: absolute;
right:20px;
top:20px;
}
}
- acknowledgementPhoto{
width: 100%; position: relative;
}
- acknowledgementPhoto > div{
width: 100%; position: relative; vertical-align: top;
}
- acknowledgementPhoto div.row >div{
position: relative; padding: 0 10px; margin: 10px 0; overflow: hidden; text-align: center; bottom: 0;
}
- acknowledgementPhoto img{
width: 100%;
}
- FudanBody .z-depth-0_5{
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 -1px rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.22); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 -1px rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.22);
}
/*****
- print media
- /
@media print{
#topNav{display: none}
#pageContentNav{display: none}
#FudanFooter{display: none}
#pageContent{margin: 100px}
#top_menu_14{display: none}
#emptyBar{display: none}
#FudanBody .fixed-action-btn{display: none}
#FudanBody .switch{display: none}
}