- fav stars on right

- solo and groups all flex now

public/index.html

@@ -1821,16 +1821,13 @@
     <!-- templates for JS to reuse when needed -->
 
     <div id="character_template" class="template_element">
-        <div class="character_select" chid="" id="">
+        <div class="character_select flex-container wide100p alignitemsflexstart" chid="" id="">
             <div class="avatar" title="">
                 <img src="">
             </div>
-            <div class="flex-container wide100p">
+            <div class="flex-container wide100pLess70px">
-                <div class="ch_name">
+                <div class="ch_name"></div>
-                    <span class="name_text"></span>
+                <i class="ch_fav_icon fa-solid fa-star"></i>
-
-                </div>
-                <i class="ch_fav_icon fa-solid fa-star fa-2xs"></i>
                 <input class="ch_fav" value="" hidden />
                 <div class="tags tags_inline"></div>
             </div>

public/script.js

@@ -676,10 +676,10 @@ function printCharacters() {
         }
         // Populate the template
         const template = $('#character_template .character_select').clone();
-        template.attr({'chid': i, 'id': `CharID${i}` });
+        template.attr({ 'chid': i, 'id': `CharID${i}` });
         template.find('img').attr('src', this_avatar);
         template.find('.avatar').attr('title', item.avatar);
-        template.find('.ch_name .name_text').text(item.name);
+        template.find('.ch_name').text(item.name);
         template.find('.ch_fav_icon').css("display", item.fav == "true" ? '' : 'none');
         template.find('.ch_fav').val(item.fav);
 

public/style.css

@@ -587,9 +587,7 @@ body.big-avatars .avatar img {
     grid-column-start: 3;
 }
 
-.ch_name {
+
-    font-weight: bolder;
-}
 
 .mes_text {
     font-weight: 500;
@@ -1040,18 +1038,14 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 }
 
-.character_select .ch_name {
+/*applies to char list and mes_text char display name*/
-    /*
-    margin-left: 5px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    align-self: start;
-    display: flex;
-    gap: 5px;
-    max-height: 90px;
-    white-space: nowrap;
-    */
 
+.ch_name {
+    font-weight: bolder;
+}
+
+/*applies to both groups and solos chars in the char list*/
+#rm_print_characters_block .ch_name {
     margin-left: 5px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1059,23 +1053,24 @@ input[type=search]:focus::-webkit-search-cancel-button {
     gap: 5px;
     width: 100%;
     white-space: nowrap;
-
+    max-width: calc(100% - 29px);
-    /*
-    margin-left: 10px;
-    margin-top: 5px;
     overflow: hidden;
     text-overflow: ellipsis;
-    align-self: center;
+
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    */
 }
 
 .character_select:hover {
     background-color: var(--white30a);
 }
 
+.alignitemsflexstart {
+    align-items: flex-start;
+}
+
+.wide100pLess70px {
+    width: calc(100% - 70px);
+}
+
 #avatar_url_div {
     display: none;
 }
@@ -1199,12 +1194,12 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 
 .ch_fav_icon {
-    /*
+    filter: drop-shadow(0px 0px 1px black);
-    position: absolute;
+    justify-self: end;
-    left: 56px;
+    flex: 1;
-    top: 10px;
+    text-align: end;
-    */
+    align-self: flex-start;
-    filter: drop-shadow(0px 0px 3px px black);
+    margin-top: 5px;
     color: yellow;
     font-size: 12px;
 }
@@ -2413,15 +2408,15 @@ h5 {
     /* position: absolute; */
     margin-right: 5px;
     margin-left: 5px;
-    top: 30px;
+    /*     top: 30px;
-    left: 70px;
+    left: 70px; */
     opacity: 0.6;
     column-gap: 0.2rem;
     row-gap: 0.2rem;
     justify-content: flex-start;
     max-height: 66%;
     overflow: hidden;
-    max-width: calc(100% - 75px);
+    /* max-width: calc(100% - 75px); */
     /*
     position: absolute;
     margin-right: 5px;
@@ -2664,11 +2659,11 @@ body .ui-widget-content {
     margin: 0 10px;
 }
 
-.group_select .ch_name {
+/* .group_select .ch_name {
     max-width: calc(100% - 100px);
     overflow: hidden;
     text-overflow: ellipsis;
-}
+} */
 
 .group_select .group_fav_icon {
     justify-self: end;