youtube: remove mode parameter, use CSS prefers-color-scheme - frontends - front-ends for some sites (experiment)
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 596b6dd0de7c2971acf63b959441ad53af008d85
(DIR) parent acdf648b5e2cbdd1176045ec8e184103bd8f6f1c
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Mon, 20 Jul 2020 21:51:00 +0200
youtube: remove mode parameter, use CSS prefers-color-scheme
Use system dark/light mode.
Diffstat:
M youtube/cgi.c | 41 ++-----------------------------
A youtube/css/style.css | 63 +++++++++++++++++++++++++++++++
2 files changed, 65 insertions(+), 39 deletions(-)
---
(DIR) diff --git a/youtube/cgi.c b/youtube/cgi.c
@@ -21,7 +21,7 @@ extern char **environ;
static int curpage = 1;
/* CGI parameters */
-static char rawsearch[4096], search[4096], mode[16], order[16], page[64];
+static char rawsearch[4096], search[4096], order[16], page[64];
static char chan[1024], user[1024];
void
@@ -76,23 +76,6 @@ parsecgi(void)
}
}
- /* mode */
- if ((p = getparam(query, "m"))) {
- if (decodeparam(mode, sizeof(mode), p) != -1) {
- /* fixup first character (label) for matching */
- if (mode[0])
- mode[0] = tolower((unsigned char)mode[0]);
- /* allowed themes */
- if (strcmp(mode, "light") &&
- strcmp(mode, "dark") &&
- strcmp(mode, "pink") &&
- strcmp(mode, "templeos"))
- mode[0] = '\0';
- }
- }
- if (!mode[0])
- snprintf(mode, sizeof(mode), "light");
-
/* search */
if ((p = getparam(query, "q"))) {
if ((len = strcspn(p, "&")) && len + 1 < sizeof(rawsearch)) {
@@ -135,19 +118,13 @@ render(struct search_response *r)
}
printf(" sorted by %s</title>\n", order);
OUT(
- "<link rel=\"stylesheet\" href=\"css/");
- xmlencode(mode);
- OUT(
- ".css\" type=\"text/css\" media=\"screen\" />\n"
+ "<link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\" media=\"screen\" />\n"
"<link rel=\"icon\" type=\"image/png\" href=\"/favicon.png\" />\n"
"<meta content=\"width=device-width\" name=\"viewport\" />\n"
"</head>\n"
"<body class=\"search\">\n"
"<form method=\"get\" action=\"\">\n");
- OUT("<input type=\"hidden\" name=\"m\" value=\"");
- xmlencode(mode);
- OUT("\" />\n");
if (chan[0]) {
OUT("<input type=\"hidden\" name=\"chan\" value=\"");
xmlencode(chan);
@@ -183,14 +160,6 @@ render(struct search_response *r)
printf(" <option value=\"views\"%s>Views</option>\n", !strcmp(order, "views") ? " selected=\"selected\"" : "");
OUT(
" </select>\n"
- " <label for=\"m\">Style: </label>\n");
-
- if (!strcmp(mode, "light"))
- OUT("\t\t<input type=\"submit\" name=\"m\" value=\"Dark\" title=\"Dark mode\" id=\"m\" accesskey=\"s\"/>\n");
- else
- OUT("\t\t<input type=\"submit\" name=\"m\" value=\"Light\" title=\"Light mode\" id=\"m\" accesskey=\"s\"/>\n");
-
- OUT(
" </td>\n"
"</tr>\n"
"</table>\n"
@@ -261,8 +230,6 @@ render(struct search_response *r)
OUT("user=");
xmlencode(videos[i].userid);
}
- OUT("&m=");
- xmlencode(mode);
OUT("\">");
xmlencode(videos[i].channeltitle);
OUT("</a>");
@@ -315,8 +282,6 @@ render(struct search_response *r)
OUT("&page=");
snprintf(tmp, sizeof(tmp), "%d", curpage - 1);
xmlencode(tmp);
- OUT("&m=");
- xmlencode(mode);
OUT("&o=");
xmlencode(order);
OUT("\" rel=\"prev\" accesskey=\"p\">← prev</a>\n");
@@ -330,8 +295,6 @@ render(struct search_response *r)
OUT("&page=");
snprintf(tmp, sizeof(tmp), "%d", curpage + 1);
xmlencode(tmp);
- OUT("&m=");
- xmlencode(mode);
OUT("&o=");
xmlencode(order);
OUT("\" rel=\"next\" accesskey=\"n\">next →</a>\n");
(DIR) diff --git a/youtube/css/style.css b/youtube/css/style.css
@@ -0,0 +1,63 @@
+body {
+ background-color: #fff;
+ color: #000;
+ max-width: 80ex;
+ margin: 0 auto;
+ padding: 3px;
+}
+form {
+ margin: 0;
+}
+.nowrap {
+ whitespace: no-wrap;
+}
+.a-r {
+ text-align: right;
+}
+table.videos,
+table.search,
+table.search .input,
+input.search {
+ width: 100%;
+}
+table.videos {
+ border-collapse: collapse;
+}
+table.videos tr td {
+ vertical-align: top;
+ padding: 0 3px;
+}
+table.videos tr.v:hover td {
+ background-color: #eee;
+}
+td.thumb {
+ width: 120px;
+ text-align: center;
+}
+td.thumb img {
+ height: 90px;
+}
+a {
+ color: #000;
+}
+hr {
+ height: 1px;
+ border: 0;
+ border-bottom: 1px solid #777;
+}
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #000;
+ color: #ccc;
+ }
+ table.videos tr.v:hover td {
+ background-color: #111;
+ }
+ a {
+ color: #fff;
+ }
+ hr {
+ border-color: 1px solid #222;
+ }
+}