sam/treebird
sam/treebird
1
0
Fork 0
forked from mirrors/treebird
Code Issues Pull requests Projects Releases Wiki Activity

Theme reworking and dark theme

Browse source 
FossilOrigin-Name: 3b07c47b0c552f2b9a76b8e5ba3dc0ae16477d60b018694a6cfbcca5b5c419d5
This commit is contained in:
nekobit 2022-07-08 08:19:42 +00:00
parent 97bd6b561d
commit 68528563ca
9 changed files with 289 additions and 1306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

218
dist/treebird-dark.css vendored Normal file
View file

@ -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;
}

71
dist/treebird20.css → dist/treebird.css vendored
View file

@ -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;

1258
dist/treebird20-dark.css vendored
View file

File diff suppressed because it is too large Load diff

18
src/base_page.c
View file

@ -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 = "<a href=\"login\" id=\"login-header\">Login / Register</a>";
const char* sidebar_embed = "<iframe class=\"sidebar-frame\" loading=\"lazy\" src=\"/notifications_compact\"></iframe>";
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, "<link rel=\"stylesheet\" type=\"text/css\" href=\"/%s%s.css\">",
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)

20
src/notifications.c
View file

@ -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, "<link rel=\"stylesheet\" type=\"text/css\" href=\"/%s%s.css\">",
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)

2
static/config_appearance.tmpl
View file

@ -9,7 +9,7 @@
<li>
<label for="cfgthemevar">Theme variant</label>
<select name="theme" id="cfgthemevar">
<option value="treebird20" title="Created by nekobit (@neko@rdrama.cc) | Dark variant created by Grumbulon (@grumbulon@freecumextremist.com)">treebird 2.0 - Default, simple theme</option>
<option value="treebird" title="Created by nekobit (@neko@rdrama.cc) | Former dark variant created by Grumbulon (@grumbulon@freecumextremist.com)">Treebird - Default, simple theme</option>
<option value="solarized" title="Created by coyote (@coyote@pl.lain.sh)">Solarized - Solarized colors for pleasant viewing</option>
</select>
</li>

3
static/index.tmpl
View file

@ -4,7 +4,8 @@
<meta charset="utf-8">
<title>{{ %s : title }}</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" type="text/css" href="/{{ %s : theme }}{{ %s : theme_clr }}.css">
<link rel="stylesheet" type="text/css" href="/treebird.css">
{{ %s : theme_str }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ %s : title }} is a decentralized social media platform">
</head>

3
static/notifications_embed.tmpl
View file

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<title>Notifications embed</title>
<link rel="stylesheet" type="text/css" href="/{{%s:theme}}{{%s:theme_var}}.css">
<link rel="stylesheet" type="text/css" href="/treebird.css">
{{ %s : theme_str }}
<style>
html, body
{

2
static/reactions_btn.tmpl
View file

@ -1,6 +1,6 @@
<td>
<a target="_parent" href="{{%s:prefix}}/status/{{%s:status_id}}/react#{{%s:status_id}}" class="pointer statbtn react-btn">
<svg class="emoji-btn" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><g><line x1="9" x2="9" y1="6.9367" y2="11.755" stroke-width="1.7916"/><line x1="15" x2="15" y1="6.9367" y2="11.755" stroke-width="1.7916"/><path d="m7.0891 15.099s4.7206 4.7543 9.7109 0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="1.9764"/></g></svg>
<svg class="emoji-btn" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><g><line x1="9" x2="9" y1="6.9367" y2="11.755" stroke-width="1.7916"/><line x1="15" x2="15" y1="6.9367" y2="11.755" stroke-width="1.7916"/><path d="m7.0891 15.099s4.7206 4.7543 9.7109 0" stroke-linecap="round" stroke-linejoin="miter" stroke-width="1.9764"/></g></svg>
</a>
{{%s:emoji_picker}}