MediaWiki:Chat.css

.Chat.reconnecting ul:first-child:empty:before { content: "Please wait while chat reconnects and restores your chat history."; }

.Chat ul:first-child:empty:before, .Chat ul:first-child:empty:after { content: "The chat is currently broken wikia-wide but editing works fine."; content: "The chat is loading."; color: purple; text-align: center; display: block; font-size: larger; font-weight:bold; } .Chat ul:first-child:empty:after { content: "It doesn't load try refreshing. If that doesn't help then try again later."; background: url(http://images.wikia.nocookie.net/common/skins/common/images/ajax.gif) no-repeat !important; background-position: center top !important; border:none; padding-top:1em; }

display:none; /* chat.css unhides this, due to odd display when loading. */ } .Write { overflow: hidden; } .Write img { border: 1px solid transparent; }
 * 1) chatOptionsWrap, .alertInit, .ChatWindow #WikiaSearch, #emoticonlist {

.UserStatsMenu .info img, .Rail .User img { width: 28px; height: 28px; border: 1px solid transparent; left: 2px; top: 2px; } .UserStatsMenu .private { display: none; } .Rail .public .chevron { position: static; } .Rail .User { padding: 3px 0 3px 34px; margin-top: 1px; height: 28px; overflow: hidden; } li.User { display: block !important; } display: none; } .ChatWindow #WikiaPage.WikiaPage { /* id with class is intentional. */ top: 0; bottom: 0; right:0; left:0; display: block !important; }
 * 1) ChatHeader {

.Chat li { padding-top: 1px; padding-bottom: 1px; } .Chat li.inline-alert { text-align:right; margin-top: 0; padding-top: 1px; padding-bottom: 1px; } li.inline-alert+li.inline-alert { border-top:none; } .Chat li.inline-alert+.continued { margin-top: 0; } .Chat .inline-alert, .Chat .inline-alert>a { color: purple; } .Chat .continued { margin-bottom: 0; margin-top: 0; top:0; border-top:none; } .Chat .continued .time { position: absolute; right: 15px; /* it's like this to prevent multiple blank lines from taking up space. */ } .Chat .continued.inline-alert .time { position: relative; right: 0; } .Chat .time { display:block !important; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; z-index: 15; top: 2px; padding: 0 1px; line-height: 1.4em; font-weight: normal; } .Chat .inline-alert .time { margin-left: 1em; } .Chat.reconnecting .time:not([title]) { background: black !important; } .Chat .you { background:none; } .User .username { margin-right:0; } .User.away .status { display: block; } .User .status.show { color: purple; display: block; } .User .status { margin-right: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; } .User.chat-mod .username:after, .User.staff .username:after { background-image: url(http://images2.wikia.nocookie.net/saintsrow/images/thumb/b/b4/Star_saints.png/30px-Star_saints.png); background-size: 100%; background-position: 0 !important; right: 0; top:16px; }

.Write .message textarea { width: 100%; z-index: 25; position: relative; } .Write .wikia-button { text-align: center; width: 35px; padding: 0; z-index: 30; }

.Chat .message img { vertical-align: top; width:auto; } .Chat li img[src$="Chat_spoiler.png"]:hover { margin-right: 0; } .Chat li img[src$="Chat_spoiler.png"] { display: inline-block; margin-right: -45200px; width:64px; } .Chat li img[src$="Chat_spoiler.png"]+img[src$="Chat_spoiler.png"] { margin-right: 0; } .Chat { overflow-x: hidden; /* may no longer be needed */ border: 0; word-wrap: break-word; } .Chat ul { padding:2em 0 3em; } .Chat ul+ul { border-top: 1px solid black; } .avatar, .Rail img, .Chat img[alt^="!"], .Chat .time { -webkit-filter: drop-shadow(2px 2px 2px rgba(102,17,170,0.5)); -moz-filter: drop-shadow(2px 2px 2px rgba(102,17,170,0.5)); -ms-filter: drop-shadow(2px 2px 2px rgba(102,17,170,0.5)); -o-filter: drop-shadow(2px 2px 2px rgba(102,17,170,0.5)); filter: drop-shadow(2px 2px 2px rgba(102,17,170,0.5)); } .Chat img[alt^="!"] { width: auto; height: auto; line-height: 48px; } .Chat .avatar { width: 28px; height: 28px; top:3px; } .Chat .me-message { color: purple; font-style: italic; } .Chat .message { padding-right: 2em; display: block; }

background:none !important; /* Temporary due to cache */ text-align:left; border-left: 1em solid purple; border-right: 1em solid purple; -webkit-border-radius: 7%/50%; -moz-border-radius: 7%/50%; border-radius: 7%/50%; padding: 0 2em; display: inline-block; vertical-align: middle; } .Chat .inline-alert[id]:before, .Chat .inline-alert[id]:after, .Chat .inline-alert:before, .Chat .inline-alert:after { display:none; } i.ago { width: 7em; display: inline-block; } .compactMode li[data-user="452"] .me-message a[href$="msg"] { padding: 0.1em; } li[data-user="452"] .me-message a[href$="msg"] { position: absolute; background: black; color: lime; font-style: normal; font-weight: bold; font-size: 200%; padding: 0.4em; width: 100%; text-align: center; top: 0; left: 0; z-index: 20; text-decoration: none; cursor: inherit; } a[href$="quote"],a[href$="/%22"],a[href$="/'"] { cursor: inherit; text-decoration: none; color:purple; } a[href$="quote"]:after,a[href$="/%22"]:after,a[href$="/'"]:before { font-family: serif; top: 11px; position: relative; font-size: 48px; vertical-align: text-bottom; } a[href$="/%22"]:after { content: "\201C"; } a[href$="/'"]:before { content: "\201D"; } a[href$="/sup"] { vertical-align: super; font-size: smaller; color:inherit !important; text-decoration:none !important; cursor: inherit; } .Chat .message img[alt="!jaro"] { -webkit-animation:spin 4s linear infinite !important; -moz-animation:spin 4s linear infinite !important; animation:spin 4s linear infinite !important; } .Chat.noSpin img { -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; } .Chat.spin img,.Chat a[href$="/spin"] img,.Chat a[href$="/spin4"] img { -webkit-animation:spin 4s linear reverse infinite; -moz-animation:spin 4s linear reverse infinite; animation:spin 4s linear reverse infinite; } .Chat a[href$="/spinr"] img { -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } .Chat a[href$="/spin3"] img { -webkit-animation:spin 3s linear reverse infinite; -moz-animation:spin 3s linear reverse infinite; animation:spin 3s linear reverse infinite; } .Chat a[href$="/spin5"] img { -webkit-animation:spin 5s linear reverse infinite; -moz-animation:spin 5s linear reverse infinite; animation:spin 5s linear reverse infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 * 1) chatwelcome {

.Chat li a[href$="/br"] { display: block; }

.Chat li img[src$="Chat_spoiler.png"]:hover ~ a[href$="/br"] { display: block; }

.Chat li img[src$="Chat_spoiler.png"] ~ a[href$="/br"] { display:none; }

/**/

.Chat .hiddenContent+.continued .username, .Chat .hiddenContent+.continued .avatar { /* Delete mode workaround for hidden .continued elements */ visibility: visible; display: block; } .ChatWindow .Rail { background-image: url("http://tidyurl.com/saintslogo.png"); background-position: bottom; background-repeat: no-repeat; background-size: 100%; margin-top: 2em; z-index: 2; margin-bottom: 1em; } .alertInit { display:block; } .ChatWindow #ogg_player_1>div+div { display: none; } .ChatWindow #ogg_player_1 { position: absolute; left: 0; bottom: 50px; } .ChatWindow .audioPrompt { cursor: pointer; background: url(http://images2.wikia.nocookie.net/saintsrow/images/thumb/c/c9/Audio_log_visual.png/128px-Audio_log_visual.png) repeat-x; background-size: auto 100%; display: inline-block; padding: 0.5em; }

/*** display:block; /* common.css hides this, due to odd display when loading. */ } line-height:1em; } background-image: url('http://images2.wikia.nocookie.net/saintsrow/images/f/f5/Ui_sr3_bg_tile_fade.png') !important; background-attachment: fixed !important; } vertical-align: middle; margin: 1px; } width: 130px; margin: 0; } width: 3em; text-align: right; } width: 150px; float: right; cursor: pointer; height: 1.3em; font-size: 100%; box-sizing: border-box; } width: 22px; vertical-align: text-bottom; } font-size: 9pt; text-align: left; display: none; overflow-y: none; height: 100%; width: 150px; float: right; clear: right; } height: 100%; width: 17em; padding-left:1em; } display: block; animation-name: cycle1; animation-duration:4s; animation-direction:alternate; animation-iteration-count:infinite;
 * Chat Options
 * 1) WikiaPage #chatOptionsWrap {
 * 1) WikiaPage #chatOptionsWrap {
 * 1) chatOptionsMain div {
 * 1) chatOptionsMain, #chatOptionsWrap #updateChatSkin::before {
 * 1) chatOptionsMain input[type="checkbox"] {
 * 1) chatOptionsMain #alertSound {
 * 1) chatVolume {
 * 1) chatOptionsWrap #chatOptionsHead {
 * 1) chatOptionsWrap #chatOptionsHead img {
 * 1) chatOptionsWrap #chatOptionsMain {
 * 1) chatOptionsWrap:hover, #chatOptionsWrap.show {
 * 1) chatOptionsWrap.show #updateChatSkin, #chatOptionsWrap:hover #updateChatSkin {

-webkit-animation-name: cycle1; -webkit-animation-duration:4s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; }

display: block; overflow: auto; } height: 1.3em; overflow: hidden; cursor: auto !important; font-size: 150%; z-index: 101; position: absolute; width: 150px; right: 0; text-align: center; } width: 120px; } margin: 0; background: transparent; } width: 80px; } font-size:120%; font-weight:bold; font-style:italic; color: purple; padding: 1px; } div.sectionTitle:before,div.sectionTitle:after { content:" "; width:1.5em; border-top:3px solid purple; display:inline-block; margin-bottom:0.3em; margin-left:0.3em; margin-right:0.3em; } padding-top:0; } text-align: center; }   display: block; }   display: none; } padding: 0; -webkit-box-shadow: 1px 2px 9px 0 black; -moz-box-shadow: 1px 2px 9px 0 black; box-shadow: 1px 2px 9px 0 black; border-radius: 50%; height: 3.6em; width: 3.6em; line-height: 3.6em; font-size:larger; color: inherit; margin: 7px; } color:gold; display: none; cursor: default; margin-top:2em; background: lime; border: 20px double red; border-radius: 50%; -webkit-box-shadow: 1px 2px 9px 0 #61a; -moz-box-shadow: 1px 2px 9px 0 #61a; box-shadow: 1px 2px 9px 0 #61a; position: absolute; right: 9em; top:25%; }
 * 1) chatOptionsWrap.show #chatOptionsMain, #chatOptionsWrap:hover #chatOptionsMain {
 * 1) chatOptionsWrap {
 * 1) fontList {
 * 1) chatOptionsMain input, #chatOptionsMain select {
 * 1) chatOptionsMain input[type="text"] {
 * 1) chatOptionsMain .sectionTitle {
 * 1) chatOptionsMain .sectionTitle:first-child {
 * 1) chatOptionsMain>div:last-child {
 * 1) sounds:checked+label+div,
 * 2) sounds:checked+label+a+div,
 * 3) sounds:checked+label+div+div,
 * 4) sounds:checked+label+a+div+div,
 * 5) customSound:checked+label+input,
 * 6) emoticonDisable+label+div,
 * 7) disconnectCheck:checked+label+div,
 * 8) disconnectCheck:checked+label+a+div {
 * 1) sounds+label+div,
 * 2) sounds+label+a+div,
 * 3) sounds+label+div+div,
 * 4) sounds+label+a+div+div,
 * 5) customSound+label+input,
 * 6) emoticonDisable:checked+label+div,
 * 7) disconnectCheck+label+div,
 * 8) disconnectCheck+label+a+div {
 * 1) updateChatSkin a {
 * 1) updateChatSkin {

-webkit-box-shadow: 1px 2px 18px 0 black; -moz-box-shadow: 1px 2px 18px 0 black; box-shadow: 1px 2px 18px 0 black; } -webkit-box-shadow: 1px 2px 32px 0 black; -moz-box-shadow: 1px 2px 32px 0 black; box-shadow: 1px 2px 32px 0 black; } background: blue; border: 20px double lime; border-radius: 50%; -webkit-box-shadow: 1px 2px 18px 0 #61a; -moz-box-shadow: 1px 2px 18px 0 #61a; box-shadow: 1px 2px 18px 0 #61a;
 * 1) updateChatSkin a:hover {
 * 1) updateChatSkin a:active {
 * 1) chatOptionsWrap.show #updateChatSkin, #chatOptionsWrap:hover #updateChatSkin:hover {

animation-name: cycle2; animation-duration:2s; animation-direction:alternate; animation-iteration-count:infinite;

-webkit-animation-name: cycle2; -webkit-animation-duration:2s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; } content: " "; width:20em; height:20em; position: absolute; left:-2em; top: -7.5em; line-height: 2.8em; border-radius: 50%; padding-left:1em; -webkit-box-shadow: -1px 2px 12px 0 black; -moz-box-shadow: -1px 2px 12px 0 black; box-shadow: -1px 2px 12px 0 black; z-index:-1; } content: "Save"; position: absolute; height: 3.6em; width: 3.6em; color: yellow; left: 8px; color: inherit; border-radius: 50%; } content: "Click"; } content: "Yay!"; }
 * 1) chatOptionsWrap #updateChatSkin::before, #chatOptionsWrap #updateChatSkin::after {
 * 1) updateChatSkin a::after {
 * 1) updateChatSkin a:hover::after {
 * 1) updateChatSkin a:hover:active::after {

@keyframes cycle1 { 0%   {background: #00FFFF; border-color:#FF0000; color: #00FFFF; } 33%  {background: #FF00FF; border-color:#00FF00; color: #FF00FF; } 66%  {background: #FFFF00; border-color:#0000FF; color: #FFFF00; } 100% {background: #00FFFF; border-color:#FF0000; color: #00FFFF; } }

@-webkit-keyframes cycle1 { 0%   {background: #00FFFF; border-color:#FF0000; color: #00FFFF; } 33%  {background: #FF00FF; border-color:#00FF00; color: #FF00FF; } 66%  {background: #FFFF00; border-color:#0000FF; color: #FFFF00; } 100% {background: #00FFFF; border-color:#FF0000; color: #00FFFF; } }

@keyframes cycle2 { 0%   {background: #FF0000; border-color:#00FFFF; color: #00FFFF; } 33%  {background: #00FF00; border-color:#FF00FF; color: #FF00FF; } 66%  {background: #0000FF; border-color:#FFFF00; color: #FFFF00; } 100% {background: #FF0000; border-color:#00FFFF; color: #00FFFF; } }

@-webkit-keyframes cycle2 { 0%   {background: #FF0000; border-color:#00FFFF; color: #00FFFF; } 33%  {background: #00FF00; border-color:#FF00FF; color: #FF00FF; } 66%  {background: #0000FF; border-color:#FFFF00; color: #FFFF00; } 100% {background: #FF0000; border-color:#00FFFF; color: #00FFFF; } }

/*** .ChatWindow #WikiaSearch { z-index: 21; display:inline-block; position:absolute; top: 0px; right: 170px; height: 1.6em; vertical-align: top; } .ChatWindow #WikiaSearch input[type="text"] { width: auto; border: 0px none transparent; margin: 0px; height: 100%; padding: 0; } .ChatWindow #WikiaSearch .wikia-button { height: 100%; } .ChatWindow #WikiaSearch .wikia-button img { background-color: transparent; background-repeat: no-repeat; background-image: url(http://slot1.images.wikia.nocookie.net/common/skins/shared/images/sprite.png); background-position: -1055px -80px; height:1.4em; }
 * Search box

/***
 * Buttons

.toggleSilent.silence, .wikia-button.highlight { color:lime; border:1px solid lime; font-weight:bold; }

.toggleStatus[status="0"]:after { content: "Auto"; } .toggleStatus[status="1"]:after { content: "Away"; } .toggleStatus[status="2"]:after { content: "Here"; }

/***
 * RecentEdits

position: fixed; top: 0; left: 0; background: white; z-index: 20; padding: 0em 1em; overflow: auto; border-radius: 0px 20px 20px; height: 1.4em; overflow: hidden; white-space: nowrap; } display: block; text-align:right; } display: inline; cursor: pointer; } float: left; } position: absolute; bottom: 0; display: none; cursor: pointer; border-radius: 1em; line-height: 1em; margin-bottom: 1em; padding: 2px; } display: block; } cursor:wait; } z-index: 102; height: 16em; overflow-y: scroll; }
 * 1) RecentEdits {
 * 1) RecentEdits span {
 * 1) RecentEdits span#X {
 * 1) RecentEdits span#label {
 * 1) RecentEdits span#refresh {
 * 1) RecentEdits:hover span#refresh {
 * 1) RecentEdits.wait:hover {
 * 1) RecentEdits:hover {

visibility:hidden } visibility:visible; } span#label+span { padding-left: 8em; }
 * 1) RecentEdits span+span {
 * 1) RecentEdits span#label, #RecentEdits span#label+span, #RecentEdits:hover span {

/***
 * emoticonlist

height: 1.6em; width: 6em; position: absolute; bottom: 50px; right: 150px; z-index: 40; overflow: hidden; display:block; } height: 80%; width: auto; overflow-y: auto; background: white; bottom: 50px; } display: block; float: left; width: auto; } height: 3.5em !important; } display: none; } text-align: center; width: 75px; padding: 0px; position: absolute; right: 0px; bottom: 0px; } display:none; }
 * 1) emoticonlist {
 * 1) emoticonlist.show {
 * 1) emoticonlist.show img {
 * 1) emoticonlist img[title^="!"] {
 * 1) emoticonlist img {
 * 1) emoticonlist #emoticonButton {
 * 1) emoticonlist.show #emoticonButton {

/***
 * compactMode

.Chat.compactMode .message { display: table-cell; } .Chat.compactMode .avatar { width: 1em; height: 1em; left: 0.25em; } .Chat.compactMode li { padding-left: 2em; min-height: 16px; } .Chat.compactMode .continued .avatar { display: block; visibility: hidden; } .Chat.compactMode .continued .username { display: table-cell; visibility: hidden; } .Chat.compactMode .username:before { content: "<"; } .Chat.compactMode .username:after { content: ">"; font-weight:bold; padding-left:0; } .Chat.compactMode .username { padding-right:1em; float: left; }

position: absolute; bottom: 0; right: 0; color: lime; width: 145px; font-family: monospace; font-size: 12px; }
 * 1) lastCheck {