Theme reworking and dark theme
FossilOrigin-Name: 3b07c47b0c552f2b9a76b8e5ba3dc0ae16477d60b018694a6cfbcca5b5c419d5
This commit is contained in:
nekobit
parent
97bd6b561d
commit
68528563ca
9 changed files with 289 additions and 1306 deletions
218
dist/treebird-dark.css
vendored
Normal file
218
dist/treebird-dark.css
vendored
Normal 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
71
dist/treebird20.css → dist/treebird.css
vendored
|
|
@ -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
1258
dist/treebird20-dark.css
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue