Hugging Face's logo

Spaces:
TheVera
/
BotVeraAI
Running

App Files Community
BotVeraAI / styles.css
TheVera's picture
TheVera
Update styles.css
44f4c56 verified
Raw History Blame Contribute Delete
11.6 kB
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f4f4f9;
color: #333;
}
.chat-container {
display: flex;
height: 100vh;
width: 100%;
background-color: #f4f4f9;
}
/* History Panel */
/* .history-panel {
background-color: #1f2937;
color: #fff;
width: 250px;
max-width: 250px;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: -250px; /* Hide off-screen initially on mobile */
transition: left 0.3s ease; /* Smooth transition */
z-index: 10;
} */
/* .history-panel {
background-color: #1f2937;
color: #fff;
width: 250px;
max-width: 250px;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
} */
.history-panel.show {
left: 0; /* Slide in from the left */
}
.menu-icon {
/* font-size: 2rem; */
/* color: #fff; */
cursor: pointer;
}
.history-content {
margin-top: 20px;
}
.history-items {
margin-top: 20px;
overflow-y: auto;
height: calc(100% - 60px);
}
.history-items .history-item {
padding: 10px;
margin-bottom: 10px;
background-color: #333;
border-radius: 5px;
cursor: pointer;
}
/* Chat Panel */
.chat-panel {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #fff;
}
.chat-header {
padding: 10px 20px;
background-color: #1f2937;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.chat-header h1 {
font-size: 1.5rem;
}
.icons {
display: flex;
align-items: center;
gap: 15px;
}
.header-icon {
width: 24px;
height: 24px;
cursor: pointer;
}
.charcha-button {
width: 24px;
height: 24px;
cursor: pointer;
}
.three-dot-menu {
/* font-size: 1.5rem; */
cursor: pointer;
position: relative;
display: inline-block;
}
.menu-options {
position: absolute;
right: 0;
top: 20px;
background-color: black;
border: 1px solid #ccc;
border-radius: 5px;
width: 150px;
/* overflow: hidden; */
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.menu-options ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-options li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.menu-options li:hover {
background-color: #f0f0f0;
}
/* Chat Body */
.chat-body {
flex-grow: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
/* User message on the right with light green */
.user-message {
background-color: #d1ffd1; /* Light green for user */
align-self: flex-end; /* Align user messages to the right */
padding: 10px 15px;
border-radius: 10px;
max-width: 70%;
word-wrap: break-word;
}
/* Bot message on the left with light blue */
.bot-message {
background-color: #e9efff; /* Light blue for bot */
align-self: flex-start; /* Align bot messages to the left */
padding: 15px; /* Increase padding for better spacing */
border-radius: 10px; /* Rounded corners */
max-width: 90%; /* Maximum width of the message */
word-wrap: break-word; /* Allow long words to break onto the next line */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
margin-bottom: 10px; /* Space between messages */
}
/* Headings within bot messages */
.bot-message h1,
.bot-message h2,
.bot-message h3 {
margin: 0; /* Remove default margin */
color: #333; /* Darker color for headings */
}
/* Paragraphs within bot messages */
.bot-message p {
margin: 5px 0; /* Space between paragraphs */
line-height: 1.6; /* Increase line height for readability */
color: #555; /* Slightly darker color for text */
}
/* Lists within bot messages */
.bot-message ul,
.bot-message ol {
margin: 5px 0; /* Space around lists */
padding-left: 20px; /* Indent lists */
}
/* Adding a different style for emphasized text */
.bot-message strong {
font-weight: bold; /* Bold text for emphasis */
color: #000; /* Black color for emphasis */
}
/* Adding a different style for links */
.bot-message a {
color: #007bff; /* Link color */
text-decoration: underline; /* Underline links */
}
/* Adding a hover effect for links */
.bot-message a:hover {
text-decoration: none; /* Remove underline on hover */
color: #0056b3; /* Darker color on hover */
}
/* Welcome message, styled the same as bot-message */
.welcome-message {
background-color: #e9efff;
align-self: flex-start;
padding: 10px 15px;
border-radius: 10px;
max-width: 70%;
word-wrap: break-word;
}
/* Chat Footer */
.chat-footer {
padding: 10px 20px;
background-color: #f4f4f9;
display: flex;
align-items: center;
}
.input-container {
display: flex;
align-items: center;
width: 100%;
background-color: #fff;
border-radius: 50px;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.input-container input {
border: none;
flex-grow: 1;
padding: 0 10px;
font-size: 1rem;
outline: none;
}
.mic-icon {
width: 20px;
height: 20px;
background-color: red; /* Default mic button color */
border-radius: 50%;
transition: background-color 0.3s ease;
}
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Black background with transparency */
}
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border-radius: 8px;
width: 300px; /* Width of the modal */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
}
.input-container {
display: flex;
align-items: center;
width: 100%;
}
textarea {
flex-grow: 1;
max-height: 100px; /* Limit height to 4 lines */
min-height: 40px; /* Minimum height for 1 line */
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
font-size: 16px;
resize: none; /* Disable manual resizing */
overflow-y: auto; /* Enable scrolling when content exceeds height */
outline: none;
width: calc(100% - 100px); /* Leave space for buttons */
}
textarea:focus {
border-color: #007bff;
}
#sendButton, #micButton {
background-color: transparent;
border: none;
cursor: pointer;
margin-left: 10px;
}
.mic-icon {
width: 24px;
height: 24px;
}
/* Mantra Block */
.mantra-block {
background: linear-gradient(to bottom, #fff3cd, #ffecb5); /* Light to deep yellow */
border-left: 4px solid #d4d4d4;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', Courier, monospace;
border-radius: 5px; /* Rounded corners for a softer look */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}
#mantraText {
white-space: pre-wrap; /* Ensure line breaks are respected */
font-size: 18px;
color: red; /* Red text for mantra */
font-weight: bold; /* Bold text for emphasis */
}
#repeat-control {
display: flex;
align-items: center;
margin-top: 10px;
}
/* Style for repeat control buttons */
#repeat-control button {
width: 40px; /* Increased width for better appearance */
height: 40px; /* Increased height for better appearance */
font-size: 20px; /* Increased font size */
margin: 0 5px;
background-color: #f8d7da; /* Light red background for the button */
border: 2px solid #dc3545; /* Dark red border */
border-radius: 5px; /* Rounded corners */
cursor: pointer;
transition: background-color 0.3s, transform 0.2s; /* Animation for hover effect */
}
#repeat-control button:hover {
background-color: #f5c6cb; /* Darker red on hover */
transform: scale(1.05); /* Slightly increase size on hover */
}
/* Style for the input box */
#repeat-control input {
width: 60px; /* Slightly wider input for better appearance */
text-align: center;
font-size: 18px; /* Increase font size for visibility */
margin: 0 5px; /* Margin to separate from buttons */
}
/* Play Mantra Button */
.play-mantra-button {
background-color: #007bff; /* Blue background */
color: white; /* White text */
border: none; /* No border */
border-radius: 5px; /* Rounded corners */
padding: 8px 12px; /* Padding for better appearance */
font-size: 16px; /* Font size for button */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s, transform 0.2s; /* Animation for hover effect */
}
.play-mantra-button:hover {
background-color: #0056b3; /* Darker blue on hover */
transform: scale(1.05); /* Slightly increase size on hover */
}
/* Style for the Play Mantra Button inside the mantra block */
.play-mantra-button-container {
margin-top: 10px; /* Margin to separate from input controls */
}
/* Mantra Block */
/* Active state for microphone button */
#micButton.active .mic-icon {
background-color: green; /* Change mic button color to green when active */
}
#sendButton {
background: none;
border: none;
color: #1f2937;
font-size: 1.5rem;
cursor: pointer;
}
/* Style for the logout button */
#logout-button {
background-color: #ff4c4c; /* Red background */
color: white; /* White text */
border: none; /* No border */
padding: 10px 15px; /* Padding around the text */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
font-size: 10px; /* Font size */
transition: background-color 0.3s ease; /* Smooth transition for background color */
}
/* Change background color on hover */
#logout-button:hover {
background-color: #e63939; /* Darker red on hover */
}
/* Style for the logout button when not hovered */
#logout-button:focus {
outline: none; /* Remove focus outline */
}
.home-button {
width: 100%;
padding: 10px;
margin-bottom: 15px;
font-size: 16px;
background-color: #4CAF50; /* Adjust as needed */
color: white;
border: none;
cursor: pointer;
}
.home-button:hover {
background-color: #45a049; /* Hover effect */
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
/* .history-panel {
left:0;
position: relative;
/* display: flex; */
/* width: 0; */
} */
.menu-icon {
position: absolute;
top: 10px;
left: 10px;
}
.chat-header h1 {
font-size: 1.2rem;
}
.chat-footer {
padding: 5px 10px;
}
.input-container {
padding: 5px;
}
.input-container input {
font-size: 0.9rem;
}
}
/* Menu Toggle */
.three-dot-menu.active .menu-options {
display: block;
}
/* For Donate */
/* Modal styling */
.modal {
display: none; /* Hidden by default */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px; /* Adjust to fit content */
max-width: 90%; /* Makes it responsive for small screens */
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1000;
border-radius: 8px; /* Adds a slight rounded corner */
}
.modal-content {
padding: 20px;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
.qr-code {
width: 150px;
height: 150px;
margin: 20px auto;
display: block;
}