Чат
This commit is contained in:
263
lab1/screen-forms/chat-screen.css
Normal file
263
lab1/screen-forms/chat-screen.css
Normal file
@@ -0,0 +1,263 @@
|
||||
/* Специфичные стили для экрана чата */
|
||||
|
||||
/* Главный контейнер чата */
|
||||
.chat-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Область сообщений */
|
||||
.messages-area {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Системное сообщение */
|
||||
.system-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.system-text {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: var(--color-text-medium);
|
||||
font-size: var(--font-size-small);
|
||||
padding: var(--spacing-xs) var(--spacing-lg);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Сообщение */
|
||||
.message {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
max-width: 80%;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Сообщение от другого участника */
|
||||
.message-other {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* Своё сообщение */
|
||||
.message-own {
|
||||
align-self: flex-end;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* Аватар отправителя */
|
||||
.message-avatar {
|
||||
font-size: 32px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Пузырь сообщения */
|
||||
.message-bubble {
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.message-own .message-bubble {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.message-own .message-author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-relaxed);
|
||||
color: var(--color-text-dark);
|
||||
word-wrap: break-word;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.message-own .message-text {
|
||||
color: var(--color-bg-card);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: var(--font-size-tiny);
|
||||
color: var(--color-text-medium);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-own .message-time {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Фото в сообщении */
|
||||
.message-photo {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Карточка местоположения */
|
||||
.location-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
background: var(--color-bg-secondary);
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.location-icon {
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-dark);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.location-distance {
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--color-text-medium);
|
||||
}
|
||||
|
||||
/* Панель ввода */
|
||||
.input-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
background: var(--color-bg-card);
|
||||
border-top: 1px solid var(--color-border);
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.input-action-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-bg-secondary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-action-btn:active {
|
||||
transform: scale(0.95);
|
||||
background: #D5DBDB;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--color-bg-secondary);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-radius: 20px;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.message-input::placeholder {
|
||||
color: var(--color-text-medium);
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition-fast) ease, background var(--transition-fast) ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.send-btn:active {
|
||||
transform: scale(0.95);
|
||||
background: #245238;
|
||||
}
|
||||
|
||||
.send-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-bg-card);
|
||||
}
|
||||
|
||||
/* Скроллбар для области сообщений */
|
||||
.messages-area::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.messages-area::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.messages-area::-webkit-scrollbar-thumb {
|
||||
background: #BDC3C7;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.messages-area::-webkit-scrollbar-thumb:hover {
|
||||
background: #95A5A6;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user