ChaTemplate - CSS для Chatovod.ru (Страница 4 из 4)

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800);
@import url(https://cdn.linearicons.com/free/1.0.0/icon-font.min.css);
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

body {
  font-size: 62.5% !important;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

a {
  text-decoration: none !important
}

.chat {
  border: 0;
  font-family: Montserrat
}

#scrollBottomBox,
.chat,
.chatFooter .chatFooterWrapper .chatPanel .chatSendLinksPanel,
.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a,
.chatHeader .chatTopLine,
.chatMain .chatMessages,
.chatMain .chatPrivateMessages,
.chatPeople .chatPeopleTitle,
.chatPopupMenuDiv2 .chatPopupMenuContent,
.chatTabs ul,
.chatTabs>ul>li>a,
.chatTime,
.chatUserMenuItems,
.dialog-buttons button,
.dialog-prompt input,
.smilesBox p,
.smoke,
input[type=button],
input[type=submit],
input[type=text],
select {
  font-size: 1rem
}

.smilesBox::-webkit-scrollbar,
.vscrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, .08)
}

.smilesBox::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .3)
}

.smilesBox::-webkit-scrollbar-thumb:hover,
.vscrollable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, .6)
}

.smilesBox::-webkit-scrollbar-thumb,
.smilesBox::-webkit-scrollbar-track {
  margin: 3px
}

#scrollBottomBox {
  right: 30px;
  left: auto !important;
  width: 30px;
  height: 30px;
  padding: 0;
  background-color: rgba(0, 0, 0, .3);
  border-color: rgba(59, 57, 61, .1);
  font-size: 0 !important;
  z-index: 10;
}

#scrollBottomBox::before {
  position: relative;
  vertical-align: top;
  animation: bouncing .5s cubic-bezier(.1, .25, .1, 1) 0s infinite alternate both;
  font-family: Linearicons-Free;
  content: '\e874';
  font-size: 16px !important;
  color: #fff;
  background: 0 0
}

#scrollBottomBox:hover::before {
  -webkit-animation-play-state: paused;
  animation-play-state: paused
}

@-webkit-keyframes bouncing {
  0% {
    bottom: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5)
  }
  100% {
    bottom: 25px;
    box-shadow: 0 30px 30px rgba(0, 0, 0, .1)
  }
}

@keyframes bouncing {
  0% {
    bottom: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5)
  }
  100% {
    bottom: 25px;
    box-shadow: 0 30px 30px rgba(0, 0, 0, .1)
  }
}

#account-info a,
#join-chat-button,
#join-chat-button2,
#sign-in-label a,
.center-wrapper .content form,
.center-wrapper .content:after,
.chatHeader .chatTopLine,
.chatInputText,
.chatMessage,
.chatPeople ul.chatPeopleList li .chatUserMenu .chatUserMenuItems ul li,
.chatPopupMenuDiv2,
.chatSendButton,
.chatSendLinksPanel,
.chatSendLinksPanel>a,
.chatSoundPanel,
.chatSoundPanel>a,
.chatTopLineWrapper ul li ul,
.chatTopLineWrapper>ul>li>a,
.content form #captcha-input,
.content form #nick,
.dialog-buttons button,
.justify a,
.smilesBox a,
.smilesBox::-webkit-scrollbar-thumb,
.smilesBox::-webkit-scrollbar-track,
.vscrollable::-webkit-scrollbar-thumb,
.vscrollable::-webkit-scrollbar-track,
input[type=submit],
select {
  -webkit-border-radius: .25rem;
  -moz-border-radius: .25rem;
  border-radius: .25rem
}

input[type=button]:focus,
input[type=submit]:focus,
input[type=text]:focus,
select:focus {
  outline: 0
}

.chatPopupMenuDiv1,
.chatSendLinksPanel>a>span,
.chatSoundPanel>a>span,
.chatTopLineWrapper>ul>li:nth-child(3)>a>img,
.downarrowclass,
.menu_profile_title,
.msi {
  display: none !important
}

.chatFooter,
.chatHeader {
  border: 0
}

.chatPopupMenuDiv1 {
  background: 0 0;
  border: 0
}

.chatEventDiv,
.chatPopupMenuDiv2,
.chatTopLineWrapper ul li ul,
.dialog.smoke {
  border-color: rgba(255, 255, 255, .08);
  box-shadow: rgba(0, 0, 0, .05) 3px 3px 20px
}

.chatPopupMenuDiv2 {
  padding: 6px
}

.chatEventDiv,
.chatPopupMenuDiv2 {
  top: auto !important;
  right: auto !important;
  bottom: 82px !important;
  left: 3px !important;
  width: 325px !important;
  min-height: 200px
}

.smilesBox {
  width: 315px !important
}

input[type=text] {
  padding-left: 7px;
  min-height: 1.75em
}

input[type=button],
input[type=submit] {
  cursor: pointer
}

input[type=button],
input[type=submit],
select {
  padding: .25em .75em !important;
  background-color: #fff;
  border: 1px solid #ccc;
  line-height: 2em;
  font-weight: 300 !important
}

.chatSendExitPanel select {
  padding: 0 !important;
  position: relative;
  bottom: 4px
}

.chatInputText {
  border-color: #eee
}

.chatHeader .chatTopLine {
  top: 7px;
  background: 0 0;
  border: 0
}

.chatTopLineWrapper ul li ul {
  min-width: 230px
}

.chatTopLineWrapper ul li ul li a {
  width: 230px
}

.chatTopLineWrapper>ul>li>a>img {
  display: none
}

.chatTopLineWrapper>ul>li:nth-child(1)>a::before {
  content: '\e82a'
}

.chatTopLineWrapper>ul>li:nth-child(2)>a::before {
  content: '\e83f'
}

.chatTopLineWrapper>ul>li:nth-child(3)>a::before {
  content: '\e871'
}

.chatMain {
  top: 0;
  bottom: 0
}

.chatMain .chatMessages,
.chatMain .chatPeople,
.chatMain .chatPrivateMessages {
  top: 80px;
  bottom: 80px
}

.chatMain .chatMessages,
.chatMain .chatPrivateMessages {
  right: 5px;
  margin: 5px 0
}

.chatMessage {
  margin-right: 170px
}

.chatTabs {
  top: 46px;
  width: 100%
}

.chatMain .chatPeople {
  right: 15px;
  border-left: 0
}

.chatFooter {
  height: 80px
}

.chatFooter .chatFooterWrapper {
  top: 15px
}

.chatFooter .chatFooterWrapper .chatPanel .chatSendExitPanel {
  top: 34px
}

select {
  padding: 0
}

.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel .chatSendButton {
  width: auto;
  height: auto
}

.chatFooter .chatFooterWrapper .chatPanel .chatSendButtonPanel {
  top: 10px
}

.chatFooter .chatFooterWrapper .chatPanel .chatSendTextPanel {
  right: 244px
}

.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel {
  right: 40px
}

.chatFooter .chatFooterWrapper .chatPanel div.chatSoundPanel a {
  width: 60px;
  height: 18px;
  overflow: hidden
}

.chatLinkSmiles::before {
  content: '\e854'
}

.chatLinkImage::before {
  content: '\e824'
}

.chatLinkProfile::before {
  content: '\e82a'
}

.chatLinkGold::before {
  content: '\e80e'
}

.chatLinkVip::before {
  content: '\e814'
}

.chatLinkModerate::before {
  content: '\e810'
}

.chatLinkMore::before {
  content: '\e82b'
}

.chatSendLinksPanel>a:hover {
  background-color: rgba(255, 255, 255, .7)
}

.chatSendLinksPanel>a:last-child {
  margin-right: 0 !important
}

.chatSendLinksPanel {
  top: auto !important;
  bottom: 40px !important
}

.chatSendLinksPanel>a,
.chatTopLineWrapper>ul>li>a {
  background-image: none !important;
  padding: 5px !important;
  margin-right: 5px !important;
  height: 30px !important;
  width: 30px;
  line-height: 20px;
  text-align: center;
  font-size: 0 !important;
  background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(59, 57, 61, .09) 100%);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: inset rgba(255, 255, 255, .1) 0 1px 0, rgba(0, 0, 0, .3) 0 1px 3px
}

.chatSendLinksPanel>a::before,
.chatTopLineWrapper>ul>li>a::before {
  display: inline-block;
  font-family: Linearicons-Free;
  font-size: 16px !important;
  color: inherit;
  width: 16px;
  height: 16px
}

.content form {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: auto;
  margin-left: -135px;
  margin-top: -150px;
  padding: 30px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, .15) 3px 3px 20px
}

#captcha-input,
#nick {
  background-color: #fafafa;
  color: #424242;
  height: 3em;
  padding-left: .25em;
  -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
  box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff
}

#captcha-input:focus,
#nick:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: 0
}

#account-info a,
#sign-in-label a {
  display: inherit;
  width: 100%;
  padding: .75em 0;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ccc;
  color: #424242;
  -webkit-border-radius: .25em;
  -moz-border-radius: .25em;
  border-radius: .25em;
  -webkit-transition: .3s all linear;
  -moz-transition: .3s all linear;
  transition: .3s all linear
}

#account-info a {
  margin-top: .5em
}