Hugging Face's logo

Spaces:
benjamin-paine
/
hey-buddy
Running

App Files Community
benjamin-paine commited on
Commit
2dcf062
•
1 Parent(s): d5a4585

Upload style.css

Browse files
Files changed (1) hide show
  1. style.css +152 -0
style.css ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ display: flex;
3
+ flex-flow: column nowrap;
4
+ justify-content: center;
5
+ align-items: center;
6
+ height: 100vh;
7
+ width: 100vw;
8
+ padding: 0;
9
+ margin: 0;
10
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
11
+ background-color: rgb(11,15,25);
12
+ color: white
13
+ }
14
+
15
+ h1 {
16
+ font-size: 16px;
17
+ margin-top: 0;
18
+ }
19
+
20
+ p {
21
+ font-size: 15px;
22
+ margin-bottom: 10px;
23
+ margin-top: 5px;
24
+ }
25
+
26
+ strong, em {
27
+ color: #16c8ce;
28
+ }
29
+
30
+ .card {
31
+ max-width: 640px;
32
+ margin: 0 auto;
33
+ padding: 16px;
34
+ border: 1px solid rgb(107, 114, 128);
35
+ border-radius: 16px;
36
+ background-color: rgb(16, 22, 35);
37
+ }
38
+
39
+ .card p:last-child {
40
+ margin-bottom: 0;
41
+ }
42
+
43
+ .card img {
44
+ width: 100%;
45
+ max-width: 420px;
46
+ margin: 0 auto;
47
+ }
48
+
49
+ #logo, #links {
50
+ display: flex;
51
+ flex-flow: row wrap;
52
+ justify-content: center;
53
+ }
54
+
55
+ #links {
56
+ gap: 1em;
57
+ margin: 1em;
58
+ }
59
+
60
+ #links img {
61
+ height: 20px;
62
+ }
63
+
64
+ #graphs {
65
+ display: flex;
66
+ flex-flow: column nowrap;
67
+ justify-content: center;
68
+ align-items: center;
69
+ gap: 1em;
70
+ }
71
+
72
+ label {
73
+ display: block;
74
+ }
75
+
76
+ #graphs div {
77
+ position: relative;
78
+ }
79
+
80
+ #graphs label {
81
+ position: absolute;
82
+ right: 0;
83
+ top: 0;
84
+ max-width: 120px;
85
+ text-transform: uppercase;
86
+ font-family: monospace;
87
+ text-align: right;
88
+ padding: 0 4px;
89
+ line-height: 20px;
90
+ background-image: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
91
+ border: 1px solid rgba(255,255,255,0.1);
92
+ border-top: none;
93
+ border-right: none;
94
+ }
95
+
96
+ #graphs .legend {
97
+ display: flex;
98
+ flex-flow: row wrap;
99
+ justify-content: flex-end;
100
+ gap: 1px 5px;
101
+ text-transform: uppercase;
102
+ font-family: monospace;
103
+ font-size: 10px;
104
+ line-height: 11px;
105
+ }
106
+
107
+ canvas.graph {
108
+ border: 1px solid rgba(255,255,255,0.1);
109
+ border-bottom: none;
110
+ background-image:
111
+ repeating-linear-gradient(to top, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, transparent 1px, transparent 10px),
112
+ linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
113
+ }
114
+
115
+ #recording {
116
+ margin-top: 1em;
117
+ position: relative;
118
+ display: block;
119
+ height: 100px;
120
+ line-height: 100px;
121
+ text-align: center;
122
+ font-size: 11px;
123
+ background-image: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
124
+ border: 1px solid rgba(255,255,255,0.1);
125
+ border-bottom-left-radius: 10px;
126
+ border-bottom-right-radius: 10px;
127
+ }
128
+
129
+ #recording #audio {
130
+ display: flex;
131
+ flex-flow: row nowrap;
132
+ align-items: center;
133
+ justify-content: center;
134
+ height: 100%;
135
+ }
136
+
137
+ #recording label {
138
+ position: absolute;
139
+ right: 0;
140
+ top: 0;
141
+ max-width: 120px;
142
+ text-transform: uppercase;
143
+ font-family: monospace;
144
+ font-size: 12px;
145
+ text-align: right;
146
+ padding: 0 4px;
147
+ line-height: 20px;
148
+ background-image: linear-gradient(to top, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
149
+ border: 1px solid rgba(255,255,255,0.1);
150
+ border-top: none;
151
+ border-right: none;
152
+ }