dark mode, logging fixes to avoid agent traffic bloat
This commit is contained in:
boris committed
1 parent
d97b1661c1
commit
f7cf22f970
10 files changed
+488
-36
No files matched your search
+323
-4
@@ -8,7 +8,7 @@
|
||||
<title>{% block title %}Keywarden{% endblock %}</title>
|
||||
<link rel="icon" type="image/svg+xml" href="{% static 'branding/keywarden-favicon.svg' %}">
|
||||
<link rel="icon" type="image/png" href="{% static 'ninja/favicon.png' %}">
|
||||
<meta name="theme-color" content="#0f172a">
|
||||
<meta id="kw-theme-color" name="theme-color" content="#0f172a">
|
||||
<meta property="og:title" content="Keywarden">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -16,9 +16,38 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
{% tailwind_css %}
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--kw-chart-card-border: #d6e0ee;
|
||||
--kw-chart-card-bg: radial-gradient(120% 140% at 0% 0%, #f8fbff 0%, #eef4ff 50%, #e6eefb 100%);
|
||||
--kw-chart-text: #0f172a;
|
||||
--kw-chart-subtext: #475569;
|
||||
--kw-chart-badge-border: rgba(148, 163, 184, 0.45);
|
||||
--kw-chart-badge-bg: rgba(255, 255, 255, 0.85);
|
||||
--kw-chart-badge-text: #1e293b;
|
||||
--kw-chart-canvas-border: rgba(148, 163, 184, 0.35);
|
||||
--kw-chart-canvas-bg: rgba(248, 250, 252, 0.75);
|
||||
--kw-chart-empty-text: #64748b;
|
||||
}
|
||||
html[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--kw-chart-card-border: #1f2937;
|
||||
--kw-chart-card-bg: radial-gradient(120% 140% at 0% 0%, #1e293b 0%, #111827 50%, #0b1220 100%);
|
||||
--kw-chart-text: #f3f4f6;
|
||||
--kw-chart-subtext: #94a3b8;
|
||||
--kw-chart-badge-border: rgba(100, 116, 139, 0.45);
|
||||
--kw-chart-badge-bg: rgba(15, 23, 42, 0.65);
|
||||
--kw-chart-badge-text: #e2e8f0;
|
||||
--kw-chart-canvas-border: rgba(71, 85, 105, 0.35);
|
||||
--kw-chart-canvas-bg: rgba(2, 6, 23, 0.32);
|
||||
--kw-chart-empty-text: #94a3b8;
|
||||
}
|
||||
.kw-shell-width {
|
||||
max-width: 80rem;
|
||||
}
|
||||
.kw-topnav-link {
|
||||
transition: color 150ms ease, background-color 150ms ease;
|
||||
}
|
||||
html[data-display-mode="full"] .kw-shell-width {
|
||||
max-width: min(1800px, calc(100vw - 1.5rem));
|
||||
}
|
||||
@@ -27,7 +56,196 @@
|
||||
max-width: min(1880px, calc(100vw - 3rem));
|
||||
}
|
||||
}
|
||||
html[data-theme="dark"] body {
|
||||
background: linear-gradient(135deg, #020617, #0f172a 45%, #111827);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
html[data-theme="dark"] header,
|
||||
html[data-theme="dark"] footer {
|
||||
border-color: #334155 !important;
|
||||
background-color: rgba(15, 23, 42, 0.92) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-white {
|
||||
background-color: #0f172a !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-gray-50 {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-gray-100 {
|
||||
background-color: #1f2937 !important;
|
||||
}
|
||||
html[data-theme="dark"] .border-gray-100 {
|
||||
border-color: #1e293b !important;
|
||||
}
|
||||
html[data-theme="dark"] .border-gray-200 {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] .border-gray-300 {
|
||||
border-color: #475569 !important;
|
||||
}
|
||||
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: #1e293b !important;
|
||||
}
|
||||
html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-900 {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-800 {
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-700 {
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-600 {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-500 {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-gray-400 {
|
||||
color: #64748b !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-blue-700 {
|
||||
color: #60a5fa !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-emerald-700 {
|
||||
color: #34d399 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-emerald-800 {
|
||||
color: #6ee7b7 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-indigo-700 {
|
||||
color: #818cf8 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-rose-700 {
|
||||
color: #fb7185 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-red-600 {
|
||||
color: #f87171 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-red-800 {
|
||||
color: #fca5a5 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-amber-700 {
|
||||
color: #fbbf24 !important;
|
||||
}
|
||||
html[data-theme="dark"] .text-amber-800 {
|
||||
color: #fcd34d !important;
|
||||
}
|
||||
html[data-theme="dark"] .ring-blue-100 {
|
||||
--tw-ring-color: rgba(59, 130, 246, 0.35) !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-gray-50:hover {
|
||||
background-color: #1f2937 !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-gray-100:hover {
|
||||
background-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-white:hover {
|
||||
background-color: #1e293b !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:text-gray-900:hover {
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-blue-50 {
|
||||
background-color: rgba(37, 99, 235, 0.2) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-blue-100 {
|
||||
background-color: rgba(37, 99, 235, 0.3) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-emerald-50 {
|
||||
background-color: rgba(5, 150, 105, 0.2) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-emerald-100 {
|
||||
background-color: rgba(5, 150, 105, 0.28) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-indigo-50 {
|
||||
background-color: rgba(79, 70, 229, 0.22) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-rose-50 {
|
||||
background-color: rgba(225, 29, 72, 0.2) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-rose-100 {
|
||||
background-color: rgba(225, 29, 72, 0.28) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-amber-100 {
|
||||
background-color: rgba(180, 83, 9, 0.35) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-red-50 {
|
||||
background-color: rgba(127, 29, 29, 0.32) !important;
|
||||
}
|
||||
html[data-theme="dark"] .bg-gray-200 {
|
||||
background-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-blue-50:hover {
|
||||
background-color: rgba(37, 99, 235, 0.28) !important;
|
||||
}
|
||||
html[data-theme="dark"] .hover\:bg-blue-100:hover {
|
||||
background-color: rgba(37, 99, 235, 0.35) !important;
|
||||
}
|
||||
html[data-theme="dark"] tr.border-t {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] hr {
|
||||
border-color: #334155 !important;
|
||||
}
|
||||
html[data-theme="dark"] input[type="text"],
|
||||
html[data-theme="dark"] input[type="password"],
|
||||
html[data-theme="dark"] input[type="email"],
|
||||
html[data-theme="dark"] input[type="search"],
|
||||
html[data-theme="dark"] input[type="datetime-local"],
|
||||
html[data-theme="dark"] input[type="number"],
|
||||
html[data-theme="dark"] input[type="url"],
|
||||
html[data-theme="dark"] input[type="tel"],
|
||||
html[data-theme="dark"] textarea,
|
||||
html[data-theme="dark"] select {
|
||||
background-color: #0b1220 !important;
|
||||
border-color: #475569 !important;
|
||||
color: #e2e8f0 !important;
|
||||
}
|
||||
html[data-theme="dark"] input::placeholder,
|
||||
html[data-theme="dark"] textarea::placeholder {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
html[data-theme="dark"] .kw-topnav-link {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
html[data-theme="dark"] .kw-topnav-link:hover {
|
||||
background-color: #1f2937 !important;
|
||||
color: #bfdbfe !important;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
html[data-theme="dark"] .kw-topnav-link:hover {
|
||||
background-color: transparent !important;
|
||||
color: #93c5fd !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
var key = "keywardenThemeMode";
|
||||
function normalize(mode) {
|
||||
return mode === "light" || mode === "dark" || mode === "system" ? mode : "system";
|
||||
}
|
||||
function resolve(mode) {
|
||||
if (mode === "system") {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
}
|
||||
return mode;
|
||||
}
|
||||
var mode = "system";
|
||||
try {
|
||||
mode = normalize(window.localStorage.getItem(key));
|
||||
} catch (err) {
|
||||
mode = "system";
|
||||
}
|
||||
var resolved = resolve(mode);
|
||||
document.documentElement.setAttribute("data-theme-mode", mode);
|
||||
document.documentElement.setAttribute("data-theme", resolved);
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var key = "keywardenDisplayMode";
|
||||
@@ -61,6 +279,15 @@
|
||||
</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-3 md:order-2">
|
||||
<button
|
||||
type="button"
|
||||
data-theme-toggle
|
||||
class="inline-flex items-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-300"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<span data-theme-icon aria-hidden="true">◐</span>
|
||||
<span data-theme-label>Theme</span>
|
||||
</button>
|
||||
{% if request.user.is_authenticated %}
|
||||
<a
|
||||
href="{% url 'accounts:logout' %}"
|
||||
@@ -95,7 +322,7 @@
|
||||
<li>
|
||||
<a
|
||||
href="{% url 'servers:dashboard' %}"
|
||||
class="block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
class="kw-topnav-link block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
>
|
||||
Servers
|
||||
</a>
|
||||
@@ -103,7 +330,7 @@
|
||||
<li>
|
||||
<a
|
||||
href="{% url 'accounts:profile' %}"
|
||||
class="block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
class="kw-topnav-link block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
@@ -112,7 +339,7 @@
|
||||
<li>
|
||||
<a
|
||||
href="{% url 'servers:admin_dashboard' %}"
|
||||
class="block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
class="kw-topnav-link block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
|
||||
>
|
||||
Admin
|
||||
</a>
|
||||
@@ -147,6 +374,98 @@
|
||||
</footer>
|
||||
{% endif %}
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var key = "keywardenThemeMode";
|
||||
var root = document.documentElement;
|
||||
var toggles = document.querySelectorAll("[data-theme-toggle]");
|
||||
var labels = document.querySelectorAll("[data-theme-label]");
|
||||
var icons = document.querySelectorAll("[data-theme-icon]");
|
||||
var themeMeta = document.getElementById("kw-theme-color");
|
||||
|
||||
function normalize(mode) {
|
||||
return mode === "light" || mode === "dark" || mode === "system" ? mode : "system";
|
||||
}
|
||||
function resolve(mode) {
|
||||
if (mode === "system") {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
}
|
||||
return mode;
|
||||
}
|
||||
function readMode() {
|
||||
try {
|
||||
return normalize(window.localStorage.getItem(key));
|
||||
} catch (err) {
|
||||
return "system";
|
||||
}
|
||||
}
|
||||
function writeMode(mode) {
|
||||
try {
|
||||
window.localStorage.setItem(key, mode);
|
||||
} catch (err) {
|
||||
// Ignore storage failures.
|
||||
}
|
||||
}
|
||||
function apply(mode) {
|
||||
var resolved = resolve(mode);
|
||||
root.setAttribute("data-theme-mode", mode);
|
||||
root.setAttribute("data-theme", resolved);
|
||||
var labelText = mode === "system" ? "Theme: System" : (mode === "dark" ? "Theme: Dark" : "Theme: Light");
|
||||
var iconText = resolved === "dark" ? "☾" : "☀";
|
||||
if (themeMeta) {
|
||||
themeMeta.setAttribute("content", resolved === "dark" ? "#020617" : "#f8fafc");
|
||||
}
|
||||
for (var i = 0; i < labels.length; i += 1) {
|
||||
labels[i].textContent = labelText;
|
||||
}
|
||||
for (var j = 0; j < icons.length; j += 1) {
|
||||
icons[j].textContent = iconText;
|
||||
}
|
||||
if (typeof window.CustomEvent === "function") {
|
||||
window.dispatchEvent(new CustomEvent("keywarden:theme-mode", { detail: { mode: mode, resolved: resolved } }));
|
||||
}
|
||||
return mode;
|
||||
}
|
||||
function cycle(mode) {
|
||||
if (mode === "light") {
|
||||
return "dark";
|
||||
}
|
||||
if (mode === "dark") {
|
||||
return "system";
|
||||
}
|
||||
return "light";
|
||||
}
|
||||
|
||||
var currentMode = apply(readMode());
|
||||
for (var k = 0; k < toggles.length; k += 1) {
|
||||
toggles[k].addEventListener("click", function () {
|
||||
currentMode = apply(cycle(currentMode));
|
||||
writeMode(currentMode);
|
||||
});
|
||||
}
|
||||
|
||||
var media = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
var mediaListener = function () {
|
||||
if (currentMode === "system") {
|
||||
apply(currentMode);
|
||||
}
|
||||
};
|
||||
if (typeof media.addEventListener === "function") {
|
||||
media.addEventListener("change", mediaListener);
|
||||
} else if (typeof media.addListener === "function") {
|
||||
media.addListener(mediaListener);
|
||||
}
|
||||
|
||||
window.keywardenGetThemeMode = function () {
|
||||
return currentMode;
|
||||
};
|
||||
window.keywardenSetThemeMode = function (mode) {
|
||||
currentMode = apply(normalize(mode));
|
||||
writeMode(currentMode);
|
||||
return currentMode;
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function () {
|
||||
var key = "keywardenDisplayMode";
|
||||
|
||||
Reference in new issue
Block a user