/* blocodenotas.popup.css Versão restaurada: reintroduz variáveis e reset mínimo, porém evita centralizar o (para não cortar o site). Mantém regras do popup isoladas para reduzir conflitos. */ /* ----------------------- Variáveis e reset útil ----------------------- */ :root { --accent: #0a84ff; --bg: #0b0f13; --titlebar: #141416; --tab-bg: #1b1b1d; --window-bg: #232426; --editor-bg: #2b2b2b; --status-bg: #1f1f20; --muted: #9aa4b2; --text: #e6eef8; --radius: 12px; --titlebar-height: 44px; --controls-size: 36px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace; --ui-sans: "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --shadow-1: 0 8px 24px rgba(2, 6, 23, 0.6); --border-weak: rgba(255, 255, 255, 0.03); --muted-2: rgba(154, 164, 178, 0.08); } /* reset mínimo que reduz conflitos com estilos externos */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; padding: 0; } /* Fonte e suavização (úteis para popup) - NÃO altera layout do body */ body { font-family: var(--ui-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text); } /* ----------------------- Estilos do Popup (.notepad) (específicos e isolados) ----------------------- */ /* backdrop (overlay) */ .notepad-backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 12000; background: #0000003a; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 18px; margin: 0; } .notepad-backdrop.visible { display: flex !important; } /* janela do bloco de notas */ .notepad { width: 780px; max-width: calc(100% - 40px); height: 520px; max-height: calc(100% - 40px); border-radius: var(--radius); overflow: hidden; position: relative; z-index: 12001; box-shadow: var(--shadow-1); background: linear-gradient(180deg, var(--window-bg) 0%, #1b1b1d 100%); border: 1px solid var(--border-weak); display: flex; flex-direction: column; user-select: none; } /* responsividade compacta */ @media (max-width: 900px) { .notepad { width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 8px; } } /* tabbar */ .notepad .tabbar { height: 36px; background: var(--tab-bg); display: flex; align-items: flex-end; padding: 0 8px; gap: 8px; } .notepad .tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; } .notepad .tab.active { background: var(--titlebar); color: var(--text); } .notepad .tab .tab-title { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* titlebar */ .notepad .titlebar { height: var(--titlebar-height); display: flex; align-items: center; padding: 6px 12px; gap: 8px; background: var(--titlebar); border-bottom: 1px solid rgba(255, 255, 255, 0.02); } .notepad .title-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .notepad .app-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: 1px solid rgba(0, 0, 0, 0.06); } .notepad .title-text { flex: 1; text-align: left; font-weight: 600; color: var(--text); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* controls (min/max/close) */ .notepad .controls { display: flex; align-items: center; gap: 6px; } .notepad .ctrl-btn { width: var(--controls-size); height: var(--controls-size); display: flex; align-items: center; justify-content: center; border-radius: 8px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-size: 16px; } .notepad .ctrl-btn:focus { outline: 2px solid rgba(10, 132, 255, 0.18); outline-offset: 2px; } .notepad .ctrl-btn:hover { background: rgba(255, 255, 255, 0.02); color: var(--text); transform: translateY(-1px); } .notepad .ctrl-btn.close:hover { background: #ff4d4d; color: #fff; } /* toolbar */ .notepad .toolbar { display: flex; gap: 8px; padding: 8px 12px; align-items: center; background: transparent; } .notepad .menu, .notepad .menu-button { font-size: 13px; color: var(--muted); padding: 6px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .notepad .menu:hover, .notepad .menu-button:hover { background: rgba(255, 255, 255, 0.02); color: var(--text); } /* content area */ .notepad .content { flex: 1; display: flex; flex-direction: column; padding: 10px; gap: 10px; background: transparent; min-height: 160px; } /* editor-wrap */ .notepad .editor-wrap { display: flex; gap: 10px; flex: 1; min-height: 160px; } /* textarea (oculto/read-only por padrão) */ .notepad .textarea { flex: 1; border-radius: 8px; border: 1px solid var(--border-weak); padding: 12px; font-family: var(--mono); font-size: 14px; color: var(--text); outline: none; resize: none; background: var(--editor-bg); caret-color: var(--accent); min-height: 200px; display: none; } .notepad .textarea[readonly] { background: linear-gradient(180deg, var(--editor-bg), #252525); color: var(--muted); } /* preview */ .notepad .preview { flex: 1; border-radius: 8px; padding: 16px; overflow: auto; background: var(--editor-bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height: 1.5; display: block; border: 1px solid var(--border-weak); min-height: 200px; } /* tipografia no preview */ .notepad .preview h1 { font-size: 20px; margin: 0 0 8px; color: var(--text); } .notepad .preview h2 { font-size: 15px; margin: 6px 0; color: var(--text); font-style: normal; } .notepad .preview p { margin: 6px 0; color: var(--text); opacity: 0.95; } .notepad .preview ul { padding-left: 20px; margin: 6px 0; } /* links */ .notepad .preview a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(10, 132, 255, 0.12); } .notepad .preview a:hover { text-decoration: underline; } /* status bar */ .notepad .status { height: 28px; display: flex; align-items: center; padding: 4px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border-weak); background: var(--status-bg); z-index: 12002; } /* resizer */ .notepad .resizer { position: absolute; right: 8px; bottom: 8px; width: 18px; height: 18px; cursor: se-resize; opacity: 0.7; } /* fileButtonsTop (minimal, isolado) */ #fileButtonsTop { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; align-items: center; width: 100%; max-width: 1100px; justify-content: flex-start; z-index: 0; } #fileButtonsTop .file-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--muted-2); background: rgba(255, 255, 255, 0.02); color: var(--text); cursor: pointer; text-align: left; white-space: nowrap; font-size: 13px; } /* hover / active states */ #fileButtonsTop .file-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.03); } #fileButtonsTop .file-btn.active { background: linear-gradient(180deg, rgba(11, 29, 58, 0.28), rgba(7, 18, 40, 0.18)); border-color: rgba(10, 132, 255, 0.16); box-shadow: 0 6px 20px rgba(10, 132, 255, 0.06); color: var(--text); } /* garantir preview visível (proteção contra CSS externo) */ .notepad .preview { display: block !important; } /* ================================ Custom scrollbar (popup only) ================================ Aplica-se apenas aos elementos do popup (.notepad) - WebKit (Chromium / Safari): estilos detalhados - Firefox: estilos simplificados via scrollbar-width / scrollbar-color */ /* WebKit: preview */ .notepad .preview::-webkit-scrollbar { width: 10px; height: 10px; } .notepad .preview::-webkit-scrollbar-track { background: transparent; } .notepad .preview::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .notepad .preview::-webkit-scrollbar-thumb:hover { transform: translateY(-1px); } /* WebKit: textarea (se usar) */ .notepad .textarea::-webkit-scrollbar { width: 10px; height: 10px; } .notepad .textarea::-webkit-scrollbar-track { background: transparent; } .notepad .textarea::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; } .notepad .textarea::-webkit-scrollbar-thumb:hover { transform: translateY(-1px); } /* Firefox: thin + color hint */ .notepad .preview, .notepad .textarea { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } /* Proteção: garantir que o track seja discreto em plataformas que respeitam track color */ .notepad .preview::-webkit-scrollbar-track-piece, .notepad .textarea::-webkit-scrollbar-track-piece { background: transparent; }