Hugging Face's logo

Spaces:
DHEIVER
/
Hand-Pose-Detection
Running

App Files Community
DHEIVER commited on
Commit
cb7541e
·
verified ·
1 Parent(s): 9fa86c3

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +136 -21
style.css CHANGED
@@ -1,38 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- font-family: Arial, sans-serif;
3
- text-align: center;
 
4
  margin: 0;
5
- padding: 0;
6
- background-color: #f4f4f4;
 
 
 
 
7
  }
8
 
9
- h1 {
10
- margin-top: 20px;
 
 
11
  }
12
 
13
- #container {
14
- position: relative;
15
- width: 640px;
16
- height: 480px;
17
- margin: 20px auto;
 
 
 
 
 
18
  }
19
 
20
- #video {
21
- width: 100%;
 
 
22
  height: 100%;
23
- object-fit: cover;
24
  }
25
 
26
- #outputCanvas {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  position: absolute;
 
 
 
 
 
 
 
 
 
28
  top: 0;
 
 
29
  left: 0;
30
- width: 100%;
31
- height: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
 
34
- #status {
35
- margin-top: 10px;
36
- font-size: 18px;
37
- color: #333;
 
 
 
 
 
38
  }
 
1
+ :root {
2
+ --primary-color: #596e73;
3
+ --secondary-color: #3498db;
4
+ --text-color: white;
5
+ --spinner-border: #bebebe;
6
+ --font-family: 'Titillium Web', sans-serif;
7
+ }
8
+
9
+ @keyframes spin {
10
+ 0% {
11
+ transform: rotate(0deg);
12
+ }
13
+ 100% {
14
+ transform: rotate(360deg);
15
+ }
16
+ }
17
+
18
+ .abs {
19
+ position: absolute;
20
+ }
21
+
22
+ a {
23
+ color: var(--text-color);
24
+ text-decoration: none;
25
+ transition: color 0.3s ease;
26
+ }
27
+ a:hover {
28
+ color: var(--secondary-color);
29
+ }
30
+
31
  body {
32
+ background-color: var(--primary-color);
33
+ color: var(--text-color);
34
+ font-family: var(--font-family);
35
  margin: 0;
36
+ overflow: hidden;
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ right: 0;
41
+ bottom: 0;
42
  }
43
 
44
+ .container {
45
+ position: absolute;
46
+ width: 100%;
47
+ max-height: 100%;
48
  }
49
 
50
+ .input_video {
51
+ display: none;
52
+ position: absolute;
53
+ top: 0;
54
+ left: 0;
55
+ right: 0;
56
+ bottom: 0;
57
+ }
58
+ .input_video.selfie {
59
+ transform: scale(-1, 1);
60
  }
61
 
62
+ .canvas-container {
63
+ display: flex;
64
+ justify-content: center;
65
+ align-items: center;
66
  height: 100%;
67
+ width: 100%;
68
  }
69
 
70
+ .output_canvas {
71
+ max-width: 100%;
72
+ display: block;
73
+ position: relative;
74
+ }
75
+
76
+ .logo {
77
+ bottom: 10px;
78
+ right: 20px;
79
+ position: absolute;
80
+ }
81
+ .logo .title {
82
+ font-size: 2rem;
83
+ color: var(--text-color);
84
+ }
85
+ .logo .subtitle {
86
+ font-size: 0.8rem;
87
+ color: var(--text-color);
88
+ position: relative;
89
+ left: -30px;
90
+ top: 20px;
91
+ }
92
+
93
+ .control-panel {
94
+ background-color: rgba(0, 0, 0, 0.7);
95
+ padding: 10px;
96
+ border-radius: 8px;
97
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
98
  position: absolute;
99
+ left: 10px;
100
+ top: 10px;
101
+ }
102
+
103
+ .loading {
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ position: fixed;
108
  top: 0;
109
+ right: 0;
110
+ bottom: 0;
111
  left: 0;
112
+ opacity: 1;
113
+ transition: opacity 0.5s ease-in-out;
114
+ }
115
+ .loading .message {
116
+ font-size: 2rem;
117
+ font-weight: bold;
118
+ margin-top: 20px;
119
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
120
+ }
121
+ .loading .spinner {
122
+ width: 120px;
123
+ height: 120px;
124
+ animation: spin 1s ease-in-out infinite;
125
+ border: 32px solid var(--spinner-border);
126
+ border-top: 32px solid var(--secondary-color);
127
+ border-radius: 50%;
128
+ }
129
+
130
+ .loaded .loading {
131
+ opacity: 0;
132
+ }
133
+
134
+ .shoutout {
135
+ position: absolute;
136
+ left: 0;
137
+ right: 0;
138
+ bottom: 40px;
139
+ text-align: center;
140
+ font-size: 2rem;
141
+ color: var(--secondary-color);
142
  }
143
 
144
+ @media (max-width: 768px) {
145
+ .output_canvas {
146
+ max-width: 100%;
147
+ height: auto;
148
+ }
149
+ .shoutout {
150
+ font-size: 1.5rem;
151
+ bottom: 20px;
152
+ }
153
  }