diff --git a/dist/treebird20.css b/dist/treebird20.css
index 141ec1e..f7959e1 100644
--- a/dist/treebird20.css
+++ b/dist/treebird20.css
@@ -14,6 +14,10 @@ body
{
background-color: unset;
font-family: Arial, Helvetica, sans-serif;
+}
+
+#main-page
+{
width: 1000px;
border-top: 0 !important;
margin-left: auto;
@@ -60,6 +64,7 @@ table.ui-table td
#content
{
+ overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@@ -71,49 +76,57 @@ table.ui-table td
border-top: 2px solid #fff;
background: linear-gradient(#fafafa, #f3f3f3);
width: 1000px;
- display: flex;
- align-items: center;
border-bottom: 2px solid #cacaca;
z-index: 999;
}
#navbar img
{
+ vertical-align: middle;
display: inline-block;
- margin: 4px 3px 2px 10px;
+ margin: 4px 3px 5px 14px;
}
#navbar span.info
{
+ vertical-align: middle;
margin-left: 15px;
color: #202020;
/* font-variant: small-caps; */
font-size: 28px;
}
+#navbar-right-container
+{
+ width: 800px;
+ display: inline-block;
+ position: relative;
+ top: 9px;
+ padding-right: 8px;
+ align-items: center;
+}
+
+#navbar-right form
+{
+ float: right;
+}
+
#navbar-right
{
- padding-right: 8px;
- flex: 1;
- flex-direction: row;
- align-items: center;
+ display: inline-block;
+ float: right;
}
#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: 608px;
@@ -801,27 +814,36 @@ svg.in-reply-to-icon
****************/
.statusbox
{
- display: flex;
+ display: block;
flex-direction: column;
padding: 5px;
}
.statusbox textarea
{
+ display: block;
+ width: 592px;
margin-bottom: 5px;
}
.statusbox .statusfooter
{
- display: flex;
+ display: block;
flex-direction: row;
}
.statusbox .statusfooter-left
{
- flex: 1;
+ display: inline-block;
}
+.statusbox .statusfooter-right
+{
+
+ float: right;
+}
+
+
.status-interact label
{
display: block;
diff --git a/dist/treebird30.css b/dist/treebird30.css
deleted file mode 100644
index 8a2223a..0000000
--- a/dist/treebird30.css
+++ /dev/null
@@ -1,432 +0,0 @@
-/* Basic elements */
-body
-{
- font-family: Arial, Helvetica, sans-serif;
- background-color: #fafafa;
-}
-
-a
-{
- color: #aa0000;
-}
-
-/* Divs and wrappers */
-#display-wrapper
-{
- display: flex;
- justify-content: center;
-}
-
-#display
-{
- overflow: hidden;
- background-color: #fdfdfd;
- width: 1000px;
- border-radius: 5px;
- border: 1px solid #dadada;
- box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
-}
-
-#navbar
-{
- background-color: #fff;
- display: flex;
- align-items: center;
- padding: 5px 8px;
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-}
-
-#navbar img
-{
- display: inline-block;
- margin: 2px 2px 2px 8px;
-}
-
-#navbar span.info
-{
- margin-left: 15px;
- color: #202020;
- font-variant: small-caps;
- font-size: 28px;
-}
-
-#navbar-right
-{
- padding-right: 8px;
-}
-
-.alignend
-{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- align-items: flex-end;
-}
-
-div#content
-{
- display: flex;
-}
-
-div#content main
-{
- flex: 1;
- min-width: 0;
- min-height: 600px;
-}
-
-div#content aside
-{
- width: 180px;
- max-width: 180px;
- min-width: 180px;
-}
-
-#leftbar
-{
- border-right: 1px solid #cacaca;
-}
-
-#leftbar ul
-{
- margin: 0 3px;
- padding: 5px 0;
-}
-
-#leftbar ul:not(:last-child)
-{
- border-bottom: 1px solid #e4e4e4;
-}
-
-#leftbar ul li
-{
- list-style-type: none;
-}
-
-/*************************************************
- * BUTTONS *
- *************************************************/
-input[type=button], input[type=submit], .sidebarbtn, .btn
-{
- background: transparent;
- margin: 4px;
- border-radius: 3px;
- border: 1px solid #fcfcfc00;
- color: #000;
- text-decoration: none;
-}
-
-input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover, .btn:hover,
-input[type=button]:active, input[type=submit]:active, .sidebarbtn:active, .btn:active,
-input[type=button]:focus, input[type=submit]:focus, .sidebarbtn:focus, .btn:focus
-{
- background: #ececec;
- border: 1px solid #dadada;
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
- cursor: pointer;
-}
-
-input[type=button], input[type=submit]
-{
- border: 1px solid #cacaca;
- padding: 3px 15px;
-}
-
-.sidebarbtn
-{
- transition: .2s;
- display: block;
- padding: 8px 8px 8px 16px;
-}
-
-.sidebarbtn:hover,
-.sidebarbtn:focus,
-.sidebarbtn:active
-{
- transform: translate(0px, -2px);
-}
-
-#rightbar
-{
- border-left: 1px solid #cacaca;
-}
-
-/***************************
- * Statuses *
- **************************/
-.status
-{
- display: flex;
- margin: 7px;
-}
-
-.status:not(:last-child)
-{
- border-bottom: 2px dotted #cacaca;
-}
-
-.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;
-}
-
-.status .status-info
-{
- flex: 1;
- display: flex;
- margin: 0 5px 5px;
- min-width: 0;
- flex-direction: column;
-}
-
-.status .instance-info
-{
- font-style: italic;
- text-decoration: none;
- margin: 0 3px;
-}
-
-.status .poster-stats
-{
- display: flex;
-}
-
-.status .username
-{
- font-weight: bold;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-.status .status-content
-{
- margin: 2px 0 0 0;
- overflow-wrap: break-word;
-}
-
-.status .status-content p
-{
- margin: 2px 0 0 0;
-}
-
-.status-visibility
-{
- color: #808080;
-}
-
-/***************************
- * Element Grouping *
- **************************/
-.group
-{
- padding: 0;
- margin: 0 !important;
- height: 28px;
-
-}
-
-/* These are a pain for some reason */
-.group-inputbox
-{
- border: 1px solid #cacaca;
- padding-left: 5px;
- border-right: 0px;
- height: 26px;
-}
-
-.group-left
-{
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
-}
-
-.group-right
-{
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
-/*************************
- * Config *
- ************************/
-#config-page
-{
- padding: 0 12px;
-}
-
-#config-page h1
-{
- padding-left: 12px;
- padding-bottom: 6px;
- border-bottom: 1px solid #cacaca;
-}
-
-#config-page h3
-{
- margin-left: 15px;
-}
-
-#config-page ul
-{
- list-style-type: none;
- padding-left: 15px;
-}
-
-
-/**********************
- * Profiles *
- **********************/
-.header-btn
-{
- text-decoration: none;
- color: #606060;
- font-size: 14px;
-}
-
-.header-btn .btn-content
-{
- color: #000;
-}
-
-.btn.header-btn:hover span
-{
- color: #fff;
-}
-
-.header-btn span
-{
- display: block;
- text-align: center;
-}
-
-.acct-banner
-{
- width: 100%;
- display: flex;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- height: 256px;
- align-items: end;
-}
-
-.acct-pfp
-{
- position: relative;
- z-index: 1;
- border: 3px solid #cacaca;
- background-color: #fff;
- border-radius: 8px;
- width: 100px;
- height: 100px;
- top: 38px;
- left: 150px;
- margin-top: -108px;
- margin-left: -108px;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
-}
-
-.acct-header
-{
- display: flex;
- padding-left: 160px;
- background: linear-gradient(#fff, #f1f1f1);
- border-bottom: 1px solid #cacaca;
- background-color: #e8e8e8;
-}
-
-.acct-info-data
-{
- position: relative;
- left: 160px;
- top: -10px;
- font-weight: bold;
- text-shadow: 0px 2px 6px #000;
-}
-
-.acct-displayname
-{
- font-size: 26px;
- display: block;
- color: #fff;
-}
-
-.acct-username
-{
- font-size: 14px;
- color: #dadada;
- display: block;
- font-weight: bold;
- text-shadow: 0px 0px 5px #000;
-}
-
-.header-btn
-{
- display: inline-block;
- padding: 8px 15px;
- margin: 0;
-
-}
-
-.nobutton
-{
- background-color: transparent !important;
- border: 0 !important;
- border-radius: 0 !important;
- margin: 0 !important;
- padding: 8px 14px !important;
- transition: .05s background-color, .05s color;
- border-top-right-radius: 8px !important;
-}
-
-.status-interact form:not(:last-child) .nobutton
-{
- border-right: 1px solid #cacaca !important;
- border-top-right-radius: 0px !important;
-
-}
-
-.status-interact form:first-child .nobutton
-{
- border-top-left-radius: 8px !important;
-}
-
-
-.nobutton:hover,
-.nobutton:active,
-.nobutton:focus
-{
- background-color: #cc5555 !important;
- border: 0 !important;
- color: #fff !important;
- border-right: 1px solid #cacaca !important;
-
-}
-
-.status:not(:last-child)
-{
- border-bottom: 1px solid #cacaca;
-}
-
-.status .status-info
-{
- margin-bottom: 0;
-}
-
-.status-interact
-{
- margin-top: 8px;
- margin-bottom: 0;
-}
diff --git a/dist/treebird40.css b/dist/treebird40.css
new file mode 100644
index 0000000..0f99876
--- /dev/null
+++ b/dist/treebird40.css
@@ -0,0 +1,1141 @@
+/* Look, I tried my best to make this theme compatible with browsers like Netsurf and stuff, I HATE
+ the modern web and flexboxes and stuff, so as a result, you WILL see some fugly things in here
+ that you will probably want to cleanup or throw out completely, this CSS is a big hack.
+
+ Other themes do not need to be compatible with Netsurf and older browsers or use tables,
+ I just wanted this to be as compatible as possible, go wild with your own themes */
+
+html
+{
+ background-color: #f6f6f6;
+}
+
+body
+{
+ background-color: unset;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+#main-page
+{
+ width: 1000px;
+ margin-left: auto;
+ margin-right: auto;
+ box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.3);
+ border-width: 0;
+ border-radius: 5px;
+}
+
+.hidden
+{
+ display: none;
+}
+
+.pointer
+{
+ cursor: pointer;
+}
+
+a, a:visited, a:hover, a:active
+{
+ color: inherit;
+}
+
+.mention
+{
+ color: #cc0000;
+ text-decoration: none;
+ background-color: #ffcccc;
+ border-radius: 3px;
+ padding-left: 2px;
+ padding-right: 2px;
+}
+
+/* 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: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+#navbar
+{
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ background: rgba(245, 245, 245, 0.8);
+ backdrop-filter: blur(12px);
+ width: 1000px;
+ border-bottom: 1px solid #dadada;
+ z-index: 999;
+ position: sticky;
+ top: 0px;
+}
+
+#navbar img
+{
+ vertical-align: middle;
+ display: inline-block;
+ margin: 8px 3px 10px 14px;
+}
+
+#navbar span.info
+{
+ vertical-align: middle;
+ margin-left: 15px;
+ color: #202020;
+ /* font-variant: small-caps; */
+ font-size: 28px;
+}
+
+#navbar-right-container
+{
+ width: 800px;
+ display: inline-block;
+ position: relative;
+ top: 11px;
+ padding-right: 8px;
+ align-items: center;
+}
+
+#navbar-right form
+{
+ float: right;
+}
+
+#navbar-right
+{
+ display: inline-block;
+ float: right;
+}
+
+#login-header
+{
+ vertical-align: middle;
+ float: left;
+ position: relative;
+ top: 4px;
+ margin-right: 15px;
+ text-decoration: none;
+}
+
+#main
+{
+ width: 608px;
+ max-width: 608px !important;
+ min-width: 608px;
+ border-collapse: collapse !important;
+ background-color: #fafafa;
+ padding: 0;
+}
+
+#content
+{
+ border-collapse: collapse !important;
+ min-height: 600px;
+}
+
+.sidebar
+{
+ width: 180px;
+ min-height: 600px;
+ max-width: 180px;
+ min-width: 180px;
+ background-color: #fcfcfc;
+}
+
+#leftbar
+{
+ border-right: 1px solid #cacaca;
+}
+
+#leftbar ul
+{
+ margin: 0;
+ padding: 0;
+}
+
+#leftbar ul li
+{
+ list-style-type: none;
+}
+
+
+#rightbar
+{
+ border-left: 1px solid #cacaca;
+ min-width: 210px;
+ max-width: 210px;
+}
+
+
+/*************************************************
+ * COMMON ELEMENTS *
+ *************************************************/
+
+table.present
+{
+ border: 1px solid #cacaca;
+}
+
+table.present th, table.present td
+{
+ padding: 2px 5px;
+}
+
+#env-table
+{
+ margin-top: 5px;
+}
+
+.e-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;
+}
+
+/*************************************************
+ * BUTTONS *
+ *************************************************/
+.sidebarbtn, .btn
+{
+ background-color: #fff;
+ color: #000;
+ border-bottom: 1px solid #dadada;
+ text-decoration: none;
+ transition: background-color .15s, border .15s;
+}
+
+.sidebarbtn:hover, .btn:hover
+{
+ background-color: #ffcccc;
+ border-bottom: 1px solid #aa4040;
+ color: #000;
+ cursor: pointer;
+}
+
+.sidebarbtn:active, .btn:active
+{
+ background: linear-gradient(#600000, #aa0000);
+ border-color: #400000;
+ color: #fff;
+ cursor: pointer;
+}
+
+.btn-disabled
+{
+ color: #cacaca !important;
+ background: #f3f3f3 !important;
+}
+
+.btn-disabled:hover
+{
+ background: #f3f3f3;
+}
+
+.btn-disabled:active
+{
+ background: #f3f3f3;
+}
+
+
+input[type=button], input[type=submit]
+{
+ border: 1px solid #cacaca;
+ padding: 3px 15px;
+}
+
+.sidebarbtn
+{
+ display: block;
+ padding: 10px 8px 10px 16px;
+ margin: 4px;
+ border-radius: 3px;
+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.sidebarbtn.focused
+{
+ border-right: 3px solid #aa0000;
+}
+
+.sidebarbtn-sub
+{
+ display: block;
+ color: #000;
+ padding: 8px;
+ padding-left: 32px;
+ text-decoration: none;
+}
+
+.sidebar-config
+{
+ background-color: #efefef;
+ border-left: 3px solid #aa0000;
+ 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: #dadada;
+}
+
+/****************************
+ * Notifications *
+ ***************************/
+.notification
+{
+ border-bottom: 1px solid #dadada;
+ width: 100%;
+}
+
+.pfp-compact-td
+{
+ width: 16px;
+}
+
+.pfp-compact-td img
+{
+ border-radius: 3px;
+ width: 24px;
+ height: 24px;
+ object-fit: cover;
+}
+
+.notification-compact
+{
+ min-width: 100%;
+}
+
+.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;
+ stroke: #aa0000;
+}
+
+.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: #aa0000;
+
+}
+
+svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon
+{
+ vertical-align: middle;
+}
+
+svg.in-reply-to-icon
+{
+ position: relative;
+ top: -3px;
+ stroke: #606060;
+}
+
+.in-reply-to
+{
+ color: #606060;
+}
+
+.in-reply-to-id
+{
+ text-decoration: none;
+ line-height: 23px;
+}
+
+.notification-compact .notification-content
+{
+ color: #808080;
+ font-size: 12px;
+ padding: 2px 0 2px 0;
+}
+
+.notification-compact .notification-stats
+{
+ color: #500000;
+ 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 #cacaca !important;
+ width: 100%;
+ border-spacing: 0px;
+}
+
+.status.focused
+{
+ background-color: #ffdddd;
+ border-left: 3px solid #aa0000;
+}
+
+.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;
+}
+
+.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;
+ margin: 0;
+}
+
+.status .instance-info
+{
+ font-style: italic;
+ text-decoration: none;
+ margin: 0 4px 0 6px;
+ font-size: 14px;
+ padding-top: 1px;
+}
+
+.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;
+}
+
+.status .status-content
+{
+ margin: 2px 0 0 0;
+ overflow-wrap: break-word;
+ width: 520px;
+ display: block;
+}
+
+.status .status-content p
+{
+ margin: 2px 0 0 0;
+}
+
+.status-visibility
+{
+ color: #808080;
+ 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 #cacaca;
+ padding-left: 5px;
+ border-right: 0px;
+ height: 26px;
+}
+
+.group-left
+{
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+.group-right
+{
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+}
+
+/*************************
+ * Config *
+ ************************/
+#config-page
+{
+ padding: 0 12px;
+}
+
+#config-page h1
+{
+ padding-left: 12px;
+ padding-bottom: 6px;
+ border-bottom: 1px solid #cacaca;
+}
+
+#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: #000;
+}
+
+.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: #dadada;
+ text-transform: uppercase;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 5px;
+}
+
+.account-note
+{
+ word-break: break-all;
+ text-align: center;
+}
+
+.account-info
+{
+ background: linear-gradient(#e4e4e4, #efefef);
+ color: #000;
+ padding: 15px 50px;
+ border-bottom: 1px solid #cacaca;
+ max-height: 360px;
+ overflow: auto;
+}
+
+.acct-pfp
+{
+ position: absolute;
+ display: inline;
+ z-index: 100;
+ border: 3px solid #cacaca;
+ background-color: #fff;
+ 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;
+ background: linear-gradient(#fff, #f1f1f1);
+ border-bottom: 1px solid #cacaca;
+ background-color: #e8e8e8;
+}
+
+.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: #dadada;
+ 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: 24px;
+ background: inherit;
+ box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.follow-btn.active
+{
+ box-shadow: unset;
+ color: #fff;
+ background: linear-gradient(#aa0000, #600000);
+}
+
+/****************
+ * Statusbox *
+ ****************/
+.statusbox
+{
+ display: block;
+ flex-direction: column;
+ padding: 5px;
+}
+
+.statusbox textarea
+{
+ display: block;
+ width: 592px;
+ margin-bottom: 5px;
+}
+
+.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: #08d345;
+}
+
+.status-interact svg.like.active
+{
+ fill: #fcd202;
+ stroke: #fcd202;
+}
+
+.status-interact svg.like:hover,
+.status-interact svg.like:active,
+.status-interact svg.like:focus
+{
+ stroke: #08d3a5;
+ pointer: select;
+}
+
+.status-interact svg.like:hover,
+.status-interact svg.like:active,
+.statis-interact svg.like:focus
+{
+ stroke: #fcd202;
+ pointer: select;
+}
+
+.status-interact svg.repeat:hover,
+.status-interact svg.repeat:active,
+.statis-interact svg.repeat:focus
+{
+ stroke: #08d345;
+}
+
+.status-interact .count
+{
+ font-size: 14px;
+ padding-bottom: 3px;
+}
+
+/* Emoji reacts */
+.emoji-react-box
+{
+ border-radius: 4px;
+ border: 1px solid #cacaca;
+}
+
+.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 #cacaca;
+}
+
+.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;
+}
+
+.statusbox textarea
+{
+ border: 1px solid #cacaca;
+}
+
+/* Emoji reacts */
+.emoji-reactions
+{
+ display: block;
+ padding: 0;
+ margin-top: 8px;
+ padding-left: 0px !important;
+ margin-bottom: 6px;
+}
+
+.emoji-react-box
+{
+ display: inline-block;
+ list-style-type: none;
+ padding: 3px 7px;
+ margin: 0 4px;
+}
+
+.emoji
+{
+ font-family: Emoji;
+}
+
+/*************************************************
+ * LISTS *
+ *************************************************/
+ul.large-list
+{
+ width: 500px;
+ border-radius: 15px;
+ background-color: #f8f8f8;
+ border: 1px solid #cacaca;
+ 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 #dadada;
+}
+
+/* Navigation */
+.navigation,
+.tabs
+{
+ table-layout: fixed;
+ background-color: #f3f3f3;
+ color: #000;
+ width: 100%;
+ border-spacing: 0px;
+ box-shadow: 0px 1px 0px #dadada;
+}
+
+.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 #aa0000;
+}
+
+.tabs .tab-btn:hover,
+.tabs .tab-btn:active
+{
+ border-bottom: 3px solid #600000;
+}
+
+.navigation tr td:not(:last-child),
+.tabs tr td:not(:last-child)
+{
+ border-right: 1px solid #dadada;
+}
+
+.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: #fafafa;
+ 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: 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: 64px;
+ margin: 8px;
+ float: right;
+ font-size: 12px;
+ color: #dadada;
+ text-transform: uppercase;
+ background-color: rgba(0, 0, 0, .7);
+}
+
+.menu .btn-menu:hover
+{
+ background-color: #eaeaea;
+ color: #000;
+}
+
+.nolink
+{
+ text-decoration: none;
+}
diff --git a/static/config_appearance.html b/static/config_appearance.html
index 97dca06..dd39bef 100644
--- a/static/config_appearance.html
+++ b/static/config_appearance.html
@@ -8,8 +8,7 @@
diff --git a/static/index.html b/static/index.html
index 40c8874..e372534 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,44 +7,48 @@
-
- 
- %s
-
- %s
-
-
-
-
-
-
-
-
-
-
- |
- %s
- |
+
+
+
+ %s
+
+
+
+
+
+
+
+
+ |
+ %s
+ |
-
-
-
-
+
+
+
+
+