From 1c403a471421f9308ad4205e666049c08c09f9c8 Mon Sep 17 00:00:00 2001
From: nekobit <nekobit@noemail.net>
Date: Fri, 20 May 2022 03:36:07 +0000
Subject: [PATCH] Solarized themes

FossilOrigin-Name: 6036518304f8c165f341203998d7653219fb19acd1b7b05a4554ed01d3fbab9f
---
 dist/solarized-dark.css | 1266 ++++++++++++++++++++++++++++++++++++++
 dist/solarized.css      | 1267 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 2533 insertions(+)
 create mode 100644 dist/solarized-dark.css
 create mode 100644 dist/solarized.css

diff --git a/dist/solarized-dark.css b/dist/solarized-dark.css
new file mode 100644
index 0000000..83e6560
--- /dev/null
+++ b/dist/solarized-dark.css
@@ -0,0 +1,1266 @@
+/* Thanks to Grumbulon for the dark theme basis */
+
+*
+{
+    margin: 0;
+    padding: 0;
+    color: #FBF5D9;
+}
+
+
+html, body
+{
+    margin: 0;
+    padding: 0;
+    margin-top: 0px;
+}
+
+html
+{
+    height: 100%;
+}
+
+body
+{
+    background-attachment: fixed !important;
+    background-size: cover !important;
+    background-color: unset;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #00232B;
+    min-height: 100%;
+    line-height: 1.65;
+}
+
+/* Basic elements */
+h1, h2, h3, h4
+{
+    margin: 12px 0px 6px 0px;
+}
+
+ul
+{
+    margin: 12px;
+
+}
+
+select
+{
+    background-color: #00232B;
+}
+
+#main-page-container
+{
+    padding: 8px;
+}
+
+#main-page
+{
+    margin: 0 auto 8px;
+    width: 1000px;
+    background-color: #202020;
+    border-top: 0 !important;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+    border-width: 0;
+    border-radius: 3px;
+}
+
+.hidden
+{
+    display: none;
+}
+
+.pointer
+{
+    cursor: pointer;
+}
+
+a, a:visited, a:hover, a:active
+{
+    color: inherit;
+}
+
+.mention
+{
+    text-decoration: none;
+    background-color: #8E545C;
+    border-radius: 3px;
+    padding-left: 2px;
+    padding-right: 2px;
+    border: 1px solid #CA545C;
+}
+
+.greentext
+{
+    color: #9DCF94;
+}
+
+/* Cleans up most of the tables */
+table.ui-table td
+{
+    padding: 0;
+    margin: 0;
+    border-collapse: collapse !important;
+    vertical-align: top;
+}
+
+#content
+{
+    overflow: hidden;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+#navbar {
+    position: sticky;
+    top: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-top: 1px solid #00232B;
+    border-bottom: 1px solid #00232B;
+    background: #004B5D;
+    width: 1000px;
+    z-index: 999;
+}
+
+#navbar img
+{
+    filter: invert(1);
+    vertical-align: middle;
+    display: inline-block;
+    margin: 4px 0px 6px 18px;
+}
+
+#navbar span.info
+{
+    vertical-align: middle;
+    margin-left: 15px;
+    color: #FBF5D9;
+    /* font-variant: small-caps; */
+    font-size: 28px;
+}
+
+#navbar-right-container
+{
+    width: 795px;
+    display: inline-block;
+    position: relative;
+    top: 9px;
+    align-items: center;
+}
+
+#navbar-right form
+{
+    float: right;
+}
+
+#navbar-right
+{
+    display: inline-block;
+    float: right;
+    padding-right: 8px;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+}
+
+#login-header
+{
+    vertical-align: middle;
+    float: left;
+    position: relative;
+    top: 4px;
+    margin-right: 15px;
+    text-decoration: none;
+    color: #FBF5D9;
+}
+
+.alignend
+{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+#main
+{
+    width: 623px;
+    max-width: 623px !important;
+    min-width: 623px;
+    border-collapse: collapse !important;
+    background-color: #002B36;
+    padding: 0;
+}
+
+#content
+{
+    border-collapse: collapse !important;
+    min-height: 600px;
+}
+
+.sidebar
+{
+    background-color: #002B36;
+}
+
+#leftbar
+{
+    width: 130px;
+    min-height: 600px;
+    max-width: 130px;
+    min-width: 130px;
+    border-right: 1px solid #004B5D;
+}
+
+#leftbar ul
+{
+    margin: 0;
+    padding: 0;
+}
+
+#leftbar ul li
+{
+    list-style-type: none;
+}
+
+
+#rightbar
+{
+    width: 245px;
+    min-height: 600px;
+    max-width: 245px;
+    min-width: 245px;
+    border-left: 1px solid #004B5D;
+}
+
+
+/*************************************************
+ *               COMMON ELEMENTS                 *
+ *************************************************/
+
+table.present
+{
+    border: 1px solid #404040;
+}
+
+table.present th, table.present td
+{
+    padding: 2px 5px;
+}
+
+#env-table
+{
+    margin-top: 5px;
+}
+
+.error
+{
+    display: block;
+    background-color: #fcb0b0;
+    color: #000;
+    border: 1px solid #bb1c1f;
+    padding: 15px;
+    font-weight: bold;
+}
+
+.error-pad
+{
+    margin: 5px;
+    border-radius: 4px;
+}
+
+.e-notice
+{
+    display: block;
+    background-color: #ddeeff;
+    color: #000;
+    border: 1px solid #66ccff;
+    padding: 15px;
+    font-weight: bold;
+}
+
+input[type=textbox]
+{
+    background-color: #00232B;
+    color: #c3e3d3;
+}
+
+/*************************************************
+ *                  BUTTONS                      *
+ *************************************************/
+.sidebarbtn:hover, .sidebarbtn-sub:hover
+{
+    border-top: 1px solid #5FB4BF !important;
+    border-bottom: 1px solid #5FB4BF !important;
+}
+
+.sidebarbtn, .btn
+{ 
+    background: #00232B;
+    color: #F7EDBE;
+    text-decoration: none;
+    border-color: #004B5D;
+}
+
+.sidebarbtn:hover, .btn:hover
+{ 
+    background: #42838c;
+    border-color: #5FB4BF !important;
+    color: #FBF5D9;
+    cursor: pointer;
+}
+
+.sidebarbtn:active, .btn:active
+{ 
+    background: #42838c;
+    border-color: #5FB4BF;
+    color: #FBF5D9;
+    cursor: pointer;
+}
+
+.btn-disabled
+{
+    color: #004B5D !important;
+    background: #00232B !important;
+}
+
+.btn-disabled:hover
+{
+    background: #486c5c;
+}
+
+.btn-disabled:active
+{
+    background: #00232B;
+}
+
+
+input[type=button], input[type=submit]
+{
+    background: #00232B;
+    border: 1px solid #00232B;
+    padding: 3px 15px;
+}
+
+/* Make first button glue to header */
+#leftbar ul:first-child .sidebarbtn
+{
+    border-top: 0;
+}
+
+.sidebarbtn
+{
+    display: block;
+    border-bottom: 1px solid #004B5D;
+    padding: 8px 8px 8px 16px;
+}
+
+.sidebarbtn.focused
+{
+    border-right: 3px solid #ECBA71 !important;
+}
+
+.sidebarbtn-sub
+{
+    display: block;
+    color: #F7EDBE;
+    padding: 8px;
+    padding-left: 32px;
+    text-decoration: none;
+}
+
+.sidebar-config
+{
+    background-color: #002B36;
+    border-left: 3px solid #ECBA71;
+    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebarbtn-sub.focused
+{
+    font-weight: bold;
+}
+
+.sidebarbtn-sub:active, .sidebarbtn-sub:hover
+{
+    background-color: #42838c;
+}
+
+ul li:first-child a.sidebarbtn
+{
+    border-top: 1px solid #00232B;
+}
+
+/****************************
+ *      Notifications       *
+ ***************************/
+.notification
+{
+    border-bottom: 1px solid #004B5D;
+    width: 100%;
+}
+
+.pfp-compact-td
+{
+    width: 16px;
+    padding: 3px !important;
+}
+
+.pfp-compact-td img
+{
+    border-radius: 2px;
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+}
+
+.notification-compact
+{
+    border-bottom: 1px solid #004B5D;
+    min-width: 100%;
+}
+
+.notification-compact .notification-content
+{
+    max-height: 100px;
+    overflow: hidden;
+}
+
+.notification-compact:hover .notification-content
+{
+    max-height: unset;
+    overflow: hidden;
+}
+
+.notification-compact p
+{
+    margin: 0;
+}
+.notification-compact .notification-info
+{
+    font-size: 12px;
+    padding-left: 2px;
+    padding-right: 2px;
+    margin-top: 0;
+    font-weight: bold;
+}
+
+.notification-info svg,
+.notification-info-format svg
+{
+    width: 16px;
+    height: 16px;
+}
+
+.notification-table-bit
+{
+    width: auto;
+}
+
+/* Only move up if SVG is next to it, the SVG moves the text */
+.notification .notification-text-group-with-icon
+{
+    vertical-align: middle;
+}
+
+.notification-info svg.like,
+.notification-info-format svg.like
+{
+    fill: #ECBA71;
+    stroke: #ECBA71;
+}
+
+svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon, svg.one-click-software, svg.expand
+{
+    vertical-align: middle;
+    stroke: #d1cdb7;
+}
+
+svg.in-reply-to-icon
+{
+    position: relative;
+    top: -3px;
+    stroke: #F7EDBE;
+}
+
+.in-reply-to
+{
+    color: #F7EDBE;
+}
+
+.in-reply-to-id
+{
+    text-decoration: none;
+    line-height: 23px;
+    font-size: 14px;
+    color: #F7EDBE;
+}
+
+.notification-compact .notification-content
+{
+    color: #d1cdb7;
+    font-size: 12px;
+    padding: 8px 0;
+}
+
+.notification-compact .notification-stats
+{
+    color: #c1bdc7;
+    font-size: 10px;
+}
+
+.notification-info
+{
+    margin-top: 7px;
+}
+
+.notification-info img,
+.notification-info-format img
+{
+    margin-left: 38px;
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+}
+
+.notification-info .notification-user,
+.notification-info-format .notification-user
+{
+    display: inline;
+    vertical-align: middle;
+    position: relative;
+    top: -8px;
+    left: 2px;
+}
+
+/***************************
+ *      Statuses           *
+ **************************/
+.status,
+.notification-regular
+{
+    padding: 6px 2px 0 6px;
+    border-bottom: 1px solid #004B5D !important;
+    width: 100%;
+    border-spacing: 0px;
+}
+
+.status.focused
+{
+    background-color: #00232B;
+    border-left: 3px solid #ECBA71;
+}
+
+.notification-info + .status,
+.notification-info-format + .status
+{
+    padding-top: 0;
+}
+
+.status .profile-picture
+{
+    display: inline-block;
+    width: 52px;
+    min-width: 52px;
+    height: 52px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.pfp-td
+{
+    width: 56px;
+    border-collapse: collapse !important;
+    padding: 6px !important;
+}
+
+.pfp-td img
+{
+    border-radius: 3px;
+    width: 56px;
+    height: 56px;
+    object-fit: cover;
+}
+
+.status tr
+{
+    width: auto;
+}
+
+
+.status .status-info,
+.notification-info-format,
+.notification-content
+{
+    min-width: 0;
+    width: auto;
+    padding: 0 0 0 10px;
+}
+
+.status .status-info > table.ui-table
+{
+    width: 100%;
+}
+
+.status .status-info table.ui-table, .status .status-info table.ui-table td, .status .status-info table.ui-table tr
+{
+    border-collapse: collapse !important;
+    border-spacing: 0px;
+    padding: 0 8px;
+    margin: 0;
+}
+
+.status .instance-info
+{
+    font-style: italic;
+    text-decoration: none;
+    margin: 0 4px 0 6px;
+    font-size: 14px;
+    padding-top: 1px;
+    color: #d1cdb7;
+}
+
+.status .poster-stats
+{
+    /* To maintain compatibility while keeping it a flexbox, we have to 
+     * hardcode the width, sorry! Tables are just weird and I hate CSS */
+    max-width: 520px;
+}
+
+.status .username,
+.notification-regular .username
+{
+    display: inline-block;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 350px;
+    white-space: nowrap;
+    vertical-align: middle;
+    color: #d1cdb7;
+}
+
+.status .status-content
+{
+    margin: 8px 0;
+    overflow-wrap: break-word;
+    width: 520px;
+    color: #FBF5D9;
+    display: block;
+}
+
+.status .status-content p
+{
+    margin: 2px 0 0 0;
+}
+
+.status-visibility
+{
+    color: #d1cdb7;
+    display: inline;
+    float: right;
+    font-size: 12px;
+    margin: 3px 0 0 3px;
+}
+
+.status-interact
+{
+    margin: 8px 0 0 0;
+}
+
+.status-interact table.ui-table
+{
+    border-collapse: collapse !important;
+    padding: 0;
+}
+
+.status-interact table.ui-table tr
+{
+    border-collapse: collapse !important;
+    padding: 0;
+}
+
+/***************************
+ *    Element Grouping     *
+ **************************/
+.group
+{
+    padding: 0;
+    margin: 0 !important;
+    height: 28px;
+}
+
+/* These are a pain for some reason */
+.group-inputbox
+{
+    border: 1px solid #004B5D;
+    padding-left: 5px;
+    border-right: 0px;
+    height: 26px;
+    background: #00232B;
+}
+
+.group-left
+{
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+.group-right
+{
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+/*************************
+ *     Config            *
+ ************************/
+#config-page
+{
+    padding: 0 12px;
+}
+
+#config-page h1
+{
+    padding-left: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #004B5D;
+}
+
+#config-page h3
+{
+    margin-left: 15px;
+}
+
+#config-page ul
+{
+    list-style-type: none;
+    padding-left: 15px;
+}
+
+/**********************
+ *    Profiles        *
+ **********************/
+.header-btn
+{
+    display: inline-block;
+    padding: 8px 15px;
+    margin: 0;
+    background: inherit;
+    text-decoration: none;
+    color: #606060;
+    font-size: 14px;
+}
+
+.header-btn .btn-content
+{
+    color: #F7EDBE;
+}
+
+.btn.header-btn:hover span
+{
+    color: #fff;
+}
+
+.header-btn span
+{
+    display: block;
+    text-align: center;
+}
+
+.acct-banner
+{
+    width: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 256px;
+}
+
+.account
+{
+    position: relative;
+}
+
+.acct-badge
+{
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    font-size: 12px;
+    padding: 4px 8px;
+    color: #FBF5D9;
+    text-transform: uppercase;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 3px;
+}
+
+.account-note
+{
+    word-break: break-all;
+    text-align: center;
+}
+
+.account-info
+{
+    background: #002B36;
+    color: #FBF5D9;
+    padding: 15px 50px;
+    border-bottom: 1px solid #004B5D;
+    max-height: 200px;
+    overflow: auto;
+}
+
+.acct-pfp
+{
+    position: absolute;
+    display: inline;
+    z-index: 100;
+    border: 3px solid #ECBA71;
+    background-color: #004B5D;
+    border-radius: 8px;
+    width: 100px;
+    height: 100px;
+    top: 190px;
+    left: 42px;
+    object-fit: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.acct-header
+{
+    z-index: 1;
+    padding-left: 160px;
+    border-bottom: 1px solid #004B5D;
+    background-color: #00232B;
+}
+
+.acct-info-data
+{
+    display: inline-block;
+    position: relative;
+    left: 155px;
+    top: 185px;
+    font-weight: bold;
+    text-shadow: 0px 2px 6px #000;
+}
+
+.acct-banner
+{
+    overflow: hidden;
+}
+
+
+.acct-displayname
+{
+    font-size: 26px;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 6px 6px 8px;
+    overflow: hidden;
+    max-width: 420px !important;
+    color: #fff;
+}
+
+.acct-username
+{
+    font-size: 14px;
+    color: #004B5D;
+    display: block;
+    padding-left: 6px;
+    font-weight: bold;
+    text-shadow: 0px 0px 5px #000;
+}
+
+.follow-btn
+{
+    margin-left: auto;
+    position: relative;
+    float: right;
+    top: 10px;
+    margin: 0px 15px 15px 0px;
+    padding: 5px 20px;
+    border-radius: 3px;
+    background: inherit;
+    box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.follow-btn.active
+{
+    box-shadow: unset;
+    color: #FBF5D9;
+    background: #B6C1A2;
+}
+
+/****************
+ *   Statusbox  *
+ ****************/
+.statusbox
+{
+    display: block;
+    flex-direction: column;
+    padding: 5px;
+}
+
+.statusbox textarea
+{
+    display: block;
+    border: 1px solid #004B5D;
+    width: 592px;
+    max-width: 592px;
+    min-width: 592px;
+    background: #00232B;
+    margin-bottom: 5px;
+    padding: 2px;
+}
+
+.statusbox .statusfooter
+{
+    display: block;
+    flex-direction: row;
+}
+
+.statusbox .statusfooter-left
+{
+    display: inline-block;
+}
+
+.statusbox .statusfooter-right
+{
+    float: right;
+}
+
+.status-interact label
+{
+    display: block;
+    padding: 3px 8px;
+}
+
+.status-interact svg.repeat.active
+{
+    stroke: #9DCF94;
+}
+
+.status-interact svg.like.active
+{
+    fill: #ECBA71;
+    stroke: #ECBA71;
+}
+
+.status-interact svg.like:hover,
+.status-interact svg.like:active,
+.status-interact svg.like:focus
+{
+    stroke: #ECBA71;
+    pointer: select;
+}
+
+.status-interact svg.repeat:hover,
+.status-interact svg.repeat:active,
+.statis-interact svg.repeat:focus
+{
+    stroke: #9DCF94;
+    pointer: select;
+}
+
+.status-interact .count
+{
+    font-size: 14px;
+    padding-bottom: 3px;
+    color: #f4ffff;
+}
+
+/* Emoji */
+.emoji
+{
+    font-family: monospace;
+    display: inline;
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+    object-fit: contain;
+    transition: transform .2s;
+}
+
+.emoji:hover
+{
+    transform: scale(1.5);
+}
+
+.emoji:active
+{
+    transform: scale(2.7);
+}
+
+.emoji-react-box
+{
+    border-radius: 4px;
+    border: 1px solid #004B5D;
+}
+
+.form-group
+{
+    padding: 5px;
+    display: block;
+}
+
+/* Simple page layout */
+.simple-page
+{
+    padding: 0 12px;
+}
+
+.simple-page h1
+{
+    padding-left: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #004B5D;
+}
+
+.simple-page h3
+{
+    margin-left: 15px;
+}
+
+.simple-page ul
+{
+    list-style-type: none;
+    padding-left: 15px;
+}
+
+.simple-page p
+{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* Attachments */
+.attachments img
+{
+    min-width: 100px;
+}
+
+.attachments
+{
+    margin: 10px 0 3px 0;
+}
+
+.attachment-container
+{
+    z-index: 3;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.sensitive
+{
+    z-index: 2;
+    filter: blur(16px);
+    transition: filter .4s;
+}
+
+.sensitive:hover
+{
+    filter: none;
+}
+
+textarea {
+    color: #FBF5D9;
+}
+
+/* Emoji reacts */
+.emoji-reactions
+{
+    display: block;
+    padding: 0;
+    margin: 0;
+    white-space-collapse: discard;
+    margin-top: 8px;
+    padding-left: 0px !important;
+    margin-bottom: 6px;
+}
+
+.emoji-react-box
+{
+    display: inline-block;
+    list-style-type: none;    
+    padding: 3px 7px;
+    margin: 2px 4px;
+}
+
+.emoji
+{
+    font-family: Emoji;
+}
+
+/*************************************************
+ *                   LISTS                       *
+ *************************************************/
+ul.large-list
+{
+    width: 500px;
+    border-radius: 6px;
+    background-color: #42838C;
+    border: 1px solid #004B5D;
+    padding: 0;
+    overflow: hidden;
+}
+
+ul.large-list li
+{
+    list-style-type: none;
+    margin: 0;
+}
+
+ul.large-list li a
+{
+    display: block;
+    padding: 15px;
+    list-style-type: none;
+}
+
+.lists-view-header
+{
+    text-align: center;
+}
+
+.lists-view-container ul
+{
+    margin-left: auto;
+    margin-right: auto;   
+}
+
+.lists-view-container ul li:not(:last-child)
+{
+    border-bottom: 1px solid #004B5D;
+}
+
+/* Navigation */
+.navigation,
+.tabs
+{
+    table-layout: fixed;
+    background-color: #00232B;
+    color: #F7EDBE;
+    width: 100%;
+    border-spacing: 0px;
+    box-shadow: 0px 1px 0px #004B5D;
+}
+
+.navigation .nav-btn,
+.tabs .tab-btn
+{
+    display: block;
+    padding: 8px !important;
+}
+
+.tabs .tab-btn
+{
+    width: 100%;
+    border: 0;
+}
+
+.tabs .tab-btn.focused
+{
+    border-bottom: 3px solid #ECBA71;
+}
+
+.tabs .tab-btn:hover,
+.tabs .tab-btn:active
+{
+    border-bottom: 3px solid #42838c;
+}
+
+
+.navigation tr td:not(:last-child),
+.tabs tr td:not(:last-child)
+{
+    border-right: 1px solid #004B5D;
+}
+
+.ui-table tr td a
+{
+    text-decoration: none;
+}
+
+/* MENUS */
+
+.menu-container:hover .menu,
+.menu-container:hover + .menu
+{
+    position: absolute;
+    display: block;
+}
+
+.menu
+{
+    z-index: 5;
+    display: none;
+    background: #004B5D;
+    color: #FBF5D9;
+    border-radius: 4px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.menu ul
+{
+    background-color: #004B5D;
+    margin: 0;
+    padding: 4px 0 4px 0;
+}
+
+.menu ul li
+{
+    list-style-type: none;
+    display: block;
+}
+
+.menu .btn-menu
+{
+    background: unset;
+    background-color: unset;
+    display: block;
+    padding: 6px 12px;
+    width: 100%;
+    border: 0;
+    cursor: pointer;
+    text-align: left;
+    box-sizing: border-box;
+}
+
+.user-options-btn
+{
+    padding: 4px;
+    border-radius: 3px;
+    margin: 8px;
+    float: right;
+    font-size: 12px;
+    color: #F7EDBE;
+    text-transform: uppercase;
+    background-color: rgba(0, 0, 0, .7);
+}
+
+.menu .btn-menu:hover
+{
+    background-color: #00232B;
+    color: #FBF5D9;
+}
+
+.nolink
+{
+    text-decoration: none;
+}
+
+.status-content pre, .notification pre
+{
+    width: 100%;
+    max-width: 100%;
+    overflow-x: scroll;
+}
diff --git a/dist/solarized.css b/dist/solarized.css
new file mode 100644
index 0000000..e699971
--- /dev/null
+++ b/dist/solarized.css
@@ -0,0 +1,1267 @@
+/* Thanks to Grumbulon for the dark theme basis */
+
+*
+{
+    margin: 0;
+    padding: 0;
+    color: #02313C;
+}
+
+
+html, body
+{
+    margin: 0;
+    padding: 0;
+    margin-top: 0px;
+}
+
+html
+{
+    height: 100%;
+}
+
+body
+{
+    background-attachment: fixed !important;
+    background-size: cover !important;
+    background-color: unset;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #F7EDBE;
+    min-height: 100%;
+    line-height: 1.65;
+}
+
+/* Basic elements */
+h1, h2, h3, h4
+{
+    margin: 12px 0px 6px 0px;
+}
+
+ul
+{
+    margin: 12px;
+
+}
+
+select
+{
+    background-color: #F7EDBE;
+}
+
+#main-page-container
+{
+    padding: 8px;
+}
+
+#main-page
+{
+    margin: 0 auto 8px;
+    width: 1000px;
+    background-color: #F7EDBE;
+    border-top: 0 !important;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+    border-width: 0;
+    border-radius: 3px;
+}
+
+.hidden
+{
+    display: none;
+}
+
+.pointer
+{
+    cursor: pointer;
+}
+
+a, a:visited, a:hover, a:active
+{
+    color: inherit;
+}
+
+.mention
+{
+    text-decoration: none;
+    background-color: #CA545C;
+    border-radius: 3px;
+    padding-left: 2px;
+    padding-right: 2px;
+    border: 1px solid #8E545C;
+}
+
+.mention, .mention span
+{
+    color: #F7EDBE !important;
+}
+
+.greentext
+{
+    color: #618265;
+}
+
+/* Cleans up most of the tables */
+table.ui-table td
+{
+    padding: 0;
+    margin: 0;
+    border-collapse: collapse !important;
+    vertical-align: top;
+}
+
+#content
+{
+    overflow: hidden;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+#navbar {
+    position: sticky;
+    top: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-top: 1px solid #F7EDBE;
+    border-bottom: 1px solid #F7EDBE;
+    background: #C1B88D;
+    width: 1000px;
+    z-index: 999;
+}
+
+#navbar img
+{
+    filter: invert(1);
+    vertical-align: middle;
+    display: inline-block;
+    margin: 4px 0px 6px 18px;
+}
+
+#navbar span.info
+{
+    vertical-align: middle;
+    margin-left: 15px;
+    /* font-variant: small-caps; */
+    font-size: 28px;
+}
+
+#navbar-right-container
+{
+    width: 795px;
+    display: inline-block;
+    position: relative;
+    top: 9px;
+    align-items: center;
+}
+
+#navbar-right form
+{
+    float: right;
+}
+
+#navbar-right
+{
+    display: inline-block;
+    float: right;
+    padding-right: 8px;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+}
+
+#login-header
+{
+    vertical-align: middle;
+    float: left;
+    position: relative;
+    top: 4px;
+    margin-right: 15px;
+    text-decoration: none;
+}
+
+.alignend
+{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+#main
+{
+    width: 623px;
+    max-width: 623px !important;
+    min-width: 623px;
+    border-collapse: collapse !important;
+    background-color: #F7EDBE;
+    padding: 0;
+}
+
+#content
+{
+    border-collapse: collapse !important;
+    min-height: 600px;
+}
+
+.sidebar
+{
+    background-color: #F7EDBE;
+    min-height: 600px;
+}
+
+#leftbar
+{
+    width: 130px;
+    max-width: 130px;
+    min-width: 130px;
+    border-right: 1px solid #97957D;
+}
+
+#leftbar ul
+{
+    margin: 0;
+    padding: 0;
+}
+
+#leftbar ul li
+{
+    list-style-type: none;
+}
+
+
+#rightbar
+{
+    width: 245px;
+    max-width: 245px;
+    min-width: 245px;
+    border-left: 1px solid #97957D;
+}
+
+
+/*************************************************
+ *               COMMON ELEMENTS                 *
+ *************************************************/
+
+table.present
+{
+    border: 1px solid #404040;
+}
+
+table.present th, table.present td
+{
+    padding: 2px 5px;
+}
+
+#env-table
+{
+    margin-top: 5px;
+}
+
+.error
+{
+    display: block;
+    background-color: #fcb0b0;
+    color: #000;
+    border: 1px solid #bb1c1f;
+    padding: 15px;
+    font-weight: bold;
+}
+
+.error-pad
+{
+    margin: 5px;
+    border-radius: 4px;
+}
+
+.e-notice
+{
+    display: block;
+    background-color: #ddeeff;
+    color: #000;
+    border: 1px solid #66ccff;
+    padding: 15px;
+    font-weight: bold;
+}
+
+input[type=textbox]
+{
+    background-color: #F7EDBE;
+    color: #97957D;
+}
+
+/*************************************************
+ *                  BUTTONS                      *
+ *************************************************/
+.sidebarbtn:hover, .sidebarbtn-sub:hover
+{
+    border-bottom: 1px solid #7FAE76 !important;
+}
+
+.sidebarbtn, .btn
+{ 
+    background: #D5CB9F;
+    color: #004B5D;
+    text-decoration: none;
+    border-color: #97957D;
+}
+
+.sidebarbtn:hover, .btn:hover
+{ 
+    background: #9DCF94;
+    border-color: #7FAE76;
+    color: #02313C;
+    cursor: pointer;
+}
+
+.sidebarbtn:active, .btn:active
+{ 
+    background: #9DCF94;
+    border-color: #7FAE76;
+    color: #02313C;
+    cursor: pointer;
+}
+
+.btn-disabled
+{
+    color: #97957D !important;
+    background: #F7EDBE !important;
+}
+
+.btn-disabled:hover
+{
+    background: #F7EDBE;
+}
+
+.btn-disabled:active
+{
+    background: #F7EDBE;
+}
+
+
+input[type=button], input[type=submit]
+{
+    background: #C1B88D;
+    border: 1px solid #02313C;
+    padding: 3px 15px;
+}
+
+/* Make first button glue to header */
+#leftbar ul:first-child .sidebarbtn
+{
+    border-top: 0;
+}
+
+.sidebarbtn
+{
+    display: block;
+    border-bottom: 1px solid #97957D;
+    padding: 8px 8px 8px 16px;
+}
+
+.sidebarbtn.focused
+{
+    border-right: 3px solid #7FAE76 !important;
+}
+
+.sidebarbtn-sub
+{
+    display: block;
+    color: #004B5D;
+    padding: 8px;
+    padding-left: 32px;
+    text-decoration: none;
+}
+
+.sidebar-config
+{
+    background-color: #F7EDBE;
+    border-left: 3px solid #9DCF94;
+    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebarbtn-sub.focused
+{
+    font-weight: bold;
+}
+
+.sidebarbtn-sub:active, .sidebarbtn-sub:hover
+{
+    background-color:  #97957D;
+}
+
+ul li:first-child a.sidebarbtn
+{
+    border-top: 1px solid #F7EDBE;
+}
+
+.sidebarbtn
+
+/****************************
+ *      Notifications       *
+ ***************************/
+.notification
+{
+    border-bottom: 1px solid #97957D;
+    width: 100%;
+}
+
+.pfp-compact-td
+{
+    width: 20px;
+    padding: 3px !important;
+}
+
+.pfp-compact-td img
+{
+    border-radius: 2px;
+    width: 20px;
+    height: 20px;
+    object-fit: cover;
+}
+
+.notification-compact
+{
+    border-bottom: 1px solid #97957D;
+    min-width: 100%;
+}
+
+.notification-compact .notification-content
+{
+    max-height: 100px;
+    overflow: hidden;
+}
+
+.notification-compact:hover .notification-content
+{
+    max-height: unset;
+    overflow: hidden;
+}
+
+.notification-compact p
+{
+    margin: 0;
+}
+.notification-compact .notification-info
+{
+    font-size: 12px;
+    padding-left: 2px;
+    padding-right: 2px;
+    margin-top: 0;
+    font-weight: bold;
+}
+
+.notification-info svg,
+.notification-info-format svg
+{
+    width: 16px;
+    height: 16px;
+}
+
+.notification-table-bit
+{
+    width: auto;
+}
+
+/* Only move up if SVG is next to it, the SVG moves the text */
+.notification .notification-text-group-with-icon
+{
+    vertical-align: middle;
+}
+
+.notification-info svg.like,
+.notification-info-format svg.like
+{
+    fill: #C89851;
+    stroke: #C89851;
+}
+
+svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon, svg.one-click-software, svg.expand
+{
+    vertical-align: middle;
+    stroke: #004B5D;
+}
+
+svg.in-reply-to-icon
+{
+    position: relative;
+    top: -3px;
+    stroke: #004B5D;
+}
+
+.in-reply-to
+{
+    color: #004B5D;
+}
+
+.in-reply-to-id
+{
+    text-decoration: none;
+    line-height: 23px;
+    font-size: 14px;
+    color: #004B5D;
+}
+
+.notification-compact .notification-content
+{
+    color: #004B5D;
+    font-size: 12px;
+    padding: 8px 0;
+}
+
+.notification-compact .notification-stats
+{
+    color:  #97957D;
+    font-size: 10px;
+}
+
+.notification-info
+{
+    margin-top: 7px;
+}
+
+.notification-info img,
+.notification-info-format img
+{
+    margin-left: 38px;
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+}
+
+.notification-info .notification-user,
+.notification-info-format .notification-user
+{
+    display: inline;
+    vertical-align: middle;
+    position: relative;
+    top: -8px;
+    left: 2px;
+}
+
+/***************************
+ *      Statuses           *
+ **************************/
+.status,
+.notification-regular
+{
+    padding: 6px 2px 0 6px;
+    border-bottom: 1px solid #97957D !important;
+    width: 100%;
+    border-spacing: 0px;
+}
+
+.status.focused
+{
+    background-color: #C1B88D;
+    border-left: 3px solid #97957D;
+}
+
+.notification-info + .status,
+.notification-info-format + .status
+{
+    padding-top: 0;
+}
+
+.status .profile-picture
+{
+    display: inline-block;
+    width: 52px;
+    min-width: 52px;
+    height: 52px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.pfp-td
+{
+    width: 48px;
+    border-collapse: collapse !important;
+    padding: 6px !important;
+}
+
+.pfp-td img
+{
+    border-radius: 3px;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+}
+
+.status tr
+{
+    width: auto;
+}
+
+
+.status .status-info,
+.notification-info-format,
+.notification-content
+{
+    min-width: 0;
+    width: auto;
+    padding: 0 0 0 10px;
+}
+
+.status .status-info > table.ui-table
+{
+    width: 100%;
+}
+
+.status .status-info table.ui-table, .status .status-info table.ui-table td, .status .status-info table.ui-table tr
+{
+    border-collapse: collapse !important;
+    border-spacing: 0px;
+    padding: 0 8px;
+    margin: 0;
+}
+
+.status .instance-info
+{
+    font-style: italic;
+    text-decoration: none;
+    margin: 0 4px 0 6px;
+    font-size: 14px;
+    padding-top: 1px;
+    color: #004B5D;
+}
+
+.status .poster-stats
+{
+    /* To maintain compatibility while keeping it a flexbox, we have to 
+     * hardcode the width, sorry! Tables are just weird and I hate CSS */
+    max-width: 520px;
+}
+
+.status .username,
+.notification-regular .username
+{
+    display: inline-block;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 350px;
+    white-space: nowrap;
+    vertical-align: middle;
+    color: #004B5D;
+}
+
+.status .status-content
+{
+    margin: 8px 0;
+    overflow-wrap: break-word;
+    width: 520px;
+    color: #02313C;
+    display: block;
+}
+
+.status .status-content p
+{
+    margin: 2px 0 0 0;
+}
+
+.status-visibility
+{
+    color: #004B5D;
+    display: inline;
+    float: right;
+    font-size: 12px;
+    margin: 3px 0 0 3px;
+}
+
+.status-interact
+{
+    margin: 8px 0 0 0;
+}
+
+.status-interact table.ui-table
+{
+    border-collapse: collapse !important;
+    padding: 0;
+}
+
+.status-interact table.ui-table tr
+{
+    border-collapse: collapse !important;
+    padding: 0;
+}
+
+/***************************
+ *    Element Grouping     *
+ **************************/
+.group
+{
+    padding: 0;
+    margin: 0 !important;
+    height: 28px;
+}
+
+/* These are a pain for some reason */
+.group-inputbox
+{
+    border: 1px solid #97957D;
+    padding-left: 5px;
+    border-right: 0px;
+    height: 26px;
+    background: #F7EDBE;
+}
+
+.group-left
+{
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+.group-right
+{
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+/*************************
+ *     Config            *
+ ************************/
+#config-page
+{
+    padding: 0 12px;
+}
+
+#config-page h1
+{
+    padding-left: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #97957D;
+}
+
+#config-page h3
+{
+    margin-left: 15px;
+}
+
+#config-page ul
+{
+    list-style-type: none;
+    padding-left: 15px;
+}
+
+/**********************
+ *    Profiles        *
+ **********************/
+.header-btn
+{
+    display: inline-block;
+    padding: 8px 15px;
+    margin: 0;
+    background: inherit;
+    text-decoration: none;
+    color: #F7EDBE;
+    font-size: 14px;
+}
+
+.header-btn .btn-content
+{
+    color: #004B5D;
+}
+
+.btn.header-btn:hover span
+{
+    color: ;
+}
+
+.header-btn span
+{
+    display: block;
+    text-align: center;
+}
+
+.acct-banner
+{
+    width: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 256px;
+}
+
+.account
+{
+    position: relative;
+}
+
+.acct-badge
+{
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    font-size: 12px;
+    padding: 4px 8px;
+    color: #F7EDBE;
+    text-transform: uppercase;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 3px;
+}
+
+.account-note
+{
+    word-break: break-all;
+    text-align: center;
+}
+
+.account-info
+{
+    background: #F7EDBE;
+    color: #02313C;
+    padding: 15px 50px;
+    border-bottom: 1px solid #97957D;
+    max-height: 200px;
+    overflow: auto;
+}
+
+.acct-pfp
+{
+    position: absolute;
+    display: inline;
+    z-index: 100;
+    border: 3px solid #9DCF94;
+    background-color: #97957D;
+    border-radius: 8px;
+    width: 100px;
+    height: 100px;
+    top: 190px;
+    left: 42px;
+    object-fit: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.acct-header
+{
+    z-index: 1;
+    padding-left: 160px;
+    border-bottom: 1px solid ;
+    background-color: #C1B88D;
+}
+
+.acct-info-data
+{
+    display: inline-block;
+    position: relative;
+    left: 155px;
+    top: 185px;
+    font-weight: bold;
+    text-shadow: 0px 2px 6px #000;
+}
+
+.acct-banner
+{
+    overflow: hidden;
+}
+
+
+.acct-displayname
+{
+    font-size: 26px;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 6px 6px 8px;
+    overflow: hidden;
+    max-width: 420px !important;
+    color: #F7EDBE;
+}
+
+.acct-username
+{
+    font-size: 14px;
+    color: #97957D;
+    display: block;
+    padding-left: 6px;
+    font-weight: bold;
+    text-shadow: 0px 0px 5px #000;
+}
+
+.follow-btn
+{
+    margin-left: auto;
+    position: relative;
+    float: right;
+    top: 10px;
+    margin: 0px 15px 15px 0px;
+    padding: 5px 20px;
+    border-radius: 10px;
+    background: #97957D;
+    box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.follow-btn.active
+{
+    box-shadow: unset;
+    color: #02313C;
+    background: #9DCF94;
+}
+
+/****************
+ *   Statusbox  *
+ ****************/
+.statusbox
+{
+    display: block;
+    flex-direction: column;
+    padding: 5px;
+}
+
+.statusbox textarea
+{
+    display: block;
+    border: 1px solid #97957D;
+    width: 592px;
+    max-width: 592px;
+    min-width: 592px;
+    background: #D5CB9F;
+    margin-bottom: 5px;
+    padding: 2px;
+}
+
+.statusbox .statusfooter
+{
+    display: block;
+    flex-direction: row;
+}
+
+.statusbox .statusfooter-left
+{
+    display: inline-block;
+}
+
+.statusbox .statusfooter-right
+{
+    float: right;
+}
+
+.status-interact label
+{
+    display: block;
+    padding: 3px 8px;
+}
+
+.status-interact svg.repeat.active
+{
+    stroke: #9DCF94;
+}
+
+.status-interact svg.like.active
+{
+    fill: #C89851;
+    stroke: #C89851;
+}
+
+.status-interact svg.like:hover,
+.status-interact svg.like:active,
+.status-interact svg.like:focus
+{
+    stroke: #C89851;
+    pointer: select;
+}
+
+.status-interact svg.repeat:hover,
+.status-interact svg.repeat:active,
+.statis-interact svg.repeat:focus
+{
+    stroke: #9DCF94;
+}
+
+.status-interact .count
+{
+    font-size: 14px;
+    padding-bottom: 3px;
+    color: #f4ffff;
+}
+
+/* Emoji */
+.emoji
+{
+    font-family: monospace;
+    display: inline;
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+    object-fit: contain;
+    transition: transform .2s;
+}
+
+.emoji:hover
+{
+    transform: scale(1.5);
+}
+
+.emoji:active
+{
+    transform: scale(2.7);
+}
+
+.emoji-react-box
+{
+    border-radius: 4px;
+    border: 1px solid #97957D;
+}
+
+.form-group
+{
+    padding: 5px;
+    display: block;
+}
+
+/* Simple page layout */
+.simple-page
+{
+    padding: 0 12px;
+}
+
+.simple-page h1
+{
+    padding-left: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #97957D;
+}
+
+.simple-page h3
+{
+    margin-left: 15px;
+}
+
+.simple-page ul
+{
+    list-style-type: none;
+    padding-left: 15px;
+}
+
+.simple-page p
+{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+/* Attachments */
+.attachments img
+{
+    min-width: 100px;
+}
+
+.attachments
+{
+    margin: 10px 0 3px 0;
+}
+
+.attachment-container
+{
+    z-index: 3;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.sensitive
+{
+    z-index: 2;
+    filter: blur(16px);
+    transition: filter .4s;
+}
+
+.sensitive:hover
+{
+    filter: none;
+}
+
+textarea {
+    color: #02313C;
+}
+
+/* Emoji reacts */
+.emoji-reactions
+{
+    display: block;
+    padding: 0;
+    margin: 0;
+    white-space-collapse: discard;
+    margin-top: 8px;
+    padding-left: 0px !important;
+    margin-bottom: 6px;
+}
+
+.emoji-react-box
+{
+    display: inline-block;
+    list-style-type: none;    
+    padding: 3px 7px;
+    margin: 2px 4px;
+}
+
+.emoji
+{
+    font-family: Emoji;
+}
+
+/*************************************************
+ *                   LISTS                       *
+ *************************************************/
+ul.large-list
+{
+    width: 500px;
+    border-radius: 3px;
+    background-color:  #97957D;
+    border: 1px solid #97957D;
+    padding: 0;
+    overflow: hidden;
+}
+
+ul.large-list li
+{
+    list-style-type: none;
+    margin: 0;
+}
+
+ul.large-list li a
+{
+    display: block;
+    padding: 15px;
+    list-style-type: none;
+}
+
+.lists-view-header
+{
+    text-align: center;
+}
+
+.lists-view-container ul
+{
+    margin-left: auto;
+    margin-right: auto;   
+}
+
+.lists-view-container ul li:not(:last-child)
+{
+    border-bottom: 1px solid #97957D;
+}
+
+/* Navigation */
+.navigation,
+.tabs
+{
+    table-layout: fixed;
+    background-color: #F7EDBE;
+    color: #004B5D;
+    width: 100%;
+    border-spacing: 0px;
+    box-shadow: 0px 1px 0px #97957D;
+}
+
+.navigation .nav-btn,
+.tabs .tab-btn
+{
+    display: block;
+    padding: 8px !important;
+}
+
+.tabs .tab-btn
+{
+    width: 100%;
+    border: 0;
+}
+
+.tabs .tab-btn.focused
+{
+    border-bottom: 3px solid #7FAE76;
+}
+
+.tabs .tab-btn:hover,
+.tabs .tab-btn:active
+{
+    border-bottom: 3px solid  #97957D;
+}
+
+
+.navigation tr td:not(:last-child),
+.tabs tr td:not(:last-child)
+{
+    border-right: 1px solid #97957D;
+}
+
+.ui-table tr td a
+{
+    text-decoration: none;
+}
+
+/* MENUS */
+
+.menu-container:hover .menu,
+.menu-container:hover + .menu
+{
+    position: absolute;
+    display: block;
+}
+
+.menu
+{
+    z-index: 5;
+    display: none;
+    background: #C1B88D;
+    color: #000;
+    border-radius: 4px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.menu ul
+{
+    margin: 0;
+    padding: 4px 0 4px 0;
+}
+
+.menu ul li
+{
+    list-style-type: none;
+    display: block;
+}
+
+.menu .btn-menu
+{
+    background-color: unset;
+    background: unset;
+    display: block;
+    padding: 6px 12px;
+    width: 100%;
+    border: 0;
+    cursor: pointer;
+    text-align: left;
+    box-sizing: border-box;
+}
+
+.user-options-btn
+{
+    padding: 4px;
+    border-radius: 3px;
+    margin: 8px;
+    float: right;
+    font-size: 12px;
+    color: #F7EDBE;
+    text-transform: uppercase;
+    background-color: rgba(0, 0, 0, .7);
+}
+
+.menu .btn-menu:hover
+{
+    background-color: #97957D;
+    color: #F7EDBE;
+}
+
+.nolink
+{
+    text-decoration: none;
+}
+
+.status-content pre, .notification pre
+{
+    width: 100%;
+    max-width: 100%;
+    overflow-x: scroll;
+}