From 661272026c650f01c6ab16d89233445aa4493299 Mon Sep 17 00:00:00 2001 From: nekobit Date: Fri, 15 Jul 2022 05:24:33 +0000 Subject: [PATCH] Sidebar opacity, fix dark theme, and other stuff FossilOrigin-Name: 9e6dd5bad46fd36aaa7e1cac0b0ac4507b9aafe89613dd98e184040835398c83 --- dist/treebird-dark.css | 209 +++++++++++++++++++++++++++++++++- dist/treebird.css | 52 ++++++--- src/base_page.c | 11 +- src/cookie.c | 1 + src/cookie.h | 1 + src/local_config.h | 1 + src/local_config_set.c | 51 ++++----- src/local_config_set.h | 36 +++++- src/main.c | 5 +- src/query.c | 1 + src/query.h | 1 + static/config_appearance.tmpl | 5 + static/index.tmpl | 3 + 13 files changed, 329 insertions(+), 48 deletions(-) diff --git a/dist/treebird-dark.css b/dist/treebird-dark.css index 55e23db..f541ea2 100644 --- a/dist/treebird-dark.css +++ b/dist/treebird-dark.css @@ -1,5 +1,4 @@ /* Dark color overrides */ - html { background-color: #202020; @@ -17,7 +16,7 @@ body #navbar { - border-top: 2px solid #5e5e5e; + border-top: 2px solid #4e4e4e; background: linear-gradient(#3e3e3e, #262626); border-bottom: 1px solid #101010; } @@ -50,7 +49,7 @@ a, a:visited, a:hover, a:active .sidebar { - background-color: #222; + background-color: rgba(34, 34, 34, var(--sidebar-opacity)); } .btn @@ -76,6 +75,16 @@ a, a:visited, a:hover, a:active cursor: pointer; } +.sidebarbtn +{ + border: 1px solid transparent; +} + +.sidebarbtn:hover +{ + border: 1px solid #505050; +} + .sidebarbtn, .sidebarbtn:visited { color: #808080; @@ -147,9 +156,15 @@ select border-color: #666; } +select:hover +{ + background: linear-gradient(#666, #505050); +} + .account-sidebar { background-color: #404040; + border-bottom: 1px dashed #505050; } .header-btn @@ -278,3 +293,191 @@ ul.large-list li .edit-list-btn border: 1px solid #515151; padding: 3px 7px; } + +.sidebarbtn-sub +{ + color: unset; +} + + +#leftbar ul.sidebar-config +{ + background: linear-gradient(#303030, #202020); + color: #cacaca; + border-radius: 6px; + padding: 4px; + margin: 8px; + border: 1px solid #505050; + box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1); +} + +.sidebarbtn-sub:active, .sidebarbtn-sub:hover +{ + background-color: #505050; + box-shadow: 0px 1px 0px #606060; +} + +input[type=submit].post-btn +{ + + background: linear-gradient(#404040, #303030); + border: 1px solid #505050; +} + +input[type=submit].post-btn:hover +{ + + background: linear-gradient(#505050, #404040); + border: 1px solid #505050; +} + +.notification-compact +{ + scrollbar-color: #404040 transparent; +} + +.notification-compact .notification-content.is-mention +{ + color: #f3f3f3; +} + +.notification +{ + border-bottom: 1px solid #505050; + width: 100%; +} + +.sidebar-embed-container .navigation +{ + background-color: rgba(60, 62, 64, .5); +} + +.navigation tr td:not(:last-child), .tabs tr td:not(:last-child) +{ + border-right: 1px solid #606060; +} + +.navigation, .tabs +{ + box-shadow: 0px 1px 0px #606060; +} + +input[type=range] { + -webkit-appearance: none; + appearance: none; + height: 12px; + background: linear-gradient(#404040, #303030); + border: 1px solid #505050; + border-radius: 4px; + outline: none; + vertical-align: middle; +} + +input[type=range]::-webkit-slider-thumb, +input[type=range]::-moz-range-thumb +{ + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border: 1px solid #303236; + background: linear-gradient(#75777c, #505256); + cursor: pointer; +} + +/* Accounts */ +.acct-header +{ + z-index: 1; + padding-left: 160px; + background: linear-gradient(#505053, #303033); + border-bottom: 1px solid #202020; + background-color: #e8e8e8; +} + +.account-info +{ + background: linear-gradient(#28282b, #37373a); + border-bottom: 1px solid #202020; + color: #cacaca; +} + +.tabs .tab-btn:hover, .tabs .tab-btn:active +{ + background: linear-gradient(#404040, #303032); +} + +.tabs .tab-btn.active, .tabs .tab-btn:checked +{ + color: #eee; + background: linear-gradient(#505052, #404045); +} + +.tabs .tab-btn +{ + color: #808080; + border-bottom: 2px solid #303030; +} + +.btn-disabled, .btn-disabled:hover +{ + background: #252525; + color: #606060; +} + +.header-btn:hover, .header-btn:active +{ + background: linear-gradient(#5c5c5c,#444); +} + +html, body { + scrollbar-color: #303030 #101010; +} + +.file-uploads-container .file-upload +{ + overflow: hidden; + display: inline-block; + width: 200px; + margin: 2px 4px; + background: linear-gradient(#, #f7f7f7); + border: 1px solid #606060; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +.file-upload .upload-info { + background: linear-gradient(#202020, #101010); + border-top: 1px solid #505050; + color: #ccc; +} + +.btn-icon +{ + border: 1px solid #5f6376; + background-color: #757991; + text-align: middle; + vertical-align: middle; + border-radius: 3px; + cursor: pointer; +} + +.btn-icon svg +{ + stroke: #ddd; +} + +.btn-icon:hover +{ + background-color: #696d82; +} + +.btn-icon:active +{ + background-color: #4e5161; +} + +.nav-symbol +{ + color: #aaa; +} diff --git a/dist/treebird.css b/dist/treebird.css index c400d33..a38a086 100644 --- a/dist/treebird.css +++ b/dist/treebird.css @@ -1,3 +1,9 @@ +/* Variables */ +:root +{ + --sidebar-opacity: 1.0; +} + * { margin: 0; @@ -91,16 +97,8 @@ table.ui-table td vertical-align: top; } -#content -{ - 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 #fff; background: linear-gradient(#fbfbfb, #ececef); width: 1000px; @@ -208,7 +206,7 @@ table.ui-table td min-height: 600px; max-width: 180px; min-width: 180px; - background-color: #eaecf0; + background-color: rgba(234, 236, 240, var(--sidebar-opacity)); } .sidebar-frame @@ -461,6 +459,29 @@ select:hover background: linear-gradient(#f0f0f0, #d0d0d0); } +input[type=range] { + -webkit-appearance: none; + appearance: none; + height: 12px; + background: linear-gradient(#f3f3f3, #d5d5d5); + border: 1px solid #cacaca; + border-radius: 4px; + outline: none; + vertical-align: middle; +} + +input[type=range]::-webkit-slider-thumb, +input[type=range]::-moz-range-thumb +{ + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border: 1px solid #303236; + background: linear-gradient(#75777c, #505256); + cursor: pointer; +} + /************************************************* * BUTTONS * *************************************************/ @@ -538,6 +559,11 @@ input[type=button], input[type=submit] cursor: pointer; } +.btn-icon svg +{ + stroke: #ffffff; +} + .btn-icon:hover { background-color: #9096b3; @@ -548,13 +574,13 @@ input[type=button], input[type=submit] background-color: #747890; } -.post-btn +input[type=submit].post-btn { background: linear-gradient(#aa0000, #900000); padding: 2px 25px 3px !important; font-size: 15px; border-radius: 4px; - border: none !important; + border: none; color: #fff; } @@ -2069,7 +2095,6 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content .file-upload-btn svg { - stroke: #ffffff; width: 14px; height: 14px; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); @@ -2496,7 +2521,7 @@ input[type=submit].chatbox-btn { transform: rotate(-33deg) skew(-30deg); border-radius: 75% 0 75% 75%; - margin-left: 31px; + margin-left: 28px; } .is-bun:before, .is-bun:after @@ -2682,6 +2707,7 @@ input[type=submit].chatbox-btn { padding: 0; margin: 0; + border-radius: 0px; } #main-page, #navbar diff --git a/src/base_page.c b/src/base_page.c index 9f2a308..7ec1515 100644 --- a/src/base_page.c +++ b/src/base_page.c @@ -55,6 +55,8 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t* struct mstdnt_storage storage = { 0 }; struct mstdnt_notification* notifs = NULL; size_t notifs_len = 0; +#define SIDEBAR_CSS_LEN 128 + char sidebar_css[SIDEBAR_CSS_LEN]; if (keyint(ssn->cookies.logged_in)) login_string = ""; @@ -131,10 +133,17 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t* ssn->config.theme, ssn->config.themeclr ? "-dark" : ""); } - + + if (ssn->config.sidebar_opacity) + { + float sidebar_opacity = (float)ssn->config.sidebar_opacity / 255.0f; + snprintf(sidebar_css, SIDEBAR_CSS_LEN, ":root { --sidebar-opacity: %.2f; }", + sidebar_opacity); + } struct index_template index_tmpl = { .title = L10N[locale][L10N_APP_NAME], + .sidebar_css = sidebar_css, .theme_str = theme_str, .prefix = config_url_prefix, .background_url = background_url_css, diff --git a/src/cookie.c b/src/cookie.c index 7aa8509..3b1fb2e 100644 --- a/src/cookie.c +++ b/src/cookie.c @@ -69,6 +69,7 @@ char* read_cookies_env(struct cookie_values* cookies) { "statdope", &(cookies->stat_dope), key_int }, { "statoneclicksoftware", &(cookies->stat_oneclicksoftware), key_int }, { "statemojolikes", &(cookies->stat_emojo_likes), key_int }, + { "sidebaropacity", &(cookies->sidebar_opacity), key_int }, { "stathidemuted", &(cookies->stat_hide_muted), key_int }, { "instanceshowshoutbox", &(cookies->instance_show_shoutbox), key_int }, { "instancepanel", &(cookies->instance_panel), key_int }, diff --git a/src/cookie.h b/src/cookie.h index 5e4dfc3..269169b 100644 --- a/src/cookie.h +++ b/src/cookie.h @@ -45,6 +45,7 @@ struct cookie_values struct key stat_hide_muted; struct key instance_show_shoutbox; struct key instance_panel; + struct key sidebar_opacity; struct key notif_embed; }; diff --git a/src/local_config.h b/src/local_config.h index 9efb231..3eb092f 100644 --- a/src/local_config.h +++ b/src/local_config.h @@ -41,6 +41,7 @@ struct local_config int instance_show_shoutbox; int instance_panel; int notif_embed; + int sidebar_opacity; }; #endif // LOCAL_CONFIG_H diff --git a/src/local_config_set.c b/src/local_config_set.c index 5fdd725..406ecf9 100644 --- a/src/local_config_set.c +++ b/src/local_config_set.c @@ -22,13 +22,13 @@ #define post_bool_intp(post) (post->is_set ? keypint(post) : 0) -int set_config_str(struct session* ssn, - char** v, - char* cookie_name, - struct key* post, - struct key* cookie, - enum config_page page, - enum config_page curr_page) +void set_config_str(struct session* ssn, + char** v, + char* cookie_name, + struct key* post, + struct key* cookie, + enum config_page page, + enum config_page curr_page) { if (page == curr_page) { @@ -47,13 +47,13 @@ int set_config_str(struct session* ssn, return 0; } -int set_config_int(struct session* ssn, - int* v, - char* cookie_name, - struct key* post, - struct key* cookie, - enum config_page page, - enum config_page curr_page) +void set_config_int(struct session* ssn, + int* v, + char* cookie_name, + struct key* post, + struct key* cookie, + enum config_page page, + enum config_page curr_page) { if (page == curr_page) { @@ -77,23 +77,18 @@ int set_config_int(struct session* ssn, // Shorthand for the arguments passed into functions below #define LOAD_CFG_SIM(strcookie, varname) ssn, &(ssn->config.varname), (strcookie), &(ssn->post.varname), &(ssn->cookies.varname), page -void load_config(struct session* ssn, mastodont_t* api, enum config_page page) +struct mstdnt_storage* load_config(struct session* ssn, mastodont_t* api, enum config_page page) { + struct mstdnt_attachment* attachments = NULL; + struct mstdnt_storage* storage = NULL; + size_t attachments_len = 0; if (ssn->post.set.is_set) { - struct mstdnt_attachment* attachments = NULL; - struct mstdnt_storage* storage = NULL; - if (try_upload_media(&storage, ssn, api, &attachments, NULL) == 0) - { - struct key atm = { .type.s = attachments[0].url, .is_set = 1 }; - set_config_str(ssn, &(ssn->config.background_url), "background_url", &(atm), &(ssn->cookies.background_url), page, CONFIG_APPEARANCE); - } - - if (storage) - cleanup_media_storages(ssn, storage); + try_upload_media(&storage, ssn, api, &attachments, NULL); } - if (!ssn->post.set.is_set) - ssn->config.background_url = keystr(ssn->cookies.background_url); + struct key atm = { .type.s = attachments ? attachments[0].url : NULL, .is_set = attachments ? 1 : 0 }; + set_config_str(ssn, &(ssn->config.background_url), "background_url", &(atm), &(ssn->cookies.background_url), page, CONFIG_APPEARANCE); + set_config_int(LOAD_CFG_SIM("sidebaropacity", sidebar_opacity), CONFIG_APPEARANCE); set_config_str(LOAD_CFG_SIM("theme", theme), CONFIG_APPEARANCE); set_config_int(LOAD_CFG_SIM("themeclr", themeclr), CONFIG_APPEARANCE); set_config_int(LOAD_CFG_SIM("jsactions", jsactions), CONFIG_GENERAL); @@ -111,4 +106,6 @@ void load_config(struct session* ssn, mastodont_t* api, enum config_page page) set_config_int(LOAD_CFG_SIM("notifembed", notif_embed), CONFIG_GENERAL); set_config_int(LOAD_CFG_SIM("interact_img", interact_img), CONFIG_GENERAL); set_config_int(LOAD_CFG_SIM("lang", lang), CONFIG_GENERAL); + + return storage; } diff --git a/src/local_config_set.h b/src/local_config_set.h index d73a10a..29e6677 100644 --- a/src/local_config_set.h +++ b/src/local_config_set.h @@ -30,7 +30,18 @@ enum config_page CONFIG_APPEARANCE, }; -int set_config_str(struct session* ssn, +/*! + * Sets a config string + * + * \param ssn The session to modify + * \param v The (config) character pointer to modify + * \param cookie_name The cookie name to match + * \param post The post value to check + * \param cookie The cookie value to store into + * \param page The page that this value is expected to be set on. + * \param curr_page The page to check against + */ +void set_config_str(struct session* ssn, char** v, char* cookie_name, struct key* post, @@ -38,7 +49,18 @@ int set_config_str(struct session* ssn, enum config_page page, enum config_page curr_page); -int set_config_int(struct session* ssn, +/*! + * Sets a config integer + * + * \param ssn The session to modify + * \param v The (config) integer pointer to modify + * \param cookie_name The cookie name to match + * \param post The post value to check + * \param cookie The cookie value to store into + * \param page The page that this value is expected to be set on. + * \param curr_page The page to check against + */ +void set_config_int(struct session* ssn, int* v, char* cookie_name, struct key* post, @@ -46,6 +68,14 @@ int set_config_int(struct session* ssn, enum config_page page, enum config_page curr_page); -void load_config(struct session* ssn, mastodont_t* api, enum config_page page); +/*! + * Loads the config and sets the values based on POST or session + * + * \param ssn The session + * \param api mastodont-c api + * \param page Page enum, to ensure that config changes on different pages don't effect other cookies + * \return Storage if files were uploaded, must free. This might change + */ +struct mstdnt_storage* load_config(struct session* ssn, mastodont_t* api, enum config_page page); #endif // LOCAL_CONFIG_SET_H diff --git a/src/main.c b/src/main.c index 3aba978..492834b 100644 --- a/src/main.c +++ b/src/main.c @@ -137,6 +137,7 @@ int main(void) .instance_show_shoutbox = 1, .instance_panel = 1, .notif_embed = 1, + .sidebar_opacity = 255, }, .cookies = {{}}, .post = {{}}, @@ -156,7 +157,7 @@ int main(void) char* path_info = getenv("PATH_INFO"); if (path_info && strcmp(path_info, "/config/appearance") == 0) page = CONFIG_APPEARANCE; - load_config(&ssn, &api, page); + struct mstdnt_storage* attachments = load_config(&ssn, &api, page); // Load current account information get_account_info(&api, &ssn); @@ -170,6 +171,8 @@ int main(void) free_files(&(keyfile(ssn.post.files))); if (ssn.logged_in) mstdnt_cleanup_account(&(ssn.acct)); mastodont_storage_cleanup(&(ssn.acct_storage)); + if (attachments) + cleanup_media_storages(&ssn, attachments); ++run_count; } diff --git a/src/query.c b/src/query.c index f07ceab..63b2d18 100644 --- a/src/query.c +++ b/src/query.c @@ -118,6 +118,7 @@ char* read_post_data(struct post_values* post) { "statemojolikes", &(post->stat_emojo_likes), key_int }, { "stathidemuted", &(post->stat_hide_muted), key_int }, { "instanceshowshoutbox", &(post->instance_show_shoutbox), key_int }, + { "sidebaropacity", &(post->sidebar_opacity), key_int }, { "instancepanel", &(post->instance_panel), key_int }, { "notifembed", &(post->notif_embed), key_int }, { "file", &(post->files), key_files } diff --git a/src/query.h b/src/query.h index 61c21f8..78f25a8 100644 --- a/src/query.h +++ b/src/query.h @@ -64,6 +64,7 @@ struct post_values struct key visibility; // String struct key instance; // String struct key emojoindex; // Int + struct key sidebar_opacity; // Int // Navigation struct key min_id; // String diff --git a/static/config_appearance.tmpl b/static/config_appearance.tmpl index 1e7b0b8..764f3ef 100644 --- a/static/config_appearance.tmpl +++ b/static/config_appearance.tmpl @@ -31,6 +31,11 @@ + diff --git a/static/index.tmpl b/static/index.tmpl index bdd8525..394338f 100644 --- a/static/index.tmpl +++ b/static/index.tmpl @@ -8,6 +8,9 @@ {{ %s : theme_str }} +