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'); @import "https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans";

.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: 40px; 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 {

/** * Chat Tolbar * @author Ultimate Dark Carnage **/

/* Changing the height of the rail to accomodate the arrow */ .Rail { max-height: 530px; }

/* Main */ .ChatToolbar { position: fixed; bottom: 0; width: 100%; background-color: white; height: 40px; }

.ChatToolbar.collapsed { width: auto; background-color: transparent; }

.ChatToolbar .toolbar-wrapper { position: relative; display: inline-block; bottom: 0; }

.ChatToolbar .toolbar-wrapper .toolbar-item { position: relative; }

.ChatToolbar .toolbar-wrapper .toolbar-item > a { display: table-cell; line-height: 40px; padding: 0 12px; font-size: 10pt; text-transform: uppercase; color: black; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif; }

.ChatToolbar .toolbar-collapse { display: inline-block; position: fixed; right: 16px; bottom: 6px; color: black; background-color: white; padding: 8px; }

/* Global Module */ .ChatToolbar .global-module { position: absolute; left: 0; display: table; background-color: #dadadf; min-width: 250px; padding: 6px; -moz-transition: all 1s ease; -o-transition: all 1s ease; -webkit-transition: all 1s ease; transition: all 1s ease; bottom: -40px; }

.ChatToolbar .global-module, .ChatToolbar .global-module * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.ChatToolbar .global-module.show { bottom: 40px; }

.ChatToolbar .global-module-section { display: inline-block; width: 50%; }

/* UI */ .chat-ui { margin: 3px; z-index: 649; }

.chat-ui * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.combobox { display: inline-block; font-family: 'Open Sans', 'Trebuchet MS', Verdana, Arial, sans-serif; position: relative; }

.combobox .combobox-input-wrapper { background-color: #afafcd; display: flex; }

.combobox .combobox-input-wrapper > .combobox-input { background: none; border: none; padding: 2px 6px; text-transform: uppercase; font-size: 8pt; width: auto; min-width: 100px; color: black; }

.combobox .combobox-input-wrapper > .combobox-drop { padding: 6px 8px; position: relative; cursor: pointer; }

.combobox .combobox-input-wrapper > .combobox-drop:after { content: ""; position: relative; top: 14px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid black; }

.combobox-list-wrapper { position: absolute; top: 100%; width: 100%; background-color: #cecee1; max-height: 120px; overflow-y: scroll; z-index: 650; }

.combobox-list-wrapper .combobox-group h3 { margin: 0; padding: 4px 8px; font-size: 10pt; text-transform: uppercase; color: white; font-weight: normal; }

.combobox-list-wrapper .combobox-group ul { margin: 0; padding: 0; list-style: none; }

.combobox-list-wrapper .combobox-group ul > li { padding: 0; margin: 0; }

.combobox-list-wrapper .combobox-group ul > li > a { display: block; text-decoration: none; color: #24243a; padding: 4px 20px; font-size: 8pt; text-transform: uppercase; }

.combobox-list-wrapper .combobox-list { margin: 0; padding: 0; list-style: none; }

.combobox-list-wrapper .combobox-list > li { padding: 0; margin: 0; }

.combobox-list-wrapper .combobox-list > li > a { display: block; text-decoration: none; color: #24243a; padding: 4px 8px; font-size: 8pt; text-transform: uppercase; }

.combobox-list-wrapper .combobox-list > li:hover > a { color: black; background-color: white; }

.colorbox { display: inline-block; margin: 3px; padding: 4px; background-color: #afafcd; position: relative; }

.colorbox .color { border: 1px solid #55555; width: 20px; height: 20px; }

.colorbox .colorbox-color { border: 1px solid #555555; width: 20px; height: 20px; }

.colorbox .colorbox-module { position: absolute; padding: 4px; top: 100%; width: auto; left: 0; display: block; background-color: #afafcd; }

.colorbox .colorbox-module .colorbox-section { display: table-cell; padding: 2px; }

.colorbox .colorbox-module .colorbox-section.left { width: 50%; }

.colorbox .colorbox-module .colorbox-section.right { position: relative; width: 50%; }

.colorbox-module .colorbox-section { vertical-align: top; }

.colorbox-module .colorbox-section #color-large { height: 45px; width: 45px; }

.colorbox-module .colorbox-section .palette { display: table; border-collapse: separate; border-spacing: 3px; }

.colorbox-module .colorbox-section .palette > .row { margin: 0; padding: 0; list-style: none; display: table-row; }

.colorbox-module .colorbox-section .palette > .row > li { display: table-cell; width: 16px; height: 16px; }

.colorbox-module .colorbox-section .palette > .row > li.selected { border: 1px solid white; }

.colorbox-module .colorbox-section .colorbox-input .colorbox-input-label { color: #57578c; font-family: 'Open Sans', Trebuchet MS, Helvetica, Arial, sans-serif; font-size: 8pt; text-transform: uppercase; font-weight: bold; }

.colorbox-module .colorbox-section .colorbox-input > input { border: none; border-bottom: 3px solid white; text-transform: uppercase; font-size: 8pt; min-width: 150px; background: none; }

.colorbox-module .colorbox-section .colorbox-input > input:focus { border-bottom: 3px solid #999999; outline: none; }

.colorbox-submit { text-align: right; }

.ui-button { display: inline-block; margin: 0; padding: 4px 8px; text-decoration: none; background-color: #eeeef4; color: #7070a6; font-size: 8pt; margin-right: 2px; text-transform: uppercase; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, Arial, sans-serif; }

.ui-button:hover { background-color: white; }

.ui-button:active { background-color: #cecee1; }

.dynamic-list { border: 1px solid #afafcd; display: inline-table; font-family: 'Open Sans', Helvetica, Arial, sans-serif; text-transform: uppercase; }

.dynamic-list .dynamic-list-section { list-style: none; margin: 0; padding: 0; display: table-row; }

.dynamic-list .dynamic-list-section .dynamic-list-item { display: table-cell; padding: 8px; font-size: 10pt; }

.dynamic-list .dynamic-list-section .dynamic-list-item input { display: none; }

/* End Chat Toolbar */