|
|
Line 1: |
Line 1: |
− | body {
| |
− | font-family: monospace;
| |
− | font-size: 18px;
| |
− | background: #111;
| |
− | color: #666;
| |
− | margin: 0;
| |
− | }
| |
| | | |
− | img {
| + | #content { |
− | display: block;
| + | width: 100%; |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | input[type=checkbox] {
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | label {
| + | |
− | display: inline-block;
| + | |
− | margin-right: 1em;
| + | |
− | padding: 0.4em 0;
| + | |
− | cursor: pointer;
| + | |
− | }
| + | |
− | | + | |
− | button {
| + | |
− | border: 10px solid #00FFAA;
| + | |
− | font-family: monospace;
| + | |
− | position: absolute;
| + | |
− | line-height: 60px;
| + | |
− | text-align: right;
| + | |
− | padding: 0 1.2em;
| + | |
− | background: #444;
| + | |
− | font-size: 24px;
| + | |
− | cursor: pointer;
| + | |
− | display: block;
| + | |
− | outline: none;
| + | |
− | height: 80px;
| + | |
− | width: 80%;
| + | |
− | top: 260px;
| + | |
− | margin: 0;
| + | |
− | left: 10%;
| + | |
− | }
| + | |
− | | + | |
− | button:hover {
| + | |
− | background: #00FFAA;
| + | |
− | }
| + | |
− | | + | |
− | input[type=checkbox] + label:before {
| + | |
− | display: inline-block;
| + | |
− | position: relative;
| + | |
− | background: #444;
| + | |
− | margin-right: 8px;
| + | |
− | content: "";
| + | |
− | height: 16px;
| + | |
− | width: 16px;
| + | |
− | top: 1px;
| + | |
− | }
| + | |
− | | + | |
− | input[type=checkbox]:checked + label:before {
| + | |
− | background: #00FFAA;
| + | |
− | }
| + | |
− | | + | |
− | .container {
| + | |
− | position: relative;
| + | |
− | max-width: 600px;
| + | |
− | margin: 0 auto;
| + | |
− | padding: 5%;
| + | |
− | }
| + | |
− | | + | |
− | .scene {
| + | |
− | padding: 0;
| + | |
− | margin: 0;
| + | |
− | }
| + | |
− | | + | |
− | .fill {
| + | |
− | position: absolute;
| + | |
− | bottom: 5%;
| + | |
− | right: 5%;
| + | |
− | left: 5%;
| + | |
− | top: 5%;
| + | |
− | }
| + | |
− | | + | |
− | .expand-width {
| + | |
− | width: 100%;
| + | |
− | }
| + | |
− | | + | |
− | .border {
| + | |
− | border: 2px dashed #00FFAA;
| + | |
− | }
| + | |
− | | + | |
− | .aspect {
| + | |
− | opacity: 0.2;
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(1) {
| + | |
− | opacity: 0.15;
| + | |
− | }
| + | |
− | .layer:nth-child(1) button {
| + | |
− | -webkit-transform: rotate(150deg);
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(2) {
| + | |
− | opacity: 0.30;
| + | |
− | }
| + | |
− | .layer:nth-child(2) button {
| + | |
− | -webkit-transform: rotate(120deg);
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(3) {
| + | |
− | opacity: 0.45;
| + | |
− | }
| + | |
− | .layer:nth-child(3) button {
| + | |
− | -webkit-transform: rotate(90deg);
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(4) {
| + | |
− | opacity: 0.60;
| + | |
− | }
| + | |
− | .layer:nth-child(4) button {
| + | |
− | -webkit-transform: rotate(60deg);
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(5) {
| + | |
− | opacity: 0.75;
| + | |
− | }
| + | |
− | .layer:nth-child(5) button {
| + | |
− | -webkit-transform: rotate(30deg);
| + | |
− | }
| + | |
− | | + | |
− | .layer:nth-child(6) {
| + | |
− | opacity: 0.90;
| + | |
− | }
| + | |
− | .layer:nth-child(6) button {
| + | |
| } | | } |