Hugging Face's logo

Spaces:
mgbam
/
builder
Running

App Files Community
mgbam commited on
Commit
5b7a2a2
·
verified ·
1 Parent(s): 73de625

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +97 -50
style.css CHANGED
@@ -1,85 +1,132 @@
1
- --- style.css ---
2
- ```css
3
  :root {
4
- font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  }
6
 
7
  body {
8
  margin: 0;
9
- font-family: Arial, sans-serif;
 
 
 
10
  line-height: 1.5;
11
- color: #333;
12
- background-color: #f9f9f9;
13
  }
14
 
15
- header {
16
- background-color: #005fcc;
17
- color: #fff;
18
- padding: 1rem;
 
 
 
 
 
19
  text-align: center;
 
20
  }
21
 
22
- .container {
23
- max-width: 600px;
24
- margin: 2rem auto;
25
- padding: 0 1rem;
 
26
  }
27
 
28
  label {
29
- display: block;
30
- margin-bottom: 0.5rem;
31
- font-weight: bold;
32
  }
33
 
34
  select,
35
- textarea {
 
 
 
 
 
 
36
  width: 100%;
37
- padding: 0.5rem;
38
- border: 1px solid #ccc;
39
- border-radius: 4px;
40
- box-sizing: border-box;
41
  }
42
 
43
- select {
44
- margin-bottom: 1rem;
45
- }
46
-
47
- textarea {
48
- resize: vertical;
49
  }
50
 
51
  button {
52
- margin-top: 1rem;
53
- padding: 0.75rem 1.5rem;
54
  border: none;
55
- border-radius: 4px;
56
- background-color: #005fcc;
57
- color: #fff;
58
- font-size: 1rem;
59
  cursor: pointer;
 
60
  }
61
 
62
  button:disabled {
63
- background-color: #7da4d9;
64
  cursor: not-allowed;
65
  }
66
 
67
- button:focus-visible {
68
- outline: 3px solid #ffbf47;
69
  }
70
 
71
  #result {
72
- margin-top: 1.5rem;
73
- padding: 1rem;
74
- background-color: #fff;
75
- border: 1px solid #ddd;
76
- border-radius: 4px;
77
- }
78
-
79
- @media (max-width: 480px) {
80
- button,
81
- select,
82
- textarea {
83
- width: 100%;
 
 
 
84
  }
85
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* style.css */
2
+
3
  :root {
4
+ --primary-color: #2563eb;
5
+ --secondary-color: #6b7280;
6
+ --bg-color: #f9fafb;
7
+ --text-color: #111827;
8
+ --border-radius: 0.375rem;
9
+ --spacing: 1rem;
10
+ --font-family: 'Inter', sans-serif;
11
+ }
12
+
13
+ *,
14
+ *::before,
15
+ *::after {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ html {
20
+ font-size: 100%;
21
+ scroll-behavior: smooth;
22
  }
23
 
24
  body {
25
  margin: 0;
26
+ padding: 0;
27
+ background-color: var(--bg-color);
28
+ color: var(--text-color);
29
+ font-family: var(--font-family);
30
  line-height: 1.5;
 
 
31
  }
32
 
33
+ .container {
34
+ max-width: 800px;
35
+ margin: 0 auto;
36
+ padding: var(--spacing);
37
+ }
38
+
39
+ h1 {
40
+ font-size: 2rem;
41
+ margin-bottom: calc(var(--spacing) * 1.5);
42
  text-align: center;
43
+ color: var(--primary-color);
44
  }
45
 
46
+ form {
47
+ display: flex;
48
+ flex-direction: column;
49
+ gap: var(--spacing);
50
+ margin-bottom: var(--spacing);
51
  }
52
 
53
  label {
54
+ font-weight: 600;
55
+ margin-bottom: 0.25rem;
 
56
  }
57
 
58
  select,
59
+ input[type="text"],
60
+ textarea,
61
+ button {
62
+ font-size: 1rem;
63
+ padding: 0.75rem;
64
+ border: 1px solid #d1d5db;
65
+ border-radius: var(--border-radius);
66
  width: 100%;
 
 
 
 
67
  }
68
 
69
+ select:focus,
70
+ input:focus,
71
+ textarea:focus {
72
+ outline: 2px solid var(--primary-color);
73
+ border-color: var(--primary-color);
 
74
  }
75
 
76
  button {
77
+ background-color: var(--primary-color);
78
+ color: #ffffff;
79
  border: none;
 
 
 
 
80
  cursor: pointer;
81
+ transition: background-color 0.2s ease;
82
  }
83
 
84
  button:disabled {
85
+ opacity: 0.6;
86
  cursor: not-allowed;
87
  }
88
 
89
+ button:hover:not(:disabled) {
90
+ background-color: #1e40af;
91
  }
92
 
93
  #result {
94
+ margin-top: var(--spacing);
95
+ padding: var(--spacing);
96
+ background-color: #ffffff;
97
+ border: 1px solid #e5e7eb;
98
+ border-radius: var(--border-radius);
99
+ min-height: 3rem;
100
+ }
101
+
102
+ @media (min-width: 640px) {
103
+ form {
104
+ flex-direction: row;
105
+ align-items: flex-end;
106
+ }
107
+ form > div {
108
+ flex: 1;
109
  }
110
+ form > button {
111
+ width: auto;
112
+ flex-shrink: 0;
113
+ }
114
+ }
115
+
116
+ /* Accessibility: High contrast for code labels */
117
+ #result[role="alert"] {
118
+ border-left: 4px solid var(--primary-color);
119
+ }
120
+
121
+ /* Visually hidden for screen reader announcements */
122
+ .sr-only {
123
+ position: absolute;
124
+ width: 1px;
125
+ height: 1px;
126
+ padding: 0;
127
+ margin: -1px;
128
+ overflow: hidden;
129
+ clip: rect(0,0,0,0);
130
+ white-space: nowrap;
131
+ border: 0;
132
+ }