Hugging Face's logo

Spaces:
VISHAL18for4
/
camera_draw
Sleeping

App Files Community
VISHAL18for4 commited on
Commit
8bcb7e5
·
verified ·
1 Parent(s): 941014b

Create style.css

Browse files
Files changed (1) hide show
  1. public/style.css +160 -0
public/style.css ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ background: #1a1a2e;
10
+ color: #eee;
11
+ height: 100vh;
12
+ overflow: hidden;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ }
17
+
18
+ #app {
19
+ width: 100vw;
20
+ height: 100vh;
21
+ display: flex;
22
+ flex-direction: column;
23
+ background: #16213e;
24
+ }
25
+
26
+ header {
27
+ background: #0f3460;
28
+ padding: 10px 20px;
29
+ display: flex;
30
+ flex-wrap: wrap;
31
+ align-items: center;
32
+ gap: 12px;
33
+ border-bottom: 2px solid #533483;
34
+ z-index: 10;
35
+ flex-shrink: 0;
36
+ }
37
+
38
+ header h1 {
39
+ font-size: 1.4rem;
40
+ background: linear-gradient(45deg, #e94560, #f5a623);
41
+ -webkit-background-clip: text;
42
+ -webkit-text-fill-color: transparent;
43
+ margin-right: 15px;
44
+ }
45
+
46
+ .toolbar {
47
+ display: flex;
48
+ align-items: center;
49
+ gap: 8px;
50
+ flex-wrap: wrap;
51
+ }
52
+
53
+ .toolbar button {
54
+ background: #1a1a40;
55
+ border: 1px solid #533483;
56
+ color: #eee;
57
+ padding: 6px 12px;
58
+ border-radius: 6px;
59
+ cursor: pointer;
60
+ font-size: 0.9rem;
61
+ transition: 0.2s;
62
+ }
63
+
64
+ .toolbar button:hover {
65
+ background: #533483;
66
+ border-color: #e94560;
67
+ }
68
+
69
+ .toolbar button.active {
70
+ background: #e94560;
71
+ border-color: #fff;
72
+ }
73
+
74
+ #brushColor {
75
+ width: 40px;
76
+ height: 34px;
77
+ border: none;
78
+ background: transparent;
79
+ cursor: pointer;
80
+ padding: 2px;
81
+ }
82
+
83
+ #sizeDisplay {
84
+ min-width: 28px;
85
+ text-align: center;
86
+ font-weight: bold;
87
+ color: #f5a623;
88
+ }
89
+
90
+ #status {
91
+ flex: 1;
92
+ font-size: 0.85rem;
93
+ color: #a8d8ea;
94
+ text-align: right;
95
+ padding: 4px 10px;
96
+ background: #1a1a40;
97
+ border-radius: 20px;
98
+ min-width: 200px;
99
+ }
100
+
101
+ main {
102
+ flex: 1;
103
+ position: relative;
104
+ overflow: hidden;
105
+ background: #0d0d1a;
106
+ }
107
+
108
+ #drawCanvas {
109
+ width: 100%;
110
+ height: 100%;
111
+ display: block;
112
+ cursor: none;
113
+ background: #1a1a2e;
114
+ }
115
+
116
+ #gestureIndicator {
117
+ position: absolute;
118
+ bottom: 30px;
119
+ right: 30px;
120
+ font-size: 3rem;
121
+ background: rgba(0,0,0,0.6);
122
+ border-radius: 50%;
123
+ padding: 15px;
124
+ width: 80px;
125
+ height: 80px;
126
+ display: flex;
127
+ justify-content: center;
128
+ align-items: center;
129
+ transition: 0.3s;
130
+ border: 3px solid #555;
131
+ pointer-events: none;
132
+ }
133
+
134
+ #gestureIndicator.gesture-on {
135
+ border-color: #00ff88;
136
+ box-shadow: 0 0 30px rgba(0,255,136,0.3);
137
+ }
138
+
139
+ #gestureIndicator.gesture-off {
140
+ border-color: #ff4444;
141
+ box-shadow: 0 0 30px rgba(255,68,68,0.2);
142
+ }
143
+
144
+ footer {
145
+ background: #0f3460;
146
+ padding: 6px 20px;
147
+ display: flex;
148
+ justify-content: space-between;
149
+ font-size: 0.8rem;
150
+ color: #aaa;
151
+ border-top: 1px solid #533483;
152
+ flex-shrink: 0;
153
+ }
154
+
155
+ /* Responsive adjustments */
156
+ @media (max-width: 700px) {
157
+ header { flex-direction: column; align-items: stretch; }
158
+ .toolbar { justify-content: center; }
159
+ #status { text-align: center; }
160
+ }