/* ============================================================================ Blocos da wiki — usado tanto no editor (admin) quanto no render publico. Prefixo .wb-* (wiki-block) e .wt-* (wiki-text) pra inline. Usa variaveis CSS pra suportar dark mode automaticamente via .dark no . ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Bebas+Neue&family=Bungee+Inline&family=Caveat:wght@500;600&family=Cinzel:wght@500;700&family=JetBrains+Mono:wght@400;600&family=Lobster&family=Playfair+Display:wght@500;700;800&family=Poppins:wght@400;500;600&family=Press+Start+2P&family=Russo+One&display=swap'); :root { --wb-bg: #ffffff; --wb-bg-soft: #f8fafc; --wb-border: #e2e8f0; --wb-text: #0f172a; --wb-muted: #64748b; --wb-key: #334155; --wb-accent: #7c3aed; --wb-accent-soft: #ede9fe; --wb-warn-bg: #fef3c7; --wb-warn-border: #fbbf24; --wb-warn-text: #92400e; } html.dark, .dark { --wb-bg: #0f172a; --wb-bg-soft: #1e293b; --wb-border: #334155; --wb-text: #f1f5f9; --wb-muted: #94a3b8; --wb-key: #cbd5e1; --wb-accent: #a78bfa; --wb-accent-soft: #312e81; --wb-warn-bg: rgba(251,191,36,.1); --wb-warn-border: #d97706; --wb-warn-text: #fbbf24; } /* ----- Blocos custom (cards) ----- */ .wb-block { border: 1px solid var(--wb-border); border-radius: 8px; background: var(--wb-bg-soft); padding: 12px 14px; margin: 12px 0; font-size: 14px; color: var(--wb-text); } .wb-block-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wb-muted); margin-bottom: 8px; } .wb-block-hint { font-size: 12px; color: var(--wb-muted); margin-bottom: 10px; font-style: italic; } .wb-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .wb-block ul li { display: flex; gap: 12px; font-size: 14px; align-items: center; } /* Rows que tem lista de chips (items): empilha titulo acima dos chips */ .wb-block ul li:has(.wb-item-list) { flex-direction: column; align-items: stretch; gap: 4px; } .wb-block ul li:has(.wb-item-list) .wb-req-key { min-width: 0; } .wb-req-key { color: var(--wb-muted); min-width: 110px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .wb-req-val { color: var(--wb-text); flex: 1; } .wb-requirements { border-left: 3px solid #f59e0b; } .wb-rewards { border-left: 3px solid #10b981; } /* Bloco mapa: nao deve herdar padding/border/bg do .wb-block — shell interno ja tem seu visual proprio */ .wb-block.wb-map-block { padding: 0; border: 0; background: transparent; /* Confina o z-index dos controles do Leaflet (1000) dentro do bloco, pra nao cobrir botoes/molduras de fora (form, colunas, etc). */ isolation: isolate; position: relative; } /* Quando o bloco tem background customizado por fora, zera o visual proprio pra nao duplicar borda/fundo/padding com o wrapper .wb-bg */ .wb-bg > .wb-block.wb-rewards, .wb-bg > .wb-block.wb-requirements { border: 0; background: transparent; padding: 0; margin: 0; } .wb-ref { border-left: 3px solid var(--wb-accent); } .wb-ref-name { font-weight: 600; color: var(--wb-text); } .wb-ref a.wb-ref-name { color: var(--wb-accent); text-decoration: none; } .wb-ref a.wb-ref-name:hover { text-decoration: underline; } .wb-ref-note { color: var(--wb-muted); font-size: 13px; margin-top: 4px; } /* ----- Editor: campos dentro dos blocos custom ----- */ .wb-block-edit { background: var(--wb-bg); } .wb-field { margin: 8px 0; } .wb-field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wb-muted); margin-bottom: 4px; font-weight: 500; } .wb-block input[type="text"], .wb-block input[type="number"] { width: 100%; padding: 6px 10px; border: 1px solid var(--wb-border); border-radius: 6px; background: var(--wb-bg); color: var(--wb-text); font-size: 13px; outline: none; transition: border-color .15s; } .wb-block input:focus { border-color: var(--wb-accent); } .wb-checkbox { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--wb-text); cursor: pointer; margin: 4px 0; } .wb-dyn-list { display: grid; gap: 4px; } .wb-dyn-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; } .wb-dyn-cells { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; } .wb-dyn-remove { width: 26px; height: 26px; border-radius: 4px; border: 1px solid var(--wb-border); background: var(--wb-bg); color: var(--wb-muted); cursor: pointer; font-size: 14px; line-height: 1; } .wb-dyn-remove:hover { color: #dc2626; border-color: #dc2626; } .wb-dyn-add { margin-top: 4px; padding: 6px 10px; border: 1px dashed var(--wb-border); background: transparent; color: var(--wb-muted); border-radius: 6px; cursor: pointer; font-size: 12px; width: 100%; } .wb-dyn-add:hover { color: var(--wb-text); border-color: var(--wb-accent); } /* ----- Built-in blocks render ----- */ .wb-figure { margin: 16px 0; } .wb-figure img { max-width: 100%; border-radius: 6px; display: block; } .wb-figure figcaption { font-size: 13px; color: var(--wb-muted); margin-top: 6px; text-align: center; } .wb-img-border img { border: 1px solid var(--wb-border); } .wb-img-bg { background: var(--wb-bg-soft); padding: 16px; border-radius: 8px; } .wb-img-stretched img { width: 100%; } .wb-embed { margin: 16px 0; position: relative; } .wb-embed iframe { width: 100%; aspect-ratio: 16/9; border-radius: 6px; border: 0; display: block; } .wb-quote { border-left: 3px solid var(--wb-accent); background: var(--wb-bg-soft); padding: 12px 16px; margin: 16px 0; border-radius: 0 6px 6px 0; } .wb-quote p { margin: 0; color: var(--wb-text); } .wb-quote-cite { color: var(--wb-muted); font-size: 13px; margin-top: 6px; } .wb-quote-center { text-align: center; } .wb-code { background: var(--wb-bg-soft); border: 1px solid var(--wb-border); border-radius: 6px; padding: 12px 14px; margin: 16px 0; overflow-x: auto; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .wb-delimiter { border: 0; border-top: 1px solid var(--wb-border); margin: 24px 0; } .wb-table-wrap { overflow-x: auto; margin: 16px 0; } .wb-table { width: 100%; border-collapse: collapse; border: 1px solid var(--wb-border); font-size: 14px; } .wb-table th, .wb-table td { padding: 8px 12px; border-bottom: 1px solid var(--wb-border); border-right: 1px solid var(--wb-border); text-align: left; } .wb-table th { background: var(--wb-bg-soft); font-weight: 600; } .wb-table tr:last-child td { border-bottom: 0; } .wb-table th:last-child, .wb-table td:last-child { border-right: 0; } .wb-warning { background: var(--wb-warn-bg); border: 1px solid var(--wb-warn-border); border-radius: 6px; padding: 12px 14px; margin: 16px 0; color: var(--wb-warn-text); } .wb-warn-title { font-weight: 600; margin-bottom: 4px; } .wb-warn-msg { font-size: 14px; } .wb-checklist { list-style: none !important; padding: 0; margin: 12px 0; display: grid; gap: 4px; } .wb-checklist-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; transition: background .12s; } .wb-checklist-item:hover { background: var(--wb-bg-soft); } /* Checkbox visual — quadrado com check SVG */ .wb-check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px; border: 1.5px solid var(--wb-border-strong); background: var(--wb-bg); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; font-size: 0; /* esconde texto antigo [x]/[ ] caso o JSON tenha */ color: transparent; position: relative; } .wb-check-on { background: var(--wb-accent); border-color: var(--wb-accent); } .wb-check-on::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -2px); position: absolute; } .wb-checklist-item > span:not(.wb-check) { flex: 1; color: var(--wb-text); } .wb-checklist-item.wb-checklist-done > span:not(.wb-check) { color: var(--wb-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; } /* ----- Alinhamento de blocos (paragraph/header/quote/image/embed/etc) ----- IMPORTANTE: usar descendente (sem `>`) porque pode haver wrapper .wb-bg no meio quando o bloco tem fundo aplicado. Pitfall já mapeado em tibia_wiki_proximos.md. */ .wb-align-center { text-align: center; } .wb-align-right { text-align: right; } .wb-align-center .wb-figure, .wb-align-center .wb-embed { margin-left: auto; margin-right: auto; } .wb-align-right .wb-figure, .wb-align-right .wb-embed { margin-left: auto; margin-right: 0; } .wb-align-center ul.wb-checklist, .wb-align-center ol, .wb-align-center ul:not(.wb-checklist) { display: inline-block; text-align: left; } .wb-align-right ul.wb-checklist, .wb-align-right ol, .wb-align-right ul:not(.wb-checklist) { display: inline-block; text-align: left; } .wb-align-center .wb-table-wrap, .wb-align-right .wb-table-wrap { display: inline-block; } /* ----- Fundo de bloco (background) — espelha as classes we-bg-* do editor ----- */ /* Tom CLARO (default) */ .wb-bg-color-red { --wb-bg-fill: #fee2e2; --wb-bg-border: #fca5a5; --wb-bg-strong: #dc2626; } .wb-bg-color-orange { --wb-bg-fill: #ffedd5; --wb-bg-border: #fdba74; --wb-bg-strong: #ea580c; } .wb-bg-color-amber { --wb-bg-fill: #fef3c7; --wb-bg-border: #fcd34d; --wb-bg-strong: #d97706; } .wb-bg-color-green { --wb-bg-fill: #dcfce7; --wb-bg-border: #86efac; --wb-bg-strong: #16a34a; } .wb-bg-color-blue { --wb-bg-fill: #dbeafe; --wb-bg-border: #93c5fd; --wb-bg-strong: #2563eb; } .wb-bg-color-violet { --wb-bg-fill: #ede9fe; --wb-bg-border: #c4b5fd; --wb-bg-strong: #7c3aed; } .wb-bg-color-pink { --wb-bg-fill: #fce7f3; --wb-bg-border: #f9a8d4; --wb-bg-strong: #db2777; } .wb-bg-color-slate { --wb-bg-fill: #e2e8f0; --wb-bg-border: #94a3b8; --wb-bg-strong: #475569; } /* Tom MÉDIO (mais saturado, opcional via .wb-bg-tone-medium) */ .wb-bg-color-red.wb-bg-tone-medium { --wb-bg-fill: #fca5a5; --wb-bg-border: #ef4444; } .wb-bg-color-orange.wb-bg-tone-medium { --wb-bg-fill: #fdba74; --wb-bg-border: #f97316; } .wb-bg-color-amber.wb-bg-tone-medium { --wb-bg-fill: #fcd34d; --wb-bg-border: #f59e0b; } .wb-bg-color-green.wb-bg-tone-medium { --wb-bg-fill: #86efac; --wb-bg-border: #22c55e; } .wb-bg-color-blue.wb-bg-tone-medium { --wb-bg-fill: #93c5fd; --wb-bg-border: #3b82f6; } .wb-bg-color-violet.wb-bg-tone-medium { --wb-bg-fill: #c4b5fd; --wb-bg-border: #8b5cf6; } .wb-bg-color-pink.wb-bg-tone-medium { --wb-bg-fill: #f9a8d4; --wb-bg-border: #ec4899; } .wb-bg-color-slate.wb-bg-tone-medium { --wb-bg-fill: #94a3b8; --wb-bg-border: #64748b; } /* Tom ESCURO (cor "strong" forte, texto vira branco) */ .wb-bg-color-red.wb-bg-tone-dark { --wb-bg-fill: #dc2626; --wb-bg-border: #991b1b; color: #fff; } .wb-bg-color-orange.wb-bg-tone-dark { --wb-bg-fill: #ea580c; --wb-bg-border: #9a3412; color: #fff; } .wb-bg-color-amber.wb-bg-tone-dark { --wb-bg-fill: #d97706; --wb-bg-border: #92400e; color: #fff; } .wb-bg-color-green.wb-bg-tone-dark { --wb-bg-fill: #16a34a; --wb-bg-border: #14532d; color: #fff; } .wb-bg-color-blue.wb-bg-tone-dark { --wb-bg-fill: #2563eb; --wb-bg-border: #1e3a8a; color: #fff; } .wb-bg-color-violet.wb-bg-tone-dark { --wb-bg-fill: #7c3aed; --wb-bg-border: #4c1d95; color: #fff; } .wb-bg-color-pink.wb-bg-tone-dark { --wb-bg-fill: #db2777; --wb-bg-border: #831843; color: #fff; } .wb-bg-color-slate.wb-bg-tone-dark { --wb-bg-fill: #475569; --wb-bg-border: #0f172a; color: #fff; } .dark .wb-bg-color-red { --wb-bg-fill: rgba(220, 38, 38, 0.15); --wb-bg-border: rgba(248, 113, 113, 0.4); --wb-bg-strong: #f87171; } .dark .wb-bg-color-orange { --wb-bg-fill: rgba(234, 88, 12, 0.15); --wb-bg-border: rgba(251, 146, 60, 0.4); --wb-bg-strong: #fb923c; } .dark .wb-bg-color-amber { --wb-bg-fill: rgba(217, 119, 6, 0.15); --wb-bg-border: rgba(252, 211, 77, 0.4); --wb-bg-strong: #fcd34d; } .dark .wb-bg-color-green { --wb-bg-fill: rgba(22, 163, 74, 0.15); --wb-bg-border: rgba(134, 239, 172, 0.4); --wb-bg-strong: #4ade80; } .dark .wb-bg-color-blue { --wb-bg-fill: rgba(37, 99, 235, 0.15); --wb-bg-border: rgba(147, 197, 253, 0.4); --wb-bg-strong: #60a5fa; } .dark .wb-bg-color-violet { --wb-bg-fill: rgba(124, 58, 237, 0.15); --wb-bg-border: rgba(196, 181, 253, 0.4); --wb-bg-strong: #a78bfa; } .dark .wb-bg-color-pink { --wb-bg-fill: rgba(219, 39, 119, 0.15); --wb-bg-border: rgba(249, 168, 212, 0.4); --wb-bg-strong: #f472b6; } .dark .wb-bg-color-slate { --wb-bg-fill: rgba(71, 85, 105, 0.25); --wb-bg-border: rgba(148, 163, 184, 0.4); --wb-bg-strong: #94a3b8; } /* Dark mode overrides pros tons MÉDIO e ESCURO — specificity igual a .dark .wb-bg-color-X, mas vem DEPOIS na cascata, então vence (regra do "última definida" em empate). */ .dark .wb-bg-color-red.wb-bg-tone-medium { --wb-bg-fill: rgba(220, 38, 38, 0.45); --wb-bg-border: #ef4444; } .dark .wb-bg-color-orange.wb-bg-tone-medium { --wb-bg-fill: rgba(234, 88, 12, 0.45); --wb-bg-border: #f97316; } .dark .wb-bg-color-amber.wb-bg-tone-medium { --wb-bg-fill: rgba(217, 119, 6, 0.45); --wb-bg-border: #f59e0b; } .dark .wb-bg-color-green.wb-bg-tone-medium { --wb-bg-fill: rgba(22, 163, 74, 0.45); --wb-bg-border: #22c55e; } .dark .wb-bg-color-blue.wb-bg-tone-medium { --wb-bg-fill: rgba(37, 99, 235, 0.45); --wb-bg-border: #3b82f6; } .dark .wb-bg-color-violet.wb-bg-tone-medium { --wb-bg-fill: rgba(124, 58, 237, 0.45); --wb-bg-border: #8b5cf6; } .dark .wb-bg-color-pink.wb-bg-tone-medium { --wb-bg-fill: rgba(219, 39, 119, 0.45); --wb-bg-border: #ec4899; } .dark .wb-bg-color-slate.wb-bg-tone-medium { --wb-bg-fill: rgba(71, 85, 105, 0.55); --wb-bg-border: #64748b; } .dark .wb-bg-color-red.wb-bg-tone-dark { --wb-bg-fill: #b91c1c; --wb-bg-border: #7f1d1d; color: #fff; } .dark .wb-bg-color-orange.wb-bg-tone-dark { --wb-bg-fill: #c2410c; --wb-bg-border: #7c2d12; color: #fff; } .dark .wb-bg-color-amber.wb-bg-tone-dark { --wb-bg-fill: #b45309; --wb-bg-border: #78350f; color: #fff; } .dark .wb-bg-color-green.wb-bg-tone-dark { --wb-bg-fill: #15803d; --wb-bg-border: #14532d; color: #fff; } .dark .wb-bg-color-blue.wb-bg-tone-dark { --wb-bg-fill: #1d4ed8; --wb-bg-border: #1e3a8a; color: #fff; } .dark .wb-bg-color-violet.wb-bg-tone-dark { --wb-bg-fill: #6d28d9; --wb-bg-border: #4c1d95; color: #fff; } .dark .wb-bg-color-pink.wb-bg-tone-dark { --wb-bg-fill: #be185d; --wb-bg-border: #831843; color: #fff; } .dark .wb-bg-color-slate.wb-bg-tone-dark { --wb-bg-fill: #334155; --wb-bg-border: #0f172a; color: #fff; } .wb-bg.wb-bg-style-card { background: var(--wb-bg-fill); border: 1px solid var(--wb-bg-border); border-radius: 8px; padding: 14px 16px; margin: 8px 0; } .wb-bg.wb-bg-style-shadow { background: var(--wb-bg-fill); border: 1px solid var(--wb-bg-border); border-radius: 10px; padding: 14px 16px; margin: 8px 0; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05); } .dark .wb-bg.wb-bg-style-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } /* Estilo "borda animada" — usa @property --wb-angle pra rotacionar o ângulo do conic-gradient SEM mover/rotacionar o pseudo-elemento. Isso evita o bug visual de "card girando" que aparecia quando o pseudo (retângulo) rotacionava em torno do centro de um pai não-quadrado. */ @property --wb-angle { syntax: ''; initial-value: 0deg; inherits: false; } .wb-bg.wb-bg-style-animated { position: relative; background: var(--wb-bg-fill); border-radius: 10px; padding: 14px 16px; margin: 8px 0; } .wb-bg.wb-bg-style-animated::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; background: conic-gradient(from var(--wb-angle), var(--wb-bg-strong), transparent 25%, var(--wb-bg-strong) 50%, transparent 75%, var(--wb-bg-strong)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: wb-bg-rotate 5s linear infinite; pointer-events: none; } /* Fallback pra browsers sem @property — animação simples de opacidade da borda */ @supports not (background: conic-gradient(from var(--wb-angle), red, blue)) { .wb-bg.wb-bg-style-animated::before { animation: wb-bg-pulse 2s ease-in-out infinite; } } @keyframes wb-bg-rotate { to { --wb-angle: 360deg; } } @keyframes wb-bg-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* ====== Estilos extras (chamativos/diferenciados) ====== */ /* Gradient — fill com gradiente da cor (chamativo, "destaque") */ .wb-bg.wb-bg-style-gradient { background: linear-gradient(135deg, var(--wb-bg-fill) 0%, color-mix(in srgb, var(--wb-bg-strong) 22%, white) 100%); border: 1px solid var(--wb-bg-border); border-radius: 10px; padding: 14px 16px; margin: 8px 0; } .dark .wb-bg.wb-bg-style-gradient { background: linear-gradient(135deg, var(--wb-bg-fill) 0%, color-mix(in srgb, var(--wb-bg-strong) 30%, transparent) 100%); } /* Outline — borda dupla colorida com gap (atenção/destaque importante) */ .wb-bg.wb-bg-style-outline { background: var(--wb-bg-fill); border: 2px solid var(--wb-bg-strong); outline: 2px solid var(--wb-bg-strong); outline-offset: 3px; border-radius: 6px; padding: 14px 16px; margin: 14px 0; } /* Leftbar — fundo sutil + borda colorida so a esquerda (estilo "Recompensa") */ .wb-bg.wb-bg-style-leftbar { background: var(--wb-bg-fill); border-left: 3px solid var(--wb-bg-strong); border-radius: 4px; padding: 12px 14px; margin: 8px 0; } /* Stripes — listras diagonais sutis (tutorial/info, "atenção" leve) */ .wb-bg.wb-bg-style-stripes { background: repeating-linear-gradient( 135deg, var(--wb-bg-fill) 0, var(--wb-bg-fill) 12px, color-mix(in srgb, var(--wb-bg-strong) 12%, var(--wb-bg-fill)) 12px, color-mix(in srgb, var(--wb-bg-strong) 12%, var(--wb-bg-fill)) 24px ); border-left: 4px solid var(--wb-bg-strong); border-radius: 6px; padding: 14px 16px; margin: 8px 0; } /* Glow — fill suave + brilho colorido ao redor (épico/legendary) */ .wb-bg.wb-bg-style-glow { background: var(--wb-bg-fill); border: 1px solid var(--wb-bg-strong); border-radius: 10px; padding: 14px 16px; margin: 14px 0; box-shadow: 0 0 0 1px var(--wb-bg-strong), 0 0 24px color-mix(in srgb, var(--wb-bg-strong) 50%, transparent), 0 0 6px color-mix(in srgb, var(--wb-bg-strong) 70%, transparent); } .dark .wb-bg.wb-bg-style-glow { box-shadow: 0 0 0 1px var(--wb-bg-strong), 0 0 32px color-mix(in srgb, var(--wb-bg-strong) 70%, transparent), 0 0 8px color-mix(in srgb, var(--wb-bg-strong) 90%, transparent); } /* AI Glow — paleta fixa multi-cor + cor escolhida como acento. Borda gira (conic), fundo desloca (linear shifting). Estilo "botão de IA". */ .wb-bg.wb-bg-style-aiglow { position: relative; border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--wb-bg-strong) 12%, #f5f3ff) 0%, #ecfeff 35%, #fdf2f8 70%, color-mix(in srgb, var(--wb-bg-strong) 12%, #f5f3ff) 100% ); background-size: 300% 300%; animation: wb-bg-aishift 8s ease-in-out infinite; isolation: isolate; } .dark .wb-bg.wb-bg-style-aiglow { background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(6, 182, 212, 0.10) 35%, rgba(236, 72, 153, 0.12) 70%, color-mix(in srgb, var(--wb-bg-strong) 22%, transparent) 100% ); background-size: 300% 300%; animation: wb-bg-aishift 8s ease-in-out infinite; } .wb-bg.wb-bg-style-aiglow::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; padding: 2px; background: conic-gradient(from var(--wb-angle), #a855f7, #3b82f6, #06b6d4, #ec4899, var(--wb-bg-strong), #a855f7 ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: wb-bg-rotate 6s linear infinite; pointer-events: none; z-index: -1; } @keyframes wb-bg-aishift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* Quando o bloco interno já tem margin (p, h1..h6, ul, etc), zerar a margin externa pra não duplicar espaçamento dentro do card */ .wb-bg > p:first-child, .wb-bg > h1:first-child, .wb-bg > h2:first-child, .wb-bg > h3:first-child, .wb-bg > h4:first-child, .wb-bg > h5:first-child, .wb-bg > h6:first-child, .wb-bg > ul:first-child, .wb-bg > ol:first-child, .wb-bg > blockquote:first-child, .wb-bg > pre:first-child, .wb-bg > .wb-figure:first-child, .wb-bg > .wb-embed:first-child, .wb-bg > .wb-warning:first-child { margin-top: 0; } .wb-bg > p:last-child, .wb-bg > h1:last-child, .wb-bg > h2:last-child, .wb-bg > h3:last-child, .wb-bg > h4:last-child, .wb-bg > h5:last-child, .wb-bg > h6:last-child, .wb-bg > ul:last-child, .wb-bg > ol:last-child, .wb-bg > blockquote:last-child, .wb-bg > pre:last-child, .wb-bg > .wb-figure:last-child, .wb-bg > .wb-embed:last-child, .wb-bg > .wb-warning:last-child { margin-bottom: 0; } /* ----- Inline tools (color/size) — funcionam tanto no editor quanto no render ----- */ .wt-color-red { color: #dc2626; } .wt-color-orange { color: #ea580c; } .wt-color-amber { color: #d97706; } .wt-color-green { color: #16a34a; } .wt-color-blue { color: #2563eb; } .wt-color-violet { color: #7c3aed; } .wt-color-pink { color: #db2777; } .wt-color-slate { color: #64748b; } .dark .wt-color-red { color: #f87171; } .dark .wt-color-orange { color: #fb923c; } .dark .wt-color-amber { color: #fbbf24; } .dark .wt-color-green { color: #4ade80; } .dark .wt-color-blue { color: #60a5fa; } .dark .wt-color-violet { color: #a78bfa; } .dark .wt-color-pink { color: #f472b6; } .dark .wt-color-slate { color: #94a3b8; } /* Tamanhos absolutos em px (não em em/rem) pra não cascatear com tamanhos dos pais. !important pra vencer h1/h2/h3 que tem font-size próprio. */ .wt-size-xs { font-size: 10px !important; line-height: 1.4; } .wt-size-sm { font-size: 12px !important; line-height: 1.4; } .wt-size-md { font-size: 14px !important; line-height: 1.45; } .wt-size-base { font-size: 16px !important; line-height: 1.5; } .wt-size-lg { font-size: 18px !important; line-height: 1.5; font-weight: 500; } .wt-size-xl { font-size: 22px !important; line-height: 1.4; font-weight: 600; } .wt-size-2xl { font-size: 28px !important; line-height: 1.3; font-weight: 700; } .wt-size-3xl { font-size: 36px !important; line-height: 1.25; font-weight: 700; } .wt-size-4xl { font-size: 48px !important; line-height: 1.15; font-weight: 800; } /* Fontes inline (mesmas do editor) */ .wt-font-serif { font-family: Georgia, "Times New Roman", serif; } .wt-font-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } .wt-font-epic { font-family: "Cinzel", Georgia, serif; letter-spacing: 0.02em; font-weight: 600; } .wt-font-hand { font-family: "Caveat", "Brush Script MT", cursive; font-size: 1.18em; line-height: 1.2; } .wt-font-pixel { font-family: "Press Start 2P", monospace; font-size: 0.78em; letter-spacing: 0.04em; } .wt-font-pokemon { font-family: "Bungee Inline", "Press Start 2P", monospace; letter-spacing: 0.04em; font-size: 1.05em; } .wt-font-bangers { font-family: "Bangers", "Comic Sans MS", cursive; letter-spacing: 0.04em; font-size: 1.1em; } .wt-font-display { font-family: "Russo One", Impact, sans-serif; letter-spacing: 0.01em; } .wt-font-elegant { font-family: "Playfair Display", Georgia, serif; } .wt-font-script { font-family: "Lobster", "Brush Script MT", cursive; font-size: 1.1em; } .wt-font-condensed { font-family: "Bebas Neue", Impact, sans-serif; letter-spacing: 0.04em; font-size: 1.08em; } .wt-font-modern { font-family: "Poppins", Inter, sans-serif; } /* Background com imagem — público (mesma regra do editor, classes wb-) */ .wb-bg-image { background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; border-radius: 10px; padding: 18px 20px; isolation: isolate; } .wb-bg-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.50)); border-radius: inherit; pointer-events: none; z-index: 0; } .wb-bg-image > * { position: relative; z-index: 1; color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,.65); } .wb-bg-image a { color: #93c5fd !important; } /* ----- Editor.js inline-actions popover (cor/tamanho) ----- */ .wt-inline-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--wb-bg); border: 1px solid var(--wb-border); border-radius: 6px; align-items: center; } .wt-color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; } .wt-size-actions { gap: 2px; } .wt-size-btn { padding: 4px 8px; border: 1px solid var(--wb-border); background: var(--wb-bg); color: var(--wb-text); border-radius: 4px; cursor: pointer; font-size: 12px; } .wt-size-btn:hover { border-color: var(--wb-accent); color: var(--wb-accent); } .wt-clear-btn { padding: 4px 8px; border: 1px solid var(--wb-border); background: transparent; color: var(--wb-muted); border-radius: 4px; cursor: pointer; font-size: 12px; } .wt-clear-btn:hover { color: var(--wb-text); } /* ============================================================================ Editor.js v2.30 — tema customizado via CSS variables próprias do Editor ---------------------------------------------------------------------------- O Editor.js v2.30 expõe variáveis CSS (--color-text-primary, --color-background, --color-background-item-hover, etc) que ele usa em seu CSS interno. Em vez de brigar com !important em mil classes, definimos as variáveis no :root e html.dark — Editor.js consome e tudo se ajusta automaticamente. O popover (lista do +) é renderizado em document.body, não dentro de .codex-editor. Por isso as variáveis ficam em :root/html.dark — herança automática alcança qualquer descendente. ============================================================================ */ :root { /* Texto */ --color-text-primary: #0f172a; --color-text-secondary: #64748b; --color-text-icon-active: #7c3aed; --grayText: #64748b; /* Fundo */ --color-background: #ffffff; --color-background-icon: #f8fafc; --color-background-icon-active: #ede9fe; --color-background-item-hover: #f1f5f9; --color-background-item-focus: #f5f3ff; --color-background-item-confirm: #7c3aed; --color-background-item-confirm-hover: #6d28d9; /* Bordas / linhas / sombras */ --color-border: #e2e8f0; --color-border-icon: #e2e8f0; --color-border-icon-disabled: #f1f5f9; --color-line-gray: #e2e8f0; --color-gray-border: #e2e8f0; --color-shadow: rgba(15, 23, 42, 0.10); --color-shadow-item-focus: rgba(124, 58, 237, 0.18); /* Ícones */ --color-active-icon: #7c3aed; --color-dark: #0f172a; } html.dark { --color-text-primary: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-icon-active: #c4b5fd; --grayText: #94a3b8; --color-background: #1e293b; --color-background-icon: #0f172a; --color-background-icon-active: #312e81; --color-background-item-hover: #334155; --color-background-item-focus: #312e81; --color-background-item-confirm: #a78bfa; --color-background-item-confirm-hover: #c4b5fd; --color-border: #334155; --color-border-icon: #334155; --color-border-icon-disabled: #1e293b; --color-line-gray: #334155; --color-gray-border: #334155; --color-shadow: rgba(0, 0, 0, 0.45); --color-shadow-item-focus: rgba(167, 139, 250, 0.25); --color-active-icon: #a78bfa; --color-dark: #f1f5f9; } /* ============================================================================ Host do editor — wrapper que damos respiro pra UI do Editor.js operar ============================================================================ */ .block-editor-host { min-height: 240px; padding: 16px 16px 16px 60px; border: 1px dashed transparent; border-radius: 8px; position: relative; color: var(--color-text-primary); } .block-editor-host:focus-within { border-color: var(--color-border); background: var(--color-background-icon); } /* Status banner */ .block-editor-status { font-size: 12px; padding: 6px 10px; margin-bottom: 8px; border-radius: 6px; transition: opacity .4s; } .block-editor-status:empty { display: none; } .block-editor-status--ready { background: rgba(16,185,129,.08); color: #047857; border: 1px solid rgba(16,185,129,.25); } .block-editor-status--error { background: rgba(220,38,38,.08); color: #b91c1c; border: 1px solid rgba(220,38,38,.3); } .block-editor-status--info { background: rgba(59,130,246,.08); color: #1d4ed8; border: 1px solid rgba(59,130,246,.25); } html.dark .block-editor-status--ready { color: #6ee7b7; } html.dark .block-editor-status--error { color: #fca5a5; } html.dark .block-editor-status--info { color: #93c5fd; } /* Dica abaixo do editor */ .block-editor-hint { margin-top: 12px; padding: 10px 14px; font-size: 12px; color: var(--color-text-secondary); background: var(--color-background-icon); border: 1px solid var(--color-border); border-radius: 8px; line-height: 1.55; } .block-editor-hint strong { color: var(--color-text-primary); } .block-editor-kbd { display: inline-block; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-primary); } /* ============================================================================ Tailwind preflight reset — apenas o mínimo necessário pra Editor.js operar ============================================================================ */ /* Buttons brutos do editor: anula reset do Tailwind sem mexer em estilo do Editor */ .codex-editor button, .ce-popover button, .ce-toolbar button, .ce-inline-toolbar button, .ce-conversion-toolbar button, .ce-settings button, .ce-popup button { font-family: inherit; cursor: pointer; } /* Listas: Tailwind preflight zera padding/margin/list-style. Editor.js precisa de tudo zerado mesmo nos popovers, mas com display flex pra layout */ .ce-popover ul, .ce-popover ol { list-style: none; padding: 0; margin: 0; } /* SVG: previne pointer events e alinha verticalmente */ .codex-editor svg, .ce-popover svg, .ce-toolbar svg, .ce-inline-toolbar svg { pointer-events: none; vertical-align: middle; } /* Inputs do editor: preserva o tema */ .codex-editor input, .ce-popover input { font-family: inherit; } /* ============================================================================ .codex-editor — só o mínimo: largura cheia e text-align IMPORTANTE: NÃO tocar em .ce-toolbar__content nem em .ce-block__content! O Editor.js usa max-width interno desses elementos pra calcular a posição do +, drag handle e popovers. Mexer aí desloca tudo. ============================================================================ */ .codex-editor { --content-width: 100%; text-align: left; } /* Texto principal dos blocos com cor herdada */ .codex-editor .ce-block, .codex-editor .ce-paragraph, .codex-editor .ce-header { color: var(--color-text-primary); } /* Espaço no fim pro último bloco respirar */ .codex-editor__redactor { padding-bottom: 80px; } /* Highlight visual do bloco focado e hover — diferencia onde está editando */ .codex-editor .ce-block:hover { background: rgba(124, 58, 237, 0.03); border-radius: 4px; } html.dark .codex-editor .ce-block:hover { background: rgba(167, 139, 250, 0.06); } .codex-editor .ce-block--focused { background: rgba(124, 58, 237, 0.06) !important; border-radius: 4px; } html.dark .codex-editor .ce-block--focused { background: rgba(167, 139, 250, 0.10) !important; } /* Custom blocks dentro do editor: largura total */ .codex-editor .ce-block .wb-block { max-width: 100%; } /* Garante que o popover fica acima de qualquer modal/sidebar */ .ce-popover { z-index: 9999 !important; } .ce-inline-toolbar, .ce-conversion-toolbar { z-index: 9999 !important; } /* Força opacity 1 nos items do popover — Editor.js v2.30 aplica opacity baixa nos items não-focados, que no dark mode ficam ilegíveis */ .ce-popover-item__title, .ce-popover-item__secondary-title { opacity: 1 !important; } /* ============================================================================ * Refs com sprite (passo 6/7) — itemRef, pokemonRef ricos * ============================================================================ */ .wb-ref-with-sprite .wb-ref-body { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .wb-ref-sprite { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; background: rgba(0,0,0,.04); border-radius: 4px; padding: 4px; flex-shrink: 0; } html.dark .wb-ref-sprite { background: rgba(255,255,255,.04); } .wb-ref-info { flex: 1; min-width: 0; } .wb-ref-meta { font-size: 11px; color: var(--wb-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 2px; } /* Lista de items em recompensas com sprite */ .wb-item-list { list-style: none !important; padding: 0 !important; margin: 4px 0 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px; } .wb-item-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: rgba(0,0,0,.04); border-radius: 6px; font-size: 13px; } html.dark .wb-item-chip { background: rgba(255,255,255,.05); } .wb-item-chip--text { padding: 4px 10px; } .wb-item-sprite { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; } .wb-item-name { color: var(--wb-text); } .wb-item-chip a.wb-item-name { color: var(--wb-accent); text-decoration: none; } .wb-item-chip a.wb-item-name:hover { text-decoration: underline; } .wb-item-qty { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--wb-muted); font-weight: 600; } /* ============================================================================ Bloco "Colunas" — modos sequenciais (públicos) Overlays como elementos reais (wb-seq-arrow/dot/badge) pra coexistir com ::before dos estilos de fundo (animated/aiglow). Cor via --wb-seq-color inline na .wb-columns. ============================================================================ */ .wb-columns .wb-column { position: relative; } /* Setas conectoras no gap entre colunas */ .wb-columns.wb-cols-seq-arrows { gap: 32px !important; } .wb-seq-arrow { position: absolute; right: -24px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 14px solid var(--wb-seq-color, #3b82f6); border-top: 9px solid transparent; border-bottom: 9px solid transparent; pointer-events: none; z-index: 3; } /* Linha horizontal ligando as colunas, com ponto em cada uma */ .wb-columns.wb-cols-seq-line { padding-top: 32px !important; position: relative; } .wb-columns.wb-cols-seq-line::before { content: ''; position: absolute; top: 14px; left: 8%; right: 8%; height: 2px; background: var(--wb-seq-color, #3b82f6); pointer-events: none; z-index: 1; } .wb-seq-dot { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--wb-seq-color, #3b82f6); pointer-events: none; z-index: 3; } /* Badges numerados em cada coluna */ .wb-columns.wb-cols-seq-numbered .wb-column { padding-top: 36px; } .wb-seq-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; background: var(--wb-seq-color, #3b82f6); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.25); font-family: inherit; } @media (max-width: 600px) { .wb-columns { grid-template-columns: 1fr !important; gap: 16px !important; padding-top: 0 !important; } .wb-seq-arrow { display: none; } .wb-columns.wb-cols-seq-line::before { display: none; } .wb-seq-dot, .wb-seq-badge { left: 12px; transform: none; top: 8px; } .wb-columns.wb-cols-seq-numbered .wb-column { padding-top: 12px; padding-left: 44px; } } /* ============================================================================ Item ref inline (wt-itemref) — link de item dentro de texto, com tooltip de sprite ============================================================================ */ .wb-block a.wt-itemref, .quest-body a.wt-itemref { color: #1d4ed8; font-weight: 500; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(37, 99, 235, 0.45); text-underline-offset: 2px; cursor: pointer; transition: color .12s ease, text-decoration-color .12s ease; } .wb-block a.wt-itemref:hover, .quest-body a.wt-itemref:hover { color: #1e40af; text-decoration-style: solid; text-decoration-color: currentColor; } /* Tooltip global (mesma classe usada no admin via wiki-editor.css) */ .wt-itemref-tooltip { position: fixed; z-index: 100000; pointer-events: none; background: #0f172a; color: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 100px; max-width: 220px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; font-family: Inter, system-ui, sans-serif; } .wt-itemref-tooltip.wt-itemref-tooltip-show { opacity: 1; transform: translateY(0); } .wt-itemref-tooltip-img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 4px; } .wt-itemref-tooltip-name { font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.3; word-break: break-word; } /* ============================================================================ Bloco Margem (spacer) — público ============================================================================ */ .wb-spacer { width: 100%; pointer-events: none; } /* Cores por tipo de link inline (público) */ .wb-block a.wt-pokeref, .quest-body a.wt-pokeref { color: #be185d; text-decoration-color: rgba(190, 24, 93, 0.45); } .wb-block a.wt-cityref, .quest-body a.wt-cityref { color: #047857; text-decoration-color: rgba(4, 120, 87, 0.45); } .wb-block a.wt-eventref, .quest-body a.wt-eventref { color: #b45309; text-decoration-color: rgba(180, 83, 9, 0.45); } .wb-block a.wt-tutoref, .quest-body a.wt-tutoref { color: #6d28d9; text-decoration-color: rgba(109, 40, 217, 0.45); } .wb-block a.wt-addonref, .quest-body a.wt-addonref { color: #7c2d12; text-decoration-color: rgba(124, 45, 18, 0.45); } .wb-block a.wt-mapref, .quest-body a.wt-mapref { color: #0e7490; text-decoration-color: rgba(14, 116, 144, 0.45); } .wb-block a.wt-pokeref:hover, .quest-body a.wt-pokeref:hover, .wb-block a.wt-cityref:hover, .quest-body a.wt-cityref:hover, .wb-block a.wt-eventref:hover, .quest-body a.wt-eventref:hover, .wb-block a.wt-tutoref:hover, .quest-body a.wt-tutoref:hover, .wb-block a.wt-addonref:hover, .quest-body a.wt-addonref:hover, .wb-block a.wt-mapref:hover, .quest-body a.wt-mapref:hover { text-decoration-style: solid; text-decoration-color: currentColor; } /* Sprite tooltip smoothing por tipo */ .wt-itemref-tooltip:not(.wt-pixel) .wt-itemref-tooltip-img { image-rendering: auto; } .wt-itemref-tooltip-sub { font-size: 10.5px; color: rgba(255,255,255,0.65); text-align: center; line-height: 1.2; }