Hugging Face's logo

Spaces:
UcsTurkey
/
flare
Building

App Files Community
1
ciyidogan commited on
Commit
56e113f
·
verified ·
1 Parent(s): 9542bcf

Update flare-ui/src/styles.scss

Browse files
Files changed (1) hide show
  1. flare-ui/src/styles.scss +261 -259
flare-ui/src/styles.scss CHANGED
@@ -1,260 +1,262 @@
1
- /* Global Styles */
2
- * {
3
- box-sizing: border-box;
4
- margin: 0;
5
- padding: 0;
6
- }
7
-
8
- body {
9
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
- font-size: 14px;
11
- line-height: 1.5;
12
- color: #333;
13
- background-color: #f5f5f5;
14
- }
15
-
16
- /* Utility Classes */
17
- .container {
18
- max-width: 1200px;
19
- margin: 0 auto;
20
- padding: 0 20px;
21
- }
22
-
23
- .btn {
24
- display: inline-block;
25
- padding: 8px 16px;
26
- font-size: 14px;
27
- font-weight: 500;
28
- text-align: center;
29
- text-decoration: none;
30
- border: none;
31
- border-radius: 4px;
32
- cursor: pointer;
33
- transition: all 0.3s ease;
34
-
35
- &.btn-primary {
36
- background-color: #007bff;
37
- color: white;
38
-
39
- &:hover {
40
- background-color: #0056b3;
41
- }
42
- }
43
-
44
- &.btn-secondary {
45
- background-color: #6c757d;
46
- color: white;
47
-
48
- &:hover {
49
- background-color: #545b62;
50
- }
51
- }
52
-
53
- &.btn-danger {
54
- background-color: #dc3545;
55
- color: white;
56
-
57
- &:hover {
58
- background-color: #c82333;
59
- }
60
- }
61
-
62
- &:disabled {
63
- opacity: 0.6;
64
- cursor: not-allowed;
65
- }
66
- }
67
-
68
- /* Form Styles */
69
- .form-group {
70
- margin-bottom: 1rem;
71
-
72
- label {
73
- display: block;
74
- margin-bottom: 0.5rem;
75
- font-weight: 500;
76
- color: #495057;
77
- }
78
-
79
- input,
80
- select,
81
- textarea {
82
- display: block;
83
- width: 100%;
84
- padding: 0.375rem 0.75rem;
85
- font-size: 1rem;
86
- line-height: 1.5;
87
- color: #495057;
88
- background-color: #fff;
89
- background-clip: padding-box;
90
- border: 1px solid #ced4da;
91
- border-radius: 0.25rem;
92
- transition: border-color 0.15s ease-in-out;
93
-
94
- &:focus {
95
- color: #495057;
96
- background-color: #fff;
97
- border-color: #80bdff;
98
- outline: 0;
99
- }
100
- }
101
-
102
- textarea {
103
- min-height: 100px;
104
- resize: vertical;
105
- }
106
- }
107
-
108
- /* Table Styles */
109
- .table {
110
- width: 100%;
111
- margin-bottom: 1rem;
112
- background-color: white;
113
- border-collapse: collapse;
114
-
115
- th,
116
- td {
117
- padding: 0.75rem;
118
- text-align: left;
119
- border-bottom: 1px solid #dee2e6;
120
- }
121
-
122
- th {
123
- background-color: #f8f9fa;
124
- font-weight: 600;
125
- color: #495057;
126
- }
127
-
128
- tbody tr:hover {
129
- background-color: #f8f9fa;
130
- }
131
- }
132
-
133
- /* Card Styles */
134
- .card {
135
- background-color: white;
136
- border: 1px solid #dee2e6;
137
- border-radius: 0.25rem;
138
- box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
139
- margin-bottom: 1rem;
140
-
141
- .card-header {
142
- padding: 0.75rem 1.25rem;
143
- background-color: #f8f9fa;
144
- border-bottom: 1px solid #dee2e6;
145
- font-weight: 600;
146
- }
147
-
148
- .card-body {
149
- padding: 1.25rem;
150
- }
151
- }
152
-
153
- /* Tab Styles */
154
- .tabs {
155
- display: flex;
156
- border-bottom: 2px solid #dee2e6;
157
- margin-bottom: 1rem;
158
-
159
- .tab {
160
- padding: 0.5rem 1rem;
161
- cursor: pointer;
162
- border: none;
163
- background: none;
164
- font-weight: 500;
165
- color: #6c757d;
166
- transition: all 0.3s ease;
167
-
168
- &.active {
169
- color: #007bff;
170
- border-bottom: 2px solid #007bff;
171
- margin-bottom: -2px;
172
- }
173
-
174
- &:hover {
175
- color: #007bff;
176
- }
177
- }
178
- }
179
-
180
- /* Alert Styles */
181
- .alert {
182
- padding: 0.75rem 1.25rem;
183
- margin-bottom: 1rem;
184
- border: 1px solid transparent;
185
- border-radius: 0.25rem;
186
-
187
- &.alert-danger {
188
- color: #721c24;
189
- background-color: #f8d7da;
190
- border-color: #f5c6cb;
191
- }
192
-
193
- &.alert-success {
194
- color: #155724;
195
- background-color: #d4edda;
196
- border-color: #c3e6cb;
197
- }
198
- }
199
-
200
- /* Loading Spinner */
201
- .spinner {
202
- display: inline-block;
203
- width: 20px;
204
- height: 20px;
205
- border: 3px solid rgba(0, 0, 0, 0.1);
206
- border-radius: 50%;
207
- border-top-color: #007bff;
208
- animation: spin 1s ease-in-out infinite;
209
- }
210
-
211
- @keyframes spin {
212
- to { transform: rotate(360deg); }
213
- }
214
-
215
- /* Dialog/Modal Styles */
216
- .dialog-backdrop {
217
- position: fixed;
218
- top: 0;
219
- left: 0;
220
- width: 100%;
221
- height: 100%;
222
- background-color: rgba(0, 0, 0, 0.5);
223
- display: flex;
224
- align-items: center;
225
- justify-content: center;
226
- z-index: 1000;
227
- }
228
-
229
- .dialog {
230
- background-color: white;
231
- border-radius: 8px;
232
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
233
- max-width: 600px;
234
- width: 90%;
235
- max-height: 90vh;
236
- overflow: hidden;
237
- display: flex;
238
- flex-direction: column;
239
-
240
- .dialog-header {
241
- padding: 1rem 1.5rem;
242
- border-bottom: 1px solid #dee2e6;
243
- font-size: 1.25rem;
244
- font-weight: 600;
245
- }
246
-
247
- .dialog-body {
248
- padding: 1.5rem;
249
- overflow-y: auto;
250
- flex: 1;
251
- }
252
-
253
- .dialog-footer {
254
- padding: 1rem 1.5rem;
255
- border-top: 1px solid #dee2e6;
256
- display: flex;
257
- justify-content: flex-end;
258
- gap: 0.5rem;
259
- }
 
 
260
  }
 
1
+ @import '@angular/material/prebuilt-themes/indigo-pink.css';
2
+
3
+ /* Global Styles */
4
+ * {
5
+ box-sizing: border-box;
6
+ margin: 0;
7
+ padding: 0;
8
+ }
9
+
10
+ body {
11
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
12
+ font-size: 14px;
13
+ line-height: 1.5;
14
+ color: #333;
15
+ background-color: #f5f5f5;
16
+ }
17
+
18
+ /* Utility Classes */
19
+ .container {
20
+ max-width: 1200px;
21
+ margin: 0 auto;
22
+ padding: 0 20px;
23
+ }
24
+
25
+ .btn {
26
+ display: inline-block;
27
+ padding: 8px 16px;
28
+ font-size: 14px;
29
+ font-weight: 500;
30
+ text-align: center;
31
+ text-decoration: none;
32
+ border: none;
33
+ border-radius: 4px;
34
+ cursor: pointer;
35
+ transition: all 0.3s ease;
36
+
37
+ &.btn-primary {
38
+ background-color: #007bff;
39
+ color: white;
40
+
41
+ &:hover {
42
+ background-color: #0056b3;
43
+ }
44
+ }
45
+
46
+ &.btn-secondary {
47
+ background-color: #6c757d;
48
+ color: white;
49
+
50
+ &:hover {
51
+ background-color: #545b62;
52
+ }
53
+ }
54
+
55
+ &.btn-danger {
56
+ background-color: #dc3545;
57
+ color: white;
58
+
59
+ &:hover {
60
+ background-color: #c82333;
61
+ }
62
+ }
63
+
64
+ &:disabled {
65
+ opacity: 0.6;
66
+ cursor: not-allowed;
67
+ }
68
+ }
69
+
70
+ /* Form Styles */
71
+ .form-group {
72
+ margin-bottom: 1rem;
73
+
74
+ label {
75
+ display: block;
76
+ margin-bottom: 0.5rem;
77
+ font-weight: 500;
78
+ color: #495057;
79
+ }
80
+
81
+ input,
82
+ select,
83
+ textarea {
84
+ display: block;
85
+ width: 100%;
86
+ padding: 0.375rem 0.75rem;
87
+ font-size: 1rem;
88
+ line-height: 1.5;
89
+ color: #495057;
90
+ background-color: #fff;
91
+ background-clip: padding-box;
92
+ border: 1px solid #ced4da;
93
+ border-radius: 0.25rem;
94
+ transition: border-color 0.15s ease-in-out;
95
+
96
+ &:focus {
97
+ color: #495057;
98
+ background-color: #fff;
99
+ border-color: #80bdff;
100
+ outline: 0;
101
+ }
102
+ }
103
+
104
+ textarea {
105
+ min-height: 100px;
106
+ resize: vertical;
107
+ }
108
+ }
109
+
110
+ /* Table Styles */
111
+ .table {
112
+ width: 100%;
113
+ margin-bottom: 1rem;
114
+ background-color: white;
115
+ border-collapse: collapse;
116
+
117
+ th,
118
+ td {
119
+ padding: 0.75rem;
120
+ text-align: left;
121
+ border-bottom: 1px solid #dee2e6;
122
+ }
123
+
124
+ th {
125
+ background-color: #f8f9fa;
126
+ font-weight: 600;
127
+ color: #495057;
128
+ }
129
+
130
+ tbody tr:hover {
131
+ background-color: #f8f9fa;
132
+ }
133
+ }
134
+
135
+ /* Card Styles */
136
+ .card {
137
+ background-color: white;
138
+ border: 1px solid #dee2e6;
139
+ border-radius: 0.25rem;
140
+ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
141
+ margin-bottom: 1rem;
142
+
143
+ .card-header {
144
+ padding: 0.75rem 1.25rem;
145
+ background-color: #f8f9fa;
146
+ border-bottom: 1px solid #dee2e6;
147
+ font-weight: 600;
148
+ }
149
+
150
+ .card-body {
151
+ padding: 1.25rem;
152
+ }
153
+ }
154
+
155
+ /* Tab Styles */
156
+ .tabs {
157
+ display: flex;
158
+ border-bottom: 2px solid #dee2e6;
159
+ margin-bottom: 1rem;
160
+
161
+ .tab {
162
+ padding: 0.5rem 1rem;
163
+ cursor: pointer;
164
+ border: none;
165
+ background: none;
166
+ font-weight: 500;
167
+ color: #6c757d;
168
+ transition: all 0.3s ease;
169
+
170
+ &.active {
171
+ color: #007bff;
172
+ border-bottom: 2px solid #007bff;
173
+ margin-bottom: -2px;
174
+ }
175
+
176
+ &:hover {
177
+ color: #007bff;
178
+ }
179
+ }
180
+ }
181
+
182
+ /* Alert Styles */
183
+ .alert {
184
+ padding: 0.75rem 1.25rem;
185
+ margin-bottom: 1rem;
186
+ border: 1px solid transparent;
187
+ border-radius: 0.25rem;
188
+
189
+ &.alert-danger {
190
+ color: #721c24;
191
+ background-color: #f8d7da;
192
+ border-color: #f5c6cb;
193
+ }
194
+
195
+ &.alert-success {
196
+ color: #155724;
197
+ background-color: #d4edda;
198
+ border-color: #c3e6cb;
199
+ }
200
+ }
201
+
202
+ /* Loading Spinner */
203
+ .spinner {
204
+ display: inline-block;
205
+ width: 20px;
206
+ height: 20px;
207
+ border: 3px solid rgba(0, 0, 0, 0.1);
208
+ border-radius: 50%;
209
+ border-top-color: #007bff;
210
+ animation: spin 1s ease-in-out infinite;
211
+ }
212
+
213
+ @keyframes spin {
214
+ to { transform: rotate(360deg); }
215
+ }
216
+
217
+ /* Dialog/Modal Styles */
218
+ .dialog-backdrop {
219
+ position: fixed;
220
+ top: 0;
221
+ left: 0;
222
+ width: 100%;
223
+ height: 100%;
224
+ background-color: rgba(0, 0, 0, 0.5);
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: center;
228
+ z-index: 1000;
229
+ }
230
+
231
+ .dialog {
232
+ background-color: white;
233
+ border-radius: 8px;
234
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
235
+ max-width: 600px;
236
+ width: 90%;
237
+ max-height: 90vh;
238
+ overflow: hidden;
239
+ display: flex;
240
+ flex-direction: column;
241
+
242
+ .dialog-header {
243
+ padding: 1rem 1.5rem;
244
+ border-bottom: 1px solid #dee2e6;
245
+ font-size: 1.25rem;
246
+ font-weight: 600;
247
+ }
248
+
249
+ .dialog-body {
250
+ padding: 1.5rem;
251
+ overflow-y: auto;
252
+ flex: 1;
253
+ }
254
+
255
+ .dialog-footer {
256
+ padding: 1rem 1.5rem;
257
+ border-top: 1px solid #dee2e6;
258
+ display: flex;
259
+ justify-content: flex-end;
260
+ gap: 0.5rem;
261
+ }
262
  }