Spaces:
Running
Running
:root { | |
--primary-color: #007bff; | |
--background-color: #213547; | |
--text-color: #fff; | |
--inactive-color: #e9ecef; | |
} | |
#root { | |
max-width: 100%; | |
margin: 0 auto; | |
padding: 2rem; | |
text-align: center; | |
} | |
.language-container { | |
display: flex; | |
gap: 20px; | |
} | |
.textbox-container { | |
display: flex; | |
justify-content: center; | |
gap: 20px; | |
width: 100%; | |
max-width: 800px; | |
} | |
.textbox-container>textarea { | |
width: 50%; | |
} | |
.language-selector { | |
width: 50%; | |
} | |
.language-selector>select { | |
width: 150px; | |
} | |
.progress-container { | |
position: relative; | |
font-size: 14px; | |
color: var(--text-color); | |
background-color: var(--inactive-color); | |
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: var(--primary-color); | |
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; | |
} | |
body { | |
margin: 0; | |
display: flex; | |
place-items: center; | |
min-width: 320px; | |
min-height: 100vh; | |
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif; | |
line-height: 1.5; | |
font-weight: 400; | |
color: var(--text-color); | |
background-color: var(--background-color); | |
font-synthesis: none; | |
text-rendering: optimizeLegibility; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
-webkit-text-size-adjust: 100%; | |
} | |
h1 { | |
font-size: 3.2em; | |
line-height: 1; | |
margin: 8px; | |
} | |
select { | |
padding: .3em; | |
cursor: pointer; | |
font-family: inherit; | |
border-radius: 8px; | |
border: 1px solid transparent; | |
font-size: 1em; | |
background-color: var(--inactive-color); | |
transition: border-color .25s; | |
} | |
select:hover { | |
border-color: var(--primary-color); | |
} | |
select:focus, | |
select:focus-visible { | |
outline: 4px auto -webkit-focus-ring-color; | |
} | |
textarea { | |
padding: .6em; | |
font-family: inherit; | |
border-radius: 8px; | |
border: 1px solid transparent; | |
font-size: 1em; | |
background-color: var(--inactive-color); | |
transition: border-color .25s; | |
} | |
textarea:hover { | |
border-color: var(--primary-color); | |
} | |
textarea:focus, | |
textarea:focus-visible { | |
outline: 4px auto -webkit-focus-ring-color; | |
} | |
button { | |
padding: .6em 1.2em; | |
cursor: pointer; | |
font-weight: 500; | |
font-family: inherit; | |
border-radius: 8px; | |
border: 1px solid transparent; | |
font-size: 1em; | |
background-color: var(--inactive-color); | |
transition: border-color .25s; | |
} | |
button:hover:not([disabled]) { | |
border-color: var(--primary-color); | |
} | |
button:focus, | |
button:focus-visible { | |
outline: 4px auto -webkit-focus-ring-color; | |
} | |
button[disabled] { | |
cursor: not-allowed; | |
} | |