1 files changed, 746 insertions, 0 deletions

diff --git a/theme.css b/theme.css
new file mode 100644
index 0000000..1265c9d
--- /dev/null
+++ b/theme.css
@@ -0,0 +1,746 @@
+:root {
+    --gray0: hsl(270, 0%, 7%);
+    --gray1: hsl(270, 0%, 10%);
+    --gray2: hsl(270, 1%, 16%);
+    --gray3: hsl(270, 1%, 24%);
+    --gray4: hsl(270, 1%, 35%);
+    --gray5: hsl(270, 2%, 54%);
+    --gray6: hsl(270, 2%, 73%);
+    --gray7: hsl(270, 2%, 100%);
+
+    /* * */
+
+    --bg-hi:  var(--gray0);
+    --bg:     var(--gray1);
+
+    --obj-hi: var(--gray2);
+    --obj:    var(--gray3);
+    --obj-lo: var(--gray4);
+
+    --fg-hi:  var(--gray5);
+    --fg:     var(--gray6);
+    --fg-lo:  var(--gray7);
+
+    /* * */
+
+    --color--red:        hsl(0, 91%, 73%);
+    --color--dark-red:   hsl(0, 79%, 64%);
+    --color--brown:      hsl(14, 58%, 59%);
+    --color--orange:     hsl(19, 100%, 76%);
+    --color--blue:       hsl(214, 100%, 76%);
+    --color--dark-blue:  hsl(214, 100%, 57%);
+    --color--yellow:     hsl(38, 100%, 76%);
+    --color--green:      hsl(123, 43%, 66%);
+    --color--dark-green: hsl(123, 43%, 56%);
+    --color--cyan:       hsl(180, 43%, 66%);
+    --color--dark-cyan:  hsl(180, 43%, 54%);
+    --color--purple:     hsl(267, 69%, 73%);
+    --color--pink:       hsl(294, 69%, 73%);
+    --color--gray:       hsl(0, 0%, 58%);
+    --color--light-gray: hsl(204, 5%, 82%);
+
+    /* * */
+
+    --color--sidebar--bg:    var(--bg-hi);
+    --color--sidebar--fg:    var(--fg);
+    --color--sidebar--fg-hi: var(--fg-hi);
+
+    --color--window--bg: var(--bg);
+
+    --color--input--bg:    var(--obj);
+    --color--input--fg:    var(--fg-lo);
+    --color--input--ph-fg: var(--fg-hi);
+
+    --color--sidebar-input--bg:    var(--obj-hi);
+    --color--sidebar-input--fg:    var(--fg-lo);
+    --color--sidebar-input--ph-fg: var(--fg-hi);
+
+    --color--sidebar-btn--bg:        var(--obj-hi);
+    --color--sidebar-btn--fg:        var(--fg);
+    --color--sidebar-btn--active-fg: var(--fg-lo);
+
+    --color--header--bg:    var(--obj-hi);
+    --color--header--fg:    var(--fg);
+
+    --color--date-marker--fg:     var(--fg-hi);
+    --color--date-marker--border: var(--obj);
+
+    --color--msg--bg:        var(--obj-hi);
+    --color--msg--border:    var(--obj);
+    --color--msg--fg:        var(--fg);
+    --color--msg--meta-fg:   var(--fg-hi);
+    --color--msg--self-bg:   var(--obj);
+    --color--msg--self-fg:   var(--fg-lo);
+    --color--msg--action-fg: var(--fg-hi);
+
+    --color--cform--bg:      var(--obj-hi);
+    --color--cform--fg:      var(--fg);
+    --color--cform--nick-bg: var(--obj-lo);
+    --color--cform--nick-fg: var(--fg-lo);
+
+    --color--scrollbar--bg: transparent;
+    --color--scrollbar--fg: var(--obj);
+
+    --color--tooltip--bg: var(--obj);
+    --color--tooltip--fg: var(--fg-lo);
+
+    --color--popup--bg:            var(--obj-hi);
+    --color--popup--fg:            var(--fg);
+    --color--popup--title-fg:      var(--fg-lo);
+    --color--popup--meta-fg:       var(--fg-hi);
+    --color--popup--border:        var(--obj);
+    --color--popup--item-hover-bg: var(--obj);
+    --color--popup--item-hover-fg: var(--fg-lo);
+    --color--popup--msg-bg:        var(--obj);
+    --color--popup--msg-fg:        var(--fg-lo);
+
+    /* * */
+
+    --dim--spacing: 1rem;
+
+    --dim--container--pad:    .75rem;
+    --dim--container-lg--pad: 1.5rem;
+
+    --dim--input--height: 2.2rem;
+    --dim--input--pad-h:  .7rem;
+
+    --dim--btn--pad-v: .6rem;
+    --dim--btn--pad-h: .7rem;
+
+    --dim--msg--pad-v: .5rem;
+    --dim--msg--pad-h: .7rem;
+
+    --dim--popup--pad:        .3rem;
+    --dim--popup--item-pad-v: .4rem;
+    --dim--popup--item-pad-h: .7rem;
+
+    /* * */
+
+    --body-bg-color:          var(--color--sidebar--bg);
+    --window-bg-color:        var(--color--window--bg);
+    --body-color:             var(--color--sidebar--fg);
+    --body-color-muted:       var(--color--sidebar--fg-hi);
+    --link-color:             var(--color--yellow);
+    --unread-marker-color:    var(--color--yellow);
+    --date-marker-color:      var(--color--date-marker--fg);
+    --highlight-bg-color:     var(--bg-lo);
+    --highlight-border-color: var(--color--yellow);
+    --overlay-bg-color:       rgba(0, 0, 0, .75);
+    --button-color:           var(--color--yellow);
+}
+
+body {
+    scrollbar-color: var(--color--scrollbar--fg) var(--color--scrollbar--bg);
+}
+
+/* NICK COLORS */
+
+#chat.colored-nicks .user.color-1,
+#chat.colored-nicks .user.color-17 {
+    color: var(--color--red);
+}
+
+#chat.colored-nicks .user.color-2,
+#chat.colored-nicks .user.color-18 {
+    color: var(--color--purple);
+}
+
+#chat.colored-nicks .user.color-3,
+#chat.colored-nicks .user.color-19 {
+    color: var(--color--orange);
+}
+
+#chat.colored-nicks .user.color-4,
+#chat.colored-nicks .user.color-20 {
+    color: var(--color--green);
+}
+
+#chat.colored-nicks .user.color-5,
+#chat.colored-nicks .user.color-21 {
+    color: var(--color--cyan);
+}
+
+#chat.colored-nicks .user.color-6,
+#chat.colored-nicks .user.color-22 {
+    color: var(--color--blue);
+}
+
+#chat.colored-nicks .user.color-7,
+#chat.colored-nicks .user.color-23 {
+    color: var(--color--pink);
+}
+
+#chat.colored-nicks .user.color-8,
+#chat.colored-nicks .user.color-24 {
+    color: var(--color--yellow);
+}
+
+#chat.colored-nicks .user.color-9,
+#chat.colored-nicks .user.color-25 {
+    color: var(--color--red);
+}
+
+#chat.colored-nicks .user.color-10,
+#chat.colored-nicks .user.color-26 {
+    color: var(--color--purple);
+}
+
+#chat.colored-nicks .user.color-11,
+#chat.colored-nicks .user.color-27 {
+    color: var(--color--orange);
+}
+
+#chat.colored-nicks .user.color-12,
+#chat.colored-nicks .user.color-28 {
+    color: var(--color--green);
+}
+
+#chat.colored-nicks .user.color-13,
+#chat.colored-nicks .user.color-29 {
+    color: var(--color--cyan);
+}
+
+#chat.colored-nicks .user.color-14,
+#chat.colored-nicks .user.color-30 {
+    color: var(--color--blue);
+}
+
+#chat.colored-nicks .user.color-15,
+#chat.colored-nicks .user.color-31 {
+    color: var(--color--pink);
+}
+
+#chat.colored-nicks .user.color-16,
+#chat.colored-nicks .user.color-32 {
+    color: var(--color--yellow);
+}
+
+/* LAYOUT */
+
+#viewport {
+    padding: 0;
+}
+
+.window {
+    border-radius: 0;
+    box-shadow:    none;
+}
+
+/* SIDEBAR */
+
+#sidebar {
+    padding: var(--dim--container--pad) 0 0;
+    color:   var(--color--sidebar--fg);
+}
+
+.jump-to-input {
+    margin: var(--dim--container--pad);
+}
+
+#footer button {
+    border-radius: 0;
+    color:         var(--color--sidebar-btn--fg);
+}
+
+.channel-list-item,
+.channel-list-item[data-type="lobby"],
+.jump-to-results .channel-list-item[data-type="lobby"] {
+    padding: var(--dim--btn--pad-v) var(--dim--container--pad);
+}
+
+#footer button.active,
+.channel-list-item.active,
+#footer button:hover,
+.channel-list-item:hover {
+    background-color: var(--color--sidebar-btn--bg);
+    color:            var(--color--sidebar-btn--active-fg);
+}
+
+#footer button.active {
+    box-shadow: 0 -2px #fff inset;
+}
+
+.channel-list-item.active {
+    box-shadow: -2px 0 #fff inset;
+}
+
+#sidebar .network .collapse-network {
+    width:        14px;
+    margin-right: 12px;
+    padding-left: 0;
+}
+
+/* INPUT */
+
+::placeholder {
+    color: var(--color--input--ph-fg);
+}
+
+.input,
+#chat .userlist .search {
+    height:      var(--dim--input--height);
+    padding:     0 var(--dim--input--pad-h);
+    line-height: var(--dim--input--height);
+}
+
+.input {
+    margin:           0;
+    border:           2px solid transparent;
+    border-radius:    3px;
+    background-color: var(--color--input--bg);
+    color:            var(--color--input--fg);
+}
+
+.btn:active,
+.btn:focus,
+.input:focus {
+    box-shadow: none;
+}
+
+.jump-to-input::before,
+#chat .count::before {
+    right:       var(--dim--input--pad-h);
+    color:       var(--color--sidebar-input--ph-fg);
+    line-height: var(--dim--input--height) !important;
+}
+
+.jump-to-input .input {
+    border:           2px solid transparent;
+    border-radius:    3px;
+    background-color: var(--color--sidebar-input--bg);
+    color:            var(--color--sidebar-input--fg);
+}
+
+.jump-to-input .input::placeholder {
+    color: var(--color--sidebar-input--ph-fg);
+}
+
+.input:not(:disabled):focus,
+.input:not(:disabled):hover {
+    border-color: var(--button-color);
+}
+
+#chat .userlist .count {
+    height:           var(--dim--input--height);
+    background-color: var(--color--sidebar-input--bg);
+}
+
+textarea.input {
+    min-height: var(--dim--input--height);
+}
+
+/* HEADER */
+
+#chat .header {
+    position:         relative;
+    z-index:          5;
+    border-bottom:    0;
+    background-color: var(--color--header--bg);
+    box-shadow:       0 0 2rem rgba(0, 0, 0, .25);
+}
+
+#chat button.mentions,
+#chat button.menu,
+#viewport .lt,
+#viewport .rt {
+    color: var(--color--header--fg);
+}
+
+#chat .date-marker::before {
+    border-color: var(--color--date-marker--border);
+}
+
+#chat .date-marker,
+#chat .unread-marker {
+    margin: var(--dim--spacing) 0;
+}
+
+/* USERLIST */
+
+#chat .userlist {
+    padding:          var(--dim--container--pad);
+    border-left:      0;
+    background-color: var(--color--sidebar--bg);
+    line-height:      inherit;
+}
+
+#chat .user-mode {
+    margin-top:    var(--dim--spacing);
+    margin-bottom: 0;
+}
+
+#chat .userlist .names {
+    padding-bottom: 0;
+}
+
+#chat .user-mode::before,
+#chat .names .user {
+    padding: calc(var(--dim--btn--pad-v) * .5) var(--dim--btn--pad-h);
+}
+
+#chat .user-mode::before {
+    background-color: transparent;
+}
+
+#chat .names .user {
+    line-height: inherit;
+}
+
+#chat .userlist .user.active {
+    background-color: var(--color--sidebar-btn--bg);
+    color:            var(--color--sidebar-btn--active-fg);
+}
+
+/* MESSAGE */
+
+#chat .messages {
+    display:        flex;
+    flex-direction: column;
+    align-items:    stretch;
+    padding:        var(--dim--container-lg--pad);
+}
+
+#chat .msg {
+    display:               grid;
+    align-self:            flex-start;
+    grid-template-columns: auto auto 1fr;
+    grid-template-rows:    auto;
+    grid-template-areas:   "time user content";
+    margin-top:            calc(var(--dim--spacing) * .5);
+}
+
+#chat .content,
+#chat .from,
+#chat .time {
+    align-self: baseline;
+    padding:    0;
+    font-size:  13px;
+}
+
+#chat .from,
+#chat .time {
+    width:        auto;
+    margin-right: var(--dim--spacing);
+    color:        var(--color--msg--meta-fg);
+}
+
+#chat .content {
+    grid-area:   content;
+    overflow:    visible;
+    border-left: 0;
+    color:       var(--color--msg--action-fg);
+}
+
+#chat .from {
+    grid-area:  user;
+    text-align: left;
+    mask-image: none;
+}
+
+#chat .time {
+    grid-area:    time;
+    justify-self: flex-start;
+}
+
+#chat .from:empty,
+#chat .time:empty {
+    display: none;
+}
+
+#chat .msg[data-type="message"] {
+    min-width:             12rem;
+    max-width:             80%;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:   "user time" "content content";
+}
+
+#chat .msg[data-type="message"] .time {
+    margin-right: 0;
+}
+
+#chat .msg[data-type="message"] .content {
+    margin-top:       calc(var(--dim--spacing) * .5);
+    padding:          var(--dim--msg--pad-v) var(--dim--msg--pad-h);
+    background-color: var(--color--msg--bg);
+    color:            var(--color--msg--fg);
+    font-size:        15px;
+}
+
+#chat .msg[data-type="message"],
+#chat .msg[data-type="message"] + .msg {
+    margin-top: calc(var(--dim--spacing) * 1.5);
+}
+
+#chat .self[data-type="message"] {
+    margin-left: auto;
+}
+
+#chat .self[data-type="message"] .content {
+    background-color: var(--color--msg--self-bg);
+    color:            var(--color--msg--self-fg);
+}
+
+#chat .msg[data-type="condensed"] {
+    display:        flex;
+    flex-direction: column;
+    width:          100%;
+}
+
+#chat .msg[data-type="away"] .content,
+#chat .msg[data-type="back"] .content,
+#chat .msg[data-type="condensed"] .content,
+#chat .msg[data-type="join"] .content,
+#chat .msg[data-type="kick"] .content,
+#chat .msg[data-type="mode"] .content,
+#chat .msg[data-type="nick"] .content,
+#chat .msg[data-type="part"] .content,
+#chat .msg[data-type="quit"] .content,
+#chat .msg[data-type="topic"] .content,
+#chat .msg[data-type="topic_set_by"] .content,
+#chat .count::before,
+#chat .msg-shown-in-active span::before,
+#chat .msg-statusmsg span::before,
+#chat .msg[data-command="help"] .from::before,
+#chat .msg[data-command="info"] .from::before,
+#chat .msg[data-command="motd"] .from::before,
+#chat .msg[data-type="action"] .from::before,
+#chat .msg[data-type="away"] .from::before,
+#chat .msg[data-type="back"] .from::before,
+#chat .msg[data-type="ctcp"] .from::before,
+#chat .msg[data-type="ctcp_request"] .from::before,
+#chat .msg[data-type="invite"] .from::before,
+#chat .msg[data-type="join"] .from::before,
+#chat .msg[data-type="kick"] .from::before,
+#chat .msg[data-type="mode"] .from::before,
+#chat .msg[data-type="mode_channel"] .from::before,
+#chat .msg[data-type="nick"] .from::before,
+#chat .msg[data-type="part"] .from::before,
+#chat .msg[data-type="plugin"] .from::before,
+#chat .msg[data-type="quit"] .from::before,
+#chat .msg[data-type="raw"] .from::before,
+#chat .msg[data-type="topic"] .from::before,
+#chat .msg[data-type="whois"] .from::before {
+    color: var(--color--msg--action-fg);
+}
+
+#chat .msg + .previous-source[data-type="message"] {
+    margin-top: calc(var(--dim--spacing) * .25);
+}
+
+#chat .msg + .previous-source[data-type="message"] .from,
+#chat .msg + .previous-source[data-type="message"] .time {
+    display: none;
+}
+
+#chat .msg + .previous-source[data-type="message"] .content {
+    margin-top: 0;
+}
+
+#chat .chat-view[data-type="channel"] .msg.highlight {
+    border-left:      0;
+    background-color: transparent;
+}
+
+#chat .chat-view[data-type="channel"] .msg.highlight .content {
+    background-color: var(--color--msg--self-bg);
+    box-shadow:       -2px 0 var(--highlight-border-color);
+    color:            var(--color--msg--self-fg);
+}
+
+#chat .preview {
+    margin:     var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1) calc(var(--dim--msg--pad-v) * -1);
+    border-top: 1px solid var(--color--msg--border);
+}
+
+#chat .preview::after {
+    content:   "";
+    display:   block;
+    width:     1px;
+    min-width: 0;
+}
+
+#chat .toggle-content {
+    flex:             0 0 auto;
+    margin:           0;
+    padding:          var(--dim--msg--pad-h);
+    border-radius:    0;
+    background-color: transparent;
+    box-shadow:       none;
+}
+
+#chat .toggle-content .toggle-text,
+#chat .toggle-type-error {
+    padding: 0 0 0 var(--dim--msg--pad-h);
+}
+
+#chat .toggle-text .body,
+#chat .toggle-type-error {
+    color: var(--color--msg--fg);
+}
+
+@media (max-width: 768px) {
+    #chat .msg[data-type="message"] {
+        max-width: none;
+    }
+}
+
+@media (max-width: 479px) {
+    #chat .messages {
+        padding: var(--dim--container--pad);
+    }
+
+    #chat .msg {
+        padding: 0;
+    }
+}
+
+/* SCROLL DOWN BUTTON */
+
+.scroll-down {
+    right:  var(--dim--container-lg--pad);
+    bottom: 0;
+}
+
+@media (max-width: 479px) {
+    .scroll-down {
+        right: var(--dim--container--pad);
+    }
+}
+
+/* CHAT INPUT */
+
+#form {
+    margin:           var(--dim--container-lg--pad);
+    border-top:       0;
+    background-color: var(--color--cform--bg);
+    box-shadow:       0 .5rem 2rem rgba(0, 0, 0, .25);
+    color:            var(--color--cform--fg);
+}
+
+#form #nick {
+    background-color: var(--color--cform--nick-bg);
+    color:            var(--color--cform--nick-fg);
+}
+
+#form #submit,
+#form #upload {
+    color: var(--color--cform--fg);
+}
+
+@media (max-width: 768px) {
+    .public #form #nick {
+        display: none;
+    }
+}
+
+@media (max-width: 479px) {
+    #form {
+        margin: var(--dim--container--pad);
+    }
+}
+
+/* POPUP */
+
+#context-menu,
+.mentions-popup,
+.textcomplete-menu {
+    z-index:          2000;
+    padding:          var(--dim--popup--pad);
+    border:           0;
+    border-radius:    0;
+    background-color: var(--color--popup--bg);
+    box-shadow:       0 .3rem 1.5rem rgba(0, 0, 0, .4);
+    color:            var(--color--popup--fg);
+}
+
+.context-menu-item,
+.textcomplete-item {
+    margin-top:    0;
+    margin-bottom: 0;
+    padding:       var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h);
+    border-radius: 0;
+    color:         var(--color--popup--fg);
+}
+
+.context-menu-item.active,
+.textcomplete-item:focus,
+.textcomplete-item:hover,
+.textcomplete-menu .active {
+    background-color: var(--color--popup--item-hover-bg);
+    color:            var(--color--popup--item-hover-fg);
+}
+
+.context-menu-divider {
+    background-color: var(--color--popup--border);
+}
+
+/* MENTIONS POPUP */
+
+.mentions-popup {
+    padding: 0;
+}
+
+.mentions-popup > .mentions-popup-title {
+    align-items:   center;
+    margin-bottom: 0;
+    padding:       var(--dim--container--pad);
+    color:         var(--color--popup--title-fg);
+    font-size:     1em;
+    font-weight:   bold;
+}
+
+.mentions-popup .hide-all-mentions {
+    font-size: 11px;
+}
+
+.mentions-popup .from {
+    color:     var(--color--popup--title-fg);
+    font-size: 13px;
+}
+
+.mentions-popup .time {
+    color:     var(--color--popup--meta-fg);
+    font-size: 13px;
+}
+
+.mentions-popup .msg {
+    margin-bottom: 0;
+    padding:       var(--dim--container--pad);
+    border-top:    1px solid var(--color--popup--border);
+}
+
+.mentions-popup .msg .content {
+    margin-top:       calc(var(--dim--spacing) * .5);
+    padding:          var(--dim--msg--pad-v) var(--dim--msg--pad-h);
+    border-radius:    0;
+    background-color: var(--color--popup--msg-bg);
+    color:            var(--color--popup--msg-fg);
+}
+
+/* TOOLTIP */
+
+.tooltipped::after {
+    border-radius:    0;
+    background-color: var(--color--tooltip--bg);
+    color:            var(--color--tooltip--fg);
+}
+
+.tooltipped-s::before,
+.tooltipped-se::before,
+.tooltipped-sw::before {
+    border-bottom-color: var(--color--tooltip--bg);
+}
+
+.tooltipped-e::before {
+    border-right-color: var(--color--tooltip--bg);
+}
+
+.tooltipped-w::before {
+    border-left-color: var(--color--tooltip--bg);
+}
+
+.tooltipped-n::before,
+.tooltipped-ne::before,
+.tooltipped-nw::before {
+    border-top-color: var(--color--tooltip--bg);
+}