From 4ad695eed6c2a3fa7fb164c4a0e4972dab2691d2 Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Fri, 25 Sep 2020 05:23:23 +0200
Subject: [wip] client-side color-scheme handling

---
 data/style.scss | 667 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 667 insertions(+)
 create mode 100644 data/style.scss

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
new file mode 100644
index 0000000..b2a6882
--- /dev/null
+++ b/data/style.scss
@@ -0,0 +1,667 @@
+/* theme variables can be found at the bottom */
+
+html {
+    font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\"Helvetica Neue\", Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    color: var(--text_color);
+    background: var(--background);
+    position: relative;
+    min-height: 100%;
+}
+
+.container {
+    padding: 1.5rem 5rem;
+}
+
+.title {
+    word-break: break-word;
+}
+
+a {
+    text-decoration: none;
+}
+
+a.root, a.root:visited, .root-chevron {
+    font-weight: bold;
+    color: var(--root_link_color);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a.directory, a.directory:visited {
+    font-weight: bold;
+    color: var(--directory_link_color);
+}
+
+a.file, a.file:visited, .error-back, .error-back:visited {
+    color: var(--file_link_color);
+}
+
+a.symlink, a.symlink:visited {
+    color: var(--symlink_link_color);
+}
+
+a.directory:hover {
+    color: var(--directory_link_color);
+}
+
+a.file:hover {
+    color: var(--file_link_color);
+}
+
+a.symlink:hover {
+    color: var(--symlink_link_color);
+}
+
+.symlink-symbol {
+    display: inline-block;
+    border: 1px solid var(--symlink_link_color);
+    margin-left: 0.5rem;
+    border-radius: .2rem;
+    padding: 0 0.1rem;
+}
+
+nav {
+    padding: 0 5rem;
+    display: flex;
+    justify-content: flex-end;
+}
+
+nav > div {
+    position: relative;
+    margin-left: 0.5rem;
+}
+
+nav p {
+    padding: 0.5rem 1rem;
+    width: 8rem;
+    text-align: center;
+    background: var(--switch_theme_background);
+    color: var(--change_theme_link_color);
+}
+
+nav p + * {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    animation: show 0.5s ease;
+}
+
+@keyframes show {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+nav > div::hover p {
+    cursor: pointer;
+    color: var(--switch_theme_link_color);
+}
+
+nav > div:hover p + * {
+    display: block;
+    border-top: 1px solid var(--switch_theme_border);
+}
+
+nav .qrcode {
+    padding: 0.5rem;
+    background: var(--switch_theme_background);
+}
+
+nav .qrcode img {
+    display: block;
+}
+
+nav .theme {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+nav .theme li {
+    width: 100%;
+    background: var(--switch_theme_background);
+}
+
+nav .theme li a {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0;
+    text-align: center;
+    color: var(--switch_theme_link_color);
+}
+
+nav .theme li a:visited {
+    color: var(--switch_theme_link_color);
+}
+
+nav .theme li a::hover {
+    text-decoration: underline;
+    color: var(--change_theme_link_color_hover);
+}
+
+nav .theme li.active a {
+    font-weight: bold;
+    color: var(--switch_theme_active);
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    margin-top: 0;
+    font-size: 1.5rem;
+}
+
+table {
+    margin-top: 2rem;
+    width: 100%;
+    border: 0;
+    table-layout: auto;
+    background: var(--table_background);
+}
+
+table thead tr th,
+table tbody tr td {
+    padding: 0.5625rem 0.625rem;
+    font-size: 0.875rem;
+    color: var(--table_text_color);
+    text-align: left;
+    line-height: 1.125rem;
+}
+
+table thead tr th {
+    padding: 0.5rem 0.625rem 0.625rem;
+    font-weight: bold;
+}
+
+table thead th.size {
+    width: 6em;
+}
+
+table thead th.date {
+    width: 15em;
+}
+
+table tbody tr:nth-child(odd) {
+    background: var(--odd_row_background);
+}
+
+table tbody tr:nth-child(even) {
+    background: var(--even_row_background);
+}
+
+table thead {
+    background: var(--table_header_background);
+}
+
+table tbody tr:hover {
+    background: var(--active_row_color);
+}
+
+td.size-cell {
+    text-align: right;
+}
+
+td.date-cell {
+    display: flex;
+    justify-content: space-between;
+}
+
+.at {
+    color: var(--at_color);
+}
+
+.history {
+    color: var(--date_text_color);
+}
+
+.file-entry {
+    display: flex;
+    justify-content: space-between;
+}
+
+span.size {
+    border-radius: 1rem;
+    background: var(--size_background_color);
+    padding: 0 0.25rem;
+    font-size: 0.7rem;
+    color: var(--size_text_color)
+}
+
+.mobile-info {
+    display: none;
+}
+
+th a, th a:visited, .chevron {
+    color: var(--table_header_text_color);
+}
+
+.chevron, .root-chevron {
+    margin-right: .5rem;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+th span.active a, th span.active span {
+    color: var(--table_header_active_color);
+}
+
+.back {
+    position: fixed;
+    width: 3.8rem;
+    height: 3.8rem;
+    align-items: center;
+    justify-content: center;
+    bottom: 3rem;
+    right: 3.75rem;
+    background: var(--back_button_background);
+    border-radius: 100%;
+    box-shadow: 0 0 8px -4px #888888;
+    color: var(--back_button_link_color);
+    display: none;
+}
+
+.back:visited {
+    color: var(--back_button_link_color);
+}
+
+.back:hover {
+    color: var(--back_button_link_color_hover);
+    font-weight: bold;
+    text-decoration: none;
+    background: var(--back_button_background_hover);
+}
+
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.download {
+    margin-top: 1rem;
+    padding: 0.125rem;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+
+.download a, .download a:visited {
+    color: var(--download_button_link_color);
+}
+
+.download a {
+    background: var(--download_button_background);
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+}
+
+.download a:hover {
+    background: var(--download_button_background_hover);
+    color: var(--download_button_link_color_hover);
+}
+
+.download a:not(:last-of-type) {
+    margin-right: 1rem;
+}
+
+.upload {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.upload p {
+    font-size: 0.8rem;
+    margin-bottom: 1rem;
+    color: var(--upload_text_color);
+}
+
+.upload form {
+    padding: 1rem;
+    border: 1px solid var(--upload_form_border_color);
+    background: var(--upload_form_background);
+}
+
+.upload button {
+    background: var(--upload_button_background);
+    padding: 0.5rem;
+    border-radius: 0.2rem;
+    color: var(--upload_button_text_color);
+    border: none;
+}
+
+.upload div {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+.drag-form {
+    display: none;
+    background: var(--drag_background);
+    position: absolute;
+    border: 0.5rem dashed var(--drag_border_color);
+    width: calc(100% - 1rem);
+    height: calc(100% - 1rem);
+    text-align: center;
+    z-index: 2;
+}
+
+.drag-title {
+    position: fixed;
+    color: var(--drag_text_color);
+    top: 50%;
+    width: 100%;
+    text-align: center;
+}
+
+.error {
+    margin: 2rem;
+}
+
+.error p {
+    margin: 1rem 0;
+    font-size: 0.9rem;
+    word-break: break-all;
+}
+
+.error p:first-of-type {
+    font-size: 1.25rem;
+    color: var(--error_color);
+    margin-bottom: 2rem;
+}
+
+.error p:nth-of-type(2) {
+    font-weight: bold;
+}
+
+.error-nav {
+    margin-top: 4rem;
+}
+
+@media (max-width: 760px) {
+    nav {
+        padding: 0 2.5rem;
+    }
+
+    .container {
+        padding: 1.5rem 2.5rem;
+    }
+
+    h1 {
+        font-size: 1.4em;
+    }
+
+    td:not(:nth-child(1)), th:not(:nth-child(1)){
+        display: none;
+    }
+
+    .mobile-info {
+        display: block;
+    }
+
+    table tbody tr td {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    a.directory {
+        display: block;
+        padding: 0.5625rem 0;
+    }
+
+    .file-entry {
+        align-items: center;
+    }
+
+    a.root, a.file, a.symlink {
+        display: inline-block;
+        flex: 1;
+        padding: 0.5625rem 0;
+    }
+
+    a.symlink {
+        width: 100%;
+    }
+
+    .back {
+        display: flex;
+    }
+
+    .back {
+        right: 1.5rem;
+    }
+}
+
+@media (max-width: 600px) {
+    h1 {
+        font-size: 1.375em;
+    }
+}
+
+@media (max-width: 400px) {
+    nav {
+        padding: 0 0.5rem;
+    }
+
+    .container {
+        padding: 0.5rem;
+    }
+
+    h1 {
+        font-size: 1.375em;
+    }
+
+    .back {
+        right: 1.5rem;
+    }
+}
+
+
+@mixin theme_squirrel {
+    --background: #FFFFFF;
+    --text_color: #323232;
+    --directory_link_color: #d02474;
+    --file_link_color: #0086B3;
+    --symlink_link_color: #ED6A43;
+    --table_background: #ffffff;
+    --table_text_color: #323232;
+    --table_header_background: #323232;
+    --table_header_text_color: #F5F5F5;
+    --table_header_active_color: #FFFFFF;
+    --active_row_color: #f6f8fa;
+    --odd_row_background: #fbfbfb;
+    --even_row_background: #f2f2f2;
+    --root_link_color: #323232;
+    --download_button_background: #d02474;
+    --download_button_background_hover: #f52d8a;
+    --download_button_link_color: #FFFFFF;
+    --download_button_link_color_hover: #FFFFFF;
+    --back_button_background: #d02474;
+    --back_button_background_hover: #d02474;
+    --back_button_link_color: #FFFFFF;
+    --back_button_link_color_hover: #FFFFFF;
+    --date_text_color: #797979;
+    --at_color: #797979;
+    --switch_theme_background: #323232;
+    --switch_theme_link_color: #F5F5F5;
+    --switch_theme_active: #d02474;
+    --switch_theme_border: #49483E;
+    --change_theme_link_color: #F5F5F5;
+    --change_theme_link_color_hover: #F5F5F5;
+    --upload_text_color: #323232;
+    --upload_form_border_color: #d2d2d2;
+    --upload_form_background: #f2f2f2;
+    --upload_button_background: #d02474;
+    --upload_button_text_color: #FFFFFF;
+    --drag_background: #3333338f;
+    --drag_border_color: #ffffff;
+    --drag_text_color: #ffffff;
+    --size_background_color: #323232;
+    --size_text_color: #FFFFFF;
+    --error_color: #d02424;
+}
+
+@mixin theme_archlinux {
+    --background: #383c4a;
+    --text_color: #fefefe;
+    --directory_link_color: #03a9f4;
+    --file_link_color: #ea95ff;
+    --symlink_link_color: #ff9800;
+    --table_background: #353946;
+    --table_text_color: #eeeeee;
+    --table_header_background: #5294e2;
+    --table_header_text_color: #eeeeee;
+    --table_header_active_color: #ffffff;
+    --active_row_color: #5194e259;
+    --odd_row_background: #404552;
+    --even_row_background: #4b5162;
+    --root_link_color: #abb2bb;
+    --download_button_background: #ea95ff;
+    --download_button_background_hover: #eea7ff;
+    --download_button_link_color: #ffffff;
+    --download_button_link_color_hover: #ffffff;
+    --back_button_background: #ea95ff;
+    --back_button_background_hover: #ea95ff;
+    --back_button_link_color: #ffffff;
+    --back_button_link_color_hover: #ffffff;
+    --date_text_color: #9ebbdc;
+    --at_color: #9ebbdc;
+    --switch_theme_background: #4b5162;
+    --switch_theme_link_color: #fefefe;
+    --switch_theme_active: #ea95ff;
+    --switch_theme_border: #6a728a;
+    --change_theme_link_color: #fefefe;
+    --change_theme_link_color_hover: #fefefe;
+    --upload_text_color: #fefefe;
+    --upload_form_border_color: #353946;
+    --upload_form_background: #4b5162;
+    --upload_button_background: #ea95ff;
+    --upload_button_text_color: #ffffff;
+    --drag_background: #3333338f;
+    --drag_border_color: #fefefe;
+    --drag_text_color: #fefefe;
+    --size_background_color: #5294e2;
+    --size_text_color: #fefefe;
+    --error_color: #e44b4b;
+}
+
+@mixin theme_zenburn {
+    --background: #3f3f3f;
+    --text_color: #efefef;
+    --directory_link_color: #f0dfaf;
+    --file_link_color: #87D6D5;
+    --symlink_link_color: #FFCCEE;
+    --table_background: #4a4949;
+    --table_text_color: #efefef;
+    --table_header_background: #7f9f7f;
+    --table_header_text_color: #efefef;
+    --table_header_active_color: #efef8f;
+    --active_row_color: #7e9f7f9c;
+    --odd_row_background: #777777;
+    --even_row_background: #5a5a5a;
+    --root_link_color: #dca3a3;
+    --download_button_background: #cc9393;
+    --download_button_background_hover: #dca3a3;
+    --download_button_link_color: #efefef;
+    --download_button_link_color_hover: #efefef;
+    --back_button_background: #cc9393;
+    --back_button_background_hover: #cc9393;
+    --back_button_link_color: #efefef;
+    --back_button_link_color_hover: #efefef;
+    --date_text_color: #cfbfaf;
+    --at_color: #cfbfaf;
+    --switch_theme_background: #4a4949;
+    --switch_theme_link_color: #efefef;
+    --switch_theme_active: #efef8f;
+    --switch_theme_border: #5a5a5a;
+    --change_theme_link_color: #efefef;
+    --change_theme_link_color_hover: #efefef;
+    --upload_text_color: #efefef;
+    --upload_form_border_color: #4a4949;
+    --upload_form_background: #777777;
+    --upload_button_background: #cc9393;
+    --upload_button_text_color: #efefef;
+    --drag_background: #3333338f;
+    --drag_border_color: #efefef;
+    --drag_text_color: #efefef;
+    --size_background_color: #7f9f7f;
+    --size_text_color: #efefef;
+    --error_color: #d06565;
+}
+
+@mixin theme_monokai {
+    --background: #272822;
+    --text_color: #F8F8F2;
+    --directory_link_color: #F92672;
+    --file_link_color: #A6E22E;
+    --symlink_link_color: #FD971F;
+    --table_background: #3B3A32;
+    --table_text_color: #F8F8F0;
+    --table_header_background: #75715E;
+    --table_header_text_color: #F8F8F2;
+    --table_header_active_color: #E6DB74;
+    --active_row_color: #ae81fe3d;
+    --odd_row_background: #3E3D32;
+    --even_row_background: #49483E;
+    --root_link_color: #66D9EF;
+    --download_button_background: #AE81FF;
+    --download_button_background_hover: #c6a6ff;
+    --download_button_link_color: #F8F8F0;
+    --download_button_link_color_hover: #F8F8F0;
+    --back_button_background: #AE81FF;
+    --back_button_background_hover: #AE81FF;
+    --back_button_link_color: #F8F8F0;
+    --back_button_link_color_hover: #F8F8F0;
+    --date_text_color: #66D9EF;
+    --at_color: #66D9EF;
+    --switch_theme_background: #3B3A32;
+    --switch_theme_link_color: #F8F8F2;
+    --switch_theme_active: #A6E22E;
+    --switch_theme_border: #49483E;
+    --change_theme_link_color: #F8F8F2;
+    --change_theme_link_color_hover: #F8F8F2;
+    --upload_text_color: #F8F8F2;
+    --upload_form_border_color: #3B3A32;
+    --upload_form_background: #49483E;
+    --upload_button_background: #AE81FF;
+    --upload_button_text_color: #F8F8F0;
+    --drag_background: #3333338f;
+    --drag_border_color: #F8F8F2;
+    --drag_text_color: #F8F8F2;
+    --size_background_color: #75715E;
+    --size_text_color: #F8F8F2;
+    --error_color: #d02929;
+}
+
+/* theme picked by user */
+body.theme_squirrel { @include theme_squirrel; }
+body.theme_archlinux { @include theme_archlinux; }
+body.theme_zenburn { @include theme_zenburn; }
+body.theme_monokai { @include theme_monokai; }
+
+/* defaults */
+body { @include theme_squirrel; }
+@media (prefers-color-scheme: dark) { body { @include theme_archlinux; } }
+
-- 
cgit v1.2.3


From a4d227d34ad2bbf40ff5d542dcc8821ccb090ac7 Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Sat, 26 Sep 2020 05:39:52 +0200
Subject: remove default color scheme cli argument

---
 data/style.scss | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index b2a6882..f7facc2 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,4 +1,8 @@
-/* theme variables can be found at the bottom */
+/* theme colors can be found at the bottom */
+$themes: squirrel, archlinux, monokai, zenburn;
+
+$default_theme: squirrel;
+$default_theme_dark: archlinux;
 
 html {
     font-smoothing: antialiased;
@@ -656,12 +660,11 @@ th span.active a, th span.active span {
 }
 
 /* theme picked by user */
-body.theme_squirrel { @include theme_squirrel; }
-body.theme_archlinux { @include theme_archlinux; }
-body.theme_zenburn { @include theme_zenburn; }
-body.theme_monokai { @include theme_monokai; }
+@each $theme in $themes {
+    body.theme_#{$theme} { @include theme_#{$theme}; }
+}
 
 /* defaults */
-body { @include theme_squirrel; }
-@media (prefers-color-scheme: dark) { body { @include theme_archlinux; } }
+body { @include theme_#{$default_theme}; }
+@media (prefers-color-scheme: dark) { body { @include theme_#{$default_theme_dark}; } }
 
-- 
cgit v1.2.3


From ca3f73d5433156c2c6d1af7877024996ff020afd Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Sat, 26 Sep 2020 05:40:42 +0200
Subject: fix theme picker highlighting of selected theme

---
 data/style.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index f7facc2..c146919 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -160,7 +160,14 @@ nav .theme li a::hover {
     color: var(--change_theme_link_color_hover);
 }
 
-nav .theme li.active a {
+@each $theme in $themes {
+    body.theme_#{$theme} nav .theme li.theme_#{$theme} a {
+        font-weight: bold;
+        color: var(--switch_theme_active);
+    }
+}
+
+body:not([class^="theme_"]) nav .theme li.theme_default a {
     font-weight: bold;
     color: var(--switch_theme_active);
 }
-- 
cgit v1.2.3


From 49f6a40fe2ae23878734d625ab02b494c003a3cd Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Sat, 26 Sep 2020 22:48:25 +0200
Subject: remove stylelint again and fix a few css issues

---
 data/style.scss | 153 +++++++++++++++++++++++++++++++-------------------------
 1 file changed, 84 insertions(+), 69 deletions(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index c146919..fed51c9 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -13,7 +13,7 @@ html {
 
 body {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto,\"Helvetica Neue\", Helvetica, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
     font-weight: 300;
     color: var(--text_color);
     background: var(--background);
@@ -33,7 +33,9 @@ a {
     text-decoration: none;
 }
 
-a.root, a.root:visited, .root-chevron {
+a.root,
+a.root:visited,
+.root-chevron {
     font-weight: bold;
     color: var(--root_link_color);
 }
@@ -42,16 +44,21 @@ a:hover {
     text-decoration: underline;
 }
 
-a.directory, a.directory:visited {
+a.directory,
+a.directory:visited {
     font-weight: bold;
     color: var(--directory_link_color);
 }
 
-a.file, a.file:visited, .error-back, .error-back:visited {
+a.file,
+a.file:visited,
+.error-back,
+.error-back:visited {
     color: var(--file_link_color);
 }
 
-a.symlink, a.symlink:visited {
+a.symlink,
+a.symlink:visited {
     color: var(--symlink_link_color);
 }
 
@@ -71,7 +78,7 @@ a.symlink:hover {
     display: inline-block;
     border: 1px solid var(--symlink_link_color);
     margin-left: 0.5rem;
-    border-radius: .2rem;
+    border-radius: 0.2rem;
     padding: 0 0.1rem;
 }
 
@@ -113,7 +120,7 @@ nav p + * {
     }
 }
 
-nav > div::hover p {
+nav > div:hover p {
     cursor: pointer;
     color: var(--switch_theme_link_color);
 }
@@ -155,7 +162,7 @@ nav .theme li a:visited {
     color: var(--switch_theme_link_color);
 }
 
-nav .theme li a::hover {
+nav .theme li a:hover {
     text-decoration: underline;
     color: var(--change_theme_link_color_hover);
 }
@@ -255,24 +262,28 @@ span.size {
     background: var(--size_background_color);
     padding: 0 0.25rem;
     font-size: 0.7rem;
-    color: var(--size_text_color)
+    color: var(--size_text_color);
 }
 
 .mobile-info {
     display: none;
 }
 
-th a, th a:visited, .chevron {
+th a,
+th a:visited,
+.chevron {
     color: var(--table_header_text_color);
 }
 
-.chevron, .root-chevron {
-    margin-right: .5rem;
+.chevron,
+.root-chevron {
+    margin-right: 0.5rem;
     font-size: 1.2em;
     font-weight: bold;
 }
 
-th span.active a, th span.active span {
+th span.active a,
+th span.active span {
     color: var(--table_header_active_color);
 }
 
@@ -317,7 +328,8 @@ th span.active a, th span.active span {
     flex-wrap: wrap;
 }
 
-.download a, .download a:visited {
+.download a,
+.download a:visited {
     color: var(--download_button_link_color);
 }
 
@@ -424,7 +436,8 @@ th span.active a, th span.active span {
         font-size: 1.4em;
     }
 
-    td:not(:nth-child(1)), th:not(:nth-child(1)){
+    td:not(:nth-child(1)),
+    th:not(:nth-child(1)) {
         display: none;
     }
 
@@ -446,7 +459,9 @@ th span.active a, th span.active span {
         align-items: center;
     }
 
-    a.root, a.file, a.symlink {
+    a.root,
+    a.file,
+    a.symlink {
         display: inline-block;
         flex: 1;
         padding: 0.5625rem 0;
@@ -491,46 +506,46 @@ th span.active a, th span.active span {
 
 
 @mixin theme_squirrel {
-    --background: #FFFFFF;
+    --background: #ffffff;
     --text_color: #323232;
     --directory_link_color: #d02474;
-    --file_link_color: #0086B3;
-    --symlink_link_color: #ED6A43;
+    --file_link_color: #0086b3;
+    --symlink_link_color: #ed6a43;
     --table_background: #ffffff;
     --table_text_color: #323232;
     --table_header_background: #323232;
-    --table_header_text_color: #F5F5F5;
-    --table_header_active_color: #FFFFFF;
+    --table_header_text_color: #f5f5f5;
+    --table_header_active_color: #ffffff;
     --active_row_color: #f6f8fa;
     --odd_row_background: #fbfbfb;
     --even_row_background: #f2f2f2;
     --root_link_color: #323232;
     --download_button_background: #d02474;
     --download_button_background_hover: #f52d8a;
-    --download_button_link_color: #FFFFFF;
-    --download_button_link_color_hover: #FFFFFF;
+    --download_button_link_color: #ffffff;
+    --download_button_link_color_hover: #ffffff;
     --back_button_background: #d02474;
     --back_button_background_hover: #d02474;
-    --back_button_link_color: #FFFFFF;
-    --back_button_link_color_hover: #FFFFFF;
+    --back_button_link_color: #ffffff;
+    --back_button_link_color_hover: #ffffff;
     --date_text_color: #797979;
     --at_color: #797979;
     --switch_theme_background: #323232;
-    --switch_theme_link_color: #F5F5F5;
+    --switch_theme_link_color: #f5f5f5;
     --switch_theme_active: #d02474;
-    --switch_theme_border: #49483E;
-    --change_theme_link_color: #F5F5F5;
-    --change_theme_link_color_hover: #F5F5F5;
+    --switch_theme_border: #49483e;
+    --change_theme_link_color: #f5f5f5;
+    --change_theme_link_color_hover: #f5f5f5;
     --upload_text_color: #323232;
     --upload_form_border_color: #d2d2d2;
     --upload_form_background: #f2f2f2;
     --upload_button_background: #d02474;
-    --upload_button_text_color: #FFFFFF;
+    --upload_button_text_color: #ffffff;
     --drag_background: #3333338f;
     --drag_border_color: #ffffff;
     --drag_text_color: #ffffff;
     --size_background_color: #323232;
-    --size_text_color: #FFFFFF;
+    --size_text_color: #ffffff;
     --error_color: #d02424;
 }
 
@@ -582,8 +597,8 @@ th span.active a, th span.active span {
     --background: #3f3f3f;
     --text_color: #efefef;
     --directory_link_color: #f0dfaf;
-    --file_link_color: #87D6D5;
-    --symlink_link_color: #FFCCEE;
+    --file_link_color: #87d6d5;
+    --symlink_link_color: #ffccee;
     --table_background: #4a4949;
     --table_text_color: #efefef;
     --table_header_background: #7f9f7f;
@@ -624,45 +639,45 @@ th span.active a, th span.active span {
 
 @mixin theme_monokai {
     --background: #272822;
-    --text_color: #F8F8F2;
-    --directory_link_color: #F92672;
-    --file_link_color: #A6E22E;
-    --symlink_link_color: #FD971F;
-    --table_background: #3B3A32;
-    --table_text_color: #F8F8F0;
-    --table_header_background: #75715E;
-    --table_header_text_color: #F8F8F2;
-    --table_header_active_color: #E6DB74;
+    --text_color: #f8f8f2;
+    --directory_link_color: #f92672;
+    --file_link_color: #a6e22e;
+    --symlink_link_color: #fd971f;
+    --table_background: #3b3a32;
+    --table_text_color: #f8f8f0;
+    --table_header_background: #75715e;
+    --table_header_text_color: #f8f8f2;
+    --table_header_active_color: #e6db74;
     --active_row_color: #ae81fe3d;
-    --odd_row_background: #3E3D32;
-    --even_row_background: #49483E;
-    --root_link_color: #66D9EF;
-    --download_button_background: #AE81FF;
+    --odd_row_background: #3e3d32;
+    --even_row_background: #49483e;
+    --root_link_color: #66d9ef;
+    --download_button_background: #ae81ff;
     --download_button_background_hover: #c6a6ff;
-    --download_button_link_color: #F8F8F0;
-    --download_button_link_color_hover: #F8F8F0;
-    --back_button_background: #AE81FF;
-    --back_button_background_hover: #AE81FF;
-    --back_button_link_color: #F8F8F0;
-    --back_button_link_color_hover: #F8F8F0;
-    --date_text_color: #66D9EF;
-    --at_color: #66D9EF;
-    --switch_theme_background: #3B3A32;
-    --switch_theme_link_color: #F8F8F2;
-    --switch_theme_active: #A6E22E;
-    --switch_theme_border: #49483E;
-    --change_theme_link_color: #F8F8F2;
-    --change_theme_link_color_hover: #F8F8F2;
-    --upload_text_color: #F8F8F2;
-    --upload_form_border_color: #3B3A32;
-    --upload_form_background: #49483E;
-    --upload_button_background: #AE81FF;
-    --upload_button_text_color: #F8F8F0;
+    --download_button_link_color: #f8f8f0;
+    --download_button_link_color_hover: #f8f8f0;
+    --back_button_background: #ae81ff;
+    --back_button_background_hover: #ae81ff;
+    --back_button_link_color: #f8f8f0;
+    --back_button_link_color_hover: #f8f8f0;
+    --date_text_color: #66d9ef;
+    --at_color: #66d9ef;
+    --switch_theme_background: #3b3a32;
+    --switch_theme_link_color: #f8f8f2;
+    --switch_theme_active: #a6e22e;
+    --switch_theme_border: #49483e;
+    --change_theme_link_color: #f8f8f2;
+    --change_theme_link_color_hover: #f8f8f2;
+    --upload_text_color: #f8f8f2;
+    --upload_form_border_color: #3b3a32;
+    --upload_form_background: #49483e;
+    --upload_button_background: #ae81ff;
+    --upload_button_text_color: #f8f8f0;
     --drag_background: #3333338f;
-    --drag_border_color: #F8F8F2;
-    --drag_text_color: #F8F8F2;
-    --size_background_color: #75715E;
-    --size_text_color: #F8F8F2;
+    --drag_border_color: #f8f8f2;
+    --drag_text_color: #f8f8f2;
+    --size_background_color: #75715e;
+    --size_text_color: #f8f8f2;
     --error_color: #d02929;
 }
 
-- 
cgit v1.2.3


From 4d8d310d70f8c461dfd371494a74a57c48cb3af7 Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Thu, 1 Oct 2020 15:36:16 +0200
Subject: fix escaped quotes in font names

---
 data/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index fed51c9..635dd9e 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -13,7 +13,7 @@ html {
 
 body {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 300;
     color: var(--text_color);
     background: var(--background);
-- 
cgit v1.2.3


From 47895cad827180787a8f305ddac0372d2dbd266a Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Thu, 1 Oct 2020 18:08:05 +0200
Subject: restore default theme cli option and add default theme dark option

---
 data/style.scss | 55 +++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 43 insertions(+), 12 deletions(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index 635dd9e..0871632 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,8 +1,17 @@
+@use "sass:selector";
+
 /* theme colors can be found at the bottom */
 $themes: squirrel, archlinux, monokai, zenburn;
 
-$default_theme: squirrel;
-$default_theme_dark: archlinux;
+@function body_not_themed() {
+    $s: unquote("body");
+    @each $t in $themes {
+        $s: selector.append($s, unquote(":not(.theme_#{$t})"));
+    }
+    @return $s;
+}
+
+
 
 html {
     font-smoothing: antialiased;
@@ -167,16 +176,19 @@ nav .theme li a:hover {
     color: var(--change_theme_link_color_hover);
 }
 
+%active_theme_link {
+    font-weight: bold;
+    color: var(--switch_theme_active);
+}
+
 @each $theme in $themes {
     body.theme_#{$theme} nav .theme li.theme_#{$theme} a {
-        font-weight: bold;
-        color: var(--switch_theme_active);
+        @extend %active_theme_link;
     }
 }
 
-body:not([class^="theme_"]) nav .theme li.theme_default a {
-    font-weight: bold;
-    color: var(--switch_theme_active);
+#{body_not_themed()} nav .theme li.theme_default a {
+    @extend %active_theme_link;
 }
 
 p {
@@ -681,12 +693,31 @@ th span.active span {
     --error_color: #d02929;
 }
 
-/* theme picked by user */
+
+@each $theme in $themes {
+    %theme_#{$theme} { @include theme_#{$theme}; }
+
+    body.theme_#{$theme} { @extend %theme_#{$theme}; }
+
+    #{body_not_themed()}.default_theme_#{$theme} {
+        @extend %theme_#{$theme};
+    }
+}
+
+// this needs to be in a separate loop below the first,
+// because dark mode doesn't add to specificity, so
+// the dark defaults need to come after the light defaults
+// to override them
 @each $theme in $themes {
-    body.theme_#{$theme} { @include theme_#{$theme}; }
+    @media (prefers-color-scheme: dark) {
+        %theme_dark_#{$theme} { @include theme_#{$theme}; }
+    }
+
+    // this extension will still end up inside the media query,
+    // because that is where %theme_dark_* was defined
+    #{body_not_themed()}.default_theme_dark_#{$theme} {
+        @extend %theme_dark_#{$theme};
+    }
 }
 
-/* defaults */
-body { @include theme_#{$default_theme}; }
-@media (prefers-color-scheme: dark) { body { @include theme_#{$default_theme_dark}; } }
 
-- 
cgit v1.2.3


From 89d96b9d7f1f2956609f326127753b05d1614309 Mon Sep 17 00:00:00 2001
From: Lukas Stabe <lukas@stabe.de>
Date: Fri, 2 Oct 2020 02:22:08 +0200
Subject: address feedback

---
 data/style.scss | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'data')

diff --git a/data/style.scss b/data/style.scss
index 0871632..95bc56f 100644
--- a/data/style.scss
+++ b/data/style.scss
@@ -1,8 +1,12 @@
 @use "sass:selector";
 
-/* theme colors can be found at the bottom */
+// theme colors can be found at the bottom
 $themes: squirrel, archlinux, monokai, zenburn;
 
+// This returns a selector that matches body when no theme class is set,
+// in which case the default light/dark mode themes should be used.
+// The result of this function can be used with #{...} interpolation
+// in a selector list.
 @function body_not_themed() {
     $s: unquote("body");
     @each $t in $themes {
@@ -517,6 +521,7 @@ th span.active span {
 }
 
 
+
 @mixin theme_squirrel {
     --background: #ffffff;
     --text_color: #323232;
@@ -694,6 +699,12 @@ th span.active span {
 }
 
 
+
+// For each of the themes, define a placeholder selector containing
+// the themes variables. Then add selectors for body when the theme:
+// - has explicitly been activated by .theme_*
+// - is set as default theme by .default_theme_* and no other theme is active
+// to the placeholder selector list by means of @extend.
 @each $theme in $themes {
     %theme_#{$theme} { @include theme_#{$theme}; }
 
@@ -704,10 +715,10 @@ th span.active span {
     }
 }
 
-// this needs to be in a separate loop below the first,
-// because dark mode doesn't add to specificity, so
-// the dark defaults need to come after the light defaults
-// to override them
+// Do the same thing again for the dark mode default.
+// Since the media query doesn't affect specificity, all dark mode
+// defaults need to come after all light mode defaults to override
+// them when dark mode is enabled.
 @each $theme in $themes {
     @media (prefers-color-scheme: dark) {
         %theme_dark_#{$theme} { @include theme_#{$theme}; }
-- 
cgit v1.2.3