Temporaly reverted old test variant

front_new/css/chats.css

@@ -0,0 +1,70 @@
+.chats {
+  width: 200pt;
+  border-right: 1px black solid;
+  display: flex;
+  flex-direction: column;
+  padding: 5pt;
+}
+
+.chatslist {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+#chatslistuser {
+  display: flex;
+  flex-direction: column;
+  gap: 2pt;
+  padding: 5pt;
+  margin-top: 5pt;
+  margin-bottom: 5pt;
+  user-select: none;
+  border-radius: 12pt;
+  cursor: pointer;
+}
+
+.active-chatlistuser {
+  background-color: gainsboro !important;
+}
+
+#chatslistuser:hover {
+  background-color: aliceblue;
+}
+#chatslistuser:active {
+  background-color: gainsboro;
+}
+
+#chatslistuser > #title {
+  font-size: 12pt;
+  font-weight: 600;
+}
+#chatslistuser > #subtitle {
+  font-size: 10pt;
+}
+
+.espselect {
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  align-items: center;
+  padding: 0;
+}
+
+.espselect > .title {
+  flex-grow: 1;
+  padding: 5pt;
+}
+
+.espselect > .button {
+  background-color: rgba(0, 0, 0, 0);
+  padding: 5pt;
+  border: none;
+  user-select: none;
+}
+
+.espselect > .button:hover {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
+}
+.espselect > .button:active {
+  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+}