User:Ultimate Dark Carnage/chat.css

@import 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'; @import url('//dev.wikia.com/load.php?debug=false&lang=en&mode=articles&articles=u:noreply:MediaWiki:MobileChat.css&only=styles');

.Write, .Write > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.Write .message { width: 100%; /* Setting a definitive width */ position: relative; }

.Write [name="message"]{ width: 90%; display: inline-block; }

.Write > * { display: inline-block; }

.Write .ChatTrigger { width: 8%; text-align: center; background-color: #3a3d40; padding: 4px 6px; position: absolute; color: white; font-family: Raleway, Helvetica, Arial, sans-serif; top: 0; right: 0; line-height: 32px; height: 32px; }

/* Modal */ .CustomModal.modal-blackout { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60); z-index: 560000000; }

.CustomModal .modal-wrapper { position: absolute; left: 50%; top: 50%; display: block; width: auto; min-width: 750px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #adafb4; box-shadow: 0 0 8px white; padding: 16px 25px; }

.CustomModal .modal-wrapper .modal-header { padding: 6px 0; text-transform: uppercase; font-size: 8pt; font-family: Raleway, Helvetica, Arial, sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.CustomModal .modal-wrapper .modal-header > * { display: inline-block; padding: 2px 6px; }

.CustomModal .modal-wrapper .modal-header .heading { width: 93%; }

.CustomModal .modal-wrapper .modal-header .close { color: black; font-size: 16pt; }

.CustomModal .modal-wrapper .modal-content { padding: 10px; margin: 8px 0; }

.CustomModal .modal-wrapper .modal-content .user-list { overflow-y: scroll; text-align: center; }

.CustomModal .modal-wrapper .modal-content .user-list .items { list-style: none; margin: 2px 0; padding: 0; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; display: block; }

.CustomModal .modal-wrapper .modal-content .user-list .items > li { display: inline-block; padding: 8px; margin: 2px; position: relative; text-align: justify; }

.CustomModal .modal-wrapper .modal-content .user-list .items > li.selected { background: #eaeaff; }

.CustomModal .modal-wrapper .modal-content .user-list .items > li .avatar { border-radius: 100%; display: inline-block; }

.CustomModal .modal-wrapper .modal-content .user-list .items > li .username { position: relative; display: inline-block; width: 120px; top: -8px; white-space: nowrap; text-overflow: ellipsis; }

.CustomModal .modal-wrapper .modal-content .user-list .items > li .item-user-checkbox.hidden { display: none; }

/* Emoticon Panel */ .EmoticonPanel { position: fixed; top: 20%; left: 25%; width: 650px; background: #343434; border-top: 1px solid black; box-shadow: 0 0 5px black; height: auto; }

.EmoticonPanel .panel-header { padding: 8px 14px; text-transform: uppercase; color: white; font-family: 'Gill Sans MT', 'Trebuchet MS', Verdana, Tahoma, Helvetica, Arial, sans-serif; font-size: 12pt; position: relative; }

.EmoticonPanel .panel-close { position: absolute; top: 10px; right: 10px; font-size: 14pt; font-weight: bold; color: white; text-decoration: none !important; }

.EmoticonPanel .panel-title { font-size: inherit; }

.EmoticonPanel .panel-section { padding: 4px; }

.EmoticonPanel .panel-subtitle { font-size: 8pt; padding: 4px; color: white; text-transform: uppercase; font-family: 'Gill Sans MT', 'Trebuchet MS', Verdana, Tahoma, Helvetica, Arial, sans-serif; font-weight: bold; background: #545454; border-radius: 3px; }

.EmoticonPanel .emote { display: inline-block; padding: 8px; background: #454545; border-radius: 2px; margin: 4px; }

.EmoticonPanel .emote img { height: 19px !important; width: 19px !important; }

.EmoticonPanel .emote:hover { opacity: 0.65; box-shadow: 0 0 5px white; background: #4a4a4a; }

.ChatWindow #ChatHeader { line-height: normal !important; border-radius: 0 !important; padding: 8px; margin: 0 !important; }

.ChatWindow #ChatHeader .wordmark { line-height: normal !important; }

.ChatWindow #ChatHeader .User { top: 15px; }

/*.ChatWindow #*/

.ChatWindow #WikiaPage { width: 100%; left: 0; bottom: 0; display: block !important; margin: 0; border-radius: 0 !important; }

/* Emoticon List */ position: fixed; z-index: 50000; top: 55px; width: 265px; }
 * 1) emoticon-menu {

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
 * 1) emoticon-menu,
 * 2) emoticon-menu * {

background-color: #afb1b2; display: inline-block; height: 240px; }
 * 1) emoticon-menu .menu-body,
 * 2) emoticon-menu .emoticon-arrow {

vertical-align: top; }
 * 1) emoticon-menu .emoticon-arrow {

display: inline-block; height: 100%; vertical-align: middle; padding: 6px; color: black; }
 * 1) emoticon-menu .emoticon-arrow .arrow {

vertical-align: middle; }
 * 1) emoticon-menu .emoticon-arrow .arrow .icon {

padding: 4px 2px; width: 233px; overflow-y: auto; overflow-x: hidden; position: relative; }
 * 1) emoticon-menu .menu-body {

padding: 4px; }
 * 1) emoticon-menu .menu-body .emoticon-item {

background-color: #343434; }
 * 1) emoticon-menu .menu-body .emoticon-item:nth-child(2n){

margin-left: 8px; }
 * 1) emoticon-menu .menu-body .emoticon-item .emote-list {

display: inline-block; padding: 4px 8px; color: white; }
 * 1) emoticon-menu .menu-body .emote-link {