2ch commited on
Commit
59c1fe4
·
verified ·
1 Parent(s): b2cd520

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +51 -22
style.css CHANGED
@@ -1,28 +1,57 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
4
  }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
24
  }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ html,
2
  body {
3
+ width: 100%;
4
+ height: 100%;
5
+ margin: 0px;
6
+ padding: 0px;
7
+ border: none;
8
+ background: #242323;
9
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
10
  }
11
+ #page {
12
+ text-align: center;
13
+ padding-top: 2vw;
 
14
  }
15
+ #go {
16
+ margin: -4.5vw 0 0 0;
17
+ position: relative;
 
 
 
18
  }
19
+ #button {
20
+ outline: none;
21
+ -moz-appearance: none;
22
+ width: calc(80px + (120 - 80) * ((100vw - 300px) / (1600 - 300)));
23
+ height: calc(80px + (120 - 80) * ((100vw - 300px) / (1600 - 300)));
24
+ border-radius: 50%;
25
+ margin: 0 auto;
26
+ background: radial-gradient(farthest-side ellipse at top left, #dfdfdff7, #444444db);
27
+ box-shadow: 5px 10px 20px #000000c4, -5px -10px 20px #ffffffb3;
28
+ font-size: calc(12px + (23 - 12) * ((100vw - 300px) / (1600 - 300)));
29
+ transition-duration: 2.2s;
30
+ cursor: pointer;
31
+ border: none;
32
+ color: #000;
33
+ text-shadow: 1px 1px 3px #cacaca, 3px 2px 3px rgba(40, 48, 60, 0.88);
34
  }
35
+ #button:hover {
36
+ background: radial-gradient(farthest-side ellipse at top left, #dfdfdff7, #444444db);
37
+ box-shadow: -4px -4px 20px 20px #000000c4, -5px -10px 20px #ffffffb3;
38
+ font-size: calc(13px + (24 - 13) * ((100vw - 300px) / (1600 - 300)));
39
+ transition-duration: 1.2s;
40
+ }
41
+ #button:active {
42
+ background: radial-gradient(farthest-side ellipse at top left, #fff2f2, #444444e3);
43
+ text-shadow: 1px 1px 7px #a1c0ce, 1px 2px 0px rgba(93, 95, 42, 0.88);
44
+ transition-duration: .2s;
45
+ }
46
+ textarea {
47
+ width: 70vw;
48
+ height: 70vh;
49
+ color: #ccc;
50
+ border: 0px solid #141515;
51
+ background: #141515;
52
+ outline: none;
53
+ -moz-appearance: none;
54
+ resize: none;
55
+ font-size: calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
56
+ transition-duration: 1s;
57
  }