Hugging Face's logo

Spaces:
akhaliq
/
gemma-3-270m-it-ONNX
Running

App Files Community
akhaliq HF Staff commited on
Commit
6ce8d7f
·
verified ·
1 Parent(s): 13143c5

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +105 -50
style.css CHANGED
@@ -1,76 +1,131 @@
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 {
14
- padding: 32px;
 
15
  }
16
 
17
- body,
18
- #container {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- align-items: center;
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
 
 
 
 
 
 
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
 
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
 
 
 
 
 
 
 
 
 
 
57
  cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
68
  }
69
 
70
- .bounding-box-label {
71
- color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
+ /* style.css content here */
2
+ body {
3
+ font-family: Arial, sans-serif;
4
+ background-color: #f4f4f4;
5
  margin: 0;
6
+ padding: 0;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ min-height: 100vh;
11
+ color: #333;
12
  }
13
 
14
+ .container {
15
+ background: white;
16
+ border-radius: 8px;
17
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
18
+ width: 90%;
19
+ max-width: 600px;
20
+ padding: 20px;
21
+ display: flex;
22
+ flex-direction: column;
23
  }
24
 
25
+ header {
26
+ text-align: center;
27
+ margin-bottom: 20px;
28
  }
29
 
30
+ h1 {
31
+ margin: 0;
32
+ font-size: 1.5em;
 
 
 
33
  }
34
 
35
+ p {
36
+ margin: 5px 0 0;
37
+ color: #666;
38
+ }
39
 
40
+ .chat-container {
41
+ flex: 1;
42
+ overflow-y: auto;
43
+ border: 1px solid #ddd;
44
+ border-radius: 4px;
45
+ padding: 10px;
46
+ margin-bottom: 10px;
47
+ background: #fafafa;
48
+ max-height: 400px;
49
+ }
50
 
51
+ .message {
52
+ margin: 10px 0;
53
+ padding: 10px;
54
+ border-radius: 4px;
55
+ max-width: 80%;
56
+ }
57
 
58
+ .user-message {
59
+ background: #007bff;
60
+ color: white;
61
+ align-self: flex-end;
62
+ margin-left: auto;
63
  }
64
 
65
+ .bot-message {
66
+ background: #e9e9e9;
67
+ color: #333;
68
+ align-self: flex-start;
69
  }
70
 
71
+ .input-form {
72
+ display: flex;
73
+ gap: 10px;
74
  }
75
 
76
+ #user-input {
77
+ flex: 1;
78
+ padding: 10px;
79
+ border: 1px solid #ddd;
80
+ border-radius: 4px;
81
+ }
82
+
83
+ #send-btn {
84
+ padding: 10px 20px;
85
+ background: #007bff;
86
+ color: white;
87
+ border: none;
88
+ border-radius: 4px;
89
  cursor: pointer;
90
  }
91
 
92
+ #send-btn:hover {
93
+ background: #0056b3;
94
  }
95
 
96
+ #send-btn:disabled {
97
+ background: #ccc;
98
+ cursor: not-allowed;
 
99
  }
100
 
101
+ .loading {
102
+ text-align: center;
103
+ margin: 10px 0;
104
+ color: #007bff;
105
+ }
106
+
107
+ .error {
108
+ text-align: center;
109
+ margin: 10px 0;
110
+ color: red;
111
+ }
112
+
113
+ .hidden {
114
+ display: none;
115
+ }
116
+
117
+ /* Responsive adjustments */
118
+ @media (max-width: 600px) {
119
+ .container {
120
+ padding: 10px;
121
+ width: 95%;
122
+ }
123
+
124
+ h1 {
125
+ font-size: 1.2em;
126
+ }
127
+
128
+ .chat-container {
129
+ max-height: 300px;
130
+ }
131
  }