|
|
| 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 1,991: |
Line 1,994: |
| | #Safety1 { | | #Safety1 { |
| | width: 20%; | | width: 20%; |
| − | margin-left: 17vw; | + | margin-left: 20vw; |
| | display: inline-block; | | display: inline-block; |
| | vertical-align: top; | | vertical-align: top; |
| Line 2,009: |
Line 2,012: |
| | vertical-align: top; | | vertical-align: top; |
| | } | | } |
| − |
| |
| − | #wrapper {
| |
| − | position: absolute;
| |
| − | 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%);
| |
| − | }
| |
| − |
| |
| − | .water-drop {
| |
| − | visibility: hidden;
| |
| − | 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 {
| |
| − | -webkit-animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
| |
| − | animation: waterDrop .8s cubic-bezier(1, 0, .5, 0);
| |
| − | }
| |
| − | @-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;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .button {
| |
| − | position: relative;
| |
| − | border-radius: 50%;
| |
| − | margin-bottom: 18px;
| |
| − | }
| |
| − | .button:last-child {
| |
| − | margin-bottom: 0;
| |
| − | }
| |
| − |
| |
| − | .button-floating::before {
| |
| − | content: "+";
| |
| − | }
| |
| − | .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> |
