MediaWiki:Chat.css

/*
	Codes on this page will affect Special:Chat.
	For scripts, use MediaWiki:Chat.js
*/


/* break long words */

.Chat ul li {
	word-wrap: break-word; }

/* comic sans */
.Chat, textarea { font-family: Comic Sans Ms; }

/* colored names */

	/* chatmoderators names */
#Rail .User.chat-mod:not(.staff) .username {
	color: navy;
	font-weight: normal;
	font-style: italic;
}

	/* staff names */
#Rail .User.staff .username {
	color: pink;
	font-style: italic;
}

	/* bots names */
#Rail li[data-user="CPChatBot"] .username,
#Rail li[data-user="Jeserator TEST"] .username,
#Rail li[data-user="Syster"] .username,
#Rail li[data-user="VicBot"] .username {
	color: #666666 !important;
	font-style: italic; /* for non-mod bots */
}

	/* administrators names */
#Rail li[data-user="Apj26"] .username,
#Rail li[data-user="Callum Fawsitt"] .username,
#Rail li[data-user="Dps04"] .username,
#Rail li[data-user="Hey.youcp"] .username,
#Rail li[data-user="Jeserator"] .username,
#Rail li[data-user="Shurow"] .username,
#Rail li[data-user="Vicyorus"] .username,
#Rail li[data-user="Watatsuki"] .username {
	color: #1d981d !important;
	font-weight: normal;
	font-style: italic;
}

	/* self name - chatmoderators */
body.chat-mod .ChatHeader .username {
	color: navy !important;
}

	/* self name - administrators */
body.can-give-chat-mod .ChatHeader .username {
	color: #1d981d !important;
}


/* italicized text for Private Message header */

body.ChatWindow h1.private {
	font-style: italic;
}


/* special badges */

	/* chatmoderators */
body.ChatWindow .User.chat-mod:not(.staff) .username:after {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAB8klEQVQoz4WRTUjTcRjHP8+cTnIdJIfVtqTSQgvDMWbSC6skvEVFrYOXqEMYESRdOvRKp6Ko6NDBgwe72aWDDHqBgjpUiuhmsZY2w83J1KZzzr08nYw/sdkXfrfPh++P7yOqSrGIiPkMnGiBi+thcxz6bsITVU38hVS16HPD7mcwGQMNg/qh4INrRsZUrLVNpMwC3iWoKoB+A+Y8yK5jdN04J741mwGzA072wfg4aP9RNDKAJt+hL+7xY5UzF2tW1ZyIDCfh1xzUjZjKZfFTBY4NaaLThbFVzlRiLMcp6N4BrnmQpKWDTO2dzIP+hqeX7nO1pCwiZR647YULdljnBPa5PXj2d8zb6rzP86rBkrIT2o/AWRdQCSwB9qYmNJ+bjU5NxI2syXjXapHW43C9GagBFAh4D1Gxs17fvxkI+v3+KaNsHEy2wZ562NoARLAw5HaRPtBCqOe8TIRHU0CmqKyqWRF563RWXi7fu7xp1gbh9GIiM9RbWEklEqFJXqpqvqgsIia2dB/+2ZbZXtvZw/Cgm5Ev8tEaDz7+MEh0Oauj/+5j/LYda/Z0KNVq7uptJDYWG2U68Ehncq8oETOAVNdbab7SycaDNalYYCVlqvrM14e3NLfwmjUiqopYbD7s3nYyv7+zPNPISuKuLkRC/Cd/AElW7PtjoyIOAAAAAElFTkSuQmCC');
	background-position: 0 0;
}
	/* admins */
body.ChatWindow .User.chat-mod[data-user="Apj26"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Callum Fawsitt"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Dps04"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Hey.youcp"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Jeserator"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Shurow"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Vicyorus"] .username:after,
body.ChatWindow .User.chat-mod[data-user="Watatsuki"] .username:after,
	/* admins - self name */
body.ChatWindow.chat-mod.can-give-chat-mod #ChatHeader > .User > .username:after {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMPSURBVDgRzcG9bxtlAMDh373vvXe+D/u+7DSJ03y0NAlpQWmrojaEIiHURqIsKEMFEzsbCxITKyMrjEgICcSfgISERMXHAENAgYTUdZSYxHZsJ47P5zsydEDGYeZ54P9K4z+8cnNuPYzCN5Nk4DUah9v1WvOTX6rt7ziHxjluLERv3b5169OZ2TnSFKqVHb7/4cdBq9V6caPafcQIgtHUyzde+MAyTFIkmpAIqVhZXpZ5x/2QcwhGmPHU1Xrz4HLkW+xs/caTyhYTJRfSPkrX785PuIuMoDNCGLn3762tcn15geb+NlLl6KcGX9V2EUJgKvUS8CtDdEYwTevBX7U9fv6pTeXxHkJoWG6eVidGCImQ8jXgY4YI/s1K0+wZb3qFP45KfP3tBt882qS4cB/lzaBLgWvn1p6f9uYYIhhy0SLIWZbvuC6XF6+hDIWbLzB75Vks06BYjBi/EJl517nLEMEQJ3LCKPByR40DyDJMw8AreCT9GC3rM1meYKwUYlvGPEN0hjiG4VmWSZrE+J6HH/gUvAKVymMMHcwg4EiDnJ1b4qk3Vq9cQjeuC4bYTq5oKEmneUDv9IQgDPDDkE6rgZNT5PMuSikMpVaXlkouZ3pJ+pGWJl8IhpTHi5f8gs1e9U+qO78ThCFuIc9p+5C8a5FloAmNnKGKk5b9OmeSJN06ODxCMMTNO9dcxyRNYuq7mxiGgkFM0t5HSIlpSEwlQYCQ8v0Hd+YXu91eR5MKnX8IQwpKqXVNSrqnbfRmndR10aUEMgZphmXqWLZBFAVUn9SuduLjDct2wDBaOmdevRl4jh3eth33HdexCqe9mP29Peq6IgoDpBSkaUaj0SQIC0xOTeD7BcrlMfZrdYTS6cX9d7WVpfHPbMdZK+Qt37ZyCF3RixNqze6hJvXjnMjsLE21QQa9VMa2iR+5hiU0jTjuc9zt0mkfkzqlL/Us473Sc3c+d8bnZpFCpMcnTcu0O+sP3y6NTU0lW9vb+kG7pcVp1rtYnm52tje8RmVzPO71jJMk4TROkoEQ3eBCefdvM3kJn+ESmn8AAAAASUVORK5CYII=');
	background-position: 0 0;
}
	/* bots */
body.ChatWindow #Rail .User[data-user="CPChatBot"] .username:after,
body.ChatWindow #Rail .User[data-user="Jeserator TEST"] .username:after,
body.ChatWindow #Rail .User[data-user="Syster"] .username:after,
body.ChatWindow #Rail .User[data-user="VicBot"] .username:after {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAADB0lEQVQokXXST0g0dQDG8Wdmdnd2Zsc3pRlrBeEVZUXbVBKWFhRUghAP7kUXZAXfsoOX10MWHuKtLr2WRBfr4CWJDh2KAltFXSRBCV8IDTfn4ErCLObuuLojOzt/duf369ILHt4+5+e5fTnc09HRwY+Pjz9OJBJfhsPhUDabfZZMJp8kk8mPW1paJELIn7que3iRiYmJHzVNI67r0lQq9WxmZubp7Ozs73d3d/Tk5MRLJBLfvvAIAP39/eHl5eWiaZr05uaGGoZBi8UiLZVKdH5+Xm9ubm6/v+cAYHp6+rdoNMr19vY+mZubizIMA47jAAAsy6JWq6Gnp0cwDOO1SCTyUjQafZrNZr9jJicn315YWPjZcRymra2NlySJYRgGjuOAEAJCCPx+P1zXxfX1NS2VSm65XPZWV1ff8gmC8H5DQ4PQ3t4OQggopbAsCzs7O8XT01Ots7Pz4dDQ0MvBYBCiKDI8z/MAqCiKn6Krqys8MDDw+fb2tqvrOr28vKTpdLoSj8ffAfBgeHj48ebmppXL5Wgul6Nra2tmLBb7RFGUDlZV1X9s2/6BZVnO8zw4joPz83OzUCj8BODOtu3vLy4uKrZtAwB4nudM0/xF1/UcNzU1tdTX1/ded3d3qyiKLMuyUBRFLBQKryuKYkQikc/Gxsb6QqEQqtUqTNP0APS2trY+ZFKp1BeLi4sfBAIBEEIgCAJM04Truri6uoIsy+A4DoIgoFwugxCCSqWClZWVZS4UCv3hed6jTCaj2bYNWZbFYDAIn8+HxsZG+P1+MAyD29tbHBwc6JlMJq9pWm19ff1dLp/PW4SQajqd/qherxssy/bLsizatg3LslCtVmFZFvb39683Nja+2t3dnbMsq3x2drbrA4C9vb1vACAQCPzd1NTkr9fr2NraunIcx/b5fMLIyMgrkiQFJEn6yzCM28PDw68BgL2fG6W08+jo6FLTNO/4+HhzaWkppqrqr5qm1VRVzddqtTf+t+3/PBgcHPwwFouNAMDo6Oib8Xh8AcCrz3N+7l8zD3QtGKbLJQAAAABJRU5ErkJggg==');
	background-position: 0 0;
}
	/* confirmed accounts of cp employees and other official accounts */
body.ChatWindow .User[data-user="Polo Field"] .username:after,
body.ChatWindow .User[data-user="Screenhog at Rocketsnail"] .username:after {
	background-image: url('data:image/gif;base64,R0lGODlhEAAQAMZ7AA8KAQARGmIPEFcWDgArQWkREh0qMQAzTiI3Q48bGTg4OABFaABDfZwfHDw8PD09PQBJhDlAQwBNdV0+CUJCQj1ESABPjyBLYQBRlUFITQBWggBVmyBUbgBcjQBbpUBRWU5OTs8tJgBisABlmgBmoVVVVQBntABptgBtpwBsuEBidABuuqFRFABxvD5mdABzvgB2tBpwtAB4wslNHgB5vapaFAB9xj5zigCAyHBrVQCCyn9vFS95s7ZsFJx0Jj+DuM1qGo+FJbt8E06MvbJ/KS+V0ZSIX76PEn+Yq++HHdqRFuyKKOGSF2+ozb+mIOeeJL+sK5yptY+uxpmyxo+00fqnGa+vr/qpGL+3P/utF/uwFa+7xeq2X/68EL+/v8DAwP7ADv/CDp/J5fzCH//DD+DBjv/FEf7HG//KF9vHpcPL0dbMvN/Qgs/Pz9PPyNDQ0O/WUNHS1P/XI8/b5d/f3+Dg4Ojo6e/t4e/v7+/1+v///wAAAAAAAAAAAAAAAAAAACH5BAEKAH8ALAAAAAAQABAAAAfMgH+Cf18GBwsXCoOLghUSOC8rMjAIjIIRKCkiIjweJjQfjCAjJ5tUenN5Yh1fixwrmzx6bXh4bUUZgw8kmyJSeg50Xg9NKoMEmpttelZ4zEjGgjq9IndscE7ZUEE5b38tMr1YZ2Zh5mRocjt1IskiRz1aXebmYGMl1CJCAjVMVVlZriiZQIHakCcFEg7wcQNAAAkwesVQw2VGgwIsXIjQYKMFtSlx1iQJkYDIJgj5fuixE6fMEiBGNnnYtGHTFj0r47hJE2WTBREYGAQCADs=');
	background-position: 0 0;
}

/* Sidebar image */
.Rail {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('http://images.wikia.com/clubpenguin/images/thumb/6/66/Troll_Puffle.png/131px-Troll_Puffle.png') no-repeat right bottom;
}

/* Removes the badge added by chathacks */
img.modicon {
    display: none;
}

/* Adds a very soft drop shadow for 3D feeling :) Also makes chat look deeper on retina screens */

.ChatHeader {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.WikiaPage {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Party */
body {
    background-color: purple;
    background-position:center;
    background-attachment: scroll;
}

@keyframes drunk-badge {
	0% {
		transform: rotate(0deg) translate(0px, 0px) scale(1);
	}
	10% {
		transform: rotate(30deg) translate(0px, 0px) scale(1);
	}
	30% {
		transform: rotate(-30deg) translate(0px, 0px) scale(1);
	}
	40% {
		transform: rotate(0) translate(0px, 0px) scale(1);
	}
	55% {
		transform: rotate(0) translate(0px, -4px) scale(1.3);
	}
	70% {
		transform: rotate(0) translate(0px, 0px) scale(1);
	}
}

li.User > .username:after {
	animation: drunk-badge 800ms linear infinite;
}

.Chat .message {
    font-weight: 900;
}

.Chat, textarea {
    font-weight: 900;
}

.Chat li[data-user="CustardTheAngryBird"] .username::before {
    content: "RafaelMoutaCP:";
    visibility: visible;
}
.Chat li[data-user="CustardTheAngryBird"] .username {
    visibility: hidden;
}

.Chat li[data-user="ThatYoshi8"] .username::before {
    content: "ThatPaperYoshi8:";
    visibility: visible;
}
.Chat li[data-user="ThatYoshi8"] .username {
    visibility: hidden;
}

.Chat li[data-user="AustinD-3"] .username::before {
    content: "NubD-3:";
    visibility: visible;
}
.Chat li[data-user="AustinD-3"] .username {
    visibility: hidden;
}

.Chat li[data-user="SugarPenguin12"] .username::before {
    content: "SaltPenguin12:";
    visibility: visible;
}
.Chat li[data-user="SugarPenguin12"] .username {
    visibility: hidden;
}

.Chat li[data-user="CPChatBot"] .username::before {
    content: "WikiaFrog:";
    visibility: visible;
}
.Chat li[data-user="CPChatBot"] .username {
    visibility: hidden;
}

.Chat li[data-user="DjCadence ThePenguin"] .username::before {
    content: "Dan Lester:";
    visibility: visible;
}
.Chat li[data-user="DjCadence ThePenguin"] .username {
    visibility: hidden;
}

.Chat li[data-user="Matthew.fitzgerald.16"] .username::before {
    content: "Batman:";
    visibility: visible;
}
.Chat li[data-user="Matthew.fitzgerald.16"] .username {
    visibility: hidden;
}

.Chat li[data-user="Miss Sanrio"] .username::before {
    content: "A nub:";
    visibility: visible;
}
.Chat li[data-user="Miss Sanrio"] .username {
    visibility: hidden;
}

.Chat li[data-user="Lord Sir Guilmon Digital Monster XIXVI"] .username::before {
    content: "Lord Sir Mawile Pocket Monster XIXVI:";
    visibility: visible;
}
.Chat li[data-user="Lord Sir Guilmon Digital Monster XIXVI"] .username {
    visibility: hidden;
}

.Chat li[data-user="Techman129"] .username::before {
    content: "Rolie129:";
    visibility: visible;
}
.Chat li[data-user="Techman129"] .username {
    visibility: hidden;
}

.Chat li[data-user="Chriskim98"] .username::before {
    content: "CPPerapin:";
    visibility: visible;
}
.Chat li[data-user="Chriskim98"] .username {
    visibility: hidden;
}

.Chat li[data-user="Hypercane"] .username::before {
    content: "Megacane:";
    visibility: visible;
}
.Chat li[data-user="Hypercane"] .username {
    visibility: hidden;
}

.Chat li[data-user="Sharkzrule89"] .username::before {
    content: "Ballono:";
    visibility: visible;
}
.Chat li[data-user="Sharkzrule89"] .username {
    visibility: hidden;
}

.Chat li[data-user="Benas-545"] .username::before {
    content: "BingoJane:";
    visibility: visible;
}
.Chat li[data-user="Benas-545"] .username {
    visibility: hidden;
}

.Chat li[data-user="WikiaFrog"] .username::before {
    content: "V-Rex:";
    visibility: visible;
}
.Chat li[data-user="WikiaFrog"] .username {
    visibility: hidden;
}

.Chat li[data-user="RafaelMoutaCP"] .username::before {
    content: "CustardTheAngryBird:";
    visibility: visible;
}
.Chat li[data-user="RafaelMoutaCP"] .username {
    visibility: hidden;
}

#user-CustardTheAngryBird .details:after {
   content: "Flew Away";
   color: #BBB;
}
 
#user-CustardTheAngryBird .status {
   display: none;
}

#user-Hypercane .details:after {
   content: "Flew Away";
   color: #BBB;
}
 
#user-Hypercane .status {
   display: none;
}

#user-PixieLil .details:after {
   content: "Flew Away";
   color: #BBB;
}
 
#user-PixieLil .status {
   display: none;
}

#user-Techman129 .details:after {
   content: "Flew Away";
   color: #BBB;
}
 
#user-Techman129 .status {
   display: none;
}

#user-WikiaFrog .details:after {
   content: "Flew Away";
   color: #BBB;
}
 
#user-WikiaFrog .status {
   display: none;
}

#user-Apj26 .details:after {
   content: "Eating Pie";
   color: #BBB;
}
 
#user-Apj26 .status {
   display: none;
}

#user-Penguin-Pal .details:after {
   content: "Playing Tanki";
   color: #BBB;
}
 
#user-Penguin-Pal .status {
   display: none;
}

#user-Lord_Sir_Guilmon_Digital_Monster_XIXVI .details:after {
   content: "Battling Pokémon";
   color: #BBB;
}
 
#user-Lord_Sir_Guilmon_Digital_Monster_XIXVI .status {
   display: none;
}

#user-Miss_Sanrio .details:after {
   content: "Quitting";
   color: #BBB;
}
 
#user-Miss_Sanrio .status {
   display: none;
}

#user-Benas-545 .details:after {
   content: "Playing Sonic 3";
   color: #BBB;
}
 
#user-Benas-545 .status {
   display: none;
}

#user-Benas-545 .details:after {
   content: "Playing Sonic 3";
   color: #BBB;
}
 
#user-Benas-545 .status {
   display: none;
}

#user-Chriskim98 .details:after {
   content: "Dancing with Potatoes";
   color: #BBB;
}
 
#user-Chriskim98 .status {
   display: none;
}

#user-Sharkzrule89 .details:after {
   content: "Hacking";
   color: #BBB;
}
 
#user-Sharkzrule89 .status {
   display: none;
}

#user-Vicyorus .details:after {
   content: "Shouting at Piepj";
   color: #BBB;
}
 
#user-Vicyorus .status {
   display: none;
}

.Chat li[data-user="Watatsuki"] .username::before {
    content: "Wantasushi:";
    visibility: visible;
}
.Chat li[data-user="Watatsuki"] .username {
    visibility: hidden;
}

.Chat li[data-user="Vicyorus"] .username::before {
    content: "Shurowni:";
    visibility: visible;
}
.Chat li[data-user="Vicyorus"] .username {
    visibility: hidden;
}

.Chat li[data-user="Callum Fawsitt"] .username::before {
    content: "Calcium Faucet:";
    visibility: visible;
}
.Chat li[data-user="Callum Fawsitt"] .username {
    visibility: hidden;
}

.Chat li[data-user="PixieLil"] .username::before {
    content: "Lol Pixie:";
    visibility: visible;
}
.Chat li[data-user="PixieLil"] .username {
    visibility: hidden;
}