visual tuning

This commit is contained in:
2026-02-02 08:18:38 +01:00
parent 795b9c03ef
commit b9d22f5dfa
+12 -21
View File
@@ -1154,7 +1154,7 @@ data:
{{ $todos := .JSON.Array "todos" }} {{ $todos := .JSON.Array "todos" }}
<style> <style>
.todo-widget { display: flex; flex-direction: column; gap: 10px; } .todo-widget { display: flex; flex-direction: column; gap: 10px; padding-top: 0 !important; margin-top: -0.5rem; }
.todo-add { .todo-add {
display: flex; gap: 8px; align-items: center; display: flex; gap: 8px; align-items: center;
background: rgba(255,255,255,0.06); border-radius: 8px; background: rgba(255,255,255,0.06); border-radius: 8px;
@@ -1188,11 +1188,11 @@ data:
justify-content: center; flex-shrink: 0; transition: all 0.15s; justify-content: center; flex-shrink: 0; transition: all 0.15s;
background: transparent; background: transparent;
} }
.todo-checkbox:hover { border-color: rgba(255,255,255,0.7); } .todo-checkbox:hover { border-color: rgba(96, 165, 250, 0.8); }
.todo-checkbox.done { .todo-checkbox.done {
background: rgba(34, 197, 94, 0.8); border-color: rgba(34, 197, 94, 0.8); background: transparent; border-color: rgba(96, 165, 250, 0.8);
} }
.todo-checkbox.done::after { content: "✓"; font-size: 11px; color: #fff; } .todo-checkbox.done::after { content: "✓"; font-size: 11px; color: rgba(96, 165, 250, 1); font-weight: bold; }
.todo-text { flex: 1; font-size: 13px; opacity: 0.95; line-height: 1.3; } .todo-text { flex: 1; font-size: 13px; opacity: 0.95; line-height: 1.3; }
.todo-text.done { text-decoration: line-through; opacity: 0.5; } .todo-text.done { text-decoration: line-through; opacity: 0.5; }
.todo-delete { .todo-delete {
@@ -1321,26 +1321,20 @@ data:
{{ $user := .Options.StringOr "user" "kisfenyo" }} {{ $user := .Options.StringOr "user" "kisfenyo" }}
{{ $apiKey := .Options.StringOr "api_key" "" }} {{ $apiKey := .Options.StringOr "api_key" "" }}
{{ $quote := .JSON.String "quote" }} {{ $quote := .JSON.String "quote" }}
{{ $total := .JSON.Int "total" }}
<style> <style>
.motiv-widget { position: relative; } .motiv-widget { position: relative; }
.motiv-quote { .motiv-quote {
font-size: 14px; line-height: 1.5; opacity: 0.9; font-size: 15px; line-height: 1.6; opacity: 0.85;
padding: 12px 14px; background: rgba(255,255,255,0.04); font-style: italic; padding: 4px 0;
border-radius: 10px; border-left: 3px solid rgba(96, 165, 250, 0.6);
font-style: italic;
}
.motiv-meta {
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px; font-size: 11px; opacity: 0.5;
} }
.motiv-gear { .motiv-gear {
cursor: pointer; padding: 2px 6px; border-radius: 4px; position: absolute; top: -2.2rem; right: 0;
transition: opacity 0.15s, background 0.15s; border: none; background: none; cursor: pointer; padding: 4px 6px; border-radius: 4px;
color: inherit; font-size: 11px; border: none; background: none; color: inherit;
font-size: 12px; opacity: 0.4; transition: opacity 0.15s;
} }
.motiv-gear:hover { opacity: 1; background: rgba(255,255,255,0.1); } .motiv-gear:hover { opacity: 0.8; }
.motiv-modal-overlay { .motiv-modal-overlay {
display: none; position: fixed; inset: 0; display: none; position: fixed; inset: 0;
@@ -1397,11 +1391,8 @@ data:
</style> </style>
<div class="motiv-widget" data-api="{{ $apiBase }}" data-user="{{ $user }}" data-key="{{ $apiKey }}"> <div class="motiv-widget" data-api="{{ $apiBase }}" data-user="{{ $user }}" data-key="{{ $apiKey }}">
<button class="motiv-gear" type="button" title="Manage quotes">⚙️</button>
<div class="motiv-quote">{{ $quote }}</div> <div class="motiv-quote">{{ $quote }}</div>
<div class="motiv-meta">
<span>{{ $total }} quotes</span>
<button class="motiv-gear" type="button" title="Manage quotes">⚙️ Manage</button>
</div>
<div class="motiv-modal-overlay"> <div class="motiv-modal-overlay">
<div class="motiv-modal"> <div class="motiv-modal">
<div class="motiv-modal-header"> <div class="motiv-modal-header">