This is the code:
Code: Select all
/**
* Topic Preview - Dark Theme
*
* Color schema:
* backgrounds: #1e1e1e
* borders: #cecece
* box shadows: #808080
* font colors: #cecece
*/
#topic_preview {
background: #fff;
background-image: url(http://opcdn.battle.net/static/heroes/496/images/news/triangles.png);
background-position: bottom;
border: 1px solid #56a4ff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px #56a4ff;
-moz-box-shadow: 1px 1px 3px #56a4ff;
box-shadow: 1px 1px 3px #56a4ff;
padding: 10px;
margin-left: -40px;
min-width: 40px;
position: absolute;
font-size: 11px;
text-decoration: none;
font-style: normal;
color: #4d4c4c;
z-index: 10;
display: none;
}
#topic_preview:before {
/* Upper Triangle */
content: "";
background: #fff;
border: 0;
border-top: 1px solid #56a4ff;
border-right: 1px solid #56a4ff;
width: 10px;
height: 10px;
margin-left: 15px;
margin-top: -16px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display /*\**/: none\9;
*display: none !important;
*display: none;
}
#topic_preview.invert:after {
/* Lower Triangle */
content: "";
background: #fff;
border: 0;
border-bottom: 1px solid #56a4ff;
border-left: 1px solid #56a4ff;
width: 10px;
height: 10px;
top: 100%;
margin-left: 15px;
margin-top: -5px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display /*\**/: none\9;
*display: none !important;
*display: none;
}
#topic_preview.invert:before {
/* Hide upper triangle */
content: "";
display: none;
}
#topic_preview hr {
margin: 5px 0;
}
/* Avatars and Text */
.topic_preview_avatar {
float: left;
position: relative;
margin: 0 10px 0 0;
border: solid 1px #000;
width: 60px;
height: 60px;
}
.topic_preview_avatar img {
width: 60px;
height: 60px;
}
.topic_preview_avatar.rtl {
/* rtl languages */
float: right;
margin: 0 0 0 10px;
}
.topic_preview_first,
.topic_preview_last {
word-wrap: break-word;
overflow: hidden;
max-height: 200px;
}
.topic_preview_break {
clear: both;
display: block;
width: 100%;
height: 0;
padding: 5px 0;
margin: 0;
font-size: 0;
}
/* responsive design */
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
#topic_preview {
width: 300px !important;
}
}
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
#topic_preview {
width: 220px !important;
}
}