From 69ec9135a778e5cca949265fd8ba484c0e1bbc43 Mon Sep 17 00:00:00 2001
From: Alkohole <59339504+Alkohole@users.noreply.github.com>
Date: Sat, 23 Mar 2024 14:27:30 +0100
Subject: [PATCH] Update for v0.3.4(web)

---
 css/style.css | 60 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index 517d538..242a608 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,7 +38,7 @@ textarea:focus {
     border: solid 2px;
     border-color: rgba(255, 140, 0, 0.2);
     margin-top: 10px;
-    width: 140px;
+    width: 100px;
     height: 40px;
     font-size: 22px;
     justify-content: center;
@@ -82,13 +82,13 @@ textarea:focus {
 .boxButton_tts{
     background-color: rgba(255, 140, 0, 0.2);
     font-size: 22px;
-    &::after{content: " ▶";}
+    &::after{content: "▶";}
 }
-.boxButton_tts.state-invalid{content: "";&:after{content:"";}&::before{content:"";}} /* Видимо этот класс поистине инвалид... */
+.boxButton_tts.state-invalid{content: "";&:after{content:"▶";}&::before{content:"";}} /* Видимо этот класс поистине инвалид... */
 .boxButton_tts.state-loading{
     border-top-right-radius: 30px;
     font-size: 22px;
-    &:after{content: " 三ᕕ( ᐛ )ᕗ";}
+    &:after{content: "ᕕ(ᐛ)ᕗ";}
 }
 .boxButton_tts.state-playing{
     width: 40px;
@@ -97,7 +97,7 @@ textarea:focus {
     -webkit-animation:pulse 1.8s infinite;
     animation:pulse 1.8s infinite;
     font-size: 22px;
-    &:after{content: " ■";}
+    &:after{content: "■";}
 }
 .selector-models{
     display: flex;
@@ -113,12 +113,60 @@ textarea:focus {
     width: 125px;
     height: 40px;
     font-size: 22px;
+    border-bottom-right-radius: 23px;
+    color: rgba(184, 104, 0, 0.6);
+    cursor: pointer;
+    transition: all 0.5s ease;
+    background-color: rgba(255, 140, 0, .2);
+    &:hover{
+        border-color: rgba(255, 140, 0, 0.6);
+        color: rgba(255, 140, 0, .8);
+    }
+    &::-ms-expand{display: none;}
+}
+.selector-speed{
+    display: flex;
+    float: right;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: solid 2px;
+    border-color: rgba(255, 140, 0, 0.2);
+    margin-top: 10px;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    font-size: 22px;
+    color: rgba(184, 104, 0, 0.6);
+    cursor: pointer;
+    transition: all 0.5s ease;
+    background-color: rgba(255, 140, 0, .2);
+    &:hover{
+        border-color: rgba(255, 140, 0, 0.6);
+        color: rgba(255, 140, 0, .8);
+    }
+    &::-ms-expand{display: none;}
+}
+
+.selector-emotion{
+    display: flex;
+    float: right;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: solid 2px;
+    border-color: rgba(255, 140, 0, 0.2);
+    margin-top: 10px;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    font-size: 22px;
     border-top-left-radius: 30px;
     border-bottom-left-radius: 30px;
-    border-bottom-right-radius: 30px;
     color: rgba(184, 104, 0, 0.6);
     cursor: pointer;
     transition: all 0.5s ease;
+    background-color: rgba(255, 140, 0, .2);
     &:hover{
         border-color: rgba(255, 140, 0, 0.6);
         color: rgba(255, 140, 0, .8);