Hugging Face's logo

Spaces:
pdufour
/
Qwen2-VL-2B-Instruct-ONNX-Q4-F16
Running

App Files Community
pdufour commited on
Commit
37e2f9e
·
verified ·
1 Parent(s): 8102d19

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +81 -42
style.css CHANGED
@@ -1,56 +1,95 @@
1
- * {
2
- box-sizing: border-box;
3
- padding: 0;
4
- margin: 0;
5
- font-family: sans-serif;
6
- }
7
-
8
- html,
9
- body {
10
- height: 100%;
11
- }
12
 
13
- body { font-family: system-ui; max-width: 800px; margin: 0 auto; padding: 20px; }
 
 
 
 
14
 
15
- #container {
16
  display: flex;
17
  flex-direction: column;
18
  align-items: center;
19
- gap: 15px;
20
- padding: 20px;
21
- border: 2px dashed #ccc;
22
- border-radius: 8px;
23
- cursor: pointer;
24
- text-align: center;
25
  }
26
- #prompt-stage {
27
- display: none;
28
- width: 100%;
29
  }
30
- #upload-stage {
31
- width: 100%;
 
 
32
  }
33
- #preview-image {
34
- max-height: 200px;
35
- margin: 10px 0;
 
 
36
  }
37
- #prompt-input {
 
38
  width: 100%;
39
- padding: 8px;
40
- margin: 10px 0;
41
- border: 1px solid #ccc;
42
- border-radius: 4px;
 
 
43
  }
44
- .button-group {
45
- display: flex;
46
- gap: 10px;
47
- justify-content: center;
48
- margin-top: 10px;
49
  }
50
- button {
51
- padding: 8px 16px;
52
- border-radius: 4px;
 
 
53
  cursor: pointer;
 
 
 
 
 
 
 
54
  }
55
- #upload { display: none; }
56
- #example { color: blue; text-decoration: underline; cursor: pointer; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ max-width: 800px;
3
+ margin: 0 auto;
4
+ padding: 20px;
5
+ font-family: system-ui, -apple-system, sans-serif;
6
+ background: #f5f5f5;
7
+ }
 
 
 
 
8
 
9
+ h1 {
10
+ text-align: center;
11
+ color: #2d3748;
12
+ margin-bottom: 2rem;
13
+ }
14
 
15
+ #container {
16
  display: flex;
17
  flex-direction: column;
18
  align-items: center;
19
+ padding: 2rem;
20
+ border: 2px dashed #cbd5e0;
21
+ border-radius: 1rem;
22
+ background: white;
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
24
+ transition: border-color 0.3s ease;
25
  }
26
+
27
+ #container:hover {
28
+ border-color: #4a5568;
29
  }
30
+
31
+ #container svg {
32
+ margin-bottom: 1rem;
33
+ opacity: 0.7;
34
  }
35
+
36
+ #container div {
37
+ margin-top: 1.5rem;
38
+ width: 100%;
39
+ max-width: 400px;
40
  }
41
+
42
+ input[type="text"] {
43
  width: 100%;
44
+ padding: 0.75rem 1rem;
45
+ border: 1px solid #e2e8f0;
46
+ border-radius: 0.5rem;
47
+ font-size: 1rem;
48
+ transition: border-color 0.3s ease;
49
+ background: #f8fafc;
50
  }
51
+
52
+ input[type="text"]:focus {
53
+ outline: none;
54
+ border-color: #4a5568;
55
+ box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
56
  }
57
+
58
+ #example {
59
+ display: inline-block;
60
+ margin-top: 0.5rem;
61
+ color: #4299e1;
62
  cursor: pointer;
63
+ font-size: 0.875rem;
64
+ transition: color 0.3s ease;
65
+ }
66
+
67
+ #example:hover {
68
+ color: #2b6cb0;
69
+ text-decoration: underline;
70
  }
71
+
72
+ #status {
73
+ display: block;
74
+ margin-top: 1.5rem;
75
+ text-align: center;
76
+ color: #4a5568;
77
+ font-size: 0.875rem;
78
+ padding: 0.5rem;
79
+ border-radius: 0.5rem;
80
+ background: #edf2f7;
81
+ }
82
+
83
+ #upload {
84
+ display: none;
85
+ }
86
+
87
+ @media (max-width: 640px) {
88
+ body {
89
+ padding: 1rem;
90
+ }
91
+
92
+ #container {
93
+ padding: 1.5rem;
94
+ }
95
+ }