Шаблоны сайта

BEST SOLID PRINCIPLES CMS

Список файлов:

assets
blocks

wizard.js

css

modules

shop

product-page.css

shop-page.css

all.min.css

animate.min.css

bootstrap.css

bootstrap.min.css

bootstrap_limitless.css

bootstrap_limitless.min.css

components.css

components.min.css

custom.css

engine.css

font-awesome.css

font-awesome.min.css

layout.css

layout.min.css

live-chat.css

normalize.css

personal-messages.css

sidebar.css

support.css

wall_custom.css

fonts

Manrope

images

bg

events

favicons

posters

js

bootstrap

bootstrap.bundle.js

bootstrap.bundle.min.js

bootstrap.js

bootstrap.min.js

jquery

jquery.min.js

modules

shop

product-page.js

shop-page.js

vendor

notifications

bootbox.min.js

noty.min.js

sweet_alert.min.js

swiper

modules

a11y-element.css

a11y-element.min.css

a11y.css

a11y.min.css

autoplay-element.css

autoplay-element.min.css

autoplay.css

autoplay.min.css

controller-element.css

controller-element.min.css

controller.css

controller.min.css

effect-cards-element.css

effect-cards-element.min.css

effect-cards.css

effect-cards.min.css

effect-coverflow-element.css

effect-coverflow-element.min.css

effect-coverflow.css

effect-coverflow.min.css

effect-creative-element.css

effect-creative-element.min.css

effect-creative.css

effect-creative.min.css

effect-cube-element.css

effect-cube-element.min.css

effect-cube.css

effect-cube.min.css

effect-fade-element.css

effect-fade-element.min.css

effect-fade.css

effect-fade.min.css

effect-flip-element.css

effect-flip-element.min.css

effect-flip.css

effect-flip.min.css

free-mode-element.css

free-mode-element.min.css

free-mode.css

free-mode.min.css

grid-element.css

grid-element.min.css

grid.css

grid.min.css

hash-navigation-element.css

hash-navigation-element.min.css

hash-navigation.css

hash-navigation.min.css

history-element.css

history-element.min.css

history.css

history.min.css

keyboard-element.css

keyboard-element.min.css

keyboard.css

keyboard.min.css

manipulation-element.css

manipulation-element.min.css

manipulation.css

manipulation.min.css

mousewheel-element.css

mousewheel-element.min.css

mousewheel.css

mousewheel.min.css

navigation-element.css

navigation-element.min.css

navigation.css

navigation.min.css

pagination-element.css

pagination-element.min.css

pagination.css

pagination.min.css

parallax-element.css

parallax-element.min.css

parallax.css

parallax.min.css

scrollbar-element.css

scrollbar-element.min.css

scrollbar.css

scrollbar.min.css

thumbs-element.css

thumbs-element.min.css

thumbs.css

thumbs.min.css

virtual-element.css

virtual-element.min.css

virtual.css

virtual.min.css

zoom-element.css

zoom-element.min.css

zoom.css

zoom.min.css

shared

types

modules

swiper-bundle.css

swiper-bundle.js

swiper-bundle.min.css

swiper-bundle.min.js

swiper-element-bundle.js

swiper-element-bundle.min.js

swiper-element.js

swiper-element.min.js

swiper.css

swiper.js

swiper.min.css

swiper.min.js

app.js

base.js

countdown.js

custom.js

language.js

modules_summernote.js

payment.js

registration_block.js

registration_page.js

theme.js

widgets

counter_widget.js

participation_widget.js

payment_statistics.js

payment_widget.js

quiz_widget.js

walls.js

ws

live-chat.js

notification-list.js

notification.js

personal-messages.js

sendGlobalNotification.js

support.js

tickets-chat.js

main.js
blocks
bodyendscripts.tpl

bottom_menu.tpl

breadcrumbs.tpl

carousel.tpl

copyright.tpl

currency.tpl

error.tpl

faq.tpl

footer.tpl

form.tpl

head.tpl

language.tpl

leftside.tpl

location_item.tpl

logo.tpl

menu.tpl

modal.tpl

module_filter.tpl

notifications.tpl

online_support.tpl

pagetools.tpl

rightside.tpl

support.tpl

theme.tpl

topmenu.tpl

wizard.tpl
chat
live-chat.tpl

message.js

personal-messages.tpl

tickets-chat.tpl
extensions
co_buying

profile_list.tpl

education

grades

diary_grid.tpl

parent_grades.tpl

teacher_grades.tpl

schedules

add_schedule.tpl

schedules_grid.tpl

students_progress

add_student_progress.tpl

students_progress.tpl

page-qr-sharing.tpl

qr-token-payload.tpl
lang
english

home

section-1.tpl

section-2.tpl

section-3.tpl

section-4.tpl

section-5.tpl

section-6.tpl

section-7.tpl

russian

home

section-1.tpl

section-2.tpl

section-3.tpl

section-4.tpl

section-5.tpl

section-6.tpl

section-7.tpl

spanish

home

section-1.tpl

section-2.tpl

section-3.tpl

section-4.tpl

section-5.tpl

section-6.tpl

section-7.tpl

ukrainian

home

section-1.tpl

section-2.tpl

section-3.tpl

section-4.tpl

section-5.tpl

section-6.tpl

section-7.tpl

global_1.tpl
modules
ads

add.tpl

full_ad.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_ads.tpl

similar_entries.tpl

adverts

full_lots.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

short_lots.tpl

similar_lots.tpl

auctions

add.tpl

full_auctions.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

short_auctions.tpl

similar_lots.tpl

coupons

full_coupons.tpl

full_lots.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

short_coupons.tpl

short_lots.tpl

similar_lots.tpl

events

add.tpl

full_event.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_events.tpl

similar_entries.tpl

files

add.tpl

full_file.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_files.tpl

similar_entries.tpl

investments

full_lots.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

short_lots.tpl

similar_lots.tpl

lots

add.tpl

full_lots.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

short_lots.tpl

similar_lots.tpl

movies

add.tpl

full_movie.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_movies.tpl

similar_entries.tpl

news

add.tpl

full_news.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_news.tpl

similar_entries.tpl

products

add.tpl

full_product.tpl

latest_entries.tpl

most_viewed_entries.tpl

popular_entries.tpl

short_products.tpl

similar_entries.tpl

shops

add.tpl

full_lots.tpl

latest_lots.tpl

most_viewed_lots.tpl

popular_lots.tpl

product_page.tpl

shop_page.tpl

short_shop.tpl

similar_lots.tpl
payment
balance

error.tpl

success.tpl

blocks

bonuses_section.tpl

finish_payment_section.tpl

info_section.tpl

pay_grid.tpl

coinbase

error.tpl

success.tpl

stripe

error.tpl

success.tpl

cart.tpl

checkout.tpl

payment.tpl
widgets
custom

counter

counter_widget_1.tpl

participation

participation_widget_1.tpl

participation_widget_2.tpl

payments-widgets

donate

donate.tpl

pay_for_hidden_data

hidden_data.tpl

sale

sale.tpl

subscription

base-subscription.tpl

professional-subscription.tpl

universal-payment.tpl

quiz

quiz_widget_1.tpl

wall

wall_1.tpl

counter_widget.tpl

event_participants.tpl

lots_participants.tpl

participation_widget.tpl

payment_statistics.tpl

payment_widget.tpl

quiz_widget.tpl

reviews_facebook.tpl

reviews_google.tpl

slider_facebook.tpl

slider_instagram.tpl

submit_feedback.tpl
add-comment.tpl
addnews.tpl
authorization.tpl
categories.tpl
comments-list.tpl
comments.tpl
error.tpl
home.tpl
info.tpl
latestnews.tpl
login.tpl
lostpassword.tpl
main.tpl
mostviewednews.tpl
my-wallet.tpl
navigation.tpl
notifications.tpl
offline.tpl
pages.tpl
pm.tpl
poll.tpl
popularnews.tpl
profile.tpl
raiting.tpl
registration.tpl
relatednews.tpl
search.tpl
searchresult.tpl
stats.tpl
submit_feedback.tpl
tags.tpl
test.tpl
testchat.tpl
topnews.tpl
user-profile.tpl
users.tpl

Название файла: assets/css/live-chat.css

.chat-container {
    margin: 20px auto;
    border-radius: 16px;
    overflow: hidden;
    height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.chat-header {
    background-color: var(--primary-color);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-title {
    font-weight: 600;
    font-size: 1.2rem;
}

.online-count {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    position: relative; /* чтобы кнопка позиционировалась внутри этого блока */
}

.message {
    display: flex;
    margin-bottom: 15px;
    animation: fadeIn 0.3s ease-in;
}

.message-user {
    justify-content: flex-start;
}

.message-self {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 15px;
    position: relative;
    word-break: break-word;
}

.message-user .message-bubble {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px 15px 15px 4px;
}

.message-self .message-bubble {
    background: var(--primary-color);
    color: white;
    border-radius: 15px 15px 4px 15px;
}

.message-info {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.message-username {
    font-weight: 600;
    font-size: 0.9rem;
    margin-right: 8px;
}

.message-time {
    font-size: 0.75rem;
    color: #adb5bd;
}
.disabled-button {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: white !important;
    cursor: not-allowed;
}
.message-self .message-time {
    color: rgba(255, 255, 255, 0.7);
}
/*
.avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}*/

.input-area {
    padding: 15px;
    position: relative;
}

.typing-indicator {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.typing-indicator .dots span {
    animation: blink 1.5s infinite;
    opacity: 0.2;
    font-weight: bold;
    font-size: 18px;
}

.typing-indicator .dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-indicator .dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes typingAnimation {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-5px); }
}

/* Кастомный скроллбар */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

.no-messages {
    text-align: center;
    color: #777;
    animation: fadeIn 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.no-messages .icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    color: #ccc;
}

.no-messages p {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.no-messages span {
    font-size: 14px;
    color: #999;
    margin-top: 5px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    max-height: 60px;
    overflow: hidden;
}

.reply-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 10px;
}

.reply-text strong {
    color: #562E74;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}

.reply-text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.close-reply {
    background: none;
    border: none;
    padding: 4px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-reply:hover {
    color: #562E74;
}
.message-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.reply-to {
    cursor: pointer;
}

@keyframes tg-pulse-highlight {
    0% {
        background-color: rgba(86, 46, 116, 0.25);
        box-shadow: 0 0 12px rgba(86, 46, 116, 0.4);
    }
    50% {
        background-color: rgba(86, 46, 116, 0.15);
        box-shadow: 0 0 20px rgba(86, 46, 116, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.tg-highlight {
    animation: tg-pulse-highlight 1.4s ease-out;
    border-radius: 12px;
    transition: background-color 0.5s, box-shadow 0.5s;
    z-index: 1;
    position: relative;
}

.close-edit {
    background: none;
    border: none;
    padding: 4px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-edit:hover {
    color: #562E74;
}
.message-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

.reply-to {
    cursor: pointer;
}

#scroll-to-bottom {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
    z-index: 10;
}
#scroll-to-bottom:hover {
    transform: translateY(-2px);
}

.image-wrapper {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
}

.message-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fallback-block {
    display: none;
    width: 100%;
    height: 100%;
    background: #fef2f2;
    color: #b91c1c;
    font-weight: 500;
    font-size: 16px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
}

.live-chat-send-btn-mobile{
    display: none;
}

@media (max-width: 500px){
    .live-chat-send-btn{
        display: none;
    }

.live-chat-send-btn-mobile{
        display: block;
    }
}

	Страницы
	Лоты
	Объявления
	Файлы
	Фильмы
	Новости
	Товары
	Мероприятия