From cb56ed3495b43ca4a812f98e36b4ca35660edafa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Tue, 5 Sep 2023 23:27:07 +0200 Subject: [PATCH] Add dark theme --- view/package-lock.json | 7 + view/package.json | 1 + view/static/main.css | 221 ++++++++++++---- view/templates/base.html | 47 +++- view/templates/index.html | 4 +- view/templates/parts/feeds_filter_dialog.html | 2 +- view/templates/parts/footer.html | 17 +- view/templates/parts/logo.svg | 4 +- view/uno.config.ts | 236 +++++++++++++++--- 9 files changed, 445 insertions(+), 94 deletions(-) diff --git a/view/package-lock.json b/view/package-lock.json index 84218bf..c993528 100644 --- a/view/package-lock.json +++ b/view/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "devDependencies": { + "@radix-ui/colors": "^2.1.0", "@unocss/preset-mini": "^0.55.1", "@unocss/transformer-variant-group": "^0.55.2", "unocss": "^0.55.1" @@ -528,6 +529,12 @@ "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==", "dev": true }, + "node_modules/@radix-ui/colors": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-2.1.0.tgz", + "integrity": "sha512-gcBnxjS2u2c6thQz/9K1+Pt2ZYcm5WKU4SLi0emYkRmYbVUw+37rlc5wgLtYOsSsRP9nxVtbJJYj6WVO7UUmZg==", + "dev": true + }, "node_modules/@rollup/pluginutils": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.3.tgz", diff --git a/view/package.json b/view/package.json index 403f1c2..5bc06b9 100644 --- a/view/package.json +++ b/view/package.json @@ -4,6 +4,7 @@ "build": "unocss \"templates/**/*.html\" -o static/main.css" }, "devDependencies": { + "@radix-ui/colors": "^2.1.0", "@unocss/preset-mini": "^0.55.1", "@unocss/transformer-variant-group": "^0.55.2", "unocss": "^0.55.1" diff --git a/view/static/main.css b/view/static/main.css index 571fd11..71bc6cb 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -4,7 +4,111 @@ /* This file is dynamically generated. Do not edit this file. */ :root { - --color-border: hsl(0 0% 80% / 60%); + --color-gray-1: hsl(0, 0%, 99.0%); + --color-gray-2: hsl(0, 0%, 97.5%); + --color-gray-3: hsl(0, 0%, 94.6%); + --color-gray-4: hsl(0, 0%, 92.0%); + --color-gray-5: hsl(0, 0%, 89.5%); + --color-gray-6: hsl(0, 0%, 86.8%); + --color-gray-7: hsl(0, 0%, 83.0%); + --color-gray-8: hsl(0, 0%, 73.2%); + --color-gray-9: hsl(0, 0%, 55.2%); + --color-gray-10: hsl(0, 0%, 50.3%); + --color-gray-11: hsl(0, 0%, 39.3%); + --color-gray-12: hsl(0, 0%, 12.5%); + + --color-accent-1: hsl(225, 60.0%, 99.4%); + --color-accent-2: hsl(223, 100%, 98.6%); + --color-accent-3: hsl(223, 98.4%, 97.1%); + --color-accent-4: hsl(223, 92.9%, 95.0%); + --color-accent-5: hsl(224, 87.1%, 92.0%); + --color-accent-6: hsl(224, 81.9%, 87.8%); + --color-accent-7: hsl(225, 77.4%, 82.1%); + --color-accent-8: hsl(226, 75.4%, 74.5%); + --color-accent-9: hsl(226, 70.0%, 55.5%); + --color-accent-10: hsl(226, 58.6%, 51.3%); + --color-accent-11: hsl(226, 55.0%, 45.0%); + --color-accent-12: hsl(226, 50.0%, 24.0%); + + --color-ins-1: hsl(136, 50.0%, 98.9%); + --color-ins-2: hsl(138, 62.5%, 96.9%); + --color-ins-3: hsl(139, 55.2%, 94.5%); + --color-ins-4: hsl(140, 48.7%, 91.0%); + --color-ins-5: hsl(141, 43.7%, 86.0%); + --color-ins-6: hsl(143, 40.3%, 79.0%); + --color-ins-7: hsl(146, 38.5%, 69.0%); + --color-ins-8: hsl(151, 40.2%, 54.1%); + --color-ins-9: hsl(151, 55.0%, 41.5%); + --color-ins-10: hsl(152, 57.5%, 37.6%); + --color-ins-11: hsl(153, 67.0%, 28.5%); + --color-ins-12: hsl(155, 40.0%, 16.5%); + + --color-del-1: hsl(359, 100%, 99.4%); + --color-del-2: hsl(0, 100%, 98.4%); + --color-del-3: hsl(360, 100%, 96.8%); + --color-del-4: hsl(360, 97.9%, 94.8%); + --color-del-5: hsl(360, 90.2%, 91.9%); + --color-del-6: hsl(360, 81.7%, 87.8%); + --color-del-7: hsl(359, 74.2%, 81.7%); + --color-del-8: hsl(359, 69.5%, 74.3%); + --color-del-9: hsl(358, 75.0%, 59.0%); + --color-del-10: hsl(358, 67.4%, 54.6%); + --color-del-11: hsl(358, 65.0%, 47.0%); + --color-del-12: hsl(350, 63.0%, 24.0%); + } + + .dark-theme { + --color-gray-1: hsl(0, 0%, 9.5%); + --color-gray-2: hsl(0, 0%, 10.5%); + --color-gray-3: hsl(0, 0%, 15.8%); + --color-gray-4: hsl(0, 0%, 18.9%); + --color-gray-5: hsl(0, 0%, 21.7%); + --color-gray-6: hsl(0, 0%, 24.7%); + --color-gray-7: hsl(0, 0%, 29.1%); + --color-gray-8: hsl(0, 0%, 37.5%); + --color-gray-9: hsl(0, 0%, 43.0%); + --color-gray-10: hsl(0, 0%, 50.7%); + --color-gray-11: hsl(0, 0%, 69.5%); + --color-gray-12: hsl(0, 0%, 93.5%); + + --color-accent-1: hsl(229, 24.0%, 10.0%); + --color-accent-2: hsl(230, 36.4%, 12.9%); + --color-accent-3: hsl(228, 42.7%, 18.1%); + --color-accent-4: hsl(227, 45.6%, 21.4%); + --color-accent-5: hsl(227, 47.8%, 24.4%); + --color-accent-6: hsl(226, 50.3%, 28.8%); + --color-accent-7: hsl(226, 53.3%, 36.6%); + --color-accent-8: hsl(226, 60.0%, 52.0%); + --color-accent-9: hsl(226, 70.0%, 55.5%); + --color-accent-10: hsl(230, 73.9%, 63.3%); + --color-accent-11: hsl(235, 100%, 80.0%); + --color-accent-12: hsl(235, 93.0%, 93.0%); + + --color-ins-1: hsl(146, 30.0%, 7.4%); + --color-ins-2: hsl(154, 31.8%, 8.6%); + --color-ins-3: hsl(154, 37.6%, 11.5%); + --color-ins-4: hsl(154, 41.0%, 13.6%); + --color-ins-5: hsl(154, 43.7%, 15.7%); + --color-ins-6: hsl(154, 46.7%, 18.7%); + --color-ins-7: hsl(153, 50.3%, 24.4%); + --color-ins-8: hsl(151, 52.2%, 36.1%); + --color-ins-9: hsl(151, 55.0%, 41.5%); + --color-ins-10: hsl(151, 55.2%, 46.7%); + --color-ins-11: hsl(151, 65.0%, 54.0%); + --color-ins-12: hsl(144, 70.0%, 82.0%); + + --color-del-1: hsl(353, 23.0%, 9.8%); + --color-del-2: hsl(354, 30.2%, 12.4%); + --color-del-3: hsl(353, 40.8%, 16.4%); + --color-del-4: hsl(353, 46.3%, 19.2%); + --color-del-5: hsl(353, 51.2%, 22.1%); + --color-del-6: hsl(353, 57.3%, 26.2%); + --color-del-7: hsl(354, 65.7%, 33.2%); + --color-del-8: hsl(358, 75.0%, 47.1%); + --color-del-9: hsl(358, 75.0%, 59.0%); + --color-del-10: hsl(359, 84.8%, 67.6%); + --color-del-11: hsl(358, 100%, 76.0%); + --color-del-12: hsl(350, 100%, 91.0%); } html { @@ -18,7 +122,8 @@ flex-direction: column; align-items: stretch; line-height: 1.5; - background-color: #f9fafb; + background-color: var(--color-gray-2); + color: var(--color-gray-12); } *, @@ -27,7 +132,7 @@ box-sizing: inherit; border-width: 0; border-style: solid; - border-color: var(--color-border); + border-color: var(--color-gray-6); } :not(dialog) { @@ -75,24 +180,33 @@ } a { - color: #2563eb; + color: var(--color-accent-10); font-weight: 500; text-decoration: none; transition: color 120ms; } a:hover { - color: #1e40af; + color: var(--color-accent-12); + } + + ins, + del { + text-decoration: none; + border-bottom: 1px solid transparent; + border-radius: 0.25rem; } ins { - background-color: hsl(120 100% 95%); - text-decoration-color: hsl(120 50% 75% / 50%); + background-color: var(--color-ins-4); + color: var(--color-ins-12); + border-color: var(--color-ins-6); } del { - background-color: hsl(0 100% 95%); - text-decoration-color: hsl(0 50% 40% / 50%); + background-color: var(--color-del-4); + color: var(--color-del-12); + border-color: var(--color-del-6); } .diff-before ins { @@ -107,14 +221,16 @@ .text-input { border-radius: 0.25rem; - border: 1px solid var(--color-border); + border: 1px solid var(--color-gray-7); padding: 0.375rem 0.75rem; transition: border-color 120ms, box-shadow 120ms; + background-color: var(--color-gray-1); + color: var(--color-gray-11); } .text-input:focus { - border-color: #3b82f6; - box-shadow: 0 0 0 2px #3b82f6; + border-color: var(--color-accent-9); + box-shadow: 0 0 0 2px var(--color-accent-9); outline: none; } @@ -123,7 +239,7 @@ line-height: 1.25rem; display: flex; align-items: center; - color: #6b7280; + color: var(--color-gray-11); font-weight: 500; cursor: pointer; } @@ -143,23 +259,25 @@ } .button { - border: 1px solid var(--color-border); - background: #f3f4f6; - color: #4b5563; + border: 1px solid var(--color-gray-7); + background: var(--color-gray-3); + color: var(--color-gray-11); } .button:not(:disabled):hover { - background: hsl(0 0% 90%); + background: var(--color-gray-5); + color: var(--color-gray-12); } .button-outline { - border: 1px solid var(--color-border); - background: white; - color: #4b5563; + border: 1px solid var(--color-gray-6); + background: var(--color-gray-1); + color: var(--color-gray-11); } .button-outline:not(:disabled):hover { - background: hsl(0 0% 95%); + background: var(--color-gray-3); + color: var(--color-gray-12); } .button-md { @@ -189,10 +307,10 @@ } .page-item { - border: 1px solid var(--color-border); - background: #f3f4f6; - transition: background-color 120ms; - color: #4b5563; + border: 1px solid var(--color-gray-7); + background: var(--color-gray-3); + transition: background-color 120ms, color 120ms; + color: var(--color-gray-11); font-weight: 500; font-size: 0.85em; line-height: 1.5rem; @@ -203,7 +321,8 @@ } .page-item:not(.active):hover { - background: #e5e7eb; + background: var(--color-gray-4); + color: var(--color-gray-12); } .page-item:first-of-type { @@ -219,7 +338,7 @@ } .page-item.active { - background-color: #2563eb; + background-color: var(--color-accent-9); color: white; border-color: transparent; } @@ -231,13 +350,17 @@ /* Misc components */ .card { - border: 1px solid var(--color-border); + border: 1px solid var(--color-gray-6); border-radius: 0.5rem; - background-color: white; - box-shadow: 0 2px 0 #e5e7eb; + background-color: var(--color-gray-1); + box-shadow: 0 2px 0 var(--color-gray-3); overflow: hidden; } + .dark-theme .card { + box-shadow: none; + } + .table-styled td, .table-styled th { padding: 0.5rem 0.5rem; @@ -254,20 +377,26 @@ .dialog { border-radius: 0.5rem; - border: 1px solid var(--color-border); + border: 1px solid var(--color-gray-6); box-shadow: var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1),var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1); + background-color: var(--color-gray-2); + color: var(--color-gray-12); } .dialog::backdrop { background-color: hsl(0 0% 90% / 80%); } + .dark-theme .dialog::backdrop { + background-color: hsl(0 0% 10% / 90%); + } + /* layer: shortcuts */ .container{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1200px;} -.action-link{font-size:0.875rem;line-height:1.25rem;font-weight:500;--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));display:inline-flex;gap:0.375rem;align-items:center;} -.text-caption{font-size:0.875rem;line-height:1.25rem;font-weight:500;--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));} -.text-muted{--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));} -.action-link:hover{--un-text-opacity:1;color:rgba(29,78,216,var(--un-text-opacity));} +.action-link{font-size:0.875rem;line-height:1.25rem;font-weight:500;color:var(--color-gray-11);display:inline-flex;gap:0.375rem;align-items:center;} +.text-caption{font-size:0.875rem;line-height:1.25rem;font-weight:500;color:var(--color-gray-11);} +.text-muted{color:var(--color-gray-11);} +.action-link:hover{color:var(--color-accent-9);} /* layer: default */ .p-0{padding:0;} .px-2{padding-left:0.5rem;padding-right:0.5rem;} @@ -276,7 +405,7 @@ .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;} .py-3{padding-top:0.75rem;padding-bottom:0.75rem;} .py-4{padding-top:1rem;padding-bottom:1rem;} -.py-6{padding-top:1.5rem;padding-bottom:1.5rem;} +.py-8{padding-top:2rem;padding-bottom:2rem;} .pr-2{padding-right:0.5rem;} .mx-2{margin-left:0.5rem;margin-right:0.5rem;} .my-6{margin-top:1.5rem;margin-bottom:1.5rem;} @@ -287,14 +416,15 @@ .mb-8{margin-bottom:2rem;} .mb-auto{margin-bottom:auto;} .ml-2{margin-left:0.5rem;} +.ml-auto{margin-left:auto;} .mr-2{margin-right:0.5rem;} .mt-12{margin-top:3rem;} .mt-3{margin-top:0.75rem;} .block{display:block;} .display-none, .hidden{display:none;} -.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity));} -.hover\:bg-gray-100:hover{--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));} +.bg-gray-1{background-color:var(--color-gray-1);} +.hover\:bg-gray-3:hover{background-color:var(--color-gray-3);} .fill-current{fill:currentColor;} .border-b{border-bottom-width:1px;} .rounded{border-radius:0.25rem;} @@ -306,14 +436,13 @@ .text-xs{font-size:0.75rem;line-height:1rem;} .font-bold{font-weight:700;} .font-medium{font-weight:500;} -.text-black{--un-text-opacity:1;color:rgba(0,0,0,var(--un-text-opacity));} -.text-gray-200{--un-text-opacity:1;color:rgba(229,231,235,var(--un-text-opacity));} -.text-gray-400{--un-text-opacity:1;color:rgba(156,163,175,var(--un-text-opacity));} -.text-gray-500{--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity));} -.hover\:text-gray-600:hover{--un-text-opacity:1;color:rgba(75,85,99,var(--un-text-opacity));} +.text-gray-6{color:var(--color-gray-6);} +.text-gray-8{color:var(--color-gray-8);} +.hover\:text-gray-11:hover{color:var(--color-gray-11);} .text-inherit{color:inherit;} .flex{display:flex;} .shrink-0{flex-shrink:0;} +.flex-col{flex-direction:column;} .flex-wrap{flex-wrap:wrap;} .gap-2{gap:0.5rem;} .gap-3{gap:0.75rem;} @@ -327,14 +456,20 @@ .max-w-800px{max-width:800px;} .w-3{width:0.75rem;} .w-4{width:1rem;} +.w-5{width:1.25rem;} .w-full{width:100%;} .overflow-x-auto{overflow-x:auto;} .justify-between{justify-content:space-between;} +.items-start{align-items:flex-start;} .items-center{align-items:center;} .top-0{top:0;} .z-10{z-index:10;} .transition-color{transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} .columns-2{columns:2;} +@media (min-width: 640px){ +.sm\:hidden{display:none;} +.sm\:flex{display:flex;} +} @media (min-width: 768px){ .md\:hidden{display:none;} .md\:display-table{display:table;} diff --git a/view/templates/base.html b/view/templates/base.html index ea320ef..c44fa66 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -20,19 +20,56 @@ {% block head %}{% endblock %} + - -
+ +

{% include "parts/logo.svg" %}

-
diff --git a/view/templates/index.html b/view/templates/index.html index dfbd4ab..f090be3 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -3,7 +3,7 @@ {% block header_class %}{% endblock header_class %} {% block body %} -
+
{% include "parts/filters.html" %}
@@ -16,6 +16,6 @@
{{ pagination.links }}
-
{{ pagination.info }}
+
{{ pagination.info }}
{% endblock body %} diff --git a/view/templates/parts/feeds_filter_dialog.html b/view/templates/parts/feeds_filter_dialog.html index 5371c46..b3ee766 100644 --- a/view/templates/parts/feeds_filter_dialog.html +++ b/view/templates/parts/feeds_filter_dialog.html @@ -9,7 +9,7 @@
{% for feed in feeds %}