|
|
| 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 {
| + | |
| | } | | } |