Hugging Face's logo

Spaces:
matthartman
/
mattmail
Build error

App Files Community
matthartman commited on
Commit
abb0653
·
verified ·
1 Parent(s): 6150b06

Upload src/app.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. src/app.css +126 -53
src/app.css CHANGED
@@ -1,79 +1,152 @@
 
1
  :root {
2
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3
- line-height: 1.5;
4
- font-weight: 400;
 
 
 
 
 
 
 
 
 
5
 
6
- color-scheme: light dark;
7
- color: rgba(255, 255, 255, 0.87);
8
- background-color: #242424;
9
 
10
- font-synthesis: none;
11
- text-rendering: optimizeLegibility;
12
- -webkit-font-smoothing: antialiased;
13
- -moz-osx-font-smoothing: grayscale;
 
 
 
14
  }
15
 
16
- a {
17
- font-weight: 500;
18
- color: #646cff;
19
- text-decoration: inherit;
20
  }
21
- a:hover {
22
- color: #535bf2;
 
 
 
 
23
  }
24
 
25
- body {
26
  margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  display: flex;
28
- place-items: center;
29
- min-width: 320px;
30
- min-height: 100vh;
31
  }
32
 
33
- h1 {
34
- font-size: 3.2em;
35
- line-height: 1.1;
 
 
 
 
 
36
  }
37
 
38
- .card {
39
- padding: 2em;
 
 
 
 
 
 
40
  }
41
 
42
- #app {
43
- max-width: 1280px;
44
- margin: 0 auto;
45
- padding: 2rem;
46
- text-align: center;
 
 
 
47
  }
48
 
49
- button {
50
- border-radius: 8px;
51
- border: 1px solid transparent;
52
- padding: 0.6em 1.2em;
53
- font-size: 1em;
54
  font-weight: 500;
55
- font-family: inherit;
56
- background-color: #1a1a1a;
57
- cursor: pointer;
58
- transition: border-color 0.25s;
59
  }
60
- button:hover {
61
- border-color: #646cff;
 
 
 
 
 
 
 
 
 
 
62
  }
63
- button:focus,
64
- button:focus-visible {
65
- outline: 4px auto -webkit-focus-ring-color;
 
66
  }
67
 
68
- @media (prefers-color-scheme: light) {
69
- :root {
70
- color: #213547;
71
- background-color: #ffffff;
 
 
 
72
  }
73
- a:hover {
74
- color: #747bff;
 
 
75
  }
76
- button {
77
- background-color: #f9f9f9;
 
 
78
  }
79
- }
 
 
 
 
 
1
+ /* src/app.css */
2
  :root {
3
+ --primary-color: #1976d2;
4
+ --primary-hover: #1565c0;
5
+ --background: #f5f5f5;
6
+ --surface: #ffffff;
7
+ --text-primary: #212121;
8
+ --text-secondary: #666666;
9
+ --border: #e0e0e0;
10
+ --error: #d32f2f;
11
+ --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
12
+ --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
13
+ --border-radius: 8px;
14
+ }
15
 
16
+ * {
17
+ box-sizing: border-box;
18
+ }
19
 
20
+ body {
21
+ margin: 0;
22
+ padding: 0;
23
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
24
+ background-color: var(--background);
25
+ color: var(--text-primary);
26
+ line-height: 1.6;
27
  }
28
 
29
+ main {
30
+ max-width: 600px;
31
+ margin: 0 auto;
32
+ padding: 2rem 1rem;
33
  }
34
+
35
+ header {
36
+ display: flex;
37
+ justify-content: space-between;
38
+ align-items: center;
39
+ margin-bottom: 2rem;
40
  }
41
 
42
+ h1 {
43
  margin: 0;
44
+ font-size: 1.75rem;
45
+ font-weight: 600;
46
+ color: var(--text-primary);
47
+ }
48
+
49
+ .refresh-btn {
50
+ background: var(--primary-color);
51
+ color: white;
52
+ border: none;
53
+ padding: 0.5rem 1rem;
54
+ border-radius: var(--border-radius);
55
+ cursor: pointer;
56
+ font-size: 0.875rem;
57
+ transition: all 0.2s ease;
58
+ }
59
+
60
+ .refresh-btn:hover:not(:disabled) {
61
+ background: var(--primary-hover);
62
+ transform: translateY(-1px);
63
+ }
64
+
65
+ .refresh-btn:disabled {
66
+ opacity: 0.6;
67
+ cursor: not-allowed;
68
+ }
69
+
70
+ .email-container {
71
  display: flex;
72
+ flex-direction: column;
73
+ gap: 1.5rem;
 
74
  }
75
 
76
+ .navigation {
77
+ display: flex;
78
+ justify-content: space-between;
79
+ align-items: center;
80
+ padding: 1rem;
81
+ background: var(--surface);
82
+ border-radius: var(--border-radius);
83
+ box-shadow: var(--shadow);
84
  }
85
 
86
+ .navigation button {
87
+ background: none;
88
+ border: 1px solid var(--border);
89
+ padding: 0.5rem 1rem;
90
+ border-radius: var(--border-radius);
91
+ cursor: pointer;
92
+ transition: all 0.2s ease;
93
+ font-size: 0.875rem;
94
  }
95
 
96
+ .navigation button:hover:not(:disabled) {
97
+ background: var(--background);
98
+ border-color: var(--primary-color);
99
+ }
100
+
101
+ .navigation button:disabled {
102
+ opacity: 0.4;
103
+ cursor: not-allowed;
104
  }
105
 
106
+ .counter {
107
+ font-size: 0.875rem;
108
+ color: var(--text-secondary);
 
 
109
  font-weight: 500;
 
 
 
 
110
  }
111
+
112
+ .empty-state {
113
+ text-align: center;
114
+ padding: 3rem;
115
+ background: var(--surface);
116
+ border-radius: var(--border-radius);
117
+ box-shadow: var(--shadow);
118
+ }
119
+
120
+ .empty-state h2 {
121
+ margin: 0 0 0.5rem 0;
122
+ color: var(--text-secondary);
123
  }
124
+
125
+ .empty-state p {
126
+ margin: 0;
127
+ color: var(--text-secondary);
128
  }
129
 
130
+ @media (max-width: 480px) {
131
+ main {
132
+ padding: 1rem;
133
+ }
134
+
135
+ h1 {
136
+ font-size: 1.5rem;
137
  }
138
+
139
+ .refresh-btn {
140
+ padding: 0.375rem 0.75rem;
141
+ font-size: 0.8125rem;
142
  }
143
+
144
+ .navigation {
145
+ flex-direction: column;
146
+ gap: 1rem;
147
  }
148
+
149
+ .navigation button {
150
+ width: 100%;
151
+ }
152
+ }