haufen sachen

public/css/style.css

@@ -76,6 +76,27 @@ body::after {
 
 .board-card.preview-active { border-color: var(--t-accent) !important; box-shadow: 0 0 0 1px var(--t-accent), 0 0 12px -2px color-mix(in srgb, var(--t-accent) 30%, transparent); }
 
+/* Upcoming banner */
+.upcoming-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 11px; border-radius: 3px; border: 1px solid var(--t-border); cursor: pointer; transition: border-color 0.12s; }
+.upcoming-item:hover { border-color: var(--t-accent); }
+.upcoming-dismiss { background: none; border: none; color: var(--t-dim); cursor: pointer; padding: 2px; transition: color 0.12s; }
+.upcoming-dismiss:hover { color: var(--t-danger); }
+
+/* Settings */
+.settings-tab { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 11px; color: var(--t-muted); cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: color 0.1s, background 0.1s; border-left: 2px solid transparent; }
+.settings-tab:hover { color: var(--t-bright); background: var(--t-raised); }
+.settings-tab.active { color: var(--t-accent); border-left-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 8%, transparent); }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+.card-bar-pulse { animation: pulse-glow 2s ease-in-out infinite; }
+.board-card:has(.card-bar-pulse) { border-color: var(--t-danger); }
+.due-pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-radius: 8px; font-size: 9px; line-height: 16px; color: var(--t-bg); font-family: var(--t-font-pixel); }
+.card-done-badge { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent #4ade80 transparent; z-index: 1; }
+.card-done-badge i { position: absolute; bottom: -22px; right: 1px; font-size: 10px; color: #000; }
+.board-card:has(.card-bar-pulse) .card-bar-pulse ~ * .text-t-danger { animation: pulse-glow 2s ease-in-out infinite; }
+.card-spinner { animation: spin 0.8s linear infinite; }
+
 /* Cards */
 .card-bar { image-rendering: pixelated; height: 3px; }
 .board-card { min-height: 180px; }
@@ -631,7 +652,7 @@ body.detail-image-fs-open { overflow: hidden; }
 /* Markdown gallery */
 .md-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 0.8em 0; }
 .md-gallery-item { aspect-ratio: 1; overflow: hidden; border-radius: 4px; border: 1px solid var(--t-border); cursor: pointer; }
-.md-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; }
+.md-gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; max-width: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; }
 .md-gallery-item:hover img { transform: scale(1.05); }
 
 /* Image fullscreen prev/next */