Created by BoneTheSandWing, for BermudatheSeaWing. Hope you like it! You can use it by copying the code in source mode or getting it from here :> Whatever way, copy it into your /wikia.css.
/* chatskin */
.Chat { /* the region where the chatting shows up */
background: rgba(144,144,255,0.25) !important;
color: blue;
}
.Chat a { /* Hyperlinks */
color: #ffc0ea;
text-shadow:1px 1px 8px #00f;
font-weight: bold;
}
.Chat .avatar { /* User pictures on the left side of the chat */
border: .5px double #333;
border-radius: 2pc;
box-shadow: 0 0 2px #000;
}
.Chat .inline-alert { /* ~Inline alerts~ */
color: lightyellow;
text-shadow:1px 1px 8px #0ff;
font-size: 14px;
}
.Chat .username { /* Usernames in chat box */
color: #04f;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
}
.Chat .you {
background:lightblue;
color:blue;
box-shadow:inset 0 0 2pc #000;
}
.ChatWindow {
background: url('http://vignette3.wikia.nocookie.net/wingsoffirefanon/images/5/50/Background_1.png/revision/latest?cb=20150814161244') no-repeat top right fixed;
background-size: cover;
color:#FFF;
}
.ChatWindow .UserStatsMenu { /* Lists "Message Wall", "Contributions", ect */
background-color: #222;
border: 3px solid darkgreen;
border-radius: 2pc 1pc;
box-shadow: inset -2px 0 5px#435, inset -10px -1px 16px #000;
color: blue;
}
#pingspan { /* Ping phrases (?) Chat Hacks */
color: #AA3;
font-style: italic;
margin-left: 5px;
text-shadow: 1px 1px #333;
}
.Rail .private { /* Private message bar */
background:repeating-linear-gradient(45deg, #f08080, #f08080 10px, #FFA07A 10px, #FFA07A 20px, #ffffb2 20px, #ffffb2 30px, #98FB98 30px, #98FB98 40px, #ADD8E6 40px, #ADD8E6 50px, #D2A9FF 50px, #D2A9FF 60px);
border: 1px dotted #888;
border-radius: 4pc;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255, 255, 255, 0.08),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
color: #fff;
text-align: center;
}
.Rail .selected{ /* Wiki logo or selected PM */
background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
background-size: 30px 10px;
border: 1px dashed #888;
border-radius: 1px 1pc 1pc 1px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75),inset 0 10px rgba(255, 255, 255, 0.03),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
}
.Rail .splotch { /* Number of missed messages */
background: indigo;
}
.Rail .User:hover {
background: rgba(0, 0, 0, .7);
border-radius: 1px 1pc 1pc 1px;
box-shadow: 1px 1px 1px #000;
color: indigo;
}
.User img{ /* User Avatars on right as well as own at top right */
border: .5px solid #222;
border-radius: 2pc;
box-shadow: 1px 1px 8px #000;
}
.UserStatsMenu .actions ul li { /* the 'body' of this menu */
border-radius: 1pc;
text-shadow: 1px 1px 2px #000;
}
.UserStatsMenu .actions ul li:hover { /* hovering over an option of this menu */
background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
background-size: 30px 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75),inset 0 10px rgba(255, 255, 255, 0.03),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
}
.UserStatsMenu .info { /* The area of this menu behind the name */
background: linear-gradient(-45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 75%), rgb(0, 153, 151);
background-size: 30px 10px;
border-radius: 2pc 1pc 1pc 2pc;
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.75), inset 0 1px #427,inset 0 10px rgba(255, 255, 255, 0.03),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
color:blue;
}
.UserStatsMenu .info img { /* The picture on this menu */
border: .5px solid #222;
border-radius: 3pc 1pc 1pc;
}
.Write img { /* Picture to left of textbox */
border: 1px solid #222;
border-radius: 2pc;
box-shadow: 0 0 5px #000;
}
.Write [name="message"] { /* Smaller region within Textbox */
background: rgba(255, 255, 255, 0.05);
border-radius: 1pc;
color: blue;
}
.Write .message { /* Textbox */
background: rgba(0, 0, 0, .4);
border-radius: 2pc;
padding: 10px;
box-shadow: inset -2px 0 5px#435, inset -10px -1px 16px #000;
}
.User.away .status {
color: #bbb;
font-size: 9px
}
.Chat .time {
color: #bbb;
font-size: 11px;
}
.User .username {
color: white;
}
.ChatHeader {
background: transparent;
border-radius: 15px;
border: 1.5px solid #222;
font-size: 105% !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255, 255, 255, 0.08),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
}
.Rail {
background: rgba(0, 0, 0, .5);
border: 2px solid black;
border-left: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255, 255, 255, 0.08),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);
}
#WikiaPage { /* Everything within the background border */
background-color: transparent;
}