User:Hedgeg-fduser/Progressive chat skin.css

/* "progressive" means "spacious" http://community.wikia.com/wiki/File:New_progressive_chat_skin_(mlp).jpg */   /*sort of TOC*/ /*background*/ /***text colors***/ /***Chat***/ /*imput box*/ /**PMs**/ /* List of users */ /* scroll bar for webkit browsers */

/* hide header */ /* background and font-size */ body { background: linear-gradient(to right, #000 20%, #373066); font-size: 14px; overflow-y: hidden /*scrool bar fix*/ } /* padding fix and background-image */ .WikiaPage { left: 0px !important; bottom: 3px !important; top: 0px !important; right: 0px !important; border: none !important; background-image: /* rarity_profile_wallpaper_by_phantombadger-d4n1ze5 */ url("http://fc02.deviantart.net/fs70/i/2012/020/b/8/rarity_profile_wallpaper_by_phantombadger-d4n1ze5.jpg"); background-size: 100%; background-position: 0 -70px; background-repeat: no-repeat; background-color: transparent !important; /***text colors***/ color:white !important; /*main text color*/ } /*nicknames color*/ .Chat .username {color: #639} /*disable default highlight*/ .Chat .you {background: none} /*Own nick and messages colors*/ .Chat .you .username {color: #0865D2 !important; /*color*/ background: linear-gradient(to right, /*highlight*/ #F3F4F6, transparent 20%) repeat scroll 0% 0% transparent; position: relative; left: -4px; padding-left: 4px; /*reposition*/ border-top-left-radius: 4px; border-bottom-left-radius: 4px; /*make it rounded*/ }  /***text colors END***/
 * 1) ChatHeader {visibility: hidden}

/**Maximizing space of the chat**/ .Chat {width: 100%; border: none; /*disable bottom border*/ overflow-x: hidden /*disable horizontal scroll bar*/ } /**less padding = more messages on screen**/ .Chat li {padding: 5px 15px 10px 50px}

/***Chat***/ /***in chat avatars*/ .Chat .avatar {border-radius: 50%; border:none; /*circle w/o border*/ height: 30px; width: 30px; /*bigger*/ top: 22px; left: 10px;} /*the offset for synergy with clock*/ /****the message time (clocks)*/ .time {position:absolute; left:0px; margin: 0px 12px; /*offset to the left*/ min-width: 28px; text-align: center; /*text position fix*/ font-size:12px; font-weight: bold; /*font*/ } /**notifications**/ .Chat .inline-alert {display:inline-block; vertical-align:bottom} .Chat .inline-alert:first-child {display:none} /*disable first chat message*/ /*Imput box*/ .Write {right: 175px; padding-left: 55px} /*position*/ /*font size and height*/ .Write .message {font-size: 12px; height: 41px; /***image*/ background-color: #F3F4F6; background-image: url('https://addons.cdn.mozilla.net/user-media/addons/408498/preview_large.jpg?1353190833'); background-repeat: no-repeat; background-position: 100% 0px; /*round edge, text indent and position*/ border-radius: 20px; padding: 0px 20px; left: -30px;} /*reduce line-height*/ .Write .message > textarea {line-height: 1em} /*round avatar, fix border*/ .Write img {border:none !important; border-radius: 50%; z-index: 20; left: auto; right: 30px} /*reposition to right*/

/* Right container */ .Rail {z-index:20; top: auto; right: 40px; padding-bottom: 4px; /*положение*/ overflow-y: visible} /*фикс отображения содержимого*/

/*Logo*/ /*position*/ .public {position: absolute;bottom: 10px;left: 5px;} /*disable background and shadow while in chat*/ h1.selected {background-color: transparent !important; box-shadow: none !important} /*Chevron*/ .Rail > .public > .chevron {left:5px !important; /*save position*/ border-color: #FFF transparent transparent} /*make white*/ .Rail > .public > .chevron.closed { /*diffrent rule for reverse triangle*/ border-color: transparent transparent #FFF transparent}

/**PMs**/ position: relative; bottom:40px; left: -3px; width: 170px; max-height: 40px; overflow:auto } /* disable personal messages header */ h1.private {display:none !important} /* disable "away" */ /*** PMs style */ display:inline-block; padding: 0px; /*in a row*/ height:36px; width:36px; border-radius: 50% /*li style*/ } /*active PM: disable shadow and opacity*/ /*color of round frame*/ /* splotch */ .Rail .splotch { border: none; /*w/o border*/ right: 0px; top: 0px !important} /*reposition to top right*/ /* avatar position and style */ width: 28px; height: 28px; position: relative; left: 4px; top: 4px; border-radius: 50%; border: none; }
 * 1) PrivateChatList {
 * 1) PrivateChatList > li > span.username,
 * 2) PrivateChatList > li > div.details {display:none}
 * 1) PrivateChatList > li {opacity: 0.5; /*for better reading exp*/
 * 1) PrivateChatList .selected {box-shadow: none; opacity: 1}
 * 1) PrivateChatList > li.selected,
 * 2) PrivateChatList > li:hover {background-color: #55479C}
 * 1) PrivateChatList > li > img {

/* List of users */ width: 167px; max-height: 450px; overflow:auto} /*reduce padding*/ border-radius: 13px;} /*rounded*/ /*avatars: v/o border, rounded, reposition*/ height: 28px; width: 28px} /*bigger*/ /*fix height*/ .Rail .User {height: 27px} /*highlight*/
 * 1) WikiChatList {position: relative; bottom: 40px;
 * 1) WikiChatList > li {padding: 2px 5px 2px 35px; margin-top: 2px;
 * 1) WikiChatList img {border: none; border-radius:50%; left:0px;
 * 1) WikiChatList li:hover {background: none repeat scroll 0% 0% rgba(92, 77, 171,

0.5)} /*own nick background-color: rgba(165, 150, 240, 0.2) !important}*/
 * 1) WikiChatList [data-user="Hedgeg"] {display:block !important;

/* scroll bar for webkit browsers */
 * -webkit-scrollbar {width: 12px}


 * -webkit-scrollbar-track { border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.7); }
 * -webkit-scrollbar-thumb { border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgb(105,195,255); }