daysofcode/2019/30/day-32/day-32.css at master · w3dotdev/daysofcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* https://cssgradient.io/ - CSS Gradient — Generator, Maker, and Background */

.workstation { background: #989fdb; border: 1px solid #fff; margin: 0 auto; position: relative; width: 800px; }

.workstation.on {
  background: #989fdb;
  background: linear-gradient(180deg, #989fdb 2%, #ffc8fa 7%, #989fdb 72%);
}

.input { display: none; }

.lightSwitch {
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  height: 40px;
  position: absolute;
  top: 200px;
  left: 10px;
  width: 30px;
}

.lightSwitch:before {
  background: #fff;
  background: linear-gradient(0deg, #fff 0%, #fff 55%, #c6c6c6 100%);
  border-radius: 4px;
  border: 1px solid #ccc;
  content: '';
  height: 20px;
  margin-left: -5px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
}

.input:checked + .lightSwitch:before {
  background: #fff;
  background: linear-gradient(180deg, #fff 0%, #fff 55%, #8f7676 100%);
}

.light { fill: #ebeae3; transition: all 0.5 ease; }
.light.on { fill: #fce6ff; }

.sky { animation: _sky 20s infinite alternate; fill: #7994b6; }

.st8 { fill: #78892d; }
.leaf { animation: _leaf 1s infinite alternate; transform-origin: bottom center; }
.leaf-1 { animation: _leaf 1s infinite alternate; transform-origin: 0% 40%; }

.text { animation: _text 5s infinite linear; fill: #000; font-size: 2rem; }

.frame { cursor: pointer; position: absolute; transform-origin: center center; }

.frame-1 { left: 80px; top: 180px; width: 140px; }
.frame-2 { left: 240px; top: 120px; width: 100px; }

.frame .st1{ fill: #4f4d46; }
.frame .st2{ fill: #f9e871; }

.frame .st3 { fill: #cb5e18; }
.frame .st4 { fill: #b5c149; }

.st2{ fill: #fff; }
.st5{ opacity: .15; fill: #050800; }
.st9{ fill: #efde97; }
.st10{ fill: #faf8ee; }
.st11{ fill: #5f6d86; }
.st12{ fill: #d68800; }
.st13{ fill: #99ae30; }
.st14{ fill: #c12511; }
.st15{ fill: #7a7770; }
.st16{ fill: #4f4d46; }
.st20{ fill: #f9e871; }
.st22{ fill: #cb5e18; }
.st23{ fill: #b5c149; }
.st24{ fill: #968c72; }
.st25{ fill: #f3f0e2; }

@keyframes _text {
  25% { transform: translate(5%, -6%); }
  50% { fill: #b4cce9; transform: translate(12.5%, 5%); }
  75% { fill: #f8e400; transform: translate(8%, 15%); }
  100% { fill: #b4cce9; }
}

@keyframes _leaf {
  from { transform: rotate(-0.2deg); }
  to { transform: rotate(0.1deg); }
}

@keyframes _leaf1 {
  from { transform: rotate(0.4deg); }
  to { transform: rotate(0deg); }
}

@keyframes _sky {
  30% { fill: #fad96e; }
  60% { fill: #ffe600; }
}