various design edits

- changed background color of messages selected for deletion
- changed color of delete message confirmation buton
- changed size/height of deletion menu to match normal send_form height (to avoid #chat resizing awkwardly)
- reverted #chat scrollbar to normal display since corners are no longer rounded
- removed corner radius from #chat .mes divs, since they are invisible anyway
- removed large margin-bottom between #chat .mes divs and replaced with a smaller padding. (This makes the delete screen look nicer as there are no gaps between the selected messages)
- aligned deletion checkboxes in the center of the divs and vertical aligned with avatar icons
This commit is contained in:
RossAsscends
2023-02-26 20:34:06 +09:00
parent 2a13d1d9d5
commit 4aecc49e2a
3 changed files with 36 additions and 33 deletions

View File

@@ -1 +1 @@
#bg1 {background-image: url(../backgrounds/tavern.png);}
#bg1 {background-image: url(../backgrounds/theredlake.png);}

View File

@@ -1436,16 +1436,16 @@
}
});
$(document).on('click', '.del_checkbox', function(){ //when a checkbox is clicked
$(document).on('click', '.del_checkbox', function(){ //when a 'delete message' checkbox is clicked
$('.del_checkbox').each(function(){
$(this).prop( "checked", false );
$(this).parent().css('background', css_mes_bg);
});
$(this).parent().css('background', "#791b31"); //sets the bg of the selected msg to a muted red
$(this).parent().css('background', "#600"); //sets the bg of the mes selected for deletion
var i = $(this).parent().attr('mesid'); //checks the message ID in the chat
this_del_mes = i;
while(i < chat.length){ //as long as the current message ID is less than the total chat length
$(".mes[mesid='"+i+"']").css('background', "#791b31"); //sets the bg of the all msgs BELOW the selected msg to a muted red as well
$(".mes[mesid='"+i+"']").css('background', "#600"); //sets the bg of the all msgs BELOW the selected .mes
$(".mes[mesid='"+i+"']").children('.del_checkbox').prop( "checked", true );
i++;
//console.log(i);
@@ -3167,7 +3167,7 @@
<div id="chat"></div>
<div id="form_sheld">
<div id="dialogue_del_mes">
<div id="dialogue_del_mes_text"><h3></h3></div>
<!-- <div id="dialogue_del_mes_text"><h3></h3></div> -->
<div id="dialogue_del_mes_ok" class="menu_button">Delete</div>
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>

View File

@@ -144,7 +144,7 @@ code {
}
#chat::-webkit-scrollbar-track {
margin-bottom: 30px;
/*margin-bottom: 30px;*/
}
::-webkit-scrollbar-thumb {
@@ -299,13 +299,13 @@ code {
.mes {
display: grid;
grid-template-columns: fit-content(60px) 60px auto;
border-radius: 5px;
padding: 5px;
padding-left: 15px;
/* border-radius: 5px; */
padding: 10px;
padding-left: 15px;
vertical-align: top;
width: 100%;
color: rgb(229, 224, 216);
margin-bottom: 26px;
/* margin-bottom: 26px;*/
}
.avatar {
width: 60px;
@@ -1060,7 +1060,7 @@ width: 103px;
#dialogue_popup_ok{
display: inline-block;
margin-right: 20px;
background-color: #791b31;
background-color: #c00;
cursor: pointer;
}
#dialogue_popup_cancel{
@@ -1069,15 +1069,17 @@ width: 103px;
cursor: pointer;
}
#dialogue_del_mes{
width:100%;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
text-align: center;
padding: 4px;
padding: 0px;
height: min-content;
}
#dialogue_del_mes_ok{
#dialogue_del_mes_ok{ /*changes background of OK button in the deletion menu*/
display: inline-block;
background-color: #791b31;
background-color: #c00;
cursor: pointer;
}
#dialogue_del_mes_cancel{
@@ -1087,14 +1089,14 @@ width: 103px;
.menu_button{
font-weight: bold;
color: #fff;
padding: 0.5em;
border: thin solid rgba(200,200,200,0.2);
padding: 5px;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 3px;
background-color: rgba(0,0,0,0.3);
background-color: rgba(0,0,0,0.5);
}
#dialogue_del_mes .menu_button{
font-weight: bold;
font-size: 20px;
font-weight: bold;
font-size: 1.25rem;
}
#shadow_popup{
@@ -1217,19 +1219,20 @@ width: 103px;
input[type='checkbox'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
position: relative;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #rgba(0,0,0,0.5);
overflow: hidden;
border-radius: 3px;
background-color:white;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.8);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
position: relative;
width: 1.5rem;
height: 1.5rem;
overflow: hidden;
border-radius: 3px;
background-color: white;
box-shadow: inset 0 0 3px 0 rgb(0 0 0 / 80%);
cursor: pointer;
margin-top: 18px; /*odd but this is what aligns it with the character avatar*/
right: 5px; /*and centers it in the checkbox column*/
}
input[type='checkbox']::before {