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

Line 2,010: Line 2,010:
 
}
 
}
  
−
.Judge ul {
+
#wrapper {
−
     text-indent: .5em!important;
+
     position: absolute;
−
     border-left: .25em solid gray;
+
    background-color: #FFF;
 +
    left: 50%;
 +
    top: 50%;
 +
    width: 600px;
 +
    height: 400px;
 +
    padding: 24px;
 +
    overflow: hidden;
 +
     border-radius: 1.5px;
 +
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
 +
                0 3px 6px rgba(0, 0, 0, .23);
 +
    -webkit-transform: translate(-50%, -50%);
 +
    transform: translate(-50%, -50%);
 
}
 
}
  
−
.Judge ul ul {
+
.water-drop {
−
     margin-top: -1.25em!important;
+
     visibility: hidden;
−
     margin-left: 1em!important;
+
    position: absolute;
−
      
+
    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 {
−
.Judge li {
+
     -webkit-animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
−
     position: relative!important;
+
     animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
−
     bottom: -1.25em!important;
+
}
 +
@-webkit-keyframes waterDrop {
 +
    0% {
 +
        visibility: visible;
 +
    }
 +
    75% {
 +
        opacity: .6;
 +
    }
 +
    87.5% {
 +
        opacity: .4;
 +
    }
 +
    100% {
 +
        -webkit-transform: translateY(294px);
 +
        opacity: 0;
 +
    }
 +
}
 +
@keyframes waterDrop {
 +
    0% {
 +
        visibility: visible;
 +
    }
 +
    75% {
 +
        opacity: .6;
 +
    }
 +
    87.5% {
 +
        opacity: .4;
 +
    }
 +
    100% {
 +
        transform: translateY(294px);
 +
        opacity: 0;
 +
    }
 
}
 
}
  
−
.Judge li:before {
+
.button {
−
     content: ""!important;
+
     position: relative;
−
     display: inline-block!important;
+
     border-radius: 50%;
−
    width: 2em!important;
+
     margin-bottom: 18px;
−
     height: 0!important;
+
}
−
    position: relative!important;
+
.button:last-child {
−
    left: -.75em!important;;
+
     margin-bottom: 0;
−
     border-top: .25em solid gray!important;
+
 
}
 
}
  
−
.Judge ul ul:before,.Judge h3:before,.Judge li:after {
+
.button-floating::before {
−
     content: ''!important;
+
     content: "+";
−
    display: block!important;
+
−
    width: 1em!important;
+
−
    height: 1em!important;
+
−
    position: absolute!important;
+
−
    background: salmon!important;
+
−
    border: .25em solid white!important;
+
−
    top: 1em!important;
+
−
    left: .4em!important;
+
 
}
 
}
 +
.button-floating, .button-floating-shadow {
 +
    width: 54px;
 +
    height: 54px;
 +
}
 +
.button-floating {
 +
    z-index: 40;
 +
    cursor: pointer;
 +
    background-color: #2196F3;
 +
    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);
 +
    transform: rotate(225deg);
 +
}
 +
 +
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 22:03, 17 October 2018