Hugging Face's logo

Spaces:
mgbam
/
builder
Running

App Files Community
mgbam commited on
Commit
eae6ad0
·
verified ·
1 Parent(s): 7c31000

Update static/style.css

Browse files
Files changed (1) hide show
  1. static/style.css +102 -119
static/style.css CHANGED
@@ -1,159 +1,142 @@
1
  /* ----------------------------------------------------------
2
- AnyCoder AI — unified dark‑mode design system
3
  ---------------------------------------------------------- */
4
-
5
- :root {
6
  --bg: #0d1117;
7
- --bg-secondary: #161b22;
 
 
8
  --border: #30363d;
9
  --text: #c9d1d9;
10
  --text-muted: #8b949e;
11
  --accent: #58a6ff;
12
  --accent-hover: #79c0ff;
13
- --danger: #f85149;
14
- --success: #56d364;
15
  --radius: 8px;
16
- --transition: 0.2s ease;
17
- --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
18
  }
19
 
20
- /* ============= 1. Global reset & typography ============= */
21
- *,
22
- *::before,
23
- *::after { box-sizing: border-box; }
24
-
25
- html, body {
26
- margin: 0;
27
- padding: 0;
28
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
29
- background: var(--bg);
30
- color: var(--text);
31
- line-height: 1.6;
32
- -webkit-font-smoothing: antialiased;
33
  }
34
 
35
- h1, h2 { font-weight: 600; }
 
 
 
36
 
37
- /* ============= 2. Layout blocks ============= */
38
- main {
39
- max-width: 900px;
40
- margin: 0 auto;
41
- display: grid;
42
- gap: 2rem;
43
- padding: 1rem;
44
  }
45
 
46
- section {
47
- background: var(--bg-secondary);
48
- border: 1px solid var(--border);
49
- border-radius: var(--radius);
50
- padding: 1.5rem;
 
51
  }
52
 
53
- /* ============= 3. Forms & controls ============= */
54
- label { font-weight: 600; }
55
 
 
56
  select,
57
  input[type="file"],
58
  input[type="url"],
59
- textarea {
60
- width: 100%;
61
- padding: 0.75rem;
62
- border: 1px solid var(--border);
63
- border-radius: var(--radius);
64
- background: var(--bg);
65
- color: var(--text);
66
- font-size: 1rem;
67
- transition: border-color var(--transition);
68
  }
69
-
70
  select:focus,
71
  input:focus,
72
- textarea:focus { outline: none; border-color: var(--accent); }
73
 
74
- textarea {
75
- resize: vertical;
76
- min-height: 120px;
77
- font-family: var(--font-mono);
78
  }
79
 
80
- /* ============= 4. Tabs ============= */
81
- .tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
82
-
83
- .tabs button {
84
- background: transparent;
85
- border: 1px solid var(--border);
86
- border-radius: var(--radius);
87
- padding: 0.5rem 1rem;
88
- color: var(--text-muted);
89
- cursor: pointer;
90
- transition: background var(--transition), color var(--transition);
91
  }
92
-
93
- .tabs button[aria-selected="true"] {
94
- background: var(--accent);
95
- color: var(--bg);
96
- border-color: var(--accent);
97
  }
98
-
99
- .tabs button:hover:not([aria-selected="true"]) {
100
- background: var(--border);
101
- color: var(--text);
102
  }
103
 
104
- /* ============= 5. Action buttons ============= */
105
- .actions { display: flex; gap: 1rem; justify-content: flex-end; }
106
-
107
- button {
108
- padding: 0.75rem 1.5rem;
109
- border: none;
110
- border-radius: var(--radius);
111
- font-size: 1rem;
112
- cursor: pointer;
113
- transition: background var(--transition);
 
114
  }
115
-
116
- #clear { background: var(--border); color: var(--text); }
117
- #clear:hover { background: var(--text-muted); }
118
-
119
- #generate { background: var(--accent); color: var(--bg); }
120
- #generate:hover { background: var(--accent-hover); }
121
-
122
- /* ============= 6. Output areas ============= */
123
- pre {
124
- background: var(--bg);
125
- border: 1px solid var(--border);
126
- border-radius: var(--radius);
127
- padding: 1rem;
128
- overflow-x: auto;
129
- font-family: var(--font-mono);
130
- font-size: 0.9rem;
131
  }
132
 
133
- iframe {
134
- width: 100%;
135
- height: 400px;
136
- border: 1px solid var(--border);
137
- border-radius: var(--radius);
138
- background: #fff;
139
  }
140
 
141
- /* ============= 7. Accessibility helpers ============= */
142
- .visually-hidden {
143
- position: absolute !important;
144
- width: 1px;
145
- height: 1px;
146
- padding: 0;
147
- margin: -1px;
148
- overflow: hidden;
149
- clip: rect(0 0 0 0);
150
- white-space: nowrap;
151
- border: 0;
152
  }
153
 
154
- /* ============= 8. Responsive tweaks ============= */
155
- @media (max-width: 600px) {
156
- main { padding: 0.5rem; }
157
- h1 { font-size: 2rem; }
158
- .actions { flex-direction: column; }
159
  }
 
1
  /* ----------------------------------------------------------
2
+ AnyCoder AI – global dark‑mode theme (readable version)
3
  ---------------------------------------------------------- */
4
+ :root{
 
5
  --bg: #0d1117;
6
+ --bg-secondary: #1e2228; /* brighter than before */
7
+ --input-bg: #f5f7fa; /* light surface for inputs */
8
+ --input-text: #0d1117; /* dark text inside light inputs */
9
  --border: #30363d;
10
  --text: #c9d1d9;
11
  --text-muted: #8b949e;
12
  --accent: #58a6ff;
13
  --accent-hover: #79c0ff;
14
+ --font-mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
 
15
  --radius: 8px;
16
+ --transition: .2s ease;
 
17
  }
18
 
19
+ /* ----- reset ------------------------------------------------- */
20
+ *{box-sizing:border-box;margin:0;padding:0}
21
+ body{
22
+ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
23
+ background:var(--bg);
24
+ color:var(--text);
25
+ line-height:1.6;
26
+ padding:1rem;
 
 
 
 
 
27
  }
28
 
29
+ /* ----- layout containers ------------------------------------- */
30
+ header{ text-align:center;margin-bottom:2rem }
31
+ header h1{ font-size:2.5rem;margin-bottom:.5rem }
32
+ header p { color:var(--text-muted);font-size:1.1rem }
33
 
34
+ main{
35
+ max-width:900px;
36
+ margin:0 auto;
37
+ display:grid;
38
+ gap:2rem;
 
 
39
  }
40
 
41
+ section{
42
+ background:var(--bg-secondary);
43
+ border:1px solid var(--border);
44
+ border-radius:var(--radius);
45
+ padding:1.5rem;
46
+ box-shadow:0 4px 12px rgba(0,0,0,.25);
47
  }
48
 
49
+ h2{ font-size:1.25rem;margin-bottom:1rem }
50
+ label{ display:block;margin-bottom:.5rem;font-weight:600 }
51
 
52
+ /* ----- form controls ----------------------------------------- */
53
  select,
54
  input[type="file"],
55
  input[type="url"],
56
+ textarea{
57
+ width:100%;
58
+ padding:.75rem;
59
+ border:1px solid var(--border);
60
+ border-radius:var(--radius);
61
+ background:var(--input-bg);
62
+ color:var(--input-text);
63
+ font-size:1rem;
64
+ transition:border-color var(--transition);
65
  }
 
66
  select:focus,
67
  input:focus,
68
+ textarea:focus{ outline:none;border-color:var(--accent) }
69
 
70
+ textarea{
71
+ resize:vertical;
72
+ min-height:120px;
73
+ font-family:var(--font-mono);
74
  }
75
 
76
+ /* ----- tabs -------------------------------------------------- */
77
+ .tabs{ display:flex;gap:.5rem;margin-bottom:1rem }
78
+ .tabs button{
79
+ background:transparent;
80
+ border:1px solid var(--border);
81
+ border-radius:var(--radius);
82
+ padding:.5rem 1rem;
83
+ color:var(--text-muted);
84
+ cursor:pointer;
85
+ transition:background var(--transition),color var(--transition);
 
86
  }
87
+ .tabs button[aria-selected="true"]{
88
+ background:var(--accent);
89
+ color:var(--bg);
90
+ border-color:var(--accent);
 
91
  }
92
+ .tabs button:hover:not([aria-selected="true"]){
93
+ background:var(--border);
94
+ color:var(--text);
 
95
  }
96
 
97
+ /* ----- misc -------------------------------------------------- */
98
+ .search-toggle{ display:flex;align-items:center;gap:.5rem;margin-top:1rem }
99
+
100
+ .actions{ display:flex;gap:1rem;justify-content:flex-end }
101
+ button{
102
+ padding:.75rem 1.5rem;
103
+ border:none;
104
+ border-radius:var(--radius);
105
+ font-size:1rem;
106
+ cursor:pointer;
107
+ transition:background var(--transition);
108
  }
109
+ #clear{ background:var(--border);color:var(--text) }
110
+ #clear:hover{ background:var(--text-muted) }
111
+ #generate{ background:var(--accent);color:var(--bg) }
112
+ #generate:hover{ background:var(--accent-hover) }
113
+
114
+ pre{
115
+ background:var(--bg);
116
+ border:1px solid var(--border);
117
+ border-radius:var(--radius);
118
+ padding:1rem;
119
+ overflow-x:auto;
120
+ font-family:var(--font-mono);
121
+ font-size:.9rem;
 
 
 
122
  }
123
 
124
+ iframe{
125
+ width:100%;
126
+ height:400px;
127
+ border:1px solid var(--border);
128
+ border-radius:var(--radius);
129
+ background:#fff;
130
  }
131
 
132
+ .visually-hidden{
133
+ position:absolute;width:1px;height:1px;overflow:hidden;
134
+ clip:rect(0 0 0 0);white-space:nowrap;
 
 
 
 
 
 
 
 
135
  }
136
 
137
+ /* ----- mobile tweaks ---------------------------------------- */
138
+ @media(max-width:600px){
139
+ body{ padding:.5rem }
140
+ header h1{ font-size:2rem }
141
+ .actions{ flex-direction:column }
142
  }