vividboarder
/
winter-solstice
mirror of https://github.com/ViViDboarder/winter-solstice.git
2
0
Fork 0
Code Issues Releases Wiki Activity
winter-solstice/design.css

747 lines
16 KiB
CSS
Executable File
Raw Permalink Blame History

/* Colors taken from the Tomorrow and base16 themes:
* https://github.com/ChrisKempson/Tomorrow-Theme
* https://github.com/chriskempson/base16
*/
/* @group Basic Body Structure */
* {
margin: 0;
padding: 0;
font-size: 100%;
word-wrap: break-word;
}
body {
color: #CCCCCC; /* Tomorrow Night Eighties: Foreground */
height: 100%;
z-index: 100;
font-size: 12px;
overflow: hidden;
overflow-y: auto;
background-color: #2D2D2D; /* Tomorrow Night Eighties: Background */
font-family: "EspressoMono-Regular", "Menlo";
}
#body_home {
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 100;
max-height: 99.99%;
position: absolute;
opacity: 0; /* Set by JavaScript */
-webkit-transition: opacity 0.8s linear;
}
body[viewtype=channel] div#body_home {
max-height: 96.5%;
}
.line {
padding: 2px 5px 2px 5px;
clear: both;
}
.sender {
cursor: pointer;
font-weight: 700;
}
body[dir=rtl] .sender {
display: inline-block;
}
/* @end */
/* @group Scrolling */
body[customscroller="true"]::-webkit-scrollbar {
width: 17px;
}
body[customscroller="true"]::-webkit-scrollbar:horizontal {
height: 0;
}
body[customscroller="true"]::-webkit-scrollbar-track {
background: #393939;
box-shadow: inset 1px 0px 0px 0px #4b4b4b;
}
body[customscroller="true"]::-webkit-scrollbar-thumb {
background-color: #7c7c7c;
border: 4px solid transparent;
border-left: 5px solid transparent;
border-radius: 20px;
background-clip: content-box;
}
body[customscroller="true"]::-webkit-scrollbar-thumb:hover {
background-color: #b0b0b0;
}
/* @end */
/* @group Misc */
#loading_screen {
position: absolute;
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -150px;
width: 300px;
height: 21px;
font-size: 18px;
background: #393939; /* Tomorrow Night Eighties: Current Line */
border: 1px solid #373B41; /* Tomorrow: Selection */
border-radius: 5px;
padding: 5px;
padding-left: 10px;
opacity: 1; /* Set by JavaScript */
-webkit-transition: opacity 0.8s linear;
text-align: center;
}
.encryptionLock img {
float: right;
margin: 0;
padding: 0;
height: 11px;
margin-top: 2px;
padding-left: 10px;
}
/* @end */
/* @group Time */
.time {
color: #515151; /* Tomorrow Night Eighties: Selection */
white-space: nowrap;
}
body[dir=rtl] .time {
padding-left: 0.4em;
display: inline-block;
}
/* @end */
/* @group Links */
a {
color: #6699CC; /* Tomorrow Night Eighties: Blue */
border-color: #6699CC; /* Tomorrow Night Eighties: Blue */
text-decoration: none;
border-bottom: dotted 1px;
}
a:hover {
color: #CC99CC; /* Tomorrow Night Eighties: Purple */
border-color: #CC99CC; /* Tomorrow Night Eighties: Purple */
}
/* @end */
/* @group Topic Bar */
#topic_bar {
top: 0;
left: 0;
right: 0;
z-index: 400;
opacity: 0; /* Set by JavaScript */
color: #D1F1A9; /* Tomorrow Night Blue: Green */
position: fixed;
padding: 2px 0.5em 3px;
background-color: rgba(113, 140, 00, 0.9); /* Tomorrow: Green 90% */
-webkit-transition: opacity 0.8s linear;
-webkit-font-smoothing: subpixel-antialiased;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Topic bar hover additions contributed with permission from the project:
* https://github.com/hbang/Simplified-Light-Modifications
*/
#topic_bar:hover {
overflow: visible;
white-space: normal;
}
/* @end */
/* @group Images */
.inlineImageCell {
overflow: auto;
display: block;
margin-top: 5px;
margin-bottom: 2px;
}
.inlineImageCell .image {
display: inline-block;
float: left;
margin-right: 15px;
margin-left: 10px;
min-width: 40px;
max-width: 90%;
}
.inlineImageCell .closeButton {
cursor: pointer;
border-radius: 5px;
border: 2px solid #a1a1a1;
color: #a1a1a1;
display: inline-block;
line-height: 14px;
font-size: 15px;
font-family: "Helvetica Neue" !important;
text-indent: 7px;
width: 16px;
height: 16px;
float: left;
padding-right: 7px;
padding-left: 0px;
}
html[systemversion^="10.9"] .inlineImageCell .closeButton,
html[systemversion^="10.8"] .inlineImageCell .closeButton {
line-height: 13px;
}
/* @end */
/* @group Separating History */
div[id=mark] {
clear: both;
position: relative;
z-index: 295;
margin-top: -1px;
border-bottom: 1px dashed;
border-color: #F2777A; /* Tomorrow Night Eighties: Red */
-webkit-transition: 0.2s linear;
}
#historic_messages {
transition: opacity 0.8s ease-in;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
}
#historic_messages.loaded {
opacity: 0.6;
height: auto;
}
/* @end */
/* @group NOTICE / CTCP / WALLOPS */
.line[ltype*=ctcp],
.line[ltype*=notice],
.line[ltype*=wallops] {
color: #FFCC66; /* Tomorrow Night Eighties: Yellow */
z-index: 191;
background-color: rgba(234, 183, 00, 0.2); /* Tomorrow: Yellow 20% */
position: relative;
}
/* @end */
/* @group Selected User */
.line[ltype*=privmsg]:not(.selectedUser),
.line[ltype*=action]:not(.selectedUser) {
transition: background-color 0.5s;
}
.line.selectedUser[highlight=false] {
transition: background-color 0.5s;
z-index: 190;
position: relative;
background-color: rgba(245, 135, 31, 0.2) !important; /* Tomorrow: Orange 20% */
}
/* @end */
/* @group PRIVMSG */
.line[ltype*=privmsg][highlight=true],
.line[ltype*=action][highlight=true] {
z-index: 191;
position: relative;
font-weight: normal;
background-color: rgba(200, 40, 41, 0.2) !important; /* Tomorrow: Red 20% */
}
div[ltype*=privmsg] .sender {
white-space: pre-wrap;
}
/* @end */
/* @group ACTION */
div[ltype*=action] .sender:before {
content: "•";
}
body[dir=ltr] div[ltype*=action] .sender:before {
margin-right: 0.4em;
}
body[dir=rtl] div[ltype*=action] .sender:before {
margin-left: 0.4em;
}
div[ltype*=action] .sender:after {
content: "";
}
/* @end */
/* @group DEBUG / INVITE */
.line[ltype*=invite],
.line[ltype*=debug],
.line[ltype*=dcc-file-transfer],
.line[ltype*=off-the-record-encryption-status] {
color: #4D4D4C; /* Tomorrow: Foreground */
z-index: 190;
background: rgba(55, 59, 65, 0.2); /* Tomorrow Night: Selection 20% */
position: relative;
}
/* off-the-record-encryption-status Message Event */
.line[ltype*=off-the-record-encryption-status] .message {
color: #F2777A;
font-weight: 700;
}
/* @end */
/* @group Message of the Day (MOTD)
*
* 720, 721, 722 are used by ShadowIRCd for Oper MOTD.
* 372, 375, 376 are normal MOTD shared by several IRCds.
*/
.line[command="372"],
.line[command="721"] {
padding-top: 3px;
padding-bottom: 3px;
}
.line[command="375"],
.line[command="720"] { /* Start. */
padding-top: 2px;
padding-bottom: 3px;
}
.line[command="376"],
.line[command="722"] { /* End. */
padding-top: 3px;
padding-bottom: 3px;
}
.line[command="372"] .message,
.line[command="375"] .message,
.line[command="376"] .message
.line[command="720"] .message,
.line[command="721"] .message,
.line[command="722"] .message {
font-family: "EspressoMono-Regular", "Menlo" !important;
}
/* @end */
/* @group General Events */
.line[ltype*=join],
.line[ltype*=part],
.line[ltype*=quit],
.line[ltype*=nick],
.line[ltype*=mode],
.line[ltype*=topic],
.line[ltype*=website] {
color: #424242; /* Tomorrow Night Bright: Selection */
}
/* Slightly more interesting events */
.line[ltype*=kick],
.line[ltype*=kill],
.line[ltype*=mode][command=mode] {
color: #515151; /* Tomorrow Night Eighties: Selection */
}
/* @group Event Indicators */
div[ltype*=join] .message:before {
content: "→";
color: #99CC99; /* Tomorrow Night Eighties: Green */
}
div[ltype*=kick] .message:before,
div[ltype*=part] .message:before,
div[ltype*=quit] .message:before {
content: "←";
color: #F2777A; /* Tomorrow Night Eighties: Red */
}
div[ltype*=nick] .message:before {
content:"◦";
color: #66CCCC; /* Tomorrow Night Eighties: Aqua */
}
/* @end */
/* @end */
/* @group Own Messages */
.sender[mtype*=myself] {
color: #6699CC; /* Tomorrow Night Eighties: Blue */
}
div[mtype*=myself] {
background-color: rgba(66, 113, 174, 0.2); /* Tomorrow: Blue 20% */
}
/* @end */
/* @group Nickname Colors */
.sender[mtype*=normal][colornumber='0'],
.inline_nickname[colornumber='0'] {
color: #C82829; /* Tomorrow: Red */
}
.sender[mtype*=normal][colornumber='1'],
.inline_nickname[colornumber='1'] {
color: #F5871F; /* Tomorrow: Orange */
}
.sender[mtype*=normal][colornumber='2'],
.inline_nickname[colornumber='2'] {
color: #EAB700; /* Tomorrow: Yellow */
}
.sender[mtype*=normal][colornumber='3'],
.inline_nickname[colornumber='3'] {
color: #718C00; /* Tomorrow: Green */
}
.sender[mtype*=normal][colornumber='4'],
.inline_nickname[colornumber='4'] {
color: #3E999F; /* Tomorrow: Aqua */
}
.sender[mtype*=normal][colornumber='5'],
.inline_nickname[colornumber='5'] {
color: #8959A8; /* Tomorrow: Purple */
}
.sender[mtype*=normal][colornumber='6'],
.inline_nickname[colornumber='6'] {
color: #F2777A; /* Tomorrow Night Eighties: Red */
}
.sender[mtype*=normal][colornumber='7'],
.inline_nickname[colornumber='7'] {
color: #F99157; /* Tomorrow Night Eighties: Orange */
}
.sender[mtype*=normal][colornumber='8'],
.inline_nickname[colornumber='8'] {
color: #FFCC66; /* Tomorrow Night Eighties: Yellow */
}
.sender[mtype*=normal][colornumber='9'],
.inline_nickname[colornumber='9'] {
color: #99CC99; /* Tomorrow Night Eighties: Green */
}
.sender[mtype*=normal][colornumber='10'],
.inline_nickname[colornumber='10'] {
color: #66CCCC; /* Tomorrow Night Eighties: Aqua */
}
.sender[mtype*=normal][colornumber='11'],
.inline_nickname[colornumber='11'] {
color: #CC99CC; /* Tomorrow Night Eighties: Purple */
}
.sender[mtype*=normal][colornumber='12'],
.inline_nickname[colornumber='12'] {
color: #D54E53; /* Tomorrow Night Bright: Red */
}
.sender[mtype*=normal][colornumber='13'],
.inline_nickname[colornumber='13'] {
color: #E78C45; /* Tomorrow Night Bright: Orange */
}
.sender[mtype*=normal][colornumber='14'],
.inline_nickname[colornumber='14'] {
color: #E7C547; /* Tomorrow Night Bright: Yellow */
}
.sender[mtype*=normal][colornumber='15'],
.inline_nickname[colornumber='15'] {
color: #B9CA4A; /* Tomorrow Night Bright: Green */
}
.sender[mtype*=normal][colornumber='16'],
.inline_nickname[colornumber='16'] {
color: #70C0B1; /* Tomorrow Night Bright: Aqua */
}
.sender[mtype*=normal][colornumber='17'],
.inline_nickname[colornumber='17'] {
color: #C397D8; /* Tomorrow Night Bright: Purple */
}
.sender[mtype*=normal][colornumber='18'],
.inline_nickname[colornumber='18'] {
color: #AC4142; /* base16: Red */
}
.sender[mtype*=normal][colornumber='19'],
.inline_nickname[colornumber='19'] {
color: #D28445; /* base16: Orange */
}
.sender[mtype*=normal][colornumber='20'],
.inline_nickname[colornumber='20'] {
color: #F4Bf75; /* base16: Yellow */
}
.sender[mtype*=normal][colornumber='21'],
.inline_nickname[colornumber='21'] {
color: #90A959; /* base16: Green */
}
.sender[mtype*=normal][colornumber='22'],
.inline_nickname[colornumber='22'] {
color: #75B5AA; /* base16: Aqua */
}
.sender[mtype*=normal][colornumber='23'],
.inline_nickname[colornumber='23'] {
color: #AA750F; /* base16: Purple */
}
.sender[mtype*=normal][colornumber='24'],
.inline_nickname[colornumber='24'] {
color: #CC6666; /* Tomorrow Night: Red */
}
.sender[mtype*=normal][colornumber='25'],
.inline_nickname[colornumber='25'] {
color: #DE935F; /* Tomorrow Night: Orange */
}
.sender[mtype*=normal][colornumber='26'],
.inline_nickname[colornumber='26'] {
color: #F0C674; /* Tomorrow Night: Yellow */
}
.sender[mtype*=normal][colornumber='27'],
.inline_nickname[colornumber='27'] {
color: #B5BD68; /* Tomorrow Night: Green */
}
.sender[mtype*=normal][colornumber='28'],
.inline_nickname[colornumber='28'] {
color: #8ABEB7; /* Tomorrow Night: Aqua */
}
.sender[mtype*=normal][colornumber='29'],
.inline_nickname[colornumber='29'] {
color: #B294BB; /* Tomorrow Night: Purple */
}
.sender[mtype*=normal][colornumber='30'],
.inline_nickname[colornumber='30'] {
color: #BBDAFF; /* Tomorrow Night Blue: Blue */
}
/* @end */
/* @group mIRC Color Codes */
/* @group Foreground Colors */
.effect[color-number='0'] {
color: #EAEAEA !important; /* Tomorrow Night Bright: Foreground */
}
.effect[color-number='1'] {
color: #515151 !important; /* Tomorrow Night Eighties: Selection */
}
.effect[color-number='2'] {
color: #6699CC !important; /* Tomorrow Night Eighties: Blue */
}
.effect[color-number='3'] {
color: #99CC99 !important; /* Tomorrow Night Eighties: Green */
}
.effect[color-number='4'] {
color: #F2777A !important; /* Tomorrow Night Eighties: Red */
}
.effect[color-number='5'] {
color: #FF9DA4 !important; /* Tomorrow Night Blue: Red */
}
.effect[color-number='6'] {
color: #CC99CC !important; /* Tomorrow Night Eighties: Purple */
}
.effect[color-number='7'] {
color: #F99157 !important; /* Tomorrow Night Eighties: Orange */
}
.effect[color-number='8'] {
color: #FFCC66 !important; /* Tomorrow Night Eighties: Yellow */
}
.effect[color-number='9'] {
color: #B9CA4A !important; /* Tomorrow Night Bright: Green */
}
.effect[color-number='10'] {
color: #66CCCC !important; /* Tomorrow Night Eighties: Aqua */
}
.effect[color-number='11'] {
color: #99FFFF !important; /* Tomorrow Night Blue: Aqua */
}
.effect[color-number='12'] {
color: #7AA6DA !important; /* Tomorrow Night Bright: Blue */
}
.effect[color-number='13'] {
color: #C397D8 !important; /* Tomorrow Night Bright: Purple */
}
.effect[color-number='14'] {
color: #999999 !important; /* Tomorrow Night Eighties: Comment */
}
.effect[color-number='15'] {
color: #CCCCCC !important; /* Tomorrow Night Eighties: Foreground */
}
/* @end */
/* @group Background Colors */
.effect[bgcolor-number='0'] {
background-color: #EAEAEA !important; /* Tomorrow Night Bright: Foreground */
}
.effect[bgcolor-number='1'] {
background-color: #515151 !important; /* Tomorrow Night Eighties: Selection */
}
.effect[bgcolor-number='2'] {
background-color: #6699CC !important; /* Tomorrow Night Eighties: Blue */
}
.effect[bgcolor-number='3'] {
background-color: #99CC99 !important; /* Tomorrow Night Eighties: Green */
}
.effect[bgcolor-number='4'] {
background-color: #F2777A !important; /* Tomorrow Night Eighties: Red */
}
.effect[bgcolor-number='5'] {
background-color: #FF9DA4 !important; /* Tomorrow Night Blue: Red */
}
.effect[bgcolor-number='6'] {
background-color: #CC99CC !important; /* Tomorrow Night Eighties: Purple */
}
.effect[bgcolor-number='7'] {
background-color: #F99157 !important; /* Tomorrow Night Eighties: Orange */
}
.effect[bgcolor-number='8'] {
background-color: #FFCC66 !important; /* Tomorrow Night Eighties: Yellow */
}
.effect[bgcolor-number='9'] {
background-color: #B9CA4A !important; /* Tomorrow Night Bright: Green */
}
.effect[bgcolor-number='10'] {
background-color: #66CCCC !important; /* Tomorrow Night Eighties: Aqua */
}
.effect[bgcolor-number='11'] {
background-color: #99FFFF !important; /* Tomorrow Night Blue: Aqua */
}
.effect[bgcolor-number='12'] {
background-color: #7AA6DA !important; /* Tomorrow Night Bright: Blue */
}
.effect[bgcolor-number='13'] {
background-color: #C397D8 !important; /* Tomorrow Night Bright: Purple */
}
.effect[bgcolor-number='14'] {
background-color: #999999 !important; /* Tomorrow Night Eighties: Comment */
}
.effect[bgcolor-number='15'] {
background-color: #CCCCCC !important; /* Tomorrow Night Eighties: Foreground */
}
/* @end */
/* @end */
/* @group Hidden scrollback history bar */
#scrolling_history {
z-index: 400;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: auto;
box-shadow: 0 1px 5px #777;
border-top: 1px solid #404040;
text-shadow: 1px 1px rgba(10, 10, 10, 0.7);
background: rgba(31, 51, 81, 0.95);
display: none;
overflow: hidden;
}
#scrolling_history .senderContainer {
background: rgba(31, 51, 81, .95);
}
/* @end */
/*
vim: set foldmethod=marker:
vim: set foldmarker=@group,@end:
vim: set nofoldenable:
*/
Reference in New Issue View Git Blame Copy Permalink