Difference between revisions of "Template:UCSC-Styles"

Line 2: Line 2:
  
 
<style>
 
<style>
 +
 +
/* This shit has been determined to be important */
 +
 +
.face {
 +
    white-space: normal;
 +
    width: 220px;
 +
    height: 280px;
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: auto 100%;
 +
    position: relative;
 +
    display: inline-block;
 +
    margin-top: 12px;
 +
    margin-bottom: 12px;
 +
}
 +
.face .profile,
 +
.face .blur {
 +
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    overflow: hidden;
 +
    top: 0;
 +
    left: 0
 +
}
 +
.face .profile {
 +
    opacity: 0;
 +
    padding: 0px;
 +
    color: #fff
 +
}
 +
.face .profile h3 {
 +
    text-align: center;
 +
    margin: 0px 0
 +
}
 +
.face .profile p {
 +
    line-height: normal
 +
}
 +
.face:hover .profile, .profilehovered {
 +
    opacity: 1;
 +
    background-color: rgba(0, 0, 0, 0.65);
 +
    cursor: pointer;
 +
}
 +
.face:hover .blur, .facehovered {
 +
    background: inherit;
 +
    filter: blur(10px);
 +
    -webkit-filter: blur(10px)
 +
}
 +
 +
 +
 +
 +
 +
 +
  
 
/* This styling below is for the UCSC iGEM 2017 Homepage */
 
/* This styling below is for the UCSC iGEM 2017 Homepage */
Line 224: Line 277:
 
     text-align: center;
 
     text-align: center;
 
}
 
}
−
.face {
+
 
−
    white-space: normal;
+
−
    width: 220px;
+
−
    height: 280px;
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: auto 100%;
+
−
    position: relative;
+
−
    display: inline-block;
+
−
    margin-top: 12px;
+
−
    margin-bottom: 12px;
+
−
}
+
−
.face .profile,
+
−
.face .blur {
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    position: absolute;
+
−
    overflow: hidden;
+
−
    top: 0;
+
−
    left: 0
+
−
}
+
−
.face .profile {
+
−
    opacity: 0;
+
−
    padding: 0px;
+
−
    color: #fff
+
−
}
+
−
.face .profile h3 {
+
−
    text-align: center;
+
−
    margin: 0px 0
+
−
}
+
−
.face .profile p {
+
−
    line-height: normal
+
−
}
+
−
.face:hover .profile, .profilehovered {
+
−
    opacity: 1;
+
−
    background-color: rgba(0, 0, 0, 0.65);
+
−
    cursor: pointer;
+
−
}
+
−
.face:hover .blur, .facehovered {
+
−
    background: inherit;
+
−
    filter: blur(10px);
+
−
    -webkit-filter: blur(10px)
+
−
}
+
 
.facen {
 
.facen {
 
width: 250px;
 
width: 250px;
Line 401: Line 412:
 
   position: relative;
 
   position: relative;
 
   }
 
   }
−
  nav li a {
+
 
−
  display: block;
+
−
  color: #1A680A !important; text-decoration: none;
+
−
 
+
−
  }
+
−
  nav ul li:hover > ul {
+
−
  display: block;
+
−
  }
+
−
  /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
+
−
  .firstHeading{
+
−
  display:none;
+
−
  }
+
−
  #top-section{
+
−
  background:#48af5d; /* green */
+
−
  margin-left:0 !important;
+
−
  width:100%;
+
−
  left:0;
+
−
  }
+
−
  .c-layout-go2top {
+
−
  display: inline-block;
+
−
  position: fixed;
+
−
  bottom: 20px;
+
−
  right: 10px;
+
−
  cursor: pointer;
+
−
  }
+
−
  .c-layout-go2top > i {
+
−
  opacity: 0.5;
+
−
  filter: alpha(opacity=50);
+
−
  color: #89939e;
+
−
  font-size: 38px;
+
−
  font-weight: 300;
+
−
  }
+
−
  .c-layout-go2top:hover {
+
−
  opacity: 0.8;
+
−
  filter: alpha(opacity=80);
+
−
  }
+
−
  /* LOADING SCREEN */
+
−
  .loading{
+
−
  position:fixed;
+
−
  width:100%;
+
−
  height:100%;
+
−
  top:0;
+
−
  left:0;
+
−
  z-index:5;
+
−
  background-color:#555;
+
−
  color:#fff;
+
−
  text-align: center;
+
−
  }
+
−
  .loading p{
+
−
  position: relative;
+
−
  width:100%;
+
−
  height:10%;
+
−
  top:45%;
+
−
  left:0;
+
−
  }
+
−
  /* MENU STYLING */
+
−
  .menu{
+
−
  position:fixed;
+
−
  width:100%;
+
−
  height:56px;
+
−
  top:14px;
+
−
  background-color: #47a3da; /* blue */
+
−
  z-index:4;
+
−
  border-collapse: collapse;
+
−
  text-align:center;
+
−
  }
+
−
  .menu tr td{
+
−
  text-align: center;
+
−
  vertical-align: middle;
+
−
  font-weight: 700;
+
−
  font-size:16px;
+
−
  color:#fff;
+
−
  width:7%;
+
−
  }
+
−
  .menu tr td.menu-item:hover>a:{
+
−
  background-color:#258ecd;
+
−
  cursor: pointer;
+
−
  }
+
−
  .subselected{
+
−
  background-color: #258ecd;
+
−
  }
+
−
  /* CONTAINERS STYLING */
+
−
  .container{
+
−
  position:relative;
+
−
  width:100%;
+
−
  top:50px;
+
−
  }
+
−
  .container .subcontainer{
+
−
  position:absolute;
+
−
  width:95%;
+
−
  height:90%;
+
−
  top:5%;
+
−
  left:2.5%;
+
−
  }
+
−
  #top{
+
−
  background-size: cover;
+
−
 
+
−
  }
+
−
  /* TEAM MEMBERS CARDS STYLING */
+
−
  .team-member-container{
+
−
  position:relative;
+
−
  width:14%;
+
−
  margin-left:2.28%;
+
−
  float:left;
+
−
  }
+
−
  .team-member-container:hover{
+
−
  cursor:pointer;
+
−
  }
+
−
  .row2{
+
−
  top:4%;
+
−
  }
+
−
  .team-member-container .team-member-photo{
+
−
  position:relative;
+
−
  width:100%;
+
−
  height:85%;
+
−
  top:0;
+
−
  left:0;
+
−
  background-size: cover;
+
−
  }
+
−
  .team-member-container .team-member-footer{
+
−
  position:relative;
+
−
  width:100%;
+
−
  height:15%;
+
−
  top:0;
+
−
  left:0;
+
−
  border:none;
+
−
  border-collapse: collapse;
+
−
  background-color: #47a3da;
+
−
  color:#fff;
+
−
  text-align: center;
+
−
  vertical-align: middle;
+
−
  }
+
  
  

Revision as of 01:53, 23 August 2017