hexaeight-sessions/auth/chatui.css

Authenticate Any Email User In Front-End Apps Using HexaEight Sessions

/* styles.css */

       body {
            font-family: 'Lato', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }

 .loading-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
            color: blue;
        }
 .loading {
            margin-top: 20px;
            text-align: center;
            font-size: 20px;
            animation: blink 1.5s linear infinite;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Optional: Style the input field within the prompt */
        input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* Chat styles */
        .chat-container {
            max-width: responsive;
            margin: 20px auto;
            padding: 20px;
            background-color: #f2f2f2;
            display: flex;
            flex-direction: column;
            height: 70vh;
            overflow: hidden;
        }

        .user-container {
            max-width: responsive;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            height: 70vh;
            overflow: hidden;
        }
        .message-container {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
        }

        .message {
            margin: 10px;
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
            position: relative;
        }

    .user-message {
        color: #ffffff; /* White text color for user messages */
        background-color: #2196F3;
        border-radius: 15px;
        align-self: flex-end;
        clear: both;
        margin-left: auto;
    }

    .user-message .message-header,
    .user-message .timestamp {
        color: #ffffff; /* White text color for user message header and timestamp */
    }

    .bot-message {
        color: #000000; /* Black text color for bot messages */
        background-color: #ffffff; /* White background for bot */
        border-radius: 15px;
        align-self: flex-start;
        clear: both;
        margin-left: 0;
    }

    .bot-message .message-header,
    .bot-message .timestamp {
        color: #000000; /* Black text color for bot message header and timestamp */
    }


        .timestamp,
        .timestamp-bot,
        .message-header {
            font-size: 12px;
            text-align: right;
            margin-top: 5px;
            color: #000000;
        }

        .message-header {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 5px;
            text-align: left;
        }

        .input-container {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        .input-wrapper {
            display: flex;
            align-items: center;
        }

        .input-caption {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        #message-input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none;
            overflow: hidden;
            flex-grow: 1;
            max-height: 9em;
        }

        #sendButton {
            background-color: #007aff;
            color: #ffffff;
            border: none;
            border-radius: 50%;
            padding: 10px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            margin-left: 10px;
            text-align: center;
            font-size: 20px;
        }

        .request-pending {
            background-color: #ccc;
            cursor: not-allowed;
        }

        /* Add word-wrap property to message text */
        .message-text {
	    font-size: 14px;
            word-wrap: break-word;
            white-space: pre-line;
        }


        .header {
            position: sticky;
            top: 0;
            background-color: #ffffff;
            color: #007aff;
            padding: 10px 0;
            text-align: center;
	    align-items: center;
		display: flex;
   		 flex-direction: column;
            z-index: 1;
        }
.carousel {
    width: 100%; /* Full width of the container */
    max-width: 600px; /* Set a maximum width if desired */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 18px;
    margin: 0 auto; /* Center the carousel horizontally */
}

.slide {
    display: inline-block;
    margin-right: 10px; /* Adjust the spacing between slides */
}

/* Animation for the carousel */
@keyframes slide {
    0%, 100% {
        transform: translateX(0);
    }
    33.33% {
        transform: translateX(-100%);
    }
    66.66% {
        transform: translateX(-200%);
    }
}

.slide {
    animation: slide 6s linear infinite;
}