Hugging Face's logo

Spaces:
CharlieBoyer
/
whdemo
Runtime error

App Files Community
Charlie commited on
Commit
392f043
·
1 Parent(s): 15d2c65

update files

Browse files
Files changed (1) hide show
  1. styles/main.css +34 -125
styles/main.css CHANGED
@@ -1,31 +1,3 @@
1
- :root {
2
- /* Colors */
3
- --color-primary: #4a90e2;
4
- --color-primary-dark: #357abd;
5
- --color-text: #2c3e50;
6
- --color-text-light: #6a7c8f;
7
- --color-background: #f5f7fa;
8
- --color-white: #ffffff;
9
- --color-border: #e1e8ef;
10
-
11
- /* Spacing */
12
- --space-xs: 0.5rem;
13
- --space-sm: 0.8rem;
14
- --space-md: 1rem;
15
- --space-lg: 1.5rem;
16
- --space-xl: 2rem;
17
-
18
- /* Shadows */
19
- --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
20
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
21
-
22
- /* Border Radius */
23
- --radius-sm: 6px;
24
- --radius-md: 8px;
25
- --radius-lg: 16px;
26
- }
27
-
28
- /* Reset & Base Styles */
29
  * {
30
  margin: 0;
31
  padding: 0;
@@ -33,145 +5,82 @@
33
  }
34
 
35
  body {
36
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
37
- Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
38
- line-height: 1.7;
39
- color: var(--color-text);
40
- background-color: var(--color-background);
41
- padding: var(--space-xl);
42
  }
43
 
44
- /* Layout */
45
  #app {
46
  max-width: 800px;
47
  margin: 0 auto;
48
  text-align: center;
49
  }
50
 
51
- /* Typography */
52
  h1 {
53
- font-size: 2.75rem;
54
- font-weight: 800;
55
- color: var(--color-text);
56
- margin-bottom: var(--space-xl);
57
- letter-spacing: -0.03em;
58
- line-height: 1.2;
59
  }
60
 
61
  h2 {
62
- font-size: 1.6rem;
63
- color: var(--color-text-light);
64
- margin-bottom: var(--space-lg);
65
- font-weight: 600;
66
- letter-spacing: -0.01em;
67
  }
68
 
69
- /* Forms & Inputs */
70
  .token-form,
71
  .repo-form {
72
  max-width: 440px;
73
- margin: var(--space-xl) auto;
74
  display: flex;
75
- gap: var(--space-md);
76
  flex-wrap: wrap;
77
  }
78
 
79
  .repo-input {
80
  flex: 1;
81
  min-width: 220px;
82
- padding: var(--space-md);
83
- border: 2px solid var(--color-border);
84
- border-radius: var(--radius-md);
85
- font-size: 1rem;
86
- transition: all 0.3s ease;
87
- background-color: var(--color-white);
88
  }
89
 
90
  .repo-input:focus {
91
  outline: none;
92
- border-color: var(--color-primary);
93
- box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
94
  }
95
 
96
- .repo-input::placeholder {
97
- color: var(--color-text-light);
98
- opacity: 0.6;
99
- }
100
-
101
- /* Buttons */
102
  .auth-button,
103
  .repo-button {
104
- background-color: var(--color-primary);
105
- color: var(--color-white);
106
  border: none;
107
- padding: var(--space-md) var(--space-lg);
108
- border-radius: var(--radius-md);
109
- font-size: 1rem;
110
- font-weight: 600;
111
  cursor: pointer;
112
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
113
- white-space: nowrap;
114
- box-shadow: var(--shadow-sm);
115
  }
116
 
117
  .auth-button:hover,
118
  .repo-button:hover {
119
- background-color: var(--color-primary-dark);
120
- box-shadow: var(--shadow-md);
121
- transform: translateY(-2px);
122
- }
123
-
124
- .auth-button:active,
125
- .repo-button:active {
126
- transform: translateY(0);
127
- box-shadow: var(--shadow-sm);
128
  }
129
 
130
- /* Containers */
131
  .auth-container {
132
- margin: var(--space-xl) 0;
133
  }
134
 
135
  #content {
136
- padding: var(--space-xl);
137
- background-color: var(--color-white);
138
- border-radius: var(--radius-lg);
139
- margin-top: var(--space-xl);
140
- box-shadow: var(--shadow-md);
141
- border: 1px solid var(--color-border);
142
- }
143
-
144
- /* Resource Group */
145
- #resource-group-container {
146
- width: 100%;
147
- }
148
-
149
- /* Output Display */
150
- .oauth-result {
151
- background-color: var(--color-background);
152
- padding: var(--space-lg);
153
- border-radius: var(--radius-md);
154
- text-align: left;
155
- overflow-x: auto;
156
- font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;
157
- font-size: 0.9rem;
158
- line-height: 1.5;
159
- color: var(--color-text);
160
- border: 1px solid var(--color-border);
161
- }
162
-
163
- /* Responsive Adjustments */
164
- @media (max-width: 480px) {
165
- body {
166
- padding: var(--space-md);
167
- }
168
-
169
- h1 {
170
- font-size: 2.2rem;
171
- }
172
-
173
- .token-form,
174
- .repo-form {
175
- padding: 0 var(--space-sm);
176
- }
177
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  * {
2
  margin: 0;
3
  padding: 0;
 
5
  }
6
 
7
  body {
8
+ font-family: Arial, sans-serif;
9
+ line-height: 1.6;
10
+ color: #333;
11
+ background-color: #f5f7fa;
12
+ padding: 32px;
 
13
  }
14
 
 
15
  #app {
16
  max-width: 800px;
17
  margin: 0 auto;
18
  text-align: center;
19
  }
20
 
 
21
  h1 {
22
+ font-size: 44px;
23
+ font-weight: bold;
24
+ color: #333;
25
+ margin-bottom: 32px;
 
 
26
  }
27
 
28
  h2 {
29
+ font-size: 26px;
30
+ color: #666;
31
+ margin-bottom: 24px;
 
 
32
  }
33
 
 
34
  .token-form,
35
  .repo-form {
36
  max-width: 440px;
37
+ margin: 32px auto;
38
  display: flex;
39
+ gap: 16px;
40
  flex-wrap: wrap;
41
  }
42
 
43
  .repo-input {
44
  flex: 1;
45
  min-width: 220px;
46
+ padding: 16px;
47
+ border: 2px solid #ddd;
48
+ border-radius: 8px;
49
+ font-size: 16px;
50
+ background-color: white;
 
51
  }
52
 
53
  .repo-input:focus {
54
  outline: none;
55
+ border-color: #4a90e2;
 
56
  }
57
 
 
 
 
 
 
 
58
  .auth-button,
59
  .repo-button {
60
+ background-color: #4a90e2;
61
+ color: white;
62
  border: none;
63
+ padding: 16px 24px;
64
+ border-radius: 8px;
65
+ font-size: 16px;
66
+ font-weight: bold;
67
  cursor: pointer;
 
 
 
68
  }
69
 
70
  .auth-button:hover,
71
  .repo-button:hover {
72
+ background-color: #357abd;
 
 
 
 
 
 
 
 
73
  }
74
 
 
75
  .auth-container {
76
+ margin: 32px 0;
77
  }
78
 
79
  #content {
80
+ padding: 32px;
81
+ background-color: white;
82
+ border-radius: 16px;
83
+ margin-top: 32px;
84
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
85
+ border: 1px solid #ddd;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  }