quikchat/dist/quikchat.css

quikchat is a simple vanilla (no dependancies) JavaScript chat control for browsers

/* 
 quikchat.css see www.github.com/deftio/quikchat for more info
 
 Base Styles - Affect behavior so change with care
 For Themes scroll past this section
 */

.quikchat-base {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    min-width: 200px;
    min-height: 200px;
    box-sizing: border-box !important;
}

.quikchat-title-area {
    margin-left: 8px;
    margin-right: 8px;
    padding-left : 2px;
    padding-right : 2px;
    padding: 8px;
    font-weight: 600;
    font-size: 1.3em;
    box-sizing: border-box;
}

.quikchat-messages-area {
    flex-grow: 1;
    padding: 8px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.quikchat-message {
    padding: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    box-sizing: border-box;
}
/* Core Right-Side Message Alignment */
.quikchat-message.right {
    display: inline-block;
    max-width: 60%;
    padding: 8px 12px;
    text-align: right; /* Default for short messages */
}

/* Right-aligned short messages */
.quikchat-message.right .quikchat-right-singleline {
    text-align: right;
}

/* Right-aligned long/multi-line messages */
.quikchat-message.right .quikchat-right-multiline {
    text-align: left;
    word-wrap: break-word;
}


.quikchat-input-area {
    display: flex;
    align-items: center;
    padding: 8px;
    min-height: 56px;
    height: 4em;
    width: 100%;
    box-sizing: border-box;
}
  
.quikchat-input-textbox {
    flex-grow: 1;
    min-height: 40px;
    resize: none;
    padding: 4px;
    height: 100%;
    box-sizing: border-box;
}

.quikchat-input-send-btn {
    margin-left: 8px;
    padding: 8px;
    height: 100%;
    min-width: 5rem;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}
  
/* ***************************************** */
/*  quikchat theme debug                      
    This theme is for debugging purposes and has a very distinct look. 
 */
.quikchat-theme-debug {
    border: 1px solid black;
    border-radius: 10px;
    background-color: mediumorchid;
}

.quikchat-theme-debug .quikchat-title-area {
    background-color: lightblue;
    color: #333; 
    padding: 8px;
    font-weight: 600;
    margin-right: 10px;
}


.quikchat-theme-debug .quikchat-messages-area {
    border-radius: 1em;
    background-color: lightsalmon;
}

.quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: lightseagreen;
    color: #eee;
    border-radius: 4px;
}
.quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
    background-color: lightpink;
    color: #444;
    border-radius: 4px;
}

/********** User Messages **********
 *  Single / Multiline
 */

 .quikchat-theme-debug .quikchat-messages-area .quikchat-message {
    padding-left : 8px;
    padding-right: 8px;
    border-radius: 0.5em;
 }

/* Short (single) User Messages that are right sided */
.quikchat-theme-debug .quikchat-messages-area .quikchat-message.right-singleline {
    text-align: right; /* Right-align text */
    margin-left: 5%; /* Increased left padding */
}

/* Multiline (long) User Messages */
.quikchat-theme-debug .quikchat-messages-area .quikchat-message.right-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
}

/* Short (single) User Messages that are right sided */
.quikchat-theme-debug .quikchat-messages-area .quikchat-message.center-singleline {
    text-align: center; /* Right-align text */
    margin-left: 5%; /* Increased left margin */
    margin-right: 5%; /* Standard right margin */
}

/* Multiline (long) User Messages */
.quikchat-theme-debug .quikchat-messages-area .quikchat-message.center-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
    margin-right: 5%; /* Standard right padding */
}
/* Short (single) User Messages that are right sided */
.quikchat-theme-debug .quikchat-messages-area .quikchat-message.left-singleline {
    text-align: left; /* Right-align text */
    margin-right: 5%; 
}

/* Multiline (long) User Messages */
.quikchat-theme-debug .quikchat-messages-area-alt .quikchat-message.left-multiline {
    text-align: left; /* Left-align text */
    margin-right: 5%; /* Standard left padding */
}

.quikchat-theme-debug .quikchat-input-area {
    background-color: lightgreen;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
}

.quikchat-theme-debug .quikchat-input-textbox {
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.quikchat-theme-debug .quikchat-input-send-btn {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
}

/* ********************************** */
/* quikchat theme dark                */
.quikchat-theme-dark {
    border: 1px solid #555555;
    border-radius: 10px;
    background-color: #212121;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #eceff1;
}

.quikchat-theme-dark .quikchat-title-area {
    background-color: #212121;
    color: #eceff1;
    padding: 8px;
    font-weight: 600;
    border-bottom: 1px solid #37474f;
}

.quikchat-theme-dark .quikchat-messages-area {
    background-color: #212121;
    color: #eceff1;
    border-radius: 1em;
}

.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: #404040e5;
    color: #eceff1;
    border-radius: 4px;
}
.quikchat-theme-darl .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
    background-color: #5a5a5a;
    color: #fbfbfb;
    border-radius: 4px;
}

/********** User Messages **********
 *  Single / Multiline
 */

 .quikchat-theme-dark .quikchat-messages-area .quikchat-message {
    padding-left : 8px;
    padding-right: 8px;
    border-radius: 0.5em;
 }

/* Short (single) User Messages that are right sided */
.quikchat-theme-dark .quikchat-messages-area .quikchat-message.right-singleline {
    text-align: right; /* Right-align text */
    margin-left: 5%; /* Increased left padding */
}

/* Multiline (long) User Messages */
.quikchat-theme-dark .quikchat-messages-area .quikchat-message.right-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
}

/* Short (single) User Messages that are right sided */
.quikchat-theme-dark .quikchat-messages-area .quikchat-message.center-singleline {
    text-align: center; /* Right-align text */
    margin-left: 5%; /* Increased left margin */
    margin-right: 5%; /* Standard right margin */
}

/* Multiline (long) User Messages */
.quikchat-theme-dark .quikchat-messages-area .quikchat-message.center-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
    margin-right: 5%; /* Standard right padding */
}
/* Short (single) User Messages that are right sided */
.quikchat-theme-dark .quikchat-messages-area .quikchat-message.left-singleline {
    text-align: left; /* Right-align text */
    margin-right: 5%; 
}

/* Multiline (long) User Messages */
.quikchat-theme-dark .quikchat-messages-area-alt .quikchat-message.left-multiline {
    text-align: left; /* Left-align text */
    margin-right: 5%; /* Standard left padding */
}

.quikchat-theme-dark .quikchat-input-area {
    padding: 8px;
    background-color: #263238;

    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
}

.quikchat-theme-dark .quikchat-input-textbox {
    width: 75%;
    padding: 8px;
    background-color: #424242;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 14px;
    color: #eceff1;
}

.quikchat-theme-dark .quikchat-input-send-btn {
    background-color: #1b5e20;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    margin-left: 10px;
    cursor: pointer;
}

/* ********************************** */
/* quikchat theme light */

.quikchat-theme-light {
    border: 1px solid #cccccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}
  
.quikchat-theme-light .quikchat-title-area {
    padding: 8px;
    color: #333;
}
  
.quikchat-theme-light .quikchat-messages-area {
    background-color: #ffffffe2;
    color: #333;
    border-radius: 1em;
}
  
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(odd) {
    background-color: #fffffff0;
    color: #005662;
}
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message:nth-child(even) {
    background-color: #eeeeeee9;
    color: #353535;
}

/********** User Messages **********
 *  Single / Multiline
 */

 .quikchat-theme-light .quikchat-messages-area .quikchat-message {
    padding-left : 8px;
    padding-right: 8px;
    border-radius: 0.5em;
 }

/* Short (single) User Messages that are right sided */
.quikchat-theme-light .quikchat-messages-area .quikchat-message.right-singleline {
    text-align: right; /* Right-align text */
    margin-left: 5%; /* Increased left padding */
}

/* Multiline (long) User Messages */
.quikchat-theme-light .quikchat-messages-area .quikchat-message.right-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
}

/* Short (single) User Messages that are right sided */
.quikchat-theme-light .quikchat-messages-area .quikchat-message.center-singleline {
    text-align: center; /* Right-align text */
    margin-left: 5%; /* Increased left margin */
    margin-right: 5%; /* Standard right margin */
}

/* Multiline (long) User Messages */
.quikchat-theme-light .quikchat-messages-area .quikchat-message.center-multiline {
    text-align: left; /* Left-align text */
    margin-left: 5%; /* Standard left padding */
    margin-right: 5%; /* Standard right padding */
}
/* Short (single) User Messages that are right sided */
.quikchat-theme-light .quikchat-messages-area .quikchat-message.left-singleline {
    text-align: left; /* Right-align text */
    margin-right: 5%; 
}

/* Multiline (long) User Messages */
.quikchat-theme-light .quikchat-messages-area-alt .quikchat-message.left-multiline {
    text-align: left; /* Left-align text */
    margin-right: 5%; /* Standard left padding */
}
/*****
 *  Input Area
 */
.quikchat-theme-light .quikchat-input-area {
    background-color: #f9f9f9;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius : 10px;
}
  
.quikchat-theme-light .quikchat-input-textbox {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}
  
.quikchat-theme-light .quikchat-input-send-btn {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
}