Hugging Face's logo

Spaces:
yufiofficial
/
react-translator
Running

App Files Community
Rooni commited on
Commit
ec4874c
·
1 Parent(s): 66d115f

Update assets/index-48a6f08c.css

Browse files
Files changed (1) hide show
  1. assets/index-48a6f08c.css +96 -62
assets/index-48a6f08c.css CHANGED
@@ -1,9 +1,9 @@
1
- :root {
2
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
  line-height: 1.5;
4
  font-weight: 400;
5
  color: #fff;
6
- background-color: #213547;
7
  font-synthesis: none;
8
  text-rendering: optimizeLegibility;
9
  -webkit-font-smoothing: antialiased;
@@ -11,63 +11,6 @@
11
  -webkit-text-size-adjust: 100%;
12
  }
13
 
14
- body {
15
- margin: 0;
16
- display: flex;
17
- place-items: center;
18
- min-width: 320px;
19
- min-height: 100vh;
20
- background-color: #fff;
21
- }
22
-
23
- .container {
24
- margin: 25px;
25
- display: flex;
26
- flex-direction: column;
27
- gap: 10px;
28
- }
29
-
30
- h1 {
31
- font-size: 3.2em;
32
- line-height: 1;
33
- color: #fff;
34
- }
35
-
36
- h2 {
37
- margin: 8px;
38
- color: #fff;
39
- }
40
-
41
- .select, textarea, button {
42
- border-radius: 8px;
43
- border: 1px solid transparent;
44
- font-size: 1em;
45
- font-family: inherit;
46
- background-color: #f9f9f9;
47
- transition: border-color 0.25s;
48
- }
49
-
50
- .select-container {
51
- display: flex;
52
- gap: 20px;
53
- align-items: center;
54
- }
55
-
56
- .select:hover,
57
- textarea:hover,
58
- button:not([disabled]):hover {
59
- border-color: #646cff;
60
- }
61
-
62
- .select:focus,
63
- .select:focus-visible,
64
- textarea:focus,
65
- textarea:focus-visible,
66
- button:focus,
67
- button:focus-visible {
68
- outline: 4px auto -webkit-focus-ring-color;
69
- }
70
-
71
  #root {
72
  max-width: 1280px;
73
  margin: 0 auto;
@@ -84,6 +27,7 @@ button:focus-visible {
84
  display: flex;
85
  justify-content: center;
86
  gap: 20px;
 
87
  max-width: 800px;
88
  }
89
 
@@ -92,7 +36,7 @@ button:focus-visible {
92
  }
93
 
94
  .language-selector {
95
- width: 50%;
96
  }
97
 
98
  .language-selector>select {
@@ -103,7 +47,7 @@ button:focus-visible {
103
  position: relative;
104
  font-size: 14px;
105
  color: #fff;
106
- background-color: #e9ecef;
107
  border: solid 1px;
108
  border-radius: 8px;
109
  text-align: left;
@@ -117,7 +61,7 @@ button:focus-visible {
117
  width: 1%;
118
  height: 100%;
119
  overflow: hidden;
120
- background-color: #007bff;
121
  white-space: nowrap;
122
  }
123
 
@@ -125,7 +69,97 @@ button:focus-visible {
125
  z-index: 2;
126
  }
127
 
 
 
 
 
 
128
  .progress-bars-container {
129
  padding: 8px;
130
  height: 140px;
131
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
  line-height: 1.5;
4
  font-weight: 400;
5
  color: #fff;
6
+ background-color: #212121;
7
  font-synthesis: none;
8
  text-rendering: optimizeLegibility;
9
  -webkit-font-smoothing: antialiased;
 
11
  -webkit-text-size-adjust: 100%;
12
  }
13
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  #root {
15
  max-width: 1280px;
16
  margin: 0 auto;
 
27
  display: flex;
28
  justify-content: center;
29
  gap: 20px;
30
+ width: 100%;
31
  max-width: 800px;
32
  }
33
 
 
36
  }
37
 
38
  .language-selector {
39
+ width: calc(50% - 20px);
40
  }
41
 
42
  .language-selector>select {
 
47
  position: relative;
48
  font-size: 14px;
49
  color: #fff;
50
+ background-color: #424242;
51
  border: solid 1px;
52
  border-radius: 8px;
53
  text-align: left;
 
61
  width: 1%;
62
  height: 100%;
63
  overflow: hidden;
64
+ background-color: #2196f3;
65
  white-space: nowrap;
66
  }
67
 
 
69
  z-index: 2;
70
  }
71
 
72
+ .selector-container {
73
+ display: flex;
74
+ gap: 20px;
75
+ }
76
+
77
  .progress-bars-container {
78
  padding: 8px;
79
  height: 140px;
80
  }
81
+
82
+ .container {
83
+ margin: 25px;
84
+ display: flex;
85
+ flex-direction: column;
86
+ gap: 10px;
87
+ }
88
+
89
+ h1 {
90
+ font-size: 3.2em;
91
+ line-height: 1;
92
+ color: #fff;
93
+ }
94
+
95
+ h1, h2 {
96
+ margin: 8px;
97
+ color: #fff;
98
+ }
99
+
100
+ select {
101
+ padding: .3em;
102
+ cursor: pointer;
103
+ border-radius: 8px;
104
+ border: none;
105
+ font-size: 1em;
106
+ font-family: inherit;
107
+ background-color: #555;
108
+ transition: border-color .25s;
109
+ }
110
+
111
+ select:hover {
112
+ border-color: #646cff;
113
+ }
114
+
115
+ select:focus,
116
+ select:focus-visible {
117
+ outline: 4px auto #646cff;
118
+ }
119
+
120
+ textarea {
121
+ padding: .6em;
122
+ border-radius: 8px;
123
+ border: none;
124
+ font-size: 1em;
125
+ font-family: inherit;
126
+ background-color: #555;
127
+ transition: border-color .25s;
128
+ }
129
+
130
+ textarea:hover {
131
+ border-color: #646cff;
132
+ }
133
+
134
+ textarea:focus,
135
+ textarea:focus-visible {
136
+ outline: 4px auto #646cff;
137
+ }
138
+
139
+ button {
140
+ padding: .6em 1.2em;
141
+ cursor: pointer;
142
+ font-weight: 500;
143
+ border-radius: 8px;
144
+ border: none;
145
+ font-size: 1em;
146
+ font-family: inherit;
147
+ background-color: #1976d2;
148
+ color: #fff;
149
+ transition: background-color .25s;
150
+ }
151
+
152
+ button[disabled] {
153
+ cursor: not-allowed;
154
+ background-color: #666;
155
+ color: #ccc;
156
+ }
157
+
158
+ button:hover:not([disabled]) {
159
+ background-color: #005cb2;
160
+ }
161
+
162
+ button:focus,
163
+ button:focus-visible {
164
+ outline: 4px auto #646cff;
165
+ }