Merge branch 'dev' of https://github.com/SillyLossy/TavernAI into dev

public/style.css

@@ -33,7 +33,7 @@
     --greyCAIbg: rgb(36, 36, 37);
     --ivory: rgb(220, 220, 210);
 
-    --sheldWidth: 800px;
+    --sheldWidth: 1000px;
 }
 
 * {
@@ -1043,9 +1043,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
     display: flex;
     flex: 1;
     grid-template-columns: repeat(3, min-content);
-    grid-gap: 20px;
+    grid-gap: 10px;
     align-items: center;
     justify-content: end;
+    flex-wrap: wrap;
 }
 
 #rm_info_block {
@@ -1084,7 +1085,6 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #result_info {
-    margin-left: 10px;
     color: var(--white30a);
     display: flex;
 }
@@ -1184,17 +1184,17 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 .menu_button {
 
-    font-weight: bold;
+    /* font-weight: bold; */
     color: var(--white70);
     background-color: var(--black50a);
     border: 1px solid var(--white30a);
     border-radius: 10px;
-    padding: 10px;
+    padding: 5px;
     width: min-content;
     cursor: pointer;
     margin: 10px 0;
     transition: 0.3s;
-    font-size: 15px;
+    /* font-size: 15px; */
 }
 
 .menu_button:hover {
@@ -1671,10 +1671,12 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after
 
 .range-block-counter {
     width: max-content;
+    display: block;
+    max-width: 100%;
     position: relative;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 10px;
+    /* margin-top: 10px; */
     font-size: 11px;
     color: var(--white50a);
 }
@@ -1899,7 +1901,7 @@ input[type="range"]::-webkit-slider-thumb {
 .checkbox_label {
     display: flex;
     flex-direction: row;
-    column-gap: 10px;
+    column-gap: 5px;
     align-items: center;
 }
 
@@ -2200,6 +2202,7 @@ input[type="range"]::-webkit-slider-thumb {
     width: 100%;
     align-items: center;
     column-gap: 10px;
+    flex-wrap: wrap;
 }
 
 .rm_group_settings {
@@ -2235,6 +2238,9 @@ input[type="range"]::-webkit-slider-thumb {
     overflow: auto;
     display: flex;
     flex-direction: column;
+    border: 1px solid grey;
+    border-radius: 10px;
+    background-color: var(--black30a);
 }
 
 #rm_group_buttons_expander {
@@ -2624,10 +2630,10 @@ a {
     left: auto;
     padding: 0 10px;
     backdrop-filter: blur(10px);
-    background-color: var(--black60a);
+    background-color: var(--black50a);
     -webkit-backdrop-filter: blur(10px);
     z-index: 3000;
-    white-space: nowrap;
+    /* white-space: nowrap; */
     border: 0;
     border-left: 1px solid var(--grey30a);
     border-bottom: 1px solid var(--grey30a);
@@ -2918,6 +2924,8 @@ label[for="extensions_autoconnect"] {
     display: none;
 }
 
+
+
 .drawer-content {
     background-color: var(--black50a);
     color: white;
@@ -2939,6 +2947,28 @@ label[for="extensions_autoconnect"] {
     -webkit-backdrop-filter: blur(20px);
 }
 
+.fillRight, .fillLeft {
+    min-width: unset;
+}
+
+.fillLeft{
+    max-width: calc((100vw - var(--sheldWidth) - 2px) /2);
+    max-height: calc(100vh - 55px);
+    height: calc(100vh - 55px);
+    position: fixed;
+    top: 40px;
+    margin: 0;
+    left: 0;
+    right: auto;
+    padding: 0 10px;
+    border-radius: 0 0 20px 0;
+    box-shadow: none;
+}
+
+.width100p {
+    width:100%;
+}
+
 .drawer-content .text_pole {
     width: 100%;
 }
@@ -2949,13 +2979,20 @@ label[for="extensions_autoconnect"] {
 
 .flex-container {
     display: flex;
-    gap: 20px;
+    gap: 10px;
+    flex-wrap: wrap;
 }
 
 .flexWide50p {
     flex: 50%;
 }
 
+.justifyLeft {
+    text-align: start;
+    justify-content: left;
+    margin-left: unset;
+}
+
 .widthFreeExpand {
     width: unset;
 }
@@ -2964,6 +3001,7 @@ label[for="extensions_autoconnect"] {
     display: flex;
     flex-direction: row;
     column-gap: 10px;
+    flex-wrap: wrap;
 }
 
 #openai_api-presets>div {
@@ -3032,6 +3070,7 @@ label[for="extensions_autoconnect"] {
     display: flex;
     justify-content: space-evenly;
     flex-direction: row;
+    flex-wrap: wrap;
 }
 
 /* ---------- @media queries must always go at the bottom ------------*/