Fix style of lock + group default message

public/index.html

@@ -332,8 +332,13 @@
             <div class="right_menu_button" id="rm_button_selected_ch">
                 <h2></h2>
             </div>
-            <div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"
+            <div class="right_menu_button" id="rm_button_panel_pin_div" title="Locked = Settings panel stays open">
-                    title="Locked = Settings panel stays open"></div>
+                <input type="checkbox" id="rm_button_panel_pin">
+                <label for="rm_button_panel_pin">
+                    <img class="unchecked" alt="" src="img/lock-open-solid.svg" />
+                    <img class="checked" alt="" src="img/lock-solid.svg" />
+                </label>
+            </div>
         </div>
 
         <div id="rm_ch_create_block" class="right_menu" style="display: none;">

public/script.js

@@ -66,6 +66,7 @@ export {
     default_avatar,
     system_message_types,
     talkativeness_default,
+    default_ch_mes,
 }
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -91,7 +92,7 @@ let safetychat = [
 let chat_create_date = 0;
 
 let prev_selected_char = null;
-let default_ch_mes = "Hello";
+const default_ch_mes = "Hello";
 let count_view_mes = 0;
 let mesStr = "";
 let generatedPromtCache = "";

public/scripts/group-chats.js

@@ -31,6 +31,7 @@ import {
     talkativeness_default,
     selectRightMenuWithAnimation,
     setRightTabSelectedClass,
+    default_ch_mes,
 } from "../script.js";
 
 export {

public/style.css

@@ -530,7 +530,7 @@ input[type=submit] {}
 #right-nav-panel-tabs {
     margin-top: 10px;
     margin-bottom: 10px;
-    width: calc(100% - 70px);
+    width: calc(100% - 50px);
     margin-left: 20px;
     margin-right: 30px;
     display: flex;
@@ -560,42 +560,23 @@ input[type=submit] {}
 
 
 #rm_button_panel_pin {
-    padding: 0;
+    display: none;
-    margin: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    z-index: 3001;
 }
 
-#rm_button_panel_pin_div {
+#rm_button_panel_pin:checked + label .checked {
-    width: 26px;
-    height: 26px;
-}
-
-#rm_button_panel_pin:hover::after {
-    filter: invert(1) brightness(150%);
-}
-
-#rm_button_panel_pin::after {
-    content: ' ';
-    transform: translateY(-100%);
-    background-repeat: no-repeat;
-    background-position: center;
-    position: absolute;
     display: block;
-    padding: 0;
-    margin: 0;
-    background-image: url('/img/lock-open-solid.svg');
-    filter: invert(1);
-    width: 26px;
-    height: 26px;
-    -webkit-transition: all 0.275s;
-    transition: all 0.275s;
 }
 
-#rm_button_panel_pin:checked::after {
+#rm_button_panel_pin:checked + label .unchecked {
-    background-image: url('/img/lock-solid.svg');
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked)  + label .checked {
+    display: none;
+}
+
+#rm_button_panel_pin:not(:checked) + label .unchecked {
+    display: block;
 }
 
 #rm_button_selected_ch {
@@ -2215,6 +2196,9 @@ input[type="range"] {
 
 .group_select .ch_name {
     flex-grow: 1;
+    max-width: calc(100% - 100px);
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .group_select .group_icon img {
@@ -2432,6 +2416,7 @@ h2 {
 
 .right_menu_button img {
     filter: invert(1);
+    cursor: pointer;
     height: 26px;
 }