design.css

@charset "utf-8";

/* Basic Body Structure */
body {
    background: #222;
    color: #cfcfcf;
    font-family: 'Myriad Pro';
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    overflow-x: hidden;
    word-wrap: break-word;
}

a {
    border-bottom: dotted 1px #8cb3ff;
    color: #8cb3ff;
    text-decoration: none;
}

a:hover {
    border: none;
    border-bottom: solid 1px #8cb3ff;
}

#body_home {
    bottom: 0;
    left: 0;
    padding: 2em 0 4px;
    position: absolute;
    right: 0;
    top: 0;
}

body[type*=server] #body_home {
    padding: 2px 0;
}

.message,
.sender,
.time {
    padding: 4px 8px 3px;
}

.message {
    max-width: 90%;
    width: 100%;
}

.sender,
.time {
    background: #333;
}

.sender {
    font-weight: 600;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 10em;
}

body[type*=server] .sender { display: none; }

.time {
    color: #888;
    font-size: 0.8em;
    line-height: 1.8;
    white-space: nowrap;
}

.line {
    display: -webkit-flex;
    -webkit-flex-flow: row;
}

.line[nickname-type*=myself] .message {
    background: #2e2e2e;
}

.line[type*=action] .message,
.line[type*=action] .sender {
    background: none;
    font-style: italic;
}

.line[type*=action] .sender {
    padding-right: 2px;
}

body[type*=channel] .event .message {
    color: #666;
}

.event .message:before {
    content: '» ';
}

body[type*=server] .event .message {
    color: #999;
    font-size: inherit;
    padding-left: 1em;
    padding-right: 2em;
}

body[type*=server] .event .message:before {
    content: '';
}

.event .sender {
    background: inherit;
}

.text:hover,
body[type*=server] .line:hover {
    outline: 1px solid #666;
}

.text:hover .message,
.text:hover .sender,
.text:hover .time,
body[type*=server] .line:hover .message,
body[type*=server] .line:hover .time {
    background-color: #444;
    color: #fff;
}

.text[highlight*=true],
.text[highlight*=true] .time {
    color: #fff;
}

.text[highlight*=true] {
    border: 1px solid #284e84;
    border-left: none;
    border-right: none;
    outline: none;
}

.text[highlight*=true]:hover {
    border-color: #3069ab;
}

.text[highlight*=true] + .text[highlight*=true] {
    border-top: none;
}

.text[highlight*=true] .message,
.text[highlight*=true] .sender,
.text[highlight*=true] .time {
    background-color: #1b3458;
}

.text[highlight*=true]:hover .message,
.text[highlight*=true]:hover .sender,
.text[highlight*=true]:hover .time {
    background-color: #204571;
}

.znc-playback-end {
    border-bottom: 1px dashed #9f9f9f;
}

.znc-playback-start {
    border-top: 1px dashed #9f9f9f;
}

#mark {
    border-bottom: 1px dotted #9f9f9f;
    margin: 1px 0;
    -webkit-transition: 0.2s linear;
}

/* Loading Screen */
body div#loading_screen {
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -150px;
    width: 300px;
    height: 21px;
    font-size: 18px;
    background: #181818;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px;
    padding-left: 10px;
    opacity: 1; /* Set by JavaScript */
    -webkit-transition: opacity 0.8s linear;
}

/* Topic Bar */
#topic_bar {
    background: #333;
    border-bottom: 1px solid #404040;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.8);
    color: #efefef;
    font-weight: 600;
    left: 0;
    opacity: 0.9 !important; /* Overrides JS opacity. */
    padding: 4px 12px 2px;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 2;
}

#topic_bar a,
#topic_bar span.channel {
    color: #f5f5f5;
    border-color: #f5f5f5;
    text-shadow: 1px 1px rgba(10, 10, 10, 0.7);
}

/* Images */
a img {
    border: 0;
}

a img:hover {
    outline: 2px solid #284e84;
}

img {
    display: block;
    margin: 15px 15px 12px 0;
    max-height: 40%;
    max-width: 95%;
}

/* Nickname Colors */
body .text .sender[type*=myself] { color: #ff8c00; }

body .sender[type*=normal][colornumber='0']  { color: #7cfc00; }
body .sender[type*=normal][colornumber='1']  { color: #c2ff40; }
body .sender[type*=normal][colornumber='2']  { color: #87ceeb; }
body .sender[type*=normal][colornumber='3']  { color: #e1c4ff; }
body .sender[type*=normal][colornumber='4']  { color: #6495ed; }
body .sender[type*=normal][colornumber='5']  { color: #ff69b4; }
body .sender[type*=normal][colornumber='6']  { color: #ffb6c1; }
body .sender[type*=normal][colornumber='7']  { color: #48d1cc; }
body .sender[type*=normal][colornumber='8']  { color: #ee82ee; }
body .sender[type*=normal][colornumber='9']  { color: #f66e72; }
body .sender[type*=normal][colornumber='10'] { color: #69ff89; }
body .sender[type*=normal][colornumber='11'] { color: #ffe170; }
body .sender[type*=normal][colornumber='12'] { color: #95d38f; }
body .sender[type*=normal][colornumber='13'] { color: #7eb6be; }
body .sender[type*=normal][colornumber='14'] { color: #f3d8e2; }
body .sender[type*=normal][colornumber='15'] { color: #f66e72; }
body .sender[type*=normal][colornumber='16'] { color: #faa4a6; }
body .sender[type*=normal][colornumber='17'] { color: #ffd4a8; }
body .sender[type*=normal][colornumber='18'] { color: #ffeba5; }
body .sender[type*=normal][colornumber='19'] { color: #bae2b6; }
body .sender[type*=normal][colornumber='20'] { color: #aad0d4; }
body .sender[type*=normal][colornumber='21'] { color: #a8d0ef; }
body .sender[type*=normal][colornumber='22'] { color: #98a3ff; }
body .sender[type*=normal][colornumber='23'] { color: #c09bc3; }
body .sender[type*=normal][colornumber='24'] { color: #c38074; }
body .sender[type*=normal][colornumber='25'] { color: #a6e1a4; }
body .sender[type*=normal][colornumber='26'] { color: #7f99e1; }
body .sender[type*=normal][colornumber='27'] { color: #5ba2e1; }
body .sender[type*=normal][colornumber='28'] { color: #e1de7d; }
body .sender[type*=normal][colornumber='29'] { color: #e199a8; }
body .sender[type*=normal][colornumber='30'] { color: #b5a0e1; }

/* mIRC Color Codes */
.effect[color-number='0']  { color: #ffffff; }
.effect[color-number='1']  { color: #000000; }
.effect[color-number='2']  { color: #000088; }
.effect[color-number='3']  { color: #008800; }
.effect[color-number='4']  { color: #ff0000; }
.effect[color-number='5']  { color: #880000; }
.effect[color-number='6']  { color: #880088; }
.effect[color-number='7']  { color: #ff8800; }
.effect[color-number='8']  { color: #ffff00; }
.effect[color-number='9']  { color: #00ff00; }
.effect[color-number='10'] { color: #008888; }
.effect[color-number='11'] { color: #00ffff; }
.effect[color-number='12'] { color: #0000ff; }
.effect[color-number='13'] { color: #ff00ff; }
.effect[color-number='14'] { color: #888888; }
.effect[color-number='15'] { color: #cccccc; }

.effect[bgcolor-number='0']  { background-color: #ffffff; }
.effect[bgcolor-number='1']  { background-color: #000000; }
.effect[bgcolor-number='2']  { background-color: #000088; }
.effect[bgcolor-number='3']  { background-color: #008800; }
.effect[bgcolor-number='4']  { background-color: #ff0000; }
.effect[bgcolor-number='5']  { background-color: #880000; }
.effect[bgcolor-number='6']  { background-color: #880088; }
.effect[bgcolor-number='7']  { background-color: #ff8800; }
.effect[bgcolor-number='8']  { background-color: #ffff00; }
.effect[bgcolor-number='9']  { background-color: #00ff00; }
.effect[bgcolor-number='10'] { background-color: #008888; }
.effect[bgcolor-number='11'] { background-color: #00ffff; }
.effect[bgcolor-number='12'] { background-color: #0000ff; }
.effect[bgcolor-number='13'] { background-color: #ff00ff; }
.effect[bgcolor-number='14'] { background-color: #888888; }
.effect[bgcolor-number='15'] { background-color: #cccccc; }