Hugging Face's logo

Spaces:
peterhartwigCF
/
swatchme
Sleeping

App Files Community
peterhartwigCF commited on
Commit
62d43fc
·
verified ·
1 Parent(s): 28d0c26

Upload gradio-styles.css

Browse files
Files changed (1) hide show
  1. gradio-styles.css +160 -0
gradio-styles.css ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Base styles */
2
+ :root {
3
+ --primary-blue: #4466ee;
4
+ --background-light: #f8f9fa;
5
+ --text-primary: #2c3e50;
6
+ --text-secondary: #6c757d;
7
+ --border-color: #e9ecef;
8
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
9
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
10
+ }
11
+
12
+ /* Layout and containers */
13
+ .container {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ padding: 0 1rem;
17
+ }
18
+
19
+ /* Navigation */
20
+ .nav-container {
21
+ background: white;
22
+ border-bottom: 1px solid var(--border-color);
23
+ padding: 1rem 0;
24
+ }
25
+
26
+ .nav-menu {
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 2rem;
30
+ }
31
+
32
+ .nav-item {
33
+ color: var(--text-secondary);
34
+ text-decoration: none;
35
+ font-weight: 500;
36
+ transition: color 0.2s ease;
37
+ }
38
+
39
+ .nav-item:hover,
40
+ .nav-item.active {
41
+ color: var(--primary-blue);
42
+ }
43
+
44
+ /* Cards and content blocks */
45
+ .card {
46
+ background: white;
47
+ border-radius: 8px;
48
+ box-shadow: var(--shadow-sm);
49
+ padding: 1.5rem;
50
+ margin-bottom: 1rem;
51
+ transition: box-shadow 0.3s ease;
52
+ }
53
+
54
+ .card:hover {
55
+ box-shadow: var(--shadow-md);
56
+ }
57
+
58
+ /* Form elements */
59
+ .input-group {
60
+ margin-bottom: 1rem;
61
+ }
62
+
63
+ .input {
64
+ width: 100%;
65
+ padding: 0.75rem;
66
+ border: 1px solid var(--border-color);
67
+ border-radius: 6px;
68
+ font-size: 0.95rem;
69
+ }
70
+
71
+ .select {
72
+ appearance: none;
73
+ background: white;
74
+ padding: 0.75rem;
75
+ border: 1px solid var(--border-color);
76
+ border-radius: 6px;
77
+ width: 100%;
78
+ }
79
+
80
+ /* Buttons */
81
+ .button {
82
+ background: var(--primary-blue);
83
+ color: white;
84
+ border: none;
85
+ border-radius: 6px;
86
+ padding: 0.75rem 1.5rem;
87
+ font-weight: 500;
88
+ cursor: pointer;
89
+ transition: opacity 0.2s ease;
90
+ }
91
+
92
+ .button:hover {
93
+ opacity: 0.9;
94
+ }
95
+
96
+ .button-secondary {
97
+ background: white;
98
+ color: var(--text-primary);
99
+ border: 1px solid var(--border-color);
100
+ }
101
+
102
+ /* Data display */
103
+ .table {
104
+ width: 100%;
105
+ border-collapse: collapse;
106
+ }
107
+
108
+ .table th,
109
+ .table td {
110
+ padding: 1rem;
111
+ border-bottom: 1px solid var(--border-color);
112
+ text-align: left;
113
+ }
114
+
115
+ .table th {
116
+ background: var(--background-light);
117
+ font-weight: 500;
118
+ }
119
+
120
+ /* Empty state */
121
+ .empty-state {
122
+ text-align: center;
123
+ padding: 3rem 1rem;
124
+ color: var(--text-secondary);
125
+ }
126
+
127
+ .empty-state-icon {
128
+ font-size: 3rem;
129
+ margin-bottom: 1rem;
130
+ color: var(--border-color);
131
+ }
132
+
133
+ /* Utilities */
134
+ .text-primary {
135
+ color: var(--text-primary);
136
+ }
137
+
138
+ .text-secondary {
139
+ color: var(--text-secondary);
140
+ }
141
+
142
+ .bg-light {
143
+ background: var(--background-light);
144
+ }
145
+
146
+ /* Responsive adjustments */
147
+ @media (max-width: 768px) {
148
+ .nav-menu {
149
+ gap: 1rem;
150
+ }
151
+
152
+ .card {
153
+ padding: 1rem;
154
+ }
155
+
156
+ .table th,
157
+ .table td {
158
+ padding: 0.75rem;
159
+ }
160
+ }