design.css

@charset "utf-8";
@import "inlineMedia.css";

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

/* Links */
a {
    /*border-bottom: dotted 1px #8cb3ff;*/
    /*border-bottom: solid 1px #8cb3ff;*/
    color: #8cb3ff;
    /*text-decoration: none;*/
    background-color: transparent;

    /*display: inline-block;
    vertical-align: top;
    max-width: 60em;*/
}

/* How the appearance of links changes when */
/* hovered over. */
a:hover {
    /*border: none;*/
    /*border-bottom: solid 1px #8cb3ff;*/
}

/* Coloring for URLs */
a:link {
    /* This only affects URLs in Textual: */
    color: #268bd2;
    /* Don't let long links break the layout */
    display: inline-block;

    /* Removed for now because it doesn't play nice */
    /* on lines with inline nick boxes.*/
    /*vertical-align: top;*/
    max-width: 100%;
    /*max-width: 60em;*/
}

/* Make channel links appear clickable. */
/* (Unlike regular links, you have to double click. */
span.channel {
    color: #268bd2;
    text-decoration: underline;
    cursor: hand;
}

#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,
.time {
    padding: 5px 8px 4px;
    /* Eureka! This adds a subtle line between all chat messages! */
    border-bottom: 1px solid #eee8d5;
}

.sender {
    padding: 5px 8px 3px;
    border-right: 1px solid #eee8d5;
}

.message {
    max-width: 100%;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

body[type*=server] .message {
    max-width: 100%;
}

.time {
    color: #657b83 !important;
    padding: 4px 8px 4px;
}

/* Background of ??? */
.sender {
    background: #eee8d5;
}

.time {
    background: #fdf6e3;
}

/* Background of field containing own nickname */
.text .sender[data-member-type="myself"] {
    /*min-width: 105px;
    max-width: 220px;*/
    /*background: #eee8d5;*/
    background: #fdf6e3;
    border-right: 1px solid #eee8d5;
    /*border-bottom: 1px solid #ff0000;*/
}

.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;
}

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

/* This is the background of messages you send */
/* to the channel. */
.line[nickname-type*=myself] .message {
    background: #fdf6e3;
}

/* /me action messaging */
div.line[data-line-type="action"] .message,
div.line[data-line-type="action"] .sender {
    /*background: #fdf6e3;*/
    font-style: italic;
}

/* Fix action formatting. */
div.line[data-line-type="action"] .sender {
    padding: 5px 8px 3px;
    /*border-right: none;*/ /* Experiment with this. */
    /* Will need to place a border on the bottom of own */
    /* sender area. */
}

/* Placed before the user's name when performing */
/* a /me action. */
div.line[data-line-type="action"] .sender:before {
    content: '• ';
}

/* Any and all channel events */
.event .message {
    color: #93a1a1 !important;
    background: #d9d9d9;
    font-size: 0.8em !important;
    padding: 3px 8px 1px;
    line-height: 1.0rem;

    border-bottom: 1px solid transparent;
    /*border-bottom: #ff0000;*/
}

.event .time {
    color: #93a1a1 !important;
    background: #d9d9d9;
    font-size: 0.8em !important;
    padding: 3px 8px 1px;
    /*padding: 2 8px;*/
    line-height: 1.0rem;

    border-bottom: 1px solid transparent;
}

.event:hover .message,
.event:hover .time {
    color: #657b83 !important;
}

.event + :not(.event) .message, 
.event + :not(.event) .time {
    border-top: 1px solid #eee8d5;
}

/* Affects only the before message, in this */
/* case just the arrows before the event message */
/* occurs. */
.event .message:before {
    content: '» ';
}

/* Different symbols for join/leave messages */
/* for easier visual reference. Green for joins, */
/* red for parts. */
.line[data-line-type="join"] .message:before {
    content: '→ ';
    color: #339933;
}

.line[data-line-type="kick"] .message:before,
.line[data-line-type="part"] .message:before,
.line[data-line-type="quit"] .message:before {
    content: '← ';
    color: #dc322f;
}

/* Lock icon that appears next to OTR chats. */
/* (Off the record) */
.encryptionLock {
    display: none;
    vertical-align: top;
/*    height: 26px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding: 5px 8px 3px;*/
}

/* Keep messing around with this. */
body div.line[ltype*=off-the-record-encryption-status] p {
    /*background-color: #ff0000 !important;*/
    display: block !important;
    margin: 0px !important;
    border: 0px !important;
    padding: 0px !important;
    background-color: #ff0000;
}

/* This changes what's inside the actual event */
.message[ltype*=off-the-record-encryption-status]:hover {
    color: #859900 !important;
}

body div.line[ltype*=off-the-record-encryption-status]:before .sender {
	content: "$";
}

/* Whois message styling */
.whois .message {
    background-color: #eee8d5;
    color: #93a1a1 !important;
    font-style: normal;
    font-size: 0.9em !important;
}

.whois .time {
    background-color: #eee8d5;
    color: #93a1a1 !important;
}

.whois:hover .message,
.whois:hover .time {
    color: #93a1a1 !important;
}

.line[type*=debug] .sender{
    /*background-color: #eee8d5 !important;*/
    /*content: "» ";*/
    /*color: #93a1a1 !important;*/
}

.line[type*=debug] .time {
    background-color: #eee8d5;
    color: #93a1a1 !important;
}

.message[type*=notice],
.line[type*=notice] .time {
    background-color: #eee8d5;
    color: #93a1a1 !important;
}

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

body[type*=server] .time {
    color: #999;
    background-color: #eee8d5;
    font-size: inherit;
    padding-left: 1em;
    padding-right: 2em;
    border-bottom: 1px solid #eee8d5;
}

body[type*=server] .event .message:before {
    content: '';
    border-bottom: 1px solid #eee8d5; // Added
}

.event + :not(.event) .sender {
	border-top: 1px solid #eee8d5;
}

/* This controls the background color of the area */
/* next to the event messages where a nick would be. */
.event .sender {
    /*background: inherit;*/
    background: #eee8d5;
    border-right: 1px solid #d9d9d9 !important;
    /*border-top: 1px solid #eee8d5;*/
    /*border-bottom: 1px solid #eee8d5; // Added*/
}

/* This controls the text color of the entire highlighted */
/* message, as well as the timestamp text color. */
.text[data-highlight="true"],
.text[data-highlight="true"] .time {
    font-weight: bold;
    color: #2aa198 !important;
    /*border: 1px solid #ff0000;*/ /* BADBADNOTGOOD */
    /*color: #ff0000;*/
}

/*.text[highlight*=true][type*=privmsg] .sender {
    padding: 5px 8px 3px !important;
}*/

.text[data-highlight="true"] {
    /*border: 1px solid #ffe6ff;*/ /* dacea4 */
    border-top: 1px solid #ffb3ff;
    border-bottom: 1px solid #ffb3ff;
}

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

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

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

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

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

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

/********** Message buffer session indicator **********/

.message_buffer_session_indicator {
    display: flex;
    display: -webkit-flex;
    padding: 0.5em 0;
    /*padding: 0.2em 0;*/
}

.message_buffer_session_indicator > hr {
    background: #b58900; /* Lines on either side */
    border: 0;
    height: 1px;
    margin-top: 0.6em;
    flex: 1;
    -webkit-flex: 1;
}

.message_buffer_session_indicator > span {
    font-style: oblique;
    margin: 0 1em;
    color: #b58900;
}

.message_buffer_session_indicator + #mark {
    display: none;
}

/* ************************************************* */

/* Selected User */
.sender {
    cursor: pointer;
}

div.line[data-line-type="privmsg"]:not(.selectedUser),
div.line[data-line-type="action"]:not(.selectedUser) {
    transition-property: border-top, border-bottom, background-color;
    transition-duration: 0.25s, 0.25s, 0.25s;
}

div.line[data-line-type="privmsg"] .time:not(.selectedUser),
div.line[data-line-type="action"] .time:not(.selectedUser) {
    transition: color 0.25s;
}

div.line.selectedUser[data-highlight="false"] .time {
    transition: color 0.25s ease-in;
    color: #586e75; /* Emphasized content */
}

/* Remove existing borders when selected */
div.line.selectedUser[data-highlight="false"] .message,
div.line.selectedUser[data-highlight="false"] .time {
    /*border: none;*/
    border-bottom: 1px solid #dacea4;
}

div.line.selectedUser[data-highlight="false"] .sender:before {
	content: '> ';
}

div.line.selectedUser[data-highlight="false"] {
    transition-property: color, border-top, border-bottom, background-color;
    transition-duration: 0.25s, 0.25s, 0.25s, 0.25s;

    color: #586e75; /* Emphasized content */
    /* border: 1px solid #b58900; */ /* top/bottom border */
    border-top: 1px solid #b58900;
    border-left: none;
    border-right: none;
    outline: none;
}

/* Special rules for borders so they aren't placed */
/* after consecutive messages. */
div.line.selectedUser[data-highlight="false"] + 
div.line[data-line-type="privmsg"]:not(.selectedUser) {
	border-top: 1px solid #b58900;
}

div.line.selectedUser[data-highlight="false"] + 
.event {
	border-top: 1px solid #b58900;
}

div.line.selectedUser[data-highlight="false"] .sender {
   border-right: 1px solid #dacea4;
}

div.line.selectedUser[data-highlight="false"]:hover {
    /*border-color: #aa362b;*/
}

div.line.selectedUser[data-highlight="false"] + 
div.line.selectedUser[data-highlight="false"] {
    border-top: none;
}

/* Color of selected messages */
div.line.selectedUser[data-highlight="false"] .message,
div.line.selectedUser[data-highlight="false"] .sender,
div.line.selectedUser[data-highlight="false"] .time {
    background-color: #EEEEEE;
}

div.line.selectedUser[data-highlight="false"]:hover .message,
div.line.selectedUser[data-highlight="false"]:hover .sender,
div.line.selectedUser[data-highlight="false"]:hover .time {
    /*background-color: #68271d;*/
}

div.line.selectedUser[data-highlight="false"] +
#mark {
    border-top: 1px solid #b58900;
    border-bottom: 1px dotted #b58900;
    margin: 1px 0;
    -webkit-transition: 0.2s linear;
}

/* Mark made with Command-L. */
#mark {
    border-bottom: 1px dotted #b58900;
    margin: 1px 0;
    -webkit-transition: 0.2s linear;
}

/* Loading Screen */
body div#loadingScreen {
    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 */
#topicBar {
    background: rgba(238, 232, 213, 0.7); /* #333 */
    border-bottom: 1px dotted #dacea4;
    /*box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.8);*/
    /*color: #efefef;*/
    color: #586e75;
    font-weight: 600;
    left: 0;
    opacity: 1.0 !important;  /* Overrides JS opacity. */ 
    padding: 4px 12px 2px;
    position: fixed;
    right: 0;
    /*text-align: center;*/
    top: 0;
    z-index: 2;

    /* Uncomment this and lines in #topicBar:hover */
    /* for a topic bar that only shows the whole */
    /* topic when hovering. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Hovering over the topic makes it completely */
/* opaque. */
#topicBar:hover {
    background: rgba(238, 232, 213, 1.0);

    /* Uncomment these and the lines in #topicBar */
    /* for a topic bar that only shows the whole */
    /* topic when hovering. */
    overflow: visible;
    white-space: normal;
}


/* Links in topic bar */
#topicBar a,
#topicBar span.channel {
    color: #268bd2;
    border-color: #268bd2;
    /*border-color: #f5f5f5;*/
    /*text-shadow: 1px 1px rgba(10, 10, 10, 0.7);*/
}

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

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

img {
    display: block;
    margin: 15px 15px 12px 0;
    max-height: 40%;
    max-width: 95%;
    /* Golden ratio ~ 485/300 */
    /*max-height: 300px;
    max-width: 485px;*/
}

/* Nickname Colors */

/* Creates an identifying box around nicknames */
/* referred to in messages. */
body .inlineSender {
    color: #fff;
    display: inline-block;
    line-height: 1;
    padding: 3px 2px;
    background: #eee8d5;
    border: 1px solid #d3c492;
    border-radius: 3px;
    /*margin: 2px 0;*/
}

body .inlineSender:hover {
    text-decoration: underline;
    cursor: hand;
}

/*.message[class*=inline_nickname] .sender  {
    color: #ff0000 !important;
}*/

body .text .sender[data-line-type="myself"] { color: #6c71c4; }

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

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