Hugging Face's logo

Spaces:
Xenova
/
react-translator
Running

App Files Community
3

Update assets/index-48a6f08c.css

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