diff --git a/dist/treebird-dark.css b/dist/treebird-dark.css
new file mode 100644
index 0000000..9ce4b4f
--- /dev/null
+++ b/dist/treebird-dark.css
@@ -0,0 +1,218 @@
+/* Dark color overrides */
+
+html
+{
+ background-color: #202020;
+}
+
+body
+{
+ color: #fcfcfc;
+}
+
+#main-page
+{
+ border: 1px solid rgba(60, 60, 60, 0.8);
+}
+
+#navbar
+{
+ border-top: 2px solid #5e5e5e;
+ background: linear-gradient(#3e3e3e, #262626);
+ border-bottom: 1px solid #101010;
+}
+
+a, a:visited, a:hover, a:active
+{
+ color: #eaeaea;
+}
+
+#navbar img
+{
+ filter: contrast(0);
+}
+
+.navbar-btn
+{
+ stroke: #aaa;
+}
+
+#navbar span.info
+{
+ color: #aaa;
+}
+
+.mini-links a,
+.mini-links .bullet-separate
+{
+ color: #606060;
+}
+
+.sidebar
+{
+ background-color: #222;
+}
+
+.btn
+{
+ background: linear-gradient(#303030, #252525);
+ color: #bbb;
+ text-decoration: none;
+ padding: 6px 12px;
+}
+
+#main
+{
+ background-color: #202020;
+}
+
+.btn:hover,
+.btn:active,
+.btn-menu:hover,
+.sidebarbtn:hover
+{
+ background: linear-gradient(#424242, #363636);
+ color: #fff;
+ cursor: pointer;
+}
+
+.sidebarbtn, .sidebarbtn:visited
+{
+ color: #808080;
+}
+
+#leftbar, #rightbar
+{
+ border-color: #333;
+}
+
+.btn.active
+{
+ background: linear-gradient(#606060, #d3d3d3);
+ box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2);
+ color: #fff;
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+
+.btn-alt.active,
+.btn-alt:active
+{
+ background: linear-gradient(#ee0000, #aa0000);
+ border-color: #800000;
+}
+
+.btn-alt:hover
+{
+ background: linear-gradient(#aa0000, #ee0000);
+}
+
+.statusbox
+{
+ background-color: #303030;
+ border-color: #606060;
+}
+
+.menubar
+{
+ background: linear-gradient(#404040, #303030);
+ border-color: #505050;
+}
+
+.statusbox textarea,
+input[type=textbox]
+{
+ background-color: #444;
+ border-color: #666;
+ color: #fff;
+}
+
+input[type=submit]
+{
+ border-color: #666;
+}
+
+select
+{
+ background: linear-gradient(#555, #404040);
+ color: #ccc;
+ border-color: #666;
+}
+
+.account-sidebar
+{
+ background-color: #404040;
+}
+
+.header-btn
+{
+ background: unset;
+}
+
+.header-btn span,
+.header-btn .btn-header,
+.header-btn .btn-content,
+.username
+{
+ color: #dadada;
+}
+
+.status-interact svg
+{
+ stroke: #aaa;
+}
+
+.status .instance-info
+{
+ color: #aaa;
+}
+
+.poster-stats .alignend
+{
+ background-color: #202020;
+}
+
+.status-view
+{
+ background-color: #404040;
+ border: 1px solid #505050;
+}
+
+.menu
+{
+ background-color: #454545;
+ color: #ddd;
+ border-color: #585858;
+}
+
+.menu .btn-menu
+{
+ color: #ddd;
+}
+
+.menu .btn-menu:hover
+{
+ box-shadow: 0px 0px 0px 1px #505050;
+}
+
+.time
+{
+ color: #6a6a6a;
+}
+
+.status
+{
+ border-color: #454545;
+}
+
+.in-reply-to-id
+{
+ color: #6c6c6c;
+}
+
+.group-inputbox
+{
+ border-color: #707070;
+}
+
+
diff --git a/dist/treebird20.css b/dist/treebird.css
similarity index 99%
rename from dist/treebird20.css
rename to dist/treebird.css
index e5f3637..ece4059 100644
--- a/dist/treebird20.css
+++ b/dist/treebird.css
@@ -267,6 +267,40 @@ table.ui-table td
}
+.sidebarbtn-sub
+{
+ display: block;
+ color: #000;
+ padding: 8px;
+ border-radius: 4px;
+ padding-left: 24px;
+ text-decoration: none;
+ border: 1px solid transparent;
+}
+
+#leftbar ul.sidebar-config
+{
+ background: linear-gradient(#eef1f9, #bbc3d0);
+ color: #fff;
+ border-radius: 6px;
+ padding: 4px;
+ margin: 8px;
+ border: 1px solid #aaa;
+ box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sidebarbtn-sub.active
+{
+ font-weight: bold;
+}
+
+.sidebarbtn-sub:active, .sidebarbtn-sub:hover
+{
+ background-color: #bbc6d5;
+ border: 1px solid #a8accbcc;
+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
#rightbar
{
border-left: 1px solid #dadada;
@@ -436,7 +470,8 @@ select
.btn:hover,
.btn:active,
-.btn-menu:hover
+.btn-menu:hover,
+.sidebarbtn:hover
{
background: linear-gradient(#606060, #d3d3d3);
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2);
@@ -514,40 +549,6 @@ input[type=button], input[type=submit]
color: #505050;
}
-.sidebarbtn:hover
-{
- background: linear-gradient(#606060, #d3d3d3);
- box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.2);
- color: #fff;
- text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-}
-
-.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;
-}
-
.sidebar-login
{
padding: 18px;
diff --git a/dist/treebird20-dark.css b/dist/treebird20-dark.css
deleted file mode 100644
index 31b65ca..0000000
--- a/dist/treebird20-dark.css
+++ /dev/null
@@ -1,1258 +0,0 @@
-/* Thanks to Grumbulon for the dark theme basis */
-
-*
-{
- margin: 0;
- padding: 0;
- color: #fff;
-}
-
-
-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: #141414;
- min-height: 100%;
-}
-
-/* Basic elements */
-h1, h2, h3, h4
-{
- margin: 12px 0px 6px 0px;
-}
-
-ul
-{
- margin: 12px;
-
-}
-
-select
-{
- background-color: #303030;
-}
-
-#main-page-container
-{
- padding: 8px;
-}
-
-#main-page
-{
- margin: 8px;
- margin-top: 0;
- width: 1000px;
- background-color: #202020;
- border-top: 0 !important;
- margin-left: auto;
- margin-right: auto;
- box-shadow: 0px 2px 5px 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: #ffcccc;
- text-decoration: none;
- background-color: #600000;
- border-radius: 3px;
- padding-left: 2px;
- padding-right: 2px;
- border: 1px solid #aa0000;
-}
-
-.greentext
-{
- color: #00cc00;
-}
-
-/* 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 {
- position: sticky;
- top: 0;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- border-top: 2px solid #303030;
- border-bottom: 2px solid #1c1c1c;
- background: linear-gradient(#373737ea, #2c2c2cea);
- backdrop-filter: saturate(600%) blur(12px);
- 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: #fff;
- /* 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: #f4ffff;
-}
-
-.alignend
-{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- align-items: flex-end;
-}
-
-#main
-{
- width: 608px;
- max-width: 608px !important;
- min-width: 608px;
- border-collapse: collapse !important;
- background-color: #202020;
- padding: 0;
-}
-
-#content
-{
- border-collapse: collapse !important;
- min-height: 600px;
-}
-
-.sidebar
-{
- width: 180px;
- min-height: 600px;
- max-width: 180px;
- min-width: 180px;
- background-color: #1c1c1c;
-}
-
-#leftbar
-{
- border-right: 1px solid #303030;
-}
-
-#leftbar ul
-{
- margin: 0;
- padding: 0;
-}
-
-#leftbar ul li
-{
- list-style-type: none;
-}
-
-
-#rightbar
-{
- border-left: 1px solid #303030;
- min-width: 210px;
- max-width: 210px;
-}
-
-
-/*************************************************
- * 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: #1c1c1c;
- color: #f3f3f3;
-}
-
-/*************************************************
- * BUTTONS *
- *************************************************/
-.sidebarbtn, .btn
-{
- background: linear-gradient(#202020, #141414);
- color: #bfb0b0;
- text-decoration: none;
-}
-
-.sidebarbtn:hover, .btn:hover
-{
- background: linear-gradient(#520000, #290000);
- border-color: #400000;
- color: #ffdddd;
- cursor: pointer;
-}
-
-.sidebarbtn:active, .btn:active
-{
- background: linear-gradient(#520000, #290000);
- border-color: #140000;
- color: #fff;
- cursor: pointer;
-}
-
-.btn-disabled
-{
- color: #8a8a8a !important;
- background: #101010 !important;
-}
-
-.btn-disabled:hover
-{
- background: #101010;
-}
-
-.btn-disabled:active
-{
- background: #101010;
-}
-
-
-input[type=button], input[type=submit]
-{
- border: 1px solid #404040;
- padding: 3px 15px;
-}
-
-/* Make first button glue to header */
-#leftbar ul:first-child .sidebarbtn
-{
- border-top: 0;
-}
-
-.sidebarbtn
-{
- display: block;
- border-bottom: 1px solid #303030;
- padding: 8px 8px 8px 16px;
-}
-
-.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: #303030;
-}
-
-ul li:first-child a.sidebarbtn
-{
- border-top: 1px solid #303030;
-}
-
-/****************************
- * Notifications *
- ***************************/
-.notification
-{
- border-bottom: 1px solid #303030;
- 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 .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;
- 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, svg.one-click-software, svg.expand
-{
- vertical-align: middle;
- stroke: #bfb0b0;
-}
-
-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;
- color: #bfb0b0;
-}
-
-.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 #303030 !important;
- width: 100%;
- border-spacing: 0px;
-}
-
-.status.focused
-{
- background-color: #3d0000;
- 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;
- color: #bfb0b0;
-}
-
-.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: #bfb0b0;
-}
-
-.status .status-content
-{
- margin: 2px 0 0 0;
- overflow-wrap: break-word;
- width: 520px;
- color: #f4ffff;
- 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 #303030;
- 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 #303030;
-}
-
-#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: #cacaca;
-}
-
-.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: #fff;
- 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(#252525, #1c1c1c);
- color: #000;
- padding: 15px 50px;
- border-bottom: 1px solid #303030;
- max-height: 200px;
- overflow: auto;
-}
-
-.acct-pfp
-{
- position: absolute;
- display: inline;
- z-index: 100;
- border: 3px solid #303030;
- 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(#2c2c2c, #202020);
- border-bottom: 1px solid #303030;
- 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: #303030;
- 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;
- border: 1px solid #303030;
- width: 592px;
- max-width: 592px;
- min-width: 592px;
- background: #202020;
- 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: #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;
- 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 #303030;
-}
-
-.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 #303030;
-}
-
-.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: #f4ffff
-}
-
-/* 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: 15px;
- background-color: #f8f8f8;
- border: 1px solid #303030;
- 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 #303030;
-}
-
-/* Navigation */
-.navigation,
-.tabs
-{
- table-layout: fixed;
- background-color: #202020;
- color: #000;
- width: 100%;
- border-spacing: 0px;
- box-shadow: 0px 1px 0px #303030;
-}
-
-.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 #303030;
-}
-
-.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: #303030;
- 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/src/base_page.c b/src/base_page.c
index e1268ee..f5794a1 100644
--- a/src/base_page.c
+++ b/src/base_page.c
@@ -42,6 +42,7 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
set_mstdnt_args(&m_args, ssn);
char* cookie = getenv("HTTP_COOKIE");
enum l10n_locale locale = l10n_normalize(ssn->config.lang);
+ char* theme_str = NULL;
const char* login_string = "";
const char* sidebar_embed = "";
char* background_url_css = NULL;
@@ -123,10 +124,18 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
(g_cache.panel_html.response ?
g_cache.panel_html.response : ""));
- struct index_template index = {
+ if (!(ssn->config.theme && strcmp(ssn->config.theme, "treebird") == 0 &&
+ ssn->config.themeclr == 0))
+ {
+ easprintf(&theme_str, "",
+ ssn->config.theme,
+ ssn->config.themeclr ? "-dark" : "");
+ }
+
+
+ struct index_template index_tmpl = {
.title = L10N[locale][L10N_APP_NAME],
- .theme = ssn->config.theme,
- .theme_clr = ssn->config.themeclr ? "-dark" : "",
+ .theme_str = theme_str,
.prefix = config_url_prefix,
.background_url = background_url_css,
.name = L10N[locale][L10N_APP_NAME],
@@ -163,7 +172,7 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
};
size_t len;
- char* data = tmpl_gen_index(&index, &len);
+ char* data = tmpl_gen_index(&index_tmpl, &len);
if (!data)
{
@@ -182,6 +191,7 @@ cleanup:
free(account_sidebar_str);
free(background_url_css);
free(instance_str);
+ free(theme_str);
}
void send_result(char* status, char* content_type, char* data, size_t data_len)
diff --git a/src/notifications.c b/src/notifications.c
index 6c17841..d8dd2f8 100644
--- a/src/notifications.c
+++ b/src/notifications.c
@@ -259,6 +259,7 @@ void content_notifications(struct session* ssn, mastodont_t* api, char** data)
void content_notifications_compact(struct session* ssn, mastodont_t* api, char** data)
{
+ char* theme_str = NULL;
struct mstdnt_args m_args;
set_mstdnt_args(&m_args, ssn);
char* page, *notif_html = NULL;
@@ -308,10 +309,18 @@ void content_notifications_compact(struct session* ssn, mastodont_t* api, char**
}
+ // Set theme
+ if (!(ssn->config.theme && strcmp(ssn->config.theme, "treebird") == 0 &&
+ ssn->config.themeclr == 0))
+ {
+ easprintf(&theme_str, "",
+ ssn->config.theme,
+ ssn->config.themeclr ? "-dark" : "");
+ }
+
size_t len;
struct notifications_embed_template tdata = {
- .theme = ssn->config.theme,
- .theme_var = ssn->config.themeclr ? "-dark" : NULL,
+ .theme_str = theme_str,
.notifications = notif_html,
.navigation_box = navigation_box
};
@@ -321,9 +330,10 @@ void content_notifications_compact(struct session* ssn, mastodont_t* api, char**
send_result(NULL, NULL, page, len);
mastodont_storage_cleanup(&storage);
- if (notif_html) free(notif_html);
- if (navigation_box) free(navigation_box);
- if (page) free(page);
+ free(notif_html);
+ free(navigation_box);
+ free(page);
+ free(theme_str);
}
void api_notifications(struct session* ssn, mastodont_t* api, char** data)
diff --git a/static/config_appearance.tmpl b/static/config_appearance.tmpl
index 562c4c4..1e7b0b8 100644
--- a/static/config_appearance.tmpl
+++ b/static/config_appearance.tmpl
@@ -9,7 +9,7 @@
diff --git a/static/index.tmpl b/static/index.tmpl
index e9491f7..bc1c244 100644
--- a/static/index.tmpl
+++ b/static/index.tmpl
@@ -4,7 +4,8 @@
{{ %s : title }}
-
+
+ {{ %s : theme_str }}
diff --git a/static/notifications_embed.tmpl b/static/notifications_embed.tmpl
index ed6a6d7..e8d7e25 100644
--- a/static/notifications_embed.tmpl
+++ b/static/notifications_embed.tmpl
@@ -3,7 +3,8 @@
Notifications embed
-
+
+ {{ %s : theme_str }}