From 2ab63c339812dc0466d1c7af9ce73292da30e253 Mon Sep 17 00:00:00 2001 From: "me@ow.nekobit.net" Date: Thu, 14 Apr 2022 03:51:26 +0000 Subject: [PATCH] Dark theme by Grumbulon + other fixes FossilOrigin-Name: c717ce40e921648165295897c407af7d7a82c7c3ab74ef6ff7ef27b94fa17912 --- dist/treebird20-dark.css | 1209 +++++++++++++++++++++++++++++++++ dist/treebird20.css | 4 +- src/base_page.c | 2 + src/cookie.c | 1 + src/cookie.h | 1 + src/key.c | 19 + src/key.h | 1 + static/config_appearance.html | 4 +- static/post.html | 2 +- static/status.html | 6 +- 10 files changed, 1241 insertions(+), 8 deletions(-) create mode 100644 dist/treebird20-dark.css diff --git a/dist/treebird20-dark.css b/dist/treebird20-dark.css new file mode 100644 index 0000000..ab31790 --- /dev/null +++ b/dist/treebird20-dark.css @@ -0,0 +1,1209 @@ +/* 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; + +} + +#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, +.mention span +{ + color: #5b4852; + text-decoration: none; + background-color: #c9bac2; + 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; + border-top: 2px solid #303030; + border-bottom: 2px solid #1c1c1c; + background: linear-gradient(#2c2c2c, #202020); + 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: #a68f8f; + 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 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; + background: #202020; + 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; + color: #f4ffff; +} + +/* Emoji reacts */ +.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/dist/treebird20.css b/dist/treebird20.css index 371f81f..b13a6c8 100644 --- a/dist/treebird20.css +++ b/dist/treebird20.css @@ -49,7 +49,6 @@ ul { padding: 8px; } - #main-page { margin: 8px; @@ -63,6 +62,7 @@ ul border-radius: 5px; } + .hidden { display: none; @@ -420,7 +420,7 @@ ul li:first-child a.sidebarbtn } -svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon +svg.like, svg.repeat, svg.follow, svg.reply, svg.in-reply-to-icon, svg.one-click-software, svg.expand { vertical-align: middle; } diff --git a/src/base_page.c b/src/base_page.c index 8b94a87..11fc123 100644 --- a/src/base_page.c +++ b/src/base_page.c @@ -49,6 +49,8 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t* ssn->config.theme = ssn->cookies.theme; if (ssn->cookies.logged_in) login_string = ""; + if (ssn->cookies.themeclr) + ssn->config.themeclr = ssn->cookies.themeclr; if (ssn->cookies.background_url) ssn->config.background_url = ssn->cookies.background_url; } diff --git a/src/cookie.c b/src/cookie.c index 42311e3..5e72a3f 100644 --- a/src/cookie.c +++ b/src/cookie.c @@ -55,6 +55,7 @@ char* read_cookies_env(struct cookie_values* cookies) { "theme", &(cookies->theme), key_string }, { "instance_url", &(cookies->instance_url), key_string }, { "background_url", &(cookies->background_url), key_string }, + { "themeclr", &(cookies->themeclr), key_int }, }; do diff --git a/src/cookie.h b/src/cookie.h index 3c1db61..c996071 100644 --- a/src/cookie.h +++ b/src/cookie.h @@ -27,6 +27,7 @@ struct cookie_values char* theme; char* instance_url; char* background_url; + int themeclr; }; struct http_cookie_info diff --git a/src/key.c b/src/key.c index 29331ea..9d4dec5 100644 --- a/src/key.c +++ b/src/key.c @@ -16,6 +16,8 @@ * along with this program. If not, see . */ +#include +#include #include "key.h" void key_string(char* val, struct form_props* props, void* _arg) @@ -23,3 +25,20 @@ void key_string(char* val, struct form_props* props, void* _arg) char** arg = _arg; *arg = val; } + +void key_int(char* val, struct form_props* form, void* _arg) +{ + char* err; + int* arg = _arg; + + // Convert + long result = strtol(val, &err, 10); + if (err == val || + // Overflow + result == LONG_MIN || result == LONG_MAX) + { + *arg = 0; + return; + } + *arg = result; +} diff --git a/src/key.h b/src/key.h index e5f70de..a2333ff 100644 --- a/src/key.h +++ b/src/key.h @@ -35,5 +35,6 @@ struct key_value_refs }; void key_string(char* val, struct form_props* form, void* arg); +void key_int(char* val, struct form_props* form, void* arg); #endif // KEY_H diff --git a/static/config_appearance.html b/static/config_appearance.html index ef09a44..b1aec18 100644 --- a/static/config_appearance.html +++ b/static/config_appearance.html @@ -15,11 +15,11 @@

Color Scheme

  • - +
  • - +
diff --git a/static/post.html b/static/post.html index d56a41e..e21b649 100644 --- a/static/post.html +++ b/static/post.html @@ -8,7 +8,7 @@
- +
diff --git a/static/status.html b/static/status.html index 741746f..af96fcc 100644 --- a/static/status.html +++ b/static/status.html @@ -79,15 +79,15 @@