aboutsummaryrefslogtreecommitdiff
path: root/static/stylesheets/laundry.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/stylesheets/laundry.css')
-rw-r--r--static/stylesheets/laundry.css139
1 files changed, 139 insertions, 0 deletions
diff --git a/static/stylesheets/laundry.css b/static/stylesheets/laundry.css
new file mode 100644
index 0000000..c89964e
--- /dev/null
+++ b/static/stylesheets/laundry.css
@@ -0,0 +1,139 @@
1/* from https://codepen.io/aitchiss/pen/GRpwOGK
2 * by Suzanne Aitchison (https://codepen.io/aitchiss)
3 */
4
5:root {
6 --background-color: #EE5B52;
7 --machine-white: #F8F8F8;
8 --machine-feature-gray: #A3A1A1;
9 --accent-green: #5FBD9D;
10 --darkest-gray: #636161;
11}
12
13/* Main machine body */
14.machine {
15 position: relative;
16 margin: auto;
17 width: 300px;
18 height: 400px;
19 background: var(--machine-white);
20 border-radius: 2%;
21}
22
23/* Powder drawer */
24.drawer {
25 position: absolute;
26 top: 10px;
27 left: 10px;
28 width: 100px;
29 height: 50px;
30 border: 2px solid var(--machine-feature-gray);
31 border-radius: 0 0 20% 0;
32}
33
34/* Drawer handle */
35.drawer::after {
36 content: '';
37 position: absolute;
38 width: 70px;
39 height: 15px;
40 background: var(--machine-feature-gray);
41 bottom: 5px;
42 right: 5px;
43 border-radius: 0 0 30% 0;
44}
45
46/* Small LED display */
47.panel {
48 position: absolute;
49 width: 40px;
50 height: 15px;
51 background: var(--darkest-gray);
52 left: 150px;
53 top: 30px;
54}
55
56/* Light indicator in panel */
57.panel::before {
58 content: '';
59 position: absolute;
60 width: 8px;
61 height: 10px;
62 background: var(--accent-green);
63 right: 5px;
64 top: 2px;
65}
66
67/* Machine dial */
68.panel::after {
69 content: '';
70 position: absolute;
71 left: 80px;
72 top: -10px;
73 width: 35px;
74 height: 35px;
75 border: 2px solid var(--machine-feature-gray);
76 border-radius: 50%;
77}
78
79/* Center of washer door, width border forming the frame */
80.door {
81 position: absolute;
82 background: var(--machine-white);
83 left: 60px;
84 bottom: 90px;
85 width: 170px;
86 height: 170px;
87 border-radius: 50%;
88 border: 5px solid var(--machine-feature-gray);
89 overflow: hidden;
90}
91
92/* Reflection on door surface */
93.door::after {
94 content: '';
95 position: absolute;
96 top: 5px;
97 left: 5px;
98 width: 160px;
99 height: 160px;
100 background: radial-gradient(transparent 30%, white);
101}
102
103/* Washing machine drum */
104.drum {
105 position: absolute;
106 left: 25px;
107 top: 25px;
108 width: 120px;
109 height: 120px;
110 border-radius: 50%;
111 background: var(--darkest-gray);
112 overflow: hidden;
113 animation: drumRotate 2s infinite;
114}
115
116/* Money (instead of clothes) inside machine */
117.drum::before {
118 content: 'ยง';
119 text-align: right;
120 padding-right: 2px;
121
122
123 position: absolute;
124 width: 50px;
125 height: 30px;
126 background: var(--accent-green);
127 bottom: 0;
128}
129
130@keyframes drumRotate {
131 0% {
132 transform: rotate(0deg);
133 }
134
135 100% {
136 transform: rotate(360deg);
137 }
138}
139