reactor
/
ptth
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

💄 update: add base64 favicons and WIP dark mode

main
_ 2020-12-18 18:08:17 +00:00
parent 1cf3ff5313
commit 25d22a16e0
3 changed files with 70 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 643 B

After

Width:  |  Height:  |  Size: 595 B

6
handlebars/relay/relay_server_list.html
View File

@ -2,6 +2,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
<style> <style>
body { body {
font-family: sans-serif; font-family: sans-serif;

66
handlebars/server/file_server_dir.html
View File

@ -2,10 +2,52 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
<style> <style>
body { body {
margin: 0px;
font-family: sans-serif; font-family: sans-serif;
} }
.app {
--main-bg-color: white;
--main-fg-color: black;
--main-link-color: unset;
--odd-row-bg-color: #d8d8d8;
--grey-color: #555;
--dark-mode-transition: all 1s ease;
background-color: var(--main-bg-color);
color: var(--main-fg-color);
padding: 8px;
transition: var(--dark-mode-transition);
}
.light_switch {
display: none;
}
.light_switch_label {
cursor: pointer;
padding: 8px;
background-color: var(--main-fg-color);
color: var(--main-bg-color);
}
.light_switch_label::before {
content: "[ ] ";
}
a {
color: var(--main-link-color);
transition: var(--dark-mode-transition);
}
th {
color: var(--main-fg-color);
transition: var(--dark-mode-transition);
}
td { td {
padding: 0; padding: 0;
} }
@ -17,21 +59,38 @@
text-decoration: none; text-decoration: none;
} }
.grey { .grey {
color: #888; color: var(--grey-color);
text-align: right; text-align: right;
transition: var(--dark-mode-transition);
} }
.entry_list { .entry_list {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 1em;
} }
tbody tr:nth-child(odd) { tbody tr:nth-child(odd) {
background-color: #ddd; background-color: var(--odd-row-bg-color);
transition: var(--dark-mode-transition);
}
/* Dark mode colors */
[type="checkbox"]:checked + .app {
--main-bg-color: black;
--main-fg-color: white;
--main-link-color: white;
--odd-row-bg-color: #333;
--grey-color: #aaa;
}
[type="checkbox"]:checked + .app .light_switch_label::before {
content: "[X] ";
} }
</style> </style>
<title>{{path}} {{server_name}}</title> <title>{{path}} {{server_name}}</title>
</head> </head>
<body> <body>
<input type="checkbox" class="light_switch" id="light_switch">
<div class="app">
<p>{{server_name}}</p> <p>{{server_name}}</p>
<p>{{path}}</p> <p>{{path}}</p>
@ -61,5 +120,8 @@
</tbody> </tbody>
</table> </table>
<!-- Doesn't work perfectly yet -->
<label for="light_switch" class="light_switch_label">Dark mode</label>
</page>
</body> </body>
</html> </html>