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

(Undo revision 495767 by Herboku (talk))
 
(68 intermediate revisions by 2 users not shown)
Line 88: 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 103: 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 336: Line 346:
 
text-decoration-color:#55c97e;
 
text-decoration-color:#55c97e;
 
}
 
}
 +
 +
  
 
.backgroundProject {
 
.backgroundProject {
Line 416: 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 445: Line 457:
 
}
 
}
  
 +
#judge {
 +
margin-left:30vw;
 +
list-style-image:url("https://2018.igem.org/File:T--CCU_Taiwan--none.png");
 +
}
  
 
.sub {
 
.sub {
Line 461: Line 477:
  
 
#sub_home{
 
#sub_home{
−
height:32.5vh;
+
height:40.5vh;
 
         background:#55c97e;
 
         background:#55c97e;
 
}
 
}
Line 1,225: 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,233: 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,242: Line 1,258:
 
     position: absolute;
 
     position: absolute;
 
     top: 62%;
 
     top: 62%;
−
     padding-left: 180px;
+
     padding-left: 165px;
 
     width: 50%;
 
     width: 50%;
  
Line 1,249: 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,291: 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,751: Line 1,764:
 
.mySlides {display: none}
 
.mySlides {display: none}
 
img {vertical-align: middle;}
 
img {vertical-align: middle;}
−
/* Slideshow container */
 
−
.survey1 .slideshow-container {
 
−
  max-width: 1000px;
 
−
  position: relative;
 
−
  margin: auto;
 
−
  border:1px solid ;
 
−
 
 
−
}
 
−
 
−
/* Next & previous buttons */
 
−
.survey1 .prev, .next {
 
−
  cursor: pointer;
 
−
  position: absolute;
 
−
  top: 50%;
 
−
  width: auto;
 
−
  padding: 16px!important;;
 
−
  margin-top: -22px!important;;
 
−
  color: #d1c17e;
 
−
  font-weight: bold;
 
−
  font-size: 60px;
 
−
  transition: 0.6s ease;
 
−
  border-radius: 0 3px 3px 0;
 
−
  padding-right: 0!important;
 
−
  margin-left: 0!important;
 
−
      text-decoration: none!important;
 
−
}
 
−
 
−
/* Position the "next button" to the right */
 
−
.survey1 .next {
 
−
  right: 0;
 
−
  border-radius: 3px 0 0 3px;
 
−
}
 
−
 
−
 
−
/* Caption text */
 
−
.survey1 .text {
 
−
  color: #f2f2f2;
 
−
  font-size: 15px;
 
−
  padding: 8px 12px;
 
−
  position: absolute;
 
−
  bottom: 8px;
 
−
  width: 100%;
 
−
  text-align: center;
 
−
}
 
−
 
−
/* Number text (1/3 etc) */
 
−
.survey1 .numbertext {
 
−
  color: #f2f2f2;
 
−
  font-size: 12px;
 
−
  padding: 8px 12px;
 
−
  position: absolute;
 
−
  top: 0;
 
−
}
 
−
 
−
/* The dots/bullets/indicators */
 
−
.survey1 .dot {
 
−
  cursor: pointer;
 
−
  height: 15px;
 
−
  width: 15px;
 
−
  margin: 0 2px;
 
−
  background-color: #bbb;
 
−
  border-radius: 50%;
 
−
  display: inline-block;
 
−
  transition: background-color 0.6s ease;
 
−
}
 
−
 
−
.survey1 .active, .dot:hover {
 
−
  background-color: #717171;
 
−
}
 
−
 
−
/* Fading animation */
 
−
.survey1 .fade {
 
−
  -webkit-animation-name: fade;
 
−
  -webkit-animation-duration: 1.5s;
 
−
  animation-name: fade;
 
−
  animation-duration: 1.5s;
 
−
}
 
−
 
−
@-webkit-keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
@keyframes fade {
 
−
  from {opacity: .4}
 
−
  to {opacity: 1}
 
−
}
 
−
 
−
/* On smaller screens, decrease text size */
 
−
@media only screen and (max-width: 300px) {
 
−
.survey1  .prev, .next,.text {font-size: 11px}
 
−
}
 
  
 
/* Slideshow container */
 
/* Slideshow container */
−
.survey .slideshow-container {
+
.slideshow-container {
 
   max-width: 1000px;
 
   max-width: 1000px;
 
   position: relative;
 
   position: relative;
Line 1,854: Line 1,775:
  
 
/* Next & previous buttons */
 
/* Next & previous buttons */
−
.survey .prev, .next {
+
.prev, .next {
 
   cursor: pointer;
 
   cursor: pointer;
 
   position: absolute;
 
   position: absolute;
Line 1,861: 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,872: Line 1,793:
  
 
/* Position the "next button" to the right */
 
/* Position the "next button" to the right */
−
.survey .next {
+
.next {
 
   right: 0;
 
   right: 0;
 
   border-radius: 3px 0 0 3px;
 
   border-radius: 3px 0 0 3px;
Line 1,879: Line 1,800:
  
 
/* Caption text */
 
/* Caption text */
−
.survey .text {
+
.text {
 
   color: #f2f2f2;
 
   color: #f2f2f2;
 
   font-size: 15px;
 
   font-size: 15px;
Line 1,890: Line 1,811:
  
 
/* Number text (1/3 etc) */
 
/* Number text (1/3 etc) */
−
.survey .numbertext {
+
.numbertext {
 
   color: #f2f2f2;
 
   color: #f2f2f2;
 
   font-size: 12px;
 
   font-size: 12px;
Line 1,899: Line 1,820:
  
 
/* The dots/bullets/indicators */
 
/* The dots/bullets/indicators */
−
.survey .dot {
+
.dot {
 
   cursor: pointer;
 
   cursor: pointer;
 
   height: 15px;
 
   height: 15px;
Line 1,910: Line 1,831:
 
}
 
}
  
−
.survey .active, .dot:hover {
+
.active, .dot:hover {
 
   background-color: #717171;
 
   background-color: #717171;
 
}
 
}
  
 
/* Fading animation */
 
/* Fading animation */
−
.survey .fade {
+
.fade {
 
   -webkit-animation-name: fade;
 
   -webkit-animation-name: fade;
 
   -webkit-animation-duration: 1.5s;
 
   -webkit-animation-duration: 1.5s;
Line 1,934: Line 1,855:
 
/* On smaller screens, decrease text size */
 
/* On smaller screens, decrease text size */
 
@media only screen and (max-width: 300px) {
 
@media only screen and (max-width: 300px) {
−
.survey  .prev, .next,.text {font-size: 11px}
+
  .prev, .next,.text {font-size: 11px}
 
}
 
}
  
 
.survey {
 
.survey {
−
  width:50%!important;
 
−
  margin-left: 28vw;
 
−
}
 
−
 
−
.survey1 {
 
 
   width:50%!important;
 
   width:50%!important;
 
   margin-left: 28vw;
 
   margin-left: 28vw;
Line 2,217: Line 2,133:
 
   width: 45%;
 
   width: 45%;
 
   margin-left: 30vw;
 
   margin-left: 30vw;
 +
}
 +
#Public0-1  {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
}
 +
#Public0-2  {
 +
  width: 15%;
 +
  margin-left: 10px;
 
}
 
}
  
−
#Poy3 {
+
#Public0-3  {
−
   margin-left: 35vw;
+
  width: 15%;
 +
   margin-left: 10px;
 +
}
 +
#Public0-4  {
 +
  width: 15%;
 +
  margin-left: 20vw;
 +
}
 +
#Public0-5  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#Public0-6  {
 +
  width: 15%;
 +
  margin-left: 10px;
 +
}
 +
 
 +
#res1 {
 +
  width: 38%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res2 {
 +
  width: 35%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#res3 {
 +
  width: 40%;
 +
  margin-left: 30vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res4 {
 +
  width: 37%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res5 {
 +
  width: 37%;
 +
  margin-left: 10px;
 +
  display: inline-block;
 +
}
 +
#res6 {
 +
  width: 37%;
 +
  margin-left: 17vw;
 +
  display: inline-block;
 +
}
 +
 
 +
#res7 {
 +
  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