Star Wars Chat Skin

Hello, I am Akamichi and today, I have made a Star Wars Chat Skin. I would mostly like to give credit to 2Actimv because I followed his layout of his 2015 Christmas Chat Skin which helped me. This was a rough 15-45 minute project that I managed to finish. The most hardest parts I was stuck on were how I can change the text color from white to black (which I managed to find later) but, all from that: This is my first skin that I fully made and did NOT give up on.

Image of the chat skin

Anyways here's the long version and short version (I recommend short one since that one usually works)

P.S. This is recommended for full-screen for a better experience and it's easier or clearer to see the background.

Long version - Check the bottom if this one looks outdated or not like in the pictures/not working.

/* Akamichi's test chat skin for Star Wars */ 
.Chat .inline-alert {
color: black;
}
 
.Chat .you,
.Chat ul li {
background-color: transparent;
}
 
.Chat .you a,
.Chat ul li a {
color: blue;
}
 
.Chat img {
border-radius: 8px;
border: none !important;
}
 
.Write {
background: rgba(255, 255, 255, 0.8);
border: 5px solid black;
border-top: 5px rgba(59, 15, 15, 0.8) !important;
border-bottom-left-radius: 4px;
}
 
.Write .message,
.Write .message textarea {
background-color: transparent;
border: 0px solid black;
}
 
.Write img {
border-radius: 5px;
border: none !important;
margin: 2px 0px 0px 0px;
}
 
.Write [name="message"] {
background-color: white;
border: 0;
color: black;
}
 
.Rail {
background: rgba(255, 255, 255, 0.8);
border-bottom-right-radius: 4px;
border: 5px solid black;
border-left: none !important;
}
 
.WikiChatList img {
border-radius: 5px;
border: none !important;
}
 
.WikiChatList .User:hover {
background: rgba(255, 255, 255, 0.3);
}
 
.User .username {
background-color: transparent;
color: black;
border: 0px solid black;
border-radius: 4px;
}
 
.User .username:hover {
color: black !important;
}
 
.ChatHeader {
background: rgba(255,255,255, 0.8);
border: 5px solid black;
border-top-left-radius: 20px 8px;
border-top-right-radius: 20px 8px;
}
 
.ChatHeader img {
border-radius: 5px;
border: none !important;
}
 
.ChatHeader .private {
color: black;
}
 
.Rail .private {
background-color: transparent;
color: black;
background-image: none;
border: none !important;
text-align: center;
}
 
.PrivateChatList .User img {
border-radius: 3px;
border: none !important;
}
 
.PrivateChatList .User:hover {
background: white;
}
 
.Chat .me-message {
background-color: rgba(255, 255, 255, 0.3);
color: black;
border: 1px solid black;
border-radius: 4px;
padding: 0.5px 3px;
}
 
.Rail .selected {
box-shadow: none;
background: transparent;
}
 
.User.away .status {
color: red;
}
 
.User.away .status:hover {
color: red;
}
 
.Chat li {
background: black;
color: black;
}
 
.Chat .time {
color: black;
font-size: 13px;
}
 
.Chat {
background: rgba(255, 255, 255, 0.8);
border: 5px solid black;
}
 
.ChatWindow .WikiaPage {
background: black;
}
 
#WikiaPage {
border: 0px solid black;
background: url() !important;
}
 
.ChatWindow {
background: url(http://vignette2.wikia.nocookie.net/akamichi/images/9/9b/ROTJ_Arrival_Background.png/revision/latest?cb=20151223020215) 70% 18% !important;
font-family: 'Open Sans', sans-serif;
}
 
@media screen and (min-width: 750px) {
.ChatWindow {
background-size: cover !important;
}
}

Short version - Guaranteed to Work

/* Star Wars Skin (Akamichi) */
/* Credit to 2Actimv for the whole layout of his Christmas 2015 Chat Skin */
@import "http://community.wikia.com/index.php?title=User:Akamichi/StarWarsSkin.css&action=raw&ctype=text/css";

If you also are wondering why my messages are colored in green, that is 2Actimv's Making your friends visible in the chat script.

Credit to 2Actimv AGAIN.