Chat skins (Copy and Paste, do not remove Skins.)

## The Aspect Of Aspect 1

/\*------------------------------------------------------------
Table of contents

Base codes -- Basic image and color system

Transparent Chathacks -- Makes the buttons for AFK etc clear

Custom scrollbar -- Fancy Scrollbar design

Right col. realignment -- Fixes any possible attempts for the right chat window to load upside down

Remove tags -- Removes "Chatbot" tags beneath KINMUNE and NumidimBot

Base codes

\*/

1. WikiaPage {

border:1px solid ro;
background-color:rgba(0, 0, 0, 0.75);
}

1. WikiaPage, #WikiaPageBackground {

```
   border-radius: 1px / 15px;

```

}

body.ChatWindow {
background: url(https://images.alphacoders.com/526/526733.jpg) no-repeat fixed;
background-size: cover;
}

body.ChatWindow .you .avatar {

```
   border: 1px solid #0DB1ED;

```

}

body.ChatWindow .avatar {

```
   border: 1px solid #0DB1ED; border-radius: 6px; box-shadow: 0 0 6px #0DB1ED;

```

}

.ChatWindow a { color: #0DB1ED;
}

.ChatWindow #Chat\_211 {

```
   border: solid #3d454d;
   border-width: 0 1px 1px 0;

```

}

.ChatWindow #ChatHeader, .ChatWindow #WikiaPage {

```
   border: 1px solid #3d454d;

```

}

.ChatWindow #ChatHeader {

```
   background: rgba(10, 10, 10, 0.80) no-repeat center !important;
   background-size: contain !important;

```

}

.ChatWindow .WikiaPage {
background: rgba(0,0,0,.8) !important;
}

.ChatWindow .you {
background: transparent;
border-right: 3px ridge #0DB1ED;
border-left: 3px ridge #0DB1ED;
border-style: double;
}

.ChatHeader .User {
border-left:1px solid #3d454d;
}

.ChatHeader .User img {
border: 1px solid #0DB1ED; border-radius: 6px; box-shadow: 0 0 4px #0DB1ED;
}

.ChatHeader .User .username {
font-weight: bold;
color: #0DB1ED;
background: transparent;
}

.ChatWindow #ChatHeader .username {

```
   color: #0DB1ED;

```

}

.Chat {
color: #d5d4d4;
border-right:1px solid #3d454d;
border-bottom:1px solid #3d454d;
}

.Chat .inline-alert {

```
   color: #767676;

```

}

.Chat .time {

```
   color: #767676;

```

}

.Chat .username {
color: #0DB1ED;
}

.ChatWindow .ChatHeader {
background-color:rgba(0, 0, 0, 0.75);
border:1px solid #3d454d;
color: #0DB1ED;
}

.Chat .avatar {
border:1px solid #3d454d;
}

.ChatWindow .me-message {

```
   color: #767676;

```

}

.ChatWindow .UserStatsMenu {
background-color:rgba(0, 0, 0, 0.45);
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
border:1px solid #3d454d;
border-radius:3px;
}

.ChatWindow .UserStatsMenu .info {
background:transparent;
color:#d5d4d4;
}

.ChatWindow .UserStatsMenu .actions ul li:hover {
background:transparent;
}

.message.ping { color: #0DB1ED !important;
}

1. Write .message {

```
   background: transparent;
   border: solid 1px #3d454d;

```

}

1. Write .message textarea {

```
   color: white;

```

}

1. Rail h1.private {

```
   color: #0DB1ED;

```

}

.User img {
border:1px solid #3d454d;
}

.User .username {
color: #0DB1ED;
}

.UserStatsMenu .info img {
border: 1px solid #3d454d;
}

.UserStatsMenu .info ul .username {
color: #0DB1ED;
}

.UserStatsMenu .actions ul li .icon {
background-position:0; background-image:url('');
opacity:100;
}

.UserStatsMenu .actions ul li:hover .icon {
opacity:100;
}

.UserStatsMenu .actions .separator {
border-top: #0DB1ED 1px solid;
margin: 30px !important;
}

.User.away {
color: #767676;
}

.wordmark {

```
   color: #0DB1ED;

```

}

.Write [name="message"] {
color: #d5d4d4;
}

.Write img {
border:1px solid #3d454d;
}

.Write .message {

```
   border: 1px solid rgba(61, 69, 77, 0.97);
   background: transparent;

```

}

.Write img, .ChatHeader img {
border: transparent; border-radius: 6px;
}

.Write img, .ChatHeader .User img {
border: 1px solid #0DB1ED; border-radius: 6px; box-shadow: 0 0 4px #0DB1ED;
}

.Rail {
color: #0DB1ED;
/\*Reenable to get the lizardman back
background: url() no-repeat right bottom;

* /

}

.Rail .User:hover {
background:transparent;
}

.Rail .public .chevron {
border-color:#0DB1ED transparent transparent transparent;
}

.Rail .public .chevron .closed {
border-color:transparent transparent transparent #0DB1ED;
}

.Rail .private {
border-top: 1px solid #3d454d;
border-bottom: 1px solid #3d454d;
background-color:transparent;
background-image:-webkit-gradient(linear,0% 0%,0% 0%,color-stop(0,transparent),color-stop(0,transparent));
}

.Rail .selected {
background:transparent;
box-shadow: inset 0 0 0px 0px #000000; -webkit-box-shadow: inset 0 0 0px 0px #000000;
}

.Rail .User.selected {

```
   background: transparent;

```

}

.Rail .User:hover, .Rail .User.selected:hover {

```
   background: transparent;

```

}

.Rail .User img {

```
   border: 1px solid #0DB1ED; border-radius: 6px;  box-shadow: 0 0 6px #0DB1ED;
   width: 28px;
   height: 28px;
   left: 10px;

```

}

.UserStatsMenu .info img {

```
   border: 1px solid #0DB1ED; border-radius: 6px;

```

}

.UserStatsMenu .actions ul li
.label {
color: #0DB1ED;
cursor: pointer;
margin: 0;
padding: 5px 10px;
line-height: 16px;
white-space: nowrap;
}

/\*------------------------------------------------------------
Transparent Chathacks

\*/

a.wikia-button, .wikia-single-button a, .wikia-menu-button, input[type="submit"], input[type="reset"], input[type="button"], .button, button {

```
   background-color: rgba(0, 0, 0, 0.03);
   background-image: -moz-linear-gradient(top,#1a1a1a 35%,#000 65%);
   background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,rgba(26, 26, 26, 0.05)),color-stop(65%,rgba(0, 0, 0, 0.04)));
   background-image: -o-linear-gradient(top,#1a1a1a 35%,#000 65%);
   background-image: -ms-linear-gradient(top,#1a1a1a 35%,#000 65%);
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-top-color: rgba(0, 0, 0, 0.0470588);
   border-top-style: solid;
   border-top-width: 1px;

```

}

/\*------------------------------------------------------------
Custom Scrollbar

\*/

-webkit-scrollbar {height:5px; width:1em; border-radius:3px;}
-webkit-scrollbar-track-piece {

```
   background-color:#191919;
   border:2px solid #191919

```

}

-webkit-scrollbar-thumb {

```
   width: 1em; height:5px;
   background-color: #323232;
   box-shadow: 0 0 2px rgba(0,0,0,0.6);
   border-radius:3px;
   border:1px solid #A9A9A9;

```

}

-webkit-scrollbar-button:end {
height: 0.75em; width: 0.75em;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border:1px solid #A9A9A9;
background-color:#323232;
border-bottom: 0px; }

-webkit-scrollbar-button:start {
height: 0.75em; width: 0.75em;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border:1px solid #A9A9A9;
border-top: 0px;
background-color:#323232; }

-webkit-scrollbar-corner {
height: 0.75em; width: 0.75em;
border:1px solid #A9A9A9;
background-color:#323232;
}

-webkit-resizer {
height: 0.75em; width: 0.75em;
border:1px solid #A9A9A9;
background-color:#323232;
}

-webkit-scrollbar-button:end:horizontal {
height: 0.75em; width: 0.75em;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border:1px solid #A9A9A9;
background-color:#323232;
border-bottom: 0px; }

-webkit-scrollbar-button:start:horizontal {
height: 0.75em; width: 0.75em;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border:1px solid #A9A9A9;
background-color:#323232;
border-bottom: 0px; }

-webkit-scrollbar-thumb:hover {

```
   background: #0a91c2;

```

}

-webkit-scrollbar-button:start:horizontal:active {

```
   background: #086d91 !important;

```

}

-webkit-scrollbar-button:end:horizontal:active {

```
   background: #086d91 !important;

```

}

-webkit-scrollbar-thumb:active {

```
   background: #086d91 !important;

```

}