Hugging Face's logo

Spaces:
maskaro
/
comanda
Running

App Files Community
maskaro commited on
Commit
dd00dcd
·
verified ·
1 Parent(s): e06cfb3

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +154 -24
style.css CHANGED
@@ -1,49 +1,179 @@
 
1
  body {
2
- font-family: 'Arial', sans-serif;
3
- background-color: #75e6d7;
4
- color: #333;
5
- padding-top: 20px;
6
  }
7
 
8
- #app {
9
- max-width: 600px;
10
- margin: 0 auto;
 
 
 
11
  }
12
 
13
- button {
14
- width: 100%;
15
- margin-top: 10px;
16
  }
17
 
18
- button:hover {
19
- opacity: 0.8;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
 
22
  .mesa-card {
23
- cursor: pointer;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card {
27
- margin-bottom: 15px;
 
 
 
 
 
28
  }
29
 
30
- .card-body {
31
- text-align: left;
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
 
34
  .cantidad-controls {
35
- display: flex;
36
- align-items: center;
37
- justify-content: space-between;
 
 
 
 
38
  }
39
 
40
- #qrcode {
 
41
  display: flex;
42
  justify-content: center;
43
- margin-top: 20px;
44
  }
45
 
46
- .card-footer {
47
- background-color: transparent;
48
  }
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* General styles */
2
  body {
3
+ font-family: sans-serif;
4
+ margin: 0;
5
+ padding: 10px;
6
+ background-color: #f8f9fa;
7
  }
8
 
9
+ .btn {
10
+ padding: 8px 16px;
11
+ border: none;
12
+ border-radius: 5px;
13
+ cursor: pointer;
14
+ font-weight: bold;
15
  }
16
 
17
+ .btn-block {
18
+ display: block;
19
+ width: 100%;
20
  }
21
 
22
+ .btn-success {
23
+ background-color: #28a745;
24
+ color: white;
25
+ }
26
+
27
+ .btn-danger {
28
+ background-color: #dc3545;
29
+ color: white;
30
+ }
31
+
32
+ .btn-primary {
33
+ background-color: #007bff;
34
+ color: white;
35
+ }
36
+ .btn-warning{
37
+ background-color: #ffc107;
38
+ color: white;
39
+ }
40
+
41
+ .btn-info {
42
+ background-color: #17a2b8;
43
+ color: white;
44
+ }
45
+
46
+ .btn-outline-secondary {
47
+ color: #6c757d;
48
+ border: 2px solid #6c757d;
49
+ }
50
+
51
+ .btn-outline-danger {
52
+ color: #dc3545;
53
+ border: 2px solid #dc3545;
54
+ }
55
+
56
+ .btn-sm {
57
+ padding: 5px 10px;
58
+ font-size: 14px;
59
+ }
60
+
61
+ .text-center {
62
+ text-align: center;
63
+ }
64
+
65
+ .mb-2 {
66
+ margin-bottom: 8px;
67
+ }
68
+
69
+ /* Mesa input */
70
+ .mesa-input {
71
+ padding: 20px;
72
+ border: 1px solid #ced4da;
73
+ border-radius: 5px;
74
+ background-color: #fff;
75
+ }
76
+
77
+ .mesa-controls {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: space-between;
81
+ margin-bottom: 10px;
82
+ }
83
+
84
+ .mesa-number {
85
+ font-size: 24px;
86
+ font-weight: bold;
87
+ }
88
+
89
+ /* Mesas container */
90
+ .mesas-container {
91
+ display: grid;
92
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
93
+ gap: 10px;
94
  }
95
 
96
  .mesa-card {
97
+ border: 1px solid #ced4da;
98
+ border-radius: 5px;
99
+ background-color: #fff;
100
+ }
101
+
102
+ .mesa-card-body {
103
+ padding: 15px;
104
+ }
105
+
106
+ .mesa-title {
107
+ font-size: 18px;
108
+ font-weight: bold;
109
+ margin-bottom: 10px;
110
+ }
111
+
112
+ /* Mesa heading */
113
+ .mesa-heading {
114
+ margin-bottom: 20px;
115
  }
116
 
117
+ /* Pedidos container */
118
+ .pedidos-container {
119
+ margin-bottom: 20px;
120
+ border: 1px solid #ced4da;
121
+ padding: 10px;
122
+ border-radius: 5px;
123
+ background-color: #f5f5f5;
124
  }
125
 
126
+ /* Opciones container */
127
+ .opciones-container {
128
+ padding: 20px;
129
+ border: 1px solid #ced4da;
130
+ border-radius: 5px;
131
+ background-color: #fff;
132
+ }
133
+
134
+ .opcion-item {
135
+ display: flex;
136
+ justify-content: space-between;
137
+ align-items: center;
138
+ margin-bottom: 10px;
139
  }
140
 
141
  .cantidad-controls {
142
+ display: flex;
143
+ align-items: center;
144
+ }
145
+
146
+ .cantidad {
147
+ margin: 0 10px;
148
+ font-weight: bold;
149
  }
150
 
151
+ /* QR Code */
152
+ .qrContainer {
153
  display: flex;
154
  justify-content: center;
155
+ align-items: center;
156
  }
157
 
158
+ .qrContainer img {
159
+ max-width: 100%;
160
  }
161
 
162
+ /* Responsive design */
163
+ @media (max-width: 576px) {
164
+ .mesas-container {
165
+ grid-template-columns: 1fr;
166
+ }
167
+
168
+ .mesa-card {
169
+ margin-bottom: 10px;
170
+ }
171
+ .opcion-item {
172
+ flex-direction: column;
173
+ align-items: flex-start;
174
+ }
175
+
176
+ .cantidad-controls {
177
+ margin-top: 10px;
178
+ }
179
+ }