Стили вебинарной комнаты Bizon365

Стандартный вид вебинарной комнаты Bizon365, дипломатично выражаясь, лаконичен и нейтрален. Мне захотелось его немного освежить.

Что было сделано:

Изображение-заглушка растянута на весь контейнер, чтобы не было пустых полей справа и слева.
Доработаны стили кнопок. Увеличил в них поля, изменил цвет, добавил скругление и анимацию при наведении.
Окно чата. Чуть увеличил размер шрифта, перекрасил фон сообщений и «распрямил» один угол, как в мессенджерах. Чуть доработал форму отправки сообщения.

На скриншотах разница не сильно бросается в глаза, но вживую комната выглядит ощутимо лучше.

Административную часть не трогал. Возможно, займусь в будущем. А пока можете пользоваться стилями, чтобы сделать вебинарную комнату чуть приятнее визуально.

Добавил /*комментарии*/, чтобы вам было проще подогнать базовые стили под свои нужды. При вставке можете их удалить.

body {
    background: #f6f6f6; /*Фон всей комнаты*/
}

#webinarContent #presentation,
#webinarContent #contentHolder {
    border-radius: 20px; /*Скругление углов изображения-заглушки*/
}

.header,
#webinarContent #presentation,
#webinarContent #contentHolder,
#room_panel {
    box-shadow: none !important;
}

.customUserImage div {
    background-size: cover;
    background-position: center;
}

.userlist .label {
    border-radius: 4px;
    padding: 2px 4px;
}

li.msg span.msgbody {
    border: none;
    border-radius: 0 12px 12px 12px;
    padding: 12px;
    font-size: 14px;
}

/*Стили кнопок*/
#files .btn {
    border-radius: 8px;
    padding: 12px 24px;
    box-shadow: none;
    transition: .3s ease-in-out;
}

#files .btn:hover {
    opacity: .7;
    transform: translateY(-4px);
    transition: .3s ease-in-out;
}

/*Здесь, чтобы первую кнопку сделать серой, я добавил псевдокласс :nth-child(1). Если вам это не нужно, удалите псевдокласс*/
#files .btn:nth-child(1) {
    background: hsla(0, 0%, 90%, 1.0);
    color: hsla(0, 0%, 10%, 1.0);
}

/*Фон для второй и третьей кнопки*/
#files .btn:nth-child(2),
#files .btn:nth-child(3) {
    background: hsla(228, 99%, 50%, 1.0);
}

.chatul li.msg.moder span.msgbody, .chatul li.msg.jeeves span.msgbody, .chatul li.msg.admin span.msgbody, .chatul li.msg.superadmin span.msgbody {
    background-color: hsla(43, 61%, 64%, .5); /*Цвет фона сообщения админа и модератора в чате*/
}

.chatul li.msg.myMsg span.msgbody {
    background-color: hsla(228, 99%, 50%, .1); /*Цвет фона сообщения участника*/
}

/*Стили формы отправки сообщения*/
#inputmsg {
    border: 1px solid hsla(0, 0%, 70%, 1.0); /*Цвет границы*/
    box-shadow: none;
    outline: none;
    border-radius: 4px 0 0 4px;
}

#inputmsg:focus {
    border-color: hsla(228, 99%, 50%, 1.0); /*Цвет границы при активном поле ввода сообщения*/
}

.input-group-addon {
    border: none;
}

#room .form1 button[type=submit] {
    border-radius: 0 4px 4px 0;
    background: hsla(228, 99%, 50%, 1.0); /*Цвет кнопки отправки*/
}

#room .form1 button[type=submit]:hover {
    background: hsla(228, 99%, 60%, 1.0); /*Цвет кнопки отправки при наведении*/
}

Код вставьте в настройках вебинарной комнаты. Вкладка «Разное — HTML», поле «Постоянный HTML/JS-код». Не забудьте обернуть тегами <style></style>

Вход