Difference between revisions of "Template:CCU Taiwan/css"

(Undo revision 495767 by Herboku (talk))
 
(95 intermediate revisions by 2 users not shown)
Line 72: Line 72:
 
}
 
}
  
 +
ul {
 +
    list-style-image: url('https://static.igem.org/mediawiki/2018/c/ce/T--CCU_Taiwan--CCUbullet.png');
 +
}
  
 
.photointerlab {
 
.photointerlab {
Line 85: Line 88:
 
.phototeam {
 
.phototeam {
 
     background-image: url("https://static.igem.org/mediawiki/2018/5/50/T--CCU_Taiwan--CCUteamphoto.jpg");
 
     background-image: url("https://static.igem.org/mediawiki/2018/5/50/T--CCU_Taiwan--CCUteamphoto.jpg");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoachievements {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/d/dc/T--CCU_Taiwan--CCUphotoachievements.jpg");
 
     min-height: 470px;  
 
     min-height: 470px;  
 
     background-attachment: fixed;
 
     background-attachment: fixed;
Line 100: Line 113:
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
 
     background-size: 110% auto;
 
     background-size: 110% auto;
−
     z-index: 70;
+
     z-index: 70;  
 
}
 
}
  
Line 307: Line 320:
 
.photoParts {
 
.photoParts {
 
     background-image: url("https://static.igem.org/mediawiki/2018/6/69/T--CCU_Taiwan--CCUPartsphoto.png");
 
     background-image: url("https://static.igem.org/mediawiki/2018/6/69/T--CCU_Taiwan--CCUPartsphoto.png");
 +
    min-height: 470px;
 +
    background-attachment: fixed;
 +
    background-position: top;
 +
    background-repeat: no-repeat;
 +
    background-size: 110% auto;
 +
    z-index: 70;
 +
}
 +
 +
.photoExperiments {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/7/74/T--CCU_Taiwan--CCUExperimentsphoto.jpg");
 
     min-height: 470px;  
 
     min-height: 470px;  
 
     background-attachment: fixed;
 
     background-attachment: fixed;
Line 323: Line 346:
 
text-decoration-color:#55c97e;
 
text-decoration-color:#55c97e;
 
}
 
}
 +
 +
  
 
.backgroundProject {
 
.backgroundProject {
Line 371: Line 396:
 
text-decoration-color:#d1ad7e;
 
text-decoration-color:#d1ad7e;
 
}
 
}
 +
  
 
header{
 
header{
Line 402: Line 428:
 
left:4vw;
 
left:4vw;
 
width: 13.5vw;
 
width: 13.5vw;
−
height: 5.5vh;
+
height: 5.8vh;
 
text-align:center;
 
text-align:center;
 
margin-left:0vw;
 
margin-left:0vw;
Line 431: Line 457:
 
}
 
}
  
 +
#judge {
 +
margin-left:30vw;
 +
list-style-image:url("https://2018.igem.org/File:T--CCU_Taiwan--none.png");
 +
}
  
 
.sub {
 
.sub {
Line 447: Line 477:
  
 
#sub_home{
 
#sub_home{
−
height:32.5vh;
+
height:40.5vh;
 
         background:#55c97e;
 
         background:#55c97e;
 
}
 
}
Line 1,083: Line 1,113:
 
#Demonstrate1 {
 
#Demonstrate1 {
 
   width: calc(60% + 20px);
 
   width: calc(60% + 20px);
−
   margin-left: 28vw!important;
+
   margin-left: 25vw!important;
 +
}
 +
#Demonstrate1-2 {
 +
  width: 70%;
 +
  margin-left: 23vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-3 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-4 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Demonstrate1-5 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 
}
 
}
  
Line 1,191: Line 1,241:
 
.structuregraph .transform {
 
.structuregraph .transform {
 
     position: absolute;
 
     position: absolute;
−
     top: 10%;
+
     top: 5%;
 
     left: 20px;
 
     left: 20px;
 
     padding: 20px;
 
     padding: 20px;
Line 1,199: Line 1,249:
 
.structuregraph .Enzyme {
 
.structuregraph .Enzyme {
 
     position: absolute;
 
     position: absolute;
−
     top: 47%;
+
     top: 40%;  
−
     left: 30px;
+
     left: 75px;
 
     padding: 20px;
 
     padding: 20px;
 
     width: 80%;
 
     width: 80%;
Line 1,208: Line 1,258:
 
     position: absolute;
 
     position: absolute;
 
     top: 62%;
 
     top: 62%;
−
     padding-left: 180px;
+
     padding-left: 165px;
 
     width: 50%;
 
     width: 50%;
  
Line 1,215: Line 1,265:
 
.structuregraph .HP {
 
.structuregraph .HP {
 
     position: absolute;
 
     position: absolute;
−
     top: 84%;
+
     top: 82%;
−
     left: 35px;
+
     left: 75px;
 
     padding: 20px;
 
     padding: 20px;
 
     width: 50%;
 
     width: 50%;
Line 1,257: Line 1,307:
 
.panel {margin-left:20vw; padding:10px;padding-left:3vw;padding-right:3vw;background:#FFFACD;border:solid 1px #c3c3c3;display:none;font-family:'Arial'; width:60vw;}
 
.panel {margin-left:20vw; padding:10px;padding-left:3vw;padding-right:3vw;background:#FFFACD;border:solid 1px #c3c3c3;display:none;font-family:'Arial'; width:60vw;}
  
−
#judge {
 
−
  margin-left:30vw;
 
−
}
 
  
 
.st {
 
.st {
Line 1,381: Line 1,428:
  
 
#Analysis3 {
 
#Analysis3 {
−
   width: 27%;
+
   width: 28%;
 
   margin-left: 10px;
 
   margin-left: 10px;
−
   margin-left: 20vw;
+
  display: inline-block;
 +
}
 +
 
 +
#Analysis4 {
 +
  width: 50%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis5 {
 +
  width: 38%;
 +
  margin-left: 16vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis6 {
 +
  width: 38%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
 
 +
#Analysis7 {
 +
  width: 38%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
#Analysis8 {
 +
  width: 50%;
 +
   margin-left: 30vw;
 
   display: inline-block;
 
   display: inline-block;
 
}
 
}
Line 1,707: Line 1,782:
 
   padding: 16px!important;;
 
   padding: 16px!important;;
 
   margin-top: -22px!important;;
 
   margin-top: -22px!important;;
−
   color: #d1c17e;
+
   color: #3BE7AA;
 
   font-weight: bold;
 
   font-weight: bold;
 
   font-size: 60px;
 
   font-size: 60px;
Line 1,887: Line 1,962:
 
   margin-left: 25vw;
 
   margin-left: 25vw;
 
   display: inline-block;
 
   display: inline-block;
 +
}
 +
#Composite1-2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
  vertical-align: top;
 
}
 
}
 
#Composite2 {
 
#Composite2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite2-2 {
 
   width: 50%;
 
   width: 50%;
 
   margin-left: 25vw;
 
   margin-left: 25vw;
Line 1,894: Line 1,980:
 
}
 
}
 
#Composite3 {
 
#Composite3 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite3-2 {
 +
  width: 50%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#Composite3-3 {
 
   width: 50%;
 
   width: 50%;
 
   margin-left: 25vw;
 
   margin-left: 25vw;
Line 1,963: Line 2,059:
 
}
 
}
 
#Demonstrate8 {
 
#Demonstrate8 {
−
   width: 50%;
+
   width: 70%;
−
   margin-left: 20vw;
+
   margin-left: 22vw;
 
   display: inline-block;
 
   display: inline-block;
 
   vertical-align: top;
 
   vertical-align: top;
Line 1,976: Line 2,072:
 
}
 
}
 
.polaroid #production {
 
.polaroid #production {
−
   width: 60%;
+
   width: 100%;
 
   display: inline-block;
 
   display: inline-block;
 
   vertical-align: middle;
 
   vertical-align: middle;
Line 2,008: Line 2,104:
 
   display: inline-block;
 
   display: inline-block;
 
   vertical-align: top;
 
   vertical-align: top;
 +
}
 +
#ptc1 {
 +
  width: 60%;
 +
}
 +
#ptc2 {
 +
  width: 60%;
 +
}
 +
#ptc3 {
 +
  width: 60%;
 +
}
 +
#ptc4 {
 +
  width: 60%;
 +
}
 +
#ptc5 {
 +
  width: 60%;
 +
}
 +
#ptc5 {
 +
  width: 50%;
 +
}
 +
#ptc6 {
 +
  width: 40%;
 +
}
 +
#ptc7 {
 +
  width: 60%;
 
}
 
}
  
−
#wrapper {
+
#cb2 {
−
    position: absolute;
+
  width: 45%;
−
    background-color: #FFF;
+
  margin-left: 30vw;
−
    left: 50%;
+
}
−
    top: 50%;
+
#Public0-1  {
−
    width: 600px;
+
  width: 15%;
−
    height: 400px;
+
  margin-left: 20vw;
−
    padding: 24px;
+
}
−
    overflow: hidden;
+
#Public0-2  {
−
    border-radius: 1.5px;
+
  width: 15%;
−
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
+
  margin-left: 10px;
−
                0 3px 6px rgba(0, 0, 0, .23);
+
−
    -webkit-transform: translate(-50%, -50%);
+
−
    transform: translate(-50%, -50%);
+
 
}
 
}
  
−
.water-drop {
+
#Public0-3  {
−
    visibility: hidden;
+
  width: 15%;
−
    position: absolute;
+
  margin-left: 10px;
−
    z-index: 30;
+
−
    margin-left: 6px;
+
−
    background: url(../images/waterdrop.svg) 0 0 no-repeat;
+
−
    width: 42px;
+
−
    height: 58px;
+
−
    background-size: 42px 58px;
+
 
}
 
}
−
.button-floating-clicked .water-drop {
+
#Public0-4  {
−
    -webkit-animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
+
  width: 15%;
−
    animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
+
  margin-left: 20vw;
 
}
 
}
−
@-webkit-keyframes waterDrop {
+
#Public0-5  {
−
    0% {
+
  width: 15%;
−
        visibility: visible;
+
  margin-left: 10px;
−
    }
+
−
    75% {
+
−
        opacity: .6;
+
−
    }
+
−
    87.5% {
+
−
        opacity: .4;
+
−
    }
+
−
    100% {
+
−
        -webkit-transform: translateY(294px);
+
−
        opacity: 0;
+
−
    }
+
 
}
 
}
−
@keyframes waterDrop {
+
 
−
    0% {
+
#Public0-6 {
−
        visibility: visible;
+
  width: 15%;
−
    }
+
  margin-left: 10px;
−
    75% {
+
−
        opacity: .6;
+
−
    }
+
−
    87.5% {
+
−
        opacity: .4;
+
−
    }
+
−
    100% {
+
−
        transform: translateY(294px);
+
−
        opacity: 0;
+
−
    }
+
 
}
 
}
  
−
.button {
+
#res1 {
−
    position: relative;
+
  width: 38%;
−
    border-radius: 50%;
+
  margin-left: 17vw;
−
    margin-bottom: 18px;
+
  display: inline-block;
 
}
 
}
−
.button:last-child {
+
 
−
    margin-bottom: 0;
+
#res2 {
 +
  width: 35%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#res3 {
 +
  width: 40%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 
}
 
}
  
−
.button-floating::before {
+
#res4 {
−
    content: "+";
+
  width: 37%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 
}
 
}
−
.button-floating, .button-floating-shadow {
+
 
−
    width: 54px;
+
#res5 {
−
    height: 54px;
+
  width: 37%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 
}
 
}
−
.button-floating {
+
#res6 {
−
    z-index: 40;
+
  width: 37%;
−
    cursor: pointer;
+
  margin-left: 17vw;
−
    background-color: #2196F3;
+
  display: inline-block;
−
    color: #FFF;
+
−
    font-size: 30px;
+
−
    text-align: center;
+
−
    line-height: 54px;
+
−
    -webkit-transition-duration: .3s;
+
−
    transition-duration: .3s;
+
 
}
 
}
−
.button-floating-clicked .button-floating {
+
 
−
    -webkit-transform: rotate(225deg);
+
#res7 {
−
    transform: rotate(225deg);
+
  width: 37%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 
}
 
}
  
 +
#res8 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#res9 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#res10 {
 +
  width: 60%;
 +
  margin-left: 25vw;
 +
  display: inline-block;
 +
}
 +
#EX1 {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
  
 +
#EX2 {
 +
  width: 20%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 +
 +
#EX3 {
 +
  width: 22%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX4 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX5 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX6 {
 +
  width: 40%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX7 {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX8 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX9 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX10 {
 +
  width: 35%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX11 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX12 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX13 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX14 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX15 {
 +
  width: 25%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
#EX16 {
 +
  width: 30%;
 +
  margin-left: 20vw;
 +
  display: inline-block;
 +
}
 +
 +
#ihp1 {
 +
  width: 60%;
 +
  margin-left: 27vw;
 +
  display: inline-block;
 +
}
 +
 +
#ihp2 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 +
#ihp3 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 +
#ihp4 {
 +
  width: 60%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 +
#goldmedal1 {
 +
  vertical-align: middle;
 +
text-align:center;
 +
  margin-left: 20vw;
 +
}
 +
 +
iframe {
 +
  margin-left: 10vw;
 +
}
 +
 +
.slideshow-container1 {
 +
  max-width: 1500px;
 +
  position: relative;
 +
  margin: auto;
 +
  border:1px solid ;
 +
 
 +
}
 +
 +
 +
.special {
 +
  font-size: 36px!important;
 +
  color: #2ED583!important;
 +
        font-family: 'CCUfontsBold', Arial, sans-serif!important;
 +
      text-decoration: none!important;
 +
text-align:center;!important;
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 02:38, 6 December 2018