SimplyTranslate-fork/static/style.css

@keyframes headerbg {0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{background-position: 0% 50%;}}
*{box-sizing: border-box;font-family: sans-serif;scrollbar-color: #7068DB transparent;scrollbar-width:thin;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #7068DB;}
html, body{text-align:center;font-family: sans-serif;margin:0;padding:0;}
a{text-decoration:none;color: #4E46BB;font-size:1rem;padding:2pt;}
ol{list-style-type: circle;list-style-image: url('list.gif');}
li:first-letter{text-transform: capitalize;}
body{background:#E1DDEA;color:#454065;}
.wrap {display: grid;grid-template-areas: "header" "main" "footer";gap: 10pt;
justify-items:center;min-height:100vh;}
.wrap2 {display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: 0.1fr;grid-template-areas: "languages1 button1 languages2" "input button2 input2" "audio1 . audio2" "definit . transl";}
header {grid-area: header;background: linear-gradient(45deg, #A58AE3, #BB6BC6, #7068DB, #BB6BC6);background-size: 400% 400%;width:100%;height:50pt;padding:5pt;display: flex;align-items: center;justify-content: space-between;animation:headerbg 10s ease infinite;border-bottom:1px solid rgba(255,255,255,0.5);}
header h1 {font-size:2rem;color:white;text-shadow: 2px 0px 4px rgba(0,0,0,0.1);}
footer {font-size:0.80rem;padding:5pt;margin-top:10pt;grid-area:footer;width:100%;}
footer ul > li {display:inline;}
#translation-form {grid-area: main;margin-top:2vh;width:90vw;}
#could_not_switch_languages_text {color:red;}
.audio-player {margin-top:10pt;}
audio {filter: invert(1) contrast(1) saturate(1) grayscale(1);width: 50%;height: 30pt;border-radius: 50pt;}
audio::-webkit-media-controls-enclosure {filter: invert(1);}
.language {margin:0 28pt;}
.switch_languages {grid-area:button1;}
input, select,textarea,button {border-radius: 5pt;border: none;font-size: 1rem;	}
button {padding: 4px 10px;
background: linear-gradient(145deg, #A58AE3,#7068DB);cursor:pointer;transition:ease-out 0.095s;box-shadow: -20px 20px 40px rgba(0,0,0,0.05),20px -20px 40px rgba(255,255,255,0.1);color:white;}
button:hover {transform:scale(1.1);}
#prefs button {padding:15pt;font-size:1.5rem;}
#translate-button {height: 50pt;margin: 50% auto;grid-area: button2;width: 50pt;border-radius: 50pt;}
#to_language, #from_language,textarea {resize:none;font-size:1.5rem;padding:5pt;background:linear-gradient(225deg, #fff, #f0f0f0);}
#to_language:focus, #from_language:focus, textarea:focus{border-color: #A58AE3;outline: 1px solid #A58AE3;}
input,select,textarea {padding: 4px;}
select {font-size:1.8rem;}
textarea {margin-top:15pt;overflow-y:scroll;height:200pt;width:40vw;}
select, textarea {box-shadow: -20px 20px 40px rgba(0,0,0,0.05),20px -20px 40px rgba(255,255,255,0.1);color:#454065;}
select,textarea,button{border:1px solid rgba(255,255,255,0.1);}
.translations {grid-area: transl;}
.definitions {grid-area: definit;}
.definitions, .translations{margin-top: 15pt;margin-bottom:15pt;}
.definitions input, .translations input {display:none;}
.definitions label, .translations label {display:none;}
.def-content, .trans-content {display:block;text-align:left;}
.syn_type,.def_type {color: #4E46BB;text-transform: capitalize;}
.def-content .syn{display:block;}
.syn {color: #BB6BC6;}
.use_in_sentence {color: #AF2FD0;display:block;}
.use_in_sentence:first-letter {text-transform: capitalize;}
.definitions li:not(:last-child) {margin-bottom: 1rem;}
#prefs {font-size:1.4rem;display:grid;justify-items:center;gap:10pt;}
#prefs input[type="checkbox"]{width:30pt;height:30pt;}

@media screen and (max-width: 820px) {
header {height:100%;}
textarea {width: 90vw;margin-top:10pt} select{font-size:2.4rem;width:90vw;}
#switchbutton {height: 50pt;width: 100pt;margin-top: 20pt;}
#translate-button {width:100pt;height:100pt;margin:10pt 15pt 30pt 15pt;}.language{margin:0;}
.wrap2 { grid-template-areas:"languages1" "input" "audio1" "definit" "button2" "languages2" "input2" "audio2" "transl" "button1";justify-items:center;width: 100vw;margin: 0;    grid-template-rows: auto;}
footer {font-size:0.90rem;padding:5pt;}
.def-content, .trans-content {display:none;}
.definitions input, .translations input {display:none;}
.definitions label, .translations label {display:block;padding:15pt;margin:10pt auto 5pt auto;background: linear-gradient(145deg, #A58AE3,#7068DB);color:white;border-radius:5px;border:1px solid rgba(255,255,255,0.1);box-shadow:-15px 15px 20px rgba(0,0,0,0.1),15px -15px 20px rgba(255,255,255,0.1);cursor:pointer;transition:ease-out 0.095s;width:200pt;font-size:1.5rem;}
.definitions label:hover,.translations label:hover {transform:scale(1.1);}
.definitions input[type="checkbox"]:checked ~ .def-content, .translations input[type="checkbox"]:checked ~ .trans-content{display:block;font-size:2rem;}
.def_type,.syn_type{display:none;}
svg {transform:scale(1.5);}header svg{transform:scale(1.2);}footer ul > li {display:block;list-style:none;margin-right:25pt;margin-bottom:10pt;}
}