nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 03:43:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add dark theme

Browse source
This commit is contained in:
Ondřej Nývlt 2023-09-05 23:27:07 +02:00
parent 90b9f67827
commit cb56ed3495
9 changed files with 445 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
view/package-lock.json generated
View file

@ -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",

1
view/package.json
View file

@ -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"

221
view/static/main.css
View file

@ -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;}

47
view/templates/base.html
View file

@ -20,19 +20,56 @@
<script defer src="{{ url_for('static', filename='alpinejs-persist@3.12.3.min.js') }}"></script>
<script defer src="{{ url_for('static', filename='alpinejs@3.12.3.min.js') }}"></script>
{% block head %}{% endblock %}
<script>
const themeQuery = window.matchMedia("(prefers-color-scheme: dark)")
const THEME_OVERRIDE_KEY = "themeOverride"
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: themeQuery.matches,
init() {
const themeOverride = window.localStorage.getItem(THEME_OVERRIDE_KEY)
if (themeOverride) {
this.on = themeOverride === "true"
}
},
toggleManually() {
this.on = ! this.on
window.localStorage.setItem(THEME_OVERRIDE_KEY, this.on)
}
})
})
themeQuery.addEventListener("change", (event) => {
Alpine.store('darkMode').on = event.matches
window.localStorage.removeItem(THEME_OVERRIDE_KEY)
})
</script>
</head>
<body hx-boost="true" x-data="{ expandDiffs: $persist(false) }">
<header class="py-4 bg-white {% block header_class %}border-b{% endblock %}">
<body hx-boost="true" x-data="{ expandDiffs: $persist(false) }" x-bind:class="{ 'dark-theme': $store.darkMode.on }">
<header class="py-4 bg-gray-1 {% block header_class %}border-b{% endblock %}">
<div class="container flex flex-wrap items-center gap-x-8 gap-y-2">
<a href="/" class="text-inherit">
<h1 class="logo text-2xl font-bold">
{% include "parts/logo.svg" %}
</h1>
</a>
<nav class="flex flex-wrap items-center gap-x-4 gap-y-2 text-black font-medium">
<a class="text-inherit" href="/about">About</a>
<a class="text-inherit" href="/feeds">Feeds</a>
<nav class="hidden sm:flex flex-wrap items-center gap-x-4 gap-y-2 font-medium">
<a href="/about">About</a>
<a href="/feeds">Feeds</a>
</nav>
<button class="button-md button-outline ml-auto" @click="$store.darkMode.toggleManually()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" x-show="$store.darkMode.on">
<title>Light theme</title>
<path fill="currentColor" d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5" x-show="!$store.darkMode.on">
<title>Dark theme</title>
<path fill="currentColor" d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path>
</svg>
</button>
</div>
</header>
<main class="mb-auto">

4
view/templates/index.html
View file

@ -3,7 +3,7 @@
{% block header_class %}{% endblock header_class %}
{% block body %}
<div class="bg-white sticky top-0 py-3 border-b z-10 mb-6">
<div class="bg-gray-1 sticky top-0 py-3 border-b z-10 mb-6">
{% include "parts/filters.html" %}
</div>
@ -16,6 +16,6 @@
<div class="container mb-3">{{ pagination.links }}</div>
</div>
<div class="container text-sm text-gray-500">{{ pagination.info }}</div>
<div class="container text-sm text-muted">{{ pagination.info }}</div>
</div>
{% endblock body %}

2
view/templates/parts/feeds_filter_dialog.html
View file

@ -9,7 +9,7 @@
<div class="columns-2 mb-6">
{% for feed in feeds %}
<label
class="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-100 rounded"
class="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-3 rounded"
>
<input type="checkbox" name="feeds[]" value="{{ feed['feed_name'] }}"
{{ 'checked' if feed['feed_name'] in selected_feeds }} > {{

17
view/templates/parts/footer.html
View file

@ -1,8 +1,13 @@
<footer class="mt-12 py-6 text-gray-200 text-sm font-medium">
<div class="container flex flex-wrap items-center shrink-0 gap-x-2 gap-y-2">
<span class="flex items-center gap-2 text-gray-400">
<footer class="mt-12 py-8 font-medium bg-gray-1">
<nav class="container flex flex-col items-start gap-2 mb-8 sm:hidden">
<span class="text-gray-8 mb-3">{% include "parts/logo.svg" %}</span>
<a href="/about">About</a>
<a href="/feeds">Feeds</a>
</nav>
<div class="container flex flex-wrap items-center shrink-0 gap-x-2 gap-y-2 text-sm">
<span class="flex items-center gap-2 text-gray-8">
<span>created by</span>
<a href="https://nolog.cz" class="text-gray-400 hover:text-gray-600">
<a href="https://nolog.cz" class="text-gray-8 hover:text-gray-11">
<svg class="block fill-current transition-color" width="120" viewBox="0 0 400 60" fill-rule="evenodd">
<title>NoLog</title>
<path d="M60,0l-60,0l0,60l20,0l0,-41l20,0l-0,41l20,0l-0,-60Z"></path>
@ -14,7 +19,7 @@
</svg>
</a>
</span>
<span> · </span>
<a class="text-gray-400 hover:text-gray-600" href="https://git.nolog.cz/NoLog.cz/headline">Source code</a>
<span class="text-gray-6"> · </span>
<a class="text-gray-8 hover:text-gray-11" href="https://git.nolog.cz/NoLog.cz/headline">Source code</a>
</div>
</footer>

4
view/templates/parts/logo.svg
View file

@ -1,6 +1,6 @@
<svg width="144" viewBox="0 0 512 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.4 3.32h21.12v36.96c2.56-2.56 5.48-4.48 8.76-5.76 3.36-1.28 6.88-1.92 10.56-1.92 8.08 0 14.04 2.12 17.88 6.36C68.64 43.12 70.6 48.8 70.6 56v36H49.48V58.76c0-6.48-2.96-9.72-8.88-9.72-2.72 0-5.2.64-7.44 1.92-2.24 1.2-4.12 3.08-5.64 5.64V92H6.4V3.32zM114.654 93.8c-11.28 0-20.16-2.64-26.64-7.92-6.4-5.28-9.6-12.76-9.6-22.44 0-9.52 2.84-17.04 8.52-22.56 5.76-5.52 14.04-8.28 24.84-8.28 6.88 0 12.76 1.32 17.64 3.96 4.96 2.56 8.68 6.12 11.16 10.68 2.56 4.48 3.84 9.56 3.84 15.24v7.8h-45.96c.8 3.2 2.8 5.52 6 6.96 3.2 1.44 7.56 2.16 13.08 2.16 3.76 0 7.6-.32 11.52-.96 4-.64 7.44-1.52 10.32-2.64v13.92c-2.96 1.2-6.68 2.16-11.16 2.88-4.4.8-8.92 1.2-13.56 1.2zm9.84-36.72c-.32-3.12-1.6-5.56-3.84-7.32-2.24-1.76-5.32-2.64-9.24-2.64-3.84 0-6.88.92-9.12 2.76-2.24 1.76-3.52 4.16-3.84 7.2h26.04zM174.487 93.8c-7.2 0-13.04-1.72-17.52-5.16-4.4-3.52-6.6-8.4-6.6-14.64 0-6.48 2.12-11.44 6.36-14.88 4.32-3.52 10.48-5.28 18.48-5.28 3.12 0 6.24.36 9.36 1.08 3.12.64 5.8 1.52 8.04 2.64v-1.2c0-6.16-5.04-9.24-15.12-9.24-7.04 0-13.48 1.36-19.32 4.08V36.68c2.56-1.2 5.92-2.16 10.08-2.88 4.16-.8 8.48-1.2 12.96-1.2 10.72 0 18.8 2.16 24.24 6.48 5.52 4.24 8.28 10.2 8.28 17.88V92h-19.8v-4.92c-2.16 2.08-4.88 3.72-8.16 4.92-3.28 1.2-7.04 1.8-11.28 1.8zm6.24-12.96c2.48 0 4.8-.48 6.96-1.44 2.16-1.04 3.8-2.36 4.92-3.96V70.4c-3.44-2.32-7.36-3.48-11.76-3.48-2.8 0-4.96.6-6.48 1.8-1.52 1.2-2.28 2.96-2.28 5.28 0 2.16.72 3.84 2.16 5.04 1.52 1.2 3.68 1.8 6.48 1.8zM252.1 93.8c-6 0-11.32-1.24-15.96-3.72-4.64-2.56-8.24-6.12-10.8-10.68-2.56-4.64-3.84-10-3.84-16.08 0-6 1.28-11.32 3.84-15.96 2.56-4.72 6.12-8.36 10.68-10.92 4.64-2.56 10-3.84 16.08-3.84 4 0 7.68.56 11.04 1.68 3.36 1.12 6.24 2.72 8.64 4.8V3.32h21.12V92h-20.4v-5.76c-5.36 5.04-12.16 7.56-20.4 7.56zm5.52-16.32c3.2 0 6.08-.8 8.64-2.4 2.56-1.68 4.4-3.92 5.52-6.72v-10.2c-1.12-2.8-2.96-5-5.52-6.6-2.56-1.68-5.44-2.52-8.64-2.52-4.32 0-7.8 1.28-10.44 3.84-2.64 2.56-3.96 6.04-3.96 10.44 0 4.4 1.32 7.88 3.96 10.44 2.64 2.48 6.12 3.72 10.44 3.72zM303.705 3.32h21.12V92h-21.12V3.32zM346.86 26.72c-3.2 0-5.88-1.04-8.04-3.12-2.16-2.08-3.24-4.72-3.24-7.92 0-3.12 1.08-5.72 3.24-7.8 2.16-2.16 4.84-3.24 8.04-3.24 3.12 0 5.76 1.08 7.92 3.24 2.24 2.08 3.36 4.68 3.36 7.8s-1.12 5.76-3.36 7.92c-2.16 2.08-4.8 3.12-7.92 3.12zM336.3 34.4h21.12V92H336.3V34.4zM368.978 34.4h20.4v6.36c2.48-2.72 5.48-4.76 9-6.12 3.52-1.36 7.2-2.04 11.04-2.04 8.08 0 14.04 2.12 17.88 6.36 3.92 4.16 5.88 9.84 5.88 17.04v36h-21.12V58.76c0-6.48-2.96-9.72-8.88-9.72-2.72 0-5.2.64-7.44 1.92-2.24 1.2-4.12 3.08-5.64 5.64V92h-21.12V34.4zM477.232 93.8c-11.28 0-20.16-2.64-26.64-7.92-6.4-5.28-9.6-12.76-9.6-22.44 0-9.52 2.84-17.04 8.52-22.56 5.76-5.52 14.04-8.28 24.84-8.28 6.88 0 12.76 1.32 17.64 3.96 4.96 2.56 8.68 6.12 11.16 10.68 2.56 4.48 3.84 9.56 3.84 15.24v7.8h-45.96c.8 3.2 2.8 5.52 6 6.96 3.2 1.44 7.56 2.16 13.08 2.16 3.76 0 7.6-.32 11.52-.96 4-.64 7.44-1.52 10.32-2.64v13.92c-2.96 1.2-6.68 2.16-11.16 2.88-4.4.8-8.92 1.2-13.56 1.2zm9.84-36.72c-.32-3.12-1.6-5.56-3.84-7.32-2.24-1.76-5.32-2.64-9.24-2.64-3.84 0-6.88.92-9.12 2.76-2.24 1.76-3.52 4.16-3.84 7.2h26.04zM304 102.554c2.524 1.277 4.879 2.972 7.056 4.946 3.252 2.947 5.598 3.611 7.134 3.611 1.535 0 3.882-.664 7.134-3.611 4.92-4.46 10.746-7.5 17.383-7.5 6.637 0 12.463 3.04 17.383 7.5 3.252 2.947 5.599 3.611 7.134 3.611 1.536 0 3.882-.664 7.134-3.611 4.921-4.46 10.746-7.5 17.383-7.5 6.637 0 12.463 3.04 17.384 7.5 3.252 2.947 5.598 3.611 7.134 3.611 1.535 0 3.882-.664 7.133-3.611 4.921-4.46 10.747-7.5 17.384-7.5 6.637 0 12.463 3.04 17.383 7.5 3.252 2.947 5.599 3.611 7.134 3.611 1.535 0 3.882-.664 7.134-3.611 4.921-4.46 10.746-7.5 17.383-7.5 5.254 0 9.999 1.905 14.19 4.911v17.535c-2.524-1.277-4.878-2.972-7.056-4.946-3.252-2.947-5.598-3.611-7.134-3.611-1.535 0-3.882.664-7.134 3.611-4.92 4.46-10.746 7.5-17.383 7.5-6.637 0-12.463-3.04-17.383-7.5-3.252-2.947-5.599-3.611-7.134-3.611-1.536 0-3.882.664-7.134 3.611-4.921 4.46-10.746 7.5-17.383 7.5-6.637 0-12.463-3.04-17.384-7.5-3.251-2.947-5.598-3.611-7.134-3.611-1.535 0-3.882.664-7.133 3.611-4.921 4.46-10.747 7.5-17.384 7.5-6.637 0-12.462-3.04-17.383-7.5-3.252-2.947-5.599-3.611-7.134-3.611-1.535 0-3.882.664-7.134 3.611-4.921 4.46-10.746 7.5-17.383 7.5-5.254 0-9.999-1.905-14.19-4.911v-17.535z"
fill="#000" />
<path fill="#000" d="M0 57h170v14H0zM198 57h106v14H198z" />
fill="currentColor" />
<path fill="currentColor" d="M0 57h170v14H0zM198 57h106v14H198z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

236
view/uno.config.ts
View file

@ -1,12 +1,126 @@
import { defineConfig } from "unocss";
import presetMini, { theme, Theme } from "@unocss/preset-mini";
import { css } from "./helpers";
import {
gray,
grayDark,
green,
greenDark,
indigo,
indigoDark,
red,
redDark,
} from "@radix-ui/colors";
const globalCss = (theme: Required<Theme>) => css`
/* This file is dynamically generated. Do not edit this file. */
:root {
--color-border: hsl(0 0% 80% / 60%);
--color-gray-1: ${gray.gray1};
--color-gray-2: ${gray.gray2};
--color-gray-3: ${gray.gray3};
--color-gray-4: ${gray.gray4};
--color-gray-5: ${gray.gray5};
--color-gray-6: ${gray.gray6};
--color-gray-7: ${gray.gray7};
--color-gray-8: ${gray.gray8};
--color-gray-9: ${gray.gray9};
--color-gray-10: ${gray.gray10};
--color-gray-11: ${gray.gray11};
--color-gray-12: ${gray.gray12};
--color-accent-1: ${indigo.indigo1};
--color-accent-2: ${indigo.indigo2};
--color-accent-3: ${indigo.indigo3};
--color-accent-4: ${indigo.indigo4};
--color-accent-5: ${indigo.indigo5};
--color-accent-6: ${indigo.indigo6};
--color-accent-7: ${indigo.indigo7};
--color-accent-8: ${indigo.indigo8};
--color-accent-9: ${indigo.indigo9};
--color-accent-10: ${indigo.indigo10};
--color-accent-11: ${indigo.indigo11};
--color-accent-12: ${indigo.indigo12};
--color-ins-1: ${green.green1};
--color-ins-2: ${green.green2};
--color-ins-3: ${green.green3};
--color-ins-4: ${green.green4};
--color-ins-5: ${green.green5};
--color-ins-6: ${green.green6};
--color-ins-7: ${green.green7};
--color-ins-8: ${green.green8};
--color-ins-9: ${green.green9};
--color-ins-10: ${green.green10};
--color-ins-11: ${green.green11};
--color-ins-12: ${green.green12};
--color-del-1: ${red.red1};
--color-del-2: ${red.red2};
--color-del-3: ${red.red3};
--color-del-4: ${red.red4};
--color-del-5: ${red.red5};
--color-del-6: ${red.red6};
--color-del-7: ${red.red7};
--color-del-8: ${red.red8};
--color-del-9: ${red.red9};
--color-del-10: ${red.red10};
--color-del-11: ${red.red11};
--color-del-12: ${red.red12};
}
.dark-theme {
--color-gray-1: ${grayDark.gray1};
--color-gray-2: ${grayDark.gray2};
--color-gray-3: ${grayDark.gray3};
--color-gray-4: ${grayDark.gray4};
--color-gray-5: ${grayDark.gray5};
--color-gray-6: ${grayDark.gray6};
--color-gray-7: ${grayDark.gray7};
--color-gray-8: ${grayDark.gray8};
--color-gray-9: ${grayDark.gray9};
--color-gray-10: ${grayDark.gray10};
--color-gray-11: ${grayDark.gray11};
--color-gray-12: ${grayDark.gray12};
--color-accent-1: ${indigoDark.indigo1};
--color-accent-2: ${indigoDark.indigo2};
--color-accent-3: ${indigoDark.indigo3};
--color-accent-4: ${indigoDark.indigo4};
--color-accent-5: ${indigoDark.indigo5};
--color-accent-6: ${indigoDark.indigo6};
--color-accent-7: ${indigoDark.indigo7};
--color-accent-8: ${indigoDark.indigo8};
--color-accent-9: ${indigoDark.indigo9};
--color-accent-10: ${indigoDark.indigo10};
--color-accent-11: ${indigoDark.indigo11};
--color-accent-12: ${indigoDark.indigo12};
--color-ins-1: ${greenDark.green1};
--color-ins-2: ${greenDark.green2};
--color-ins-3: ${greenDark.green3};
--color-ins-4: ${greenDark.green4};
--color-ins-5: ${greenDark.green5};
--color-ins-6: ${greenDark.green6};
--color-ins-7: ${greenDark.green7};
--color-ins-8: ${greenDark.green8};
--color-ins-9: ${greenDark.green9};
--color-ins-10: ${greenDark.green10};
--color-ins-11: ${greenDark.green11};
--color-ins-12: ${greenDark.green12};
--color-del-1: ${redDark.red1};
--color-del-2: ${redDark.red2};
--color-del-3: ${redDark.red3};
--color-del-4: ${redDark.red4};
--color-del-5: ${redDark.red5};
--color-del-6: ${redDark.red6};
--color-del-7: ${redDark.red7};
--color-del-8: ${redDark.red8};
--color-del-9: ${redDark.red9};
--color-del-10: ${redDark.red10};
--color-del-11: ${redDark.red11};
--color-del-12: ${redDark.red12};
}
html {
@ -20,7 +134,8 @@ const globalCss = (theme: Required<Theme>) => css`
flex-direction: column;
align-items: stretch;
line-height: 1.5;
background-color: ${theme.colors.gray[50]};
background-color: var(--color-gray-2);
color: var(--color-gray-12);
}
*,
@ -29,7 +144,7 @@ const globalCss = (theme: Required<Theme>) => css`
box-sizing: inherit;
border-width: 0;
border-style: solid;
border-color: var(--color-border);
border-color: var(--color-gray-6);
}
:not(dialog) {
@ -77,24 +192,33 @@ const globalCss = (theme: Required<Theme>) => css`
}
a {
color: ${theme.colors.accent[600]};
color: var(--color-accent-10);
font-weight: 500;
text-decoration: none;
transition: color 120ms;
}
a:hover {
color: ${theme.colors.accent[800]};
color: var(--color-accent-12);
}
ins,
del {
text-decoration: none;
border-bottom: 1px solid transparent;
border-radius: ${theme.borderRadius.sm};
}
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 {
@ -109,14 +233,16 @@ const globalCss = (theme: Required<Theme>) => css`
.text-input {
border-radius: ${theme.borderRadius.sm};
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: ${theme.colors.accent[500]};
box-shadow: 0 0 0 2px ${theme.colors.accent[500]};
border-color: var(--color-accent-9);
box-shadow: 0 0 0 2px var(--color-accent-9);
outline: none;
}
@ -125,7 +251,7 @@ const globalCss = (theme: Required<Theme>) => css`
line-height: ${theme.fontSize.sm[1]};
display: flex;
align-items: center;
color: ${theme.colors.gray[500]};
color: var(--color-gray-11);
font-weight: 500;
cursor: pointer;
}
@ -145,23 +271,25 @@ const globalCss = (theme: Required<Theme>) => css`
}
.button {
border: 1px solid var(--color-border);
background: ${theme.colors.gray[100]};
color: ${theme.colors.gray[600]};
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: ${theme.colors.gray[600]};
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 {
@ -191,10 +319,10 @@ const globalCss = (theme: Required<Theme>) => css`
}
.page-item {
border: 1px solid var(--color-border);
background: ${theme.colors.gray[100]};
transition: background-color 120ms;
color: ${theme.colors.gray[600]};
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;
@ -205,7 +333,8 @@ const globalCss = (theme: Required<Theme>) => css`
}
.page-item:not(.active):hover {
background: ${theme.colors.gray[200]};
background: var(--color-gray-4);
color: var(--color-gray-12);
}
.page-item:first-of-type {
@ -221,7 +350,7 @@ const globalCss = (theme: Required<Theme>) => css`
}
.page-item.active {
background-color: ${theme.colors.accent[600]};
background-color: var(--color-accent-9);
color: white;
border-color: transparent;
}
@ -233,13 +362,17 @@ const globalCss = (theme: Required<Theme>) => css`
/* Misc components */
.card {
border: 1px solid var(--color-border);
border: 1px solid var(--color-gray-6);
border-radius: ${theme.borderRadius.md};
background-color: white;
box-shadow: 0 2px 0 ${theme.colors.gray[200]};
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;
@ -256,20 +389,53 @@ const globalCss = (theme: Required<Theme>) => css`
.dialog {
border-radius: ${theme.borderRadius["md"]};
border: 1px solid var(--color-border);
border: 1px solid var(--color-gray-6);
box-shadow: ${theme.boxShadow.DEFAULT};
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%);
}
`;
export default defineConfig({
presets: [presetMini()],
theme: {
colors: {
accent: theme.colors.blue,
gray: {
[1]: "var(--color-gray-1)",
[2]: "var(--color-gray-2)",
[3]: "var(--color-gray-3)",
[4]: "var(--color-gray-4)",
[5]: "var(--color-gray-5)",
[6]: "var(--color-gray-6)",
[7]: "var(--color-gray-7)",
[8]: "var(--color-gray-8)",
[9]: "var(--color-gray-9)",
[10]: "var(--color-gray-10)",
[11]: "var(--color-gray-11)",
[12]: "var(--color-gray-12)",
},
accent: {
[1]: "var(--color-accent-1)",
[2]: "var(--color-accent-2)",
[3]: "var(--color-accent-3)",
[4]: "var(--color-accent-4)",
[5]: "var(--color-accent-5)",
[6]: "var(--color-accent-6)",
[7]: "var(--color-accent-7)",
[8]: "var(--color-accent-8)",
[9]: "var(--color-accent-9)",
[10]: "var(--color-accent-10)",
[11]: "var(--color-accent-11)",
[12]: "var(--color-accent-12)",
},
},
borderRadius: {
sm: "0.25rem",
@ -280,9 +446,9 @@ export default defineConfig({
shortcuts: {
container: "max-w-1200px px-4 mx-auto",
"action-link":
"text-(sm gray-500) font-medium inline-flex items-center gap-1.5 hover:text-accent-700",
"text-muted": "text-gray-500",
"text-caption": "text-(sm gray-500) font-medium",
"text-(sm gray-11) font-medium inline-flex items-center gap-1.5 hover:text-accent-9",
"text-muted": "text-gray-11",
"text-caption": "text-(sm gray-11) font-medium",
},
preflights: [
{