diff --git a/public/locales/de/common.json b/public/locales/de/common.json index b128ae3..bb23416 100644 --- a/public/locales/de/common.json +++ b/public/locales/de/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDFs oder Bilder", "filesNeverLeave": "Ihre Dateien verlassen nie Ihr Gerät.", "addMore": "Weitere Dateien hinzufügen", - "clearAll": "Alle löschen" + "clearAll": "Alle löschen", + "clearFiles": "Dateien löschen" }, "loader": { "processing": "Verarbeitung..." @@ -226,7 +227,8 @@ "error": "Fehler", "success": "Erfolg", "file": "Datei", - "files": "Dateien" + "files": "Dateien", + "close": "Schließen" }, "about": { "hero": { diff --git a/public/locales/en/common.json b/public/locales/en/common.json index f130779..6550530 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDFs or Images", "filesNeverLeave": "Your files never leave your device.", "addMore": "Add More Files", - "clearAll": "Clear All" + "clearAll": "Clear All", + "clearFiles": "Clear Files" }, "loader": { "processing": "Processing..." @@ -226,7 +227,8 @@ "error": "Error", "success": "Success", "file": "File", - "files": "Files" + "files": "Files", + "close": "Close" }, "about": { "hero": { diff --git a/public/locales/es/common.json b/public/locales/es/common.json index a502855..274f081 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -1,323 +1,325 @@ { - "nav": { - "home": "Inicio", - "about": "Acerca de", - "contact": "Contacto", - "licensing": "Licencias", - "allTools": "Todas las Herramientas", - "openMainMenu": "Abrir menú principal", - "language": "Idioma" + "nav": { + "home": "Inicio", + "about": "Acerca de", + "contact": "Contacto", + "licensing": "Licencias", + "allTools": "Todas las Herramientas", + "openMainMenu": "Abrir menú principal", + "language": "Idioma" + }, + "donation": { + "message": "¿Te encanta BentoPDF? ¡Ayúdanos a mantenerlo gratis y de código abierto!", + "button": "Donar" + }, + "hero": { + "title": "El", + "pdfToolkit": "Kit de Herramientas PDF", + "builtForPrivacy": "diseñado para la privacidad", + "noSignups": "Sin Registro", + "unlimitedUse": "Uso Ilimitado", + "worksOffline": "Funciona Sin Conexión", + "startUsing": "Comenzar a Usar Ahora" + }, + "usedBy": { + "title": "Usado por empresas y personas que trabajan en" + }, + "features": { + "title": "¿Por qué elegir", + "bentoPdf": "BentoPDF?", + "noSignup": { + "title": "Sin Registro", + "description": "Comienza al instante, sin cuentas ni correos electrónicos." }, - "donation": { - "message": "¿Te encanta BentoPDF? ¡Ayúdanos a mantenerlo gratis y de código abierto!", - "button": "Donar" + "noUploads": { + "title": "Sin Cargas", + "description": "100% del lado del cliente, tus archivos nunca salen de tu dispositivo." }, - "hero": { - "title": "El", - "pdfToolkit": "Kit de Herramientas PDF", - "builtForPrivacy": "diseñado para la privacidad", - "noSignups": "Sin Registro", - "unlimitedUse": "Uso Ilimitado", - "worksOffline": "Funciona Sin Conexión", - "startUsing": "Comenzar a Usar Ahora" + "foreverFree": { + "title": "Gratis para Siempre", + "description": "Todas las herramientas, sin pruebas, sin restricciones de pago." }, - "usedBy": { - "title": "Usado por empresas y personas que trabajan en" + "noLimits": { + "title": "Sin Límites", + "description": "Usa tanto como quieras, sin límites ocultos." }, - "features": { - "title": "¿Por qué elegir", - "bentoPdf": "BentoPDF?", - "noSignup": { - "title": "Sin Registro", - "description": "Comienza al instante, sin cuentas ni correos electrónicos." - }, - "noUploads": { - "title": "Sin Cargas", - "description": "100% del lado del cliente, tus archivos nunca salen de tu dispositivo." - }, - "foreverFree": { - "title": "Gratis para Siempre", - "description": "Todas las herramientas, sin pruebas, sin restricciones de pago." - }, - "noLimits": { - "title": "Sin Límites", - "description": "Usa tanto como quieras, sin límites ocultos." - }, - "batchProcessing": { - "title": "Procesamiento por Lotes", - "description": "Maneja PDFs ilimitados de una sola vez." - }, - "lightningFast": { - "title": "Ultrarrápido", - "description": "Procesa PDFs al instante, sin esperas ni retrasos." - } + "batchProcessing": { + "title": "Procesamiento por Lotes", + "description": "Maneja PDFs ilimitados de una sola vez." }, - "tools": { - "title": "Comienza con", - "toolsLabel": "Herramientas", - "subtitle": "Haz clic en una herramienta para abrir el cargador de archivos", - "searchPlaceholder": "Buscar una herramienta (ej., 'dividir', 'organizar'...)", - "backToTools": "Volver a Herramientas", - "firstLoadNotice": "La primera carga toma un momento mientras descargamos nuestro motor de conversión. Después de eso, todas las cargas serán instantáneas." - }, - "upload": { - "clickToSelect": "Haz clic para seleccionar un archivo", - "orDragAndDrop": "o arrastra y suelta", - "pdfOrImages": "PDFs o Imágenes", - "filesNeverLeave": "Tus archivos nunca salen de tu dispositivo.", - "addMore": "Agregar Más Archivos", - "clearAll": "Limpiar Todo" - }, - "loader": { - "processing": "Procesando..." - }, - "alert": { - "title": "Alerta", - "ok": "OK" - }, - "preview": { - "title": "Vista Previa del Documento", - "downloadAsPdf": "Descargar como PDF", - "close": "Cerrar" - }, - "settings": { - "title": "Configuración", - "shortcuts": "Atajos", - "preferences": "Preferencias", - "displayPreferences": "Preferencias de Visualización", - "searchShortcuts": "Buscar atajos...", - "shortcutsInfo": "Mantén presionadas las teclas para establecer un atajo. Los cambios se guardan automáticamente.", - "shortcutsWarning": "⚠️ Evita los atajos comunes del navegador (Cmd/Ctrl+W, Cmd/Ctrl+T, Cmd/Ctrl+N, etc.) ya que pueden no funcionar de manera confiable.", - "import": "Importar", - "export": "Exportar", - "resetToDefaults": "Restaurar Valores Predeterminados", - "fullWidthMode": "Modo de Ancho Completo", - "fullWidthDescription": "Usa el ancho completo de la pantalla para todas las herramientas en lugar de un contenedor centrado", - "settingsAutoSaved": "La configuración se guarda automáticamente", - "clickToSet": "Haz clic para establecer", - "pressKeys": "Presiona teclas...", - "warnings": { - "alreadyInUse": "Atajo Ya en Uso", - "assignedTo": "ya está asignado a:", - "chooseDifferent": "Por favor elige un atajo diferente.", - "reserved": "Advertencia de Atajo Reservado", - "commonlyUsed": "se usa comúnmente para:", - "unreliable": "Este atajo puede no funcionar de manera confiable o puede entrar en conflicto con el comportamiento del navegador/sistema.", - "useAnyway": "¿Quieres usarlo de todos modos?", - "resetTitle": "Restablecer Atajos", - "resetMessage": "¿Estás seguro de que quieres restablecer todos los atajos a los valores predeterminados?

Esta acción no se puede deshacer.", - "importSuccessTitle": "Importación Exitosa", - "importSuccessMessage": "¡Atajos importados exitosamente!", - "importFailTitle": "Importación Fallida", - "importFailMessage": "Error al importar atajos. Formato de archivo inválido." - } - }, - "warning": { - "title": "Advertencia", - "cancel": "Cancelar", - "proceed": "Continuar" - }, - "compliance": { - "title": "Tus datos nunca salen de tu dispositivo", - "weKeep": "Mantenemos", - "yourInfoSafe": "tu información segura", - "byFollowingStandards": "siguiendo estándares de seguridad globales.", - "processingLocal": "Todo el procesamiento ocurre localmente en tu dispositivo.", - "gdpr": { - "title": "Cumplimiento GDPR", - "description": "Protege los datos personales y la privacidad de las personas dentro de la Unión Europea." - }, - "ccpa": { - "title": "Cumplimiento CCPA", - "description": "Otorga a los residentes de California derechos sobre cómo se recopila, usa y comparte su información personal." - }, - "hipaa": { - "title": "Cumplimiento HIPAA", - "description": "Establece salvaguardas para el manejo de información de salud sensible en el sistema de atención médica de Estados Unidos." - } - }, - "faq": { - "title": "Preguntas", - "questions": "Frecuentes", - "isFree": { - "question": "¿BentoPDF es realmente gratis?", - "answer": "Sí, absolutamente. Todas las herramientas en BentoPDF son 100% gratuitas, sin límites de archivos, sin registro y sin marcas de agua. Creemos que todos merecen acceso a herramientas PDF simples y potentes sin un muro de pago." - }, - "areFilesSecure": { - "question": "¿Mis archivos están seguros? ¿Dónde se procesan?", - "answer": "Tus archivos están lo más seguros posible porque nunca salen de tu computadora. Todo el procesamiento ocurre directamente en tu navegador web (del lado del cliente). Nunca cargamos tus archivos a un servidor, por lo que mantienes total privacidad y control sobre tus documentos." - }, - "platforms": { - "question": "¿Funciona en Mac, Windows y Móvil?", - "answer": "¡Sí! Dado que BentoPDF se ejecuta completamente en tu navegador, funciona en cualquier sistema operativo con un navegador web moderno, incluyendo Windows, macOS, Linux, iOS y Android." - }, - "gdprCompliant": { - "question": "¿BentoPDF cumple con GDPR?", - "answer": "Sí. BentoPDF cumple completamente con GDPR. Dado que todo el procesamiento de archivos ocurre localmente en tu navegador y nunca recopilamos ni transmitimos tus archivos a ningún servidor, no tenemos acceso a tus datos. Esto garantiza que siempre tengas el control de tus documentos." - }, - "dataStorage": { - "question": "¿Almacenan o rastrean alguno de mis archivos?", - "answer": "No. Nunca almacenamos, rastreamos ni registramos tus archivos. Todo lo que haces en BentoPDF ocurre en la memoria de tu navegador y desaparece una vez que cierras la página. No hay cargas, no hay registros de historial y no hay servidores involucrados." - }, - "different": { - "question": "¿Qué hace que BentoPDF sea diferente de otras herramientas PDF?", - "answer": "La mayoría de las herramientas PDF cargan tus archivos a un servidor para procesarlos. BentoPDF nunca hace eso. Utilizamos tecnología web moderna y segura para procesar tus archivos directamente en tu navegador. Esto significa un rendimiento más rápido, mayor privacidad y total tranquilidad." - }, - "browserBased": { - "question": "¿Cómo me mantiene seguro el procesamiento basado en navegador?", - "answer": "Al ejecutarse completamente dentro de tu navegador, BentoPDF garantiza que tus archivos nunca salgan de tu dispositivo. Esto elimina los riesgos de hackeos de servidores, violaciones de datos o accesos no autorizados. Tus archivos siguen siendo tuyos, siempre." - }, - "analytics": { - "question": "¿Usan cookies o análisis para rastrearme?", - "answer": "Nos preocupamos por tu privacidad. BentoPDF no rastrea información personal. Usamos Simple Analytics únicamente para ver recuentos de visitas anónimas. Esto significa que podemos saber cuántos usuarios visitan nuestro sitio, pero nunca sabemos quién eres. Simple Analytics cumple completamente con GDPR y respeta tu privacidad." - } - }, - "testimonials": { - "title": "Lo que Nuestros", - "users": "Usuarios", - "say": "Dicen" - }, - "support": { - "title": "¿Te Gusta Mi Trabajo?", - "description": "BentoPDF es un proyecto de pasión, creado para proporcionar un kit de herramientas PDF gratuito, privado y potente para todos. Si te resulta útil, considera apoyar su desarrollo. ¡Cada café ayuda!", - "buyMeCoffee": "Cómprame un Café" - }, - "footer": { - "copyright": "© 2025 BentoPDF. Todos los derechos reservados.", - "version": "Versión", - "company": "Empresa", - "aboutUs": "Acerca de Nosotros", - "faqLink": "Preguntas Frecuentes", - "contactUs": "Contáctanos", - "legal": "Legal", - "termsAndConditions": "Términos y Condiciones", - "privacyPolicy": "Política de Privacidad", - "followUs": "Síguenos" - }, - "merge": { - "title": "Fusionar PDFs", - "description": "Combina archivos completos o selecciona páginas específicas para fusionar en un nuevo documento.", - "fileMode": "Modo Archivo", - "pageMode": "Modo Página", - "howItWorks": "Cómo funciona:", - "fileModeInstructions": [ - "Haz clic y arrastra el ícono para cambiar el orden de los archivos.", - "En el cuadro \"Páginas\" para cada archivo, puedes especificar rangos (ej., \"1-3, 5\") para fusionar solo esas páginas.", - "Deja el cuadro \"Páginas\" en blanco para incluir todas las páginas de ese archivo." - ], - "pageModeInstructions": [ - "Todas las páginas de tus PDFs cargados se muestran a continuación.", - "Simplemente arrastra y suelta las miniaturas de páginas individuales para crear el orden exacto que deseas para tu nuevo archivo." - ], - "mergePdfs": "Fusionar PDFs" - }, - "common": { - "page": "Página", - "pages": "Páginas", - "of": "de", - "download": "Descargar", - "cancel": "Cancelar", - "save": "Guardar", - "delete": "Eliminar", - "edit": "Editar", - "add": "Agregar", - "remove": "Remover", - "loading": "Cargando...", - "error": "Error", - "success": "Éxito", - "file": "Archivo", - "files": "Archivos" - }, - "about": { - "hero": { - "title": "Creemos que las herramientas PDF deben ser", - "subtitle": "rápidas, privadas y gratuitas.", - "noCompromises": "Sin compromisos." - }, - "mission": { - "title": "Nuestra Misión", - "description": "Proporcionar la caja de herramientas PDF más completa que respete tu privacidad y nunca pida pago. Creemos que las herramientas de documentos esenciales deben ser accesibles para todos, en todas partes, sin barreras." - }, - "philosophy": { - "label": "Nuestra Filosofía Central", - "title": "Privacidad Primero. Siempre.", - "description": "En una era donde los datos son una mercancía, adoptamos un enfoque diferente. Todo el procesamiento de las herramientas de Bentopdf ocurre localmente en tu navegador. Esto significa que tus archivos nunca tocan nuestros servidores, nunca vemos tus documentos y no rastreamos lo que haces. Tus documentos permanecen completa e inequívocamente privados. No es solo una característica; es nuestra base." - }, - "whyBentopdf": { - "title": "Por qué", - "speed": { - "title": "Diseñado para la Velocidad", - "description": "Sin esperar cargas o descargas a un servidor. Al procesar archivos directamente en tu navegador usando tecnologías web modernas como WebAssembly, ofrecemos una velocidad incomparable para todas nuestras herramientas." - }, - "free": { - "title": "Completamente Gratis", - "description": "Sin pruebas, sin suscripciones, sin tarifas ocultas y sin funciones \"premium\" retenidas como rehenes. Creemos que las herramientas PDF potentes deben ser una utilidad pública, no un centro de ganancias." - }, - "noAccount": { - "title": "No Requiere Cuenta", - "description": "Comienza a usar cualquier herramienta de inmediato. No necesitamos tu correo electrónico, una contraseña o cualquier información personal. Tu flujo de trabajo debe ser sin fricciones y anónimo." - }, - "openSource": { - "title": "Espíritu de Código Abierto", - "description": "Construido con transparencia en mente. Aprovechamos increíbles bibliotecas de código abierto como PDF-lib y PDF.js, y creemos en el esfuerzo impulsado por la comunidad para hacer que las herramientas potentes sean accesibles para todos." - } - }, - "cta": { - "title": "¿Listo para comenzar?", - "description": "Únete a miles de usuarios que confían en Bentopdf para sus necesidades diarias de documentos. Experimenta la diferencia que la privacidad y el rendimiento pueden hacer.", - "button": "Explorar Todas las Herramientas" - } - }, - "contact": { - "title": "Ponte en Contacto", - "subtitle": "Nos encantaría saber de ti. Ya sea que tengas una pregunta, comentario o solicitud de función, no dudes en comunicarte.", - "email": "Puedes contactarnos directamente por correo electrónico en:" - }, - "licensing": { - "title": "Licencias para", - "subtitle": "Elige la licencia que se ajuste a tus necesidades." - }, - "multiTool": { - "uploadPdfs": "Cargar PDFs", - "upload": "Cargar", - "addBlankPage": "Agregar Página en Blanco", - "edit": "Editar:", - "undo": "Deshacer", - "redo": "Rehacer", - "reset": "Restablecer", - "selection": "Selección:", - "selectAll": "Seleccionar Todo", - "deselectAll": "Deseleccionar Todo", - "rotate": "Rotar:", - "rotateLeft": "Izquierda", - "rotateRight": "Derecha", - "transform": "Transformar:", - "duplicate": "Duplicar", - "split": "Dividir", - "clear": "Limpiar:", - "delete": "Eliminar", - "download": "Descargar:", - "downloadSelected": "Descargar Seleccionados", - "exportPdf": "Exportar PDF", - "uploadPdfFiles": "Seleccionar Archivos PDF", - "dragAndDrop": "Arrastra y suelta archivos PDF aquí, o haz clic para seleccionar", - "selectFiles": "Seleccionar Archivos", - "renderingPages": "Renderizando páginas...", - "actions": { - "duplicatePage": "Duplicar esta página", - "deletePage": "Eliminar esta página", - "insertPdf": "Insertar PDF después de esta página", - "toggleSplit": "Alternar división después de esta página" - }, - "pleaseWait": "Por Favor Espera", - "pagesRendering": "Las páginas aún se están renderizando. Por favor espera...", - "noPagesSelected": "No Se Seleccionaron Páginas", - "selectOnePage": "Por favor selecciona al menos una página para descargar.", - "noPages": "Sin Páginas", - "noPagesToExport": "No hay páginas para exportar.", - "renderingTitle": "Renderizando vistas previas de páginas", - "errorRendering": "Error al renderizar miniaturas de páginas", - "error": "Error", - "failedToLoad": "Error al cargar" + "lightningFast": { + "title": "Ultrarrápido", + "description": "Procesa PDFs al instante, sin esperas ni retrasos." } + }, + "tools": { + "title": "Comienza con", + "toolsLabel": "Herramientas", + "subtitle": "Haz clic en una herramienta para abrir el cargador de archivos", + "searchPlaceholder": "Buscar una herramienta (ej., 'dividir', 'organizar'...)", + "backToTools": "Volver a Herramientas", + "firstLoadNotice": "La primera carga toma un momento mientras descargamos nuestro motor de conversión. Después de eso, todas las cargas serán instantáneas." + }, + "upload": { + "clickToSelect": "Haz clic para seleccionar un archivo", + "orDragAndDrop": "o arrastra y suelta", + "pdfOrImages": "PDFs o Imágenes", + "filesNeverLeave": "Tus archivos nunca salen de tu dispositivo.", + "addMore": "Agregar Más Archivos", + "clearAll": "Limpiar Todo", + "clearFiles": "Borrar archivos" + }, + "loader": { + "processing": "Procesando..." + }, + "alert": { + "title": "Alerta", + "ok": "OK" + }, + "preview": { + "title": "Vista Previa del Documento", + "downloadAsPdf": "Descargar como PDF", + "close": "Cerrar" + }, + "settings": { + "title": "Configuración", + "shortcuts": "Atajos", + "preferences": "Preferencias", + "displayPreferences": "Preferencias de Visualización", + "searchShortcuts": "Buscar atajos...", + "shortcutsInfo": "Mantén presionadas las teclas para establecer un atajo. Los cambios se guardan automáticamente.", + "shortcutsWarning": "⚠️ Evita los atajos comunes del navegador (Cmd/Ctrl+W, Cmd/Ctrl+T, Cmd/Ctrl+N, etc.) ya que pueden no funcionar de manera confiable.", + "import": "Importar", + "export": "Exportar", + "resetToDefaults": "Restaurar Valores Predeterminados", + "fullWidthMode": "Modo de Ancho Completo", + "fullWidthDescription": "Usa el ancho completo de la pantalla para todas las herramientas en lugar de un contenedor centrado", + "settingsAutoSaved": "La configuración se guarda automáticamente", + "clickToSet": "Haz clic para establecer", + "pressKeys": "Presiona teclas...", + "warnings": { + "alreadyInUse": "Atajo Ya en Uso", + "assignedTo": "ya está asignado a:", + "chooseDifferent": "Por favor elige un atajo diferente.", + "reserved": "Advertencia de Atajo Reservado", + "commonlyUsed": "se usa comúnmente para:", + "unreliable": "Este atajo puede no funcionar de manera confiable o puede entrar en conflicto con el comportamiento del navegador/sistema.", + "useAnyway": "¿Quieres usarlo de todos modos?", + "resetTitle": "Restablecer Atajos", + "resetMessage": "¿Estás seguro de que quieres restablecer todos los atajos a los valores predeterminados?

Esta acción no se puede deshacer.", + "importSuccessTitle": "Importación Exitosa", + "importSuccessMessage": "¡Atajos importados exitosamente!", + "importFailTitle": "Importación Fallida", + "importFailMessage": "Error al importar atajos. Formato de archivo inválido." + } + }, + "warning": { + "title": "Advertencia", + "cancel": "Cancelar", + "proceed": "Continuar" + }, + "compliance": { + "title": "Tus datos nunca salen de tu dispositivo", + "weKeep": "Mantenemos", + "yourInfoSafe": "tu información segura", + "byFollowingStandards": "siguiendo estándares de seguridad globales.", + "processingLocal": "Todo el procesamiento ocurre localmente en tu dispositivo.", + "gdpr": { + "title": "Cumplimiento GDPR", + "description": "Protege los datos personales y la privacidad de las personas dentro de la Unión Europea." + }, + "ccpa": { + "title": "Cumplimiento CCPA", + "description": "Otorga a los residentes de California derechos sobre cómo se recopila, usa y comparte su información personal." + }, + "hipaa": { + "title": "Cumplimiento HIPAA", + "description": "Establece salvaguardas para el manejo de información de salud sensible en el sistema de atención médica de Estados Unidos." + } + }, + "faq": { + "title": "Preguntas", + "questions": "Frecuentes", + "isFree": { + "question": "¿BentoPDF es realmente gratis?", + "answer": "Sí, absolutamente. Todas las herramientas en BentoPDF son 100% gratuitas, sin límites de archivos, sin registro y sin marcas de agua. Creemos que todos merecen acceso a herramientas PDF simples y potentes sin un muro de pago." + }, + "areFilesSecure": { + "question": "¿Mis archivos están seguros? ¿Dónde se procesan?", + "answer": "Tus archivos están lo más seguros posible porque nunca salen de tu computadora. Todo el procesamiento ocurre directamente en tu navegador web (del lado del cliente). Nunca cargamos tus archivos a un servidor, por lo que mantienes total privacidad y control sobre tus documentos." + }, + "platforms": { + "question": "¿Funciona en Mac, Windows y Móvil?", + "answer": "¡Sí! Dado que BentoPDF se ejecuta completamente en tu navegador, funciona en cualquier sistema operativo con un navegador web moderno, incluyendo Windows, macOS, Linux, iOS y Android." + }, + "gdprCompliant": { + "question": "¿BentoPDF cumple con GDPR?", + "answer": "Sí. BentoPDF cumple completamente con GDPR. Dado que todo el procesamiento de archivos ocurre localmente en tu navegador y nunca recopilamos ni transmitimos tus archivos a ningún servidor, no tenemos acceso a tus datos. Esto garantiza que siempre tengas el control de tus documentos." + }, + "dataStorage": { + "question": "¿Almacenan o rastrean alguno de mis archivos?", + "answer": "No. Nunca almacenamos, rastreamos ni registramos tus archivos. Todo lo que haces en BentoPDF ocurre en la memoria de tu navegador y desaparece una vez que cierras la página. No hay cargas, no hay registros de historial y no hay servidores involucrados." + }, + "different": { + "question": "¿Qué hace que BentoPDF sea diferente de otras herramientas PDF?", + "answer": "La mayoría de las herramientas PDF cargan tus archivos a un servidor para procesarlos. BentoPDF nunca hace eso. Utilizamos tecnología web moderna y segura para procesar tus archivos directamente en tu navegador. Esto significa un rendimiento más rápido, mayor privacidad y total tranquilidad." + }, + "browserBased": { + "question": "¿Cómo me mantiene seguro el procesamiento basado en navegador?", + "answer": "Al ejecutarse completamente dentro de tu navegador, BentoPDF garantiza que tus archivos nunca salgan de tu dispositivo. Esto elimina los riesgos de hackeos de servidores, violaciones de datos o accesos no autorizados. Tus archivos siguen siendo tuyos, siempre." + }, + "analytics": { + "question": "¿Usan cookies o análisis para rastrearme?", + "answer": "Nos preocupamos por tu privacidad. BentoPDF no rastrea información personal. Usamos Simple Analytics únicamente para ver recuentos de visitas anónimas. Esto significa que podemos saber cuántos usuarios visitan nuestro sitio, pero nunca sabemos quién eres. Simple Analytics cumple completamente con GDPR y respeta tu privacidad." + } + }, + "testimonials": { + "title": "Lo que Nuestros", + "users": "Usuarios", + "say": "Dicen" + }, + "support": { + "title": "¿Te Gusta Mi Trabajo?", + "description": "BentoPDF es un proyecto de pasión, creado para proporcionar un kit de herramientas PDF gratuito, privado y potente para todos. Si te resulta útil, considera apoyar su desarrollo. ¡Cada café ayuda!", + "buyMeCoffee": "Cómprame un Café" + }, + "footer": { + "copyright": "© 2025 BentoPDF. Todos los derechos reservados.", + "version": "Versión", + "company": "Empresa", + "aboutUs": "Acerca de Nosotros", + "faqLink": "Preguntas Frecuentes", + "contactUs": "Contáctanos", + "legal": "Legal", + "termsAndConditions": "Términos y Condiciones", + "privacyPolicy": "Política de Privacidad", + "followUs": "Síguenos" + }, + "merge": { + "title": "Fusionar PDFs", + "description": "Combina archivos completos o selecciona páginas específicas para fusionar en un nuevo documento.", + "fileMode": "Modo Archivo", + "pageMode": "Modo Página", + "howItWorks": "Cómo funciona:", + "fileModeInstructions": [ + "Haz clic y arrastra el ícono para cambiar el orden de los archivos.", + "En el cuadro \"Páginas\" para cada archivo, puedes especificar rangos (ej., \"1-3, 5\") para fusionar solo esas páginas.", + "Deja el cuadro \"Páginas\" en blanco para incluir todas las páginas de ese archivo." + ], + "pageModeInstructions": [ + "Todas las páginas de tus PDFs cargados se muestran a continuación.", + "Simplemente arrastra y suelta las miniaturas de páginas individuales para crear el orden exacto que deseas para tu nuevo archivo." + ], + "mergePdfs": "Fusionar PDFs" + }, + "common": { + "page": "Página", + "pages": "Páginas", + "of": "de", + "download": "Descargar", + "cancel": "Cancelar", + "save": "Guardar", + "delete": "Eliminar", + "edit": "Editar", + "add": "Agregar", + "remove": "Remover", + "loading": "Cargando...", + "error": "Error", + "success": "Éxito", + "file": "Archivo", + "files": "Archivos", + "close": "Cerrar" + }, + "about": { + "hero": { + "title": "Creemos que las herramientas PDF deben ser", + "subtitle": "rápidas, privadas y gratuitas.", + "noCompromises": "Sin compromisos." + }, + "mission": { + "title": "Nuestra Misión", + "description": "Proporcionar la caja de herramientas PDF más completa que respete tu privacidad y nunca pida pago. Creemos que las herramientas de documentos esenciales deben ser accesibles para todos, en todas partes, sin barreras." + }, + "philosophy": { + "label": "Nuestra Filosofía Central", + "title": "Privacidad Primero. Siempre.", + "description": "En una era donde los datos son una mercancía, adoptamos un enfoque diferente. Todo el procesamiento de las herramientas de Bentopdf ocurre localmente en tu navegador. Esto significa que tus archivos nunca tocan nuestros servidores, nunca vemos tus documentos y no rastreamos lo que haces. Tus documentos permanecen completa e inequívocamente privados. No es solo una característica; es nuestra base." + }, + "whyBentopdf": { + "title": "Por qué", + "speed": { + "title": "Diseñado para la Velocidad", + "description": "Sin esperar cargas o descargas a un servidor. Al procesar archivos directamente en tu navegador usando tecnologías web modernas como WebAssembly, ofrecemos una velocidad incomparable para todas nuestras herramientas." + }, + "free": { + "title": "Completamente Gratis", + "description": "Sin pruebas, sin suscripciones, sin tarifas ocultas y sin funciones \"premium\" retenidas como rehenes. Creemos que las herramientas PDF potentes deben ser una utilidad pública, no un centro de ganancias." + }, + "noAccount": { + "title": "No Requiere Cuenta", + "description": "Comienza a usar cualquier herramienta de inmediato. No necesitamos tu correo electrónico, una contraseña o cualquier información personal. Tu flujo de trabajo debe ser sin fricciones y anónimo." + }, + "openSource": { + "title": "Espíritu de Código Abierto", + "description": "Construido con transparencia en mente. Aprovechamos increíbles bibliotecas de código abierto como PDF-lib y PDF.js, y creemos en el esfuerzo impulsado por la comunidad para hacer que las herramientas potentes sean accesibles para todos." + } + }, + "cta": { + "title": "¿Listo para comenzar?", + "description": "Únete a miles de usuarios que confían en Bentopdf para sus necesidades diarias de documentos. Experimenta la diferencia que la privacidad y el rendimiento pueden hacer.", + "button": "Explorar Todas las Herramientas" + } + }, + "contact": { + "title": "Ponte en Contacto", + "subtitle": "Nos encantaría saber de ti. Ya sea que tengas una pregunta, comentario o solicitud de función, no dudes en comunicarte.", + "email": "Puedes contactarnos directamente por correo electrónico en:" + }, + "licensing": { + "title": "Licencias para", + "subtitle": "Elige la licencia que se ajuste a tus necesidades." + }, + "multiTool": { + "uploadPdfs": "Cargar PDFs", + "upload": "Cargar", + "addBlankPage": "Agregar Página en Blanco", + "edit": "Editar:", + "undo": "Deshacer", + "redo": "Rehacer", + "reset": "Restablecer", + "selection": "Selección:", + "selectAll": "Seleccionar Todo", + "deselectAll": "Deseleccionar Todo", + "rotate": "Rotar:", + "rotateLeft": "Izquierda", + "rotateRight": "Derecha", + "transform": "Transformar:", + "duplicate": "Duplicar", + "split": "Dividir", + "clear": "Limpiar:", + "delete": "Eliminar", + "download": "Descargar:", + "downloadSelected": "Descargar Seleccionados", + "exportPdf": "Exportar PDF", + "uploadPdfFiles": "Seleccionar Archivos PDF", + "dragAndDrop": "Arrastra y suelta archivos PDF aquí, o haz clic para seleccionar", + "selectFiles": "Seleccionar Archivos", + "renderingPages": "Renderizando páginas...", + "actions": { + "duplicatePage": "Duplicar esta página", + "deletePage": "Eliminar esta página", + "insertPdf": "Insertar PDF después de esta página", + "toggleSplit": "Alternar división después de esta página" + }, + "pleaseWait": "Por Favor Espera", + "pagesRendering": "Las páginas aún se están renderizando. Por favor espera...", + "noPagesSelected": "No Se Seleccionaron Páginas", + "selectOnePage": "Por favor selecciona al menos una página para descargar.", + "noPages": "Sin Páginas", + "noPagesToExport": "No hay páginas para exportar.", + "renderingTitle": "Renderizando vistas previas de páginas", + "errorRendering": "Error al renderizar miniaturas de páginas", + "error": "Error", + "failedToLoad": "Error al cargar" + } } diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json index fa7aec2..a4a2366 100644 --- a/public/locales/fr/common.json +++ b/public/locales/fr/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF ou images", "filesNeverLeave": "Vos fichiers restent sur votre appareil.", "addMore": "Ajouter d’autres fichiers", - "clearAll": "Tout effacer" + "clearAll": "Tout effacer", + "clearFiles": "Effacer les fichiers" }, "loader": { "processing": "Traitement en cours..." @@ -226,7 +227,8 @@ "error": "Erreur", "success": "Succès", "file": "Fichier", - "files": "Fichiers" + "files": "Fichiers", + "close": "Fermer" }, "about": { "hero": { diff --git a/public/locales/id/common.json b/public/locales/id/common.json index a07d616..cd52487 100644 --- a/public/locales/id/common.json +++ b/public/locales/id/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF atau Gambar", "filesNeverLeave": "File Anda tidak pernah meninggalkan perangkat Anda.", "addMore": "Tambah Lebih Banyak File", - "clearAll": "Hapus Semua" + "clearAll": "Hapus Semua", + "clearFiles": "Hapus file" }, "loader": { "processing": "Memproses..." @@ -226,7 +227,8 @@ "error": "Kesalahan", "success": "Berhasil", "file": "File", - "files": "File" + "files": "File", + "close": "Tutup" }, "about": { "hero": { diff --git a/public/locales/it/common.json b/public/locales/it/common.json index c7d7b81..c71f284 100644 --- a/public/locales/it/common.json +++ b/public/locales/it/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF o immagini", "filesNeverLeave": "I tuoi file non lasciano mai il tuo dispositivo.", "addMore": "Aggiungi altri file", - "clearAll": "Svuota tutto" + "clearAll": "Svuota tutto", + "clearFiles": "Cancella file" }, "loader": { "processing": "Elaborazione..." @@ -226,7 +227,8 @@ "error": "Errore", "success": "Successo", "file": "File", - "files": "File" + "files": "File", + "close": "Chiudi" }, "about": { "hero": { diff --git a/public/locales/nl/common.json b/public/locales/nl/common.json index 120869a..2e2963e 100644 --- a/public/locales/nl/common.json +++ b/public/locales/nl/common.json @@ -57,7 +57,7 @@ "toolsLabel": "Tools", "subtitle": "Klik een tool om de bestandslader te openen", "searchPlaceholder": "Zoek een tool (bijv., 'splitsen', 'organiseren'...)", - "backToTools": "Terug naar Tools" + "backToTools": "Terug naar Tools", "firstLoadNotice": "De eerste keer duurt het even om onze conversiemachine te laden. Daarna gaat alles meteen." }, "upload": { @@ -66,7 +66,8 @@ "pdfOrImages": "PDF's of Afbeeldingen", "filesNeverLeave": "Je bestanden blijven op jouw apparaat.", "addMore": "Meer bestanden toevoegen", - "clearAll": "Alles wissen" + "clearAll": "Alles wissen", + "clearFiles": "Bestanden wissen" }, "loader": { "processing": "Verwerken..." @@ -226,7 +227,8 @@ "error": "Fout", "success": "Success", "file": "Bestand", - "files": "Bestanden" + "files": "Bestanden", + "close": "Sluiten" }, "about": { "hero": { @@ -321,4 +323,3 @@ "failedToLoad": "Laden is mislukt" } } - diff --git a/public/locales/pt/common.json b/public/locales/pt/common.json index e446088..f19e3bf 100644 --- a/public/locales/pt/common.json +++ b/public/locales/pt/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDFs ou Imagens", "filesNeverLeave": "Seus arquivos nunca saem do seu dispositivo.", "addMore": "Adicionar Mais Arquivos", - "clearAll": "Limpar Tudo" + "clearAll": "Limpar Tudo", + "clearFiles": "Limpar arquivos" }, "loader": { "processing": "Processando..." @@ -226,7 +227,8 @@ "error": "Erro", "success": "Sucesso", "file": "Arquivo", - "files": "Arquivos" + "files": "Arquivos", + "close": "Fechar" }, "about": { "hero": { diff --git a/public/locales/tr/common.json b/public/locales/tr/common.json index 1c874d4..5d34ab5 100644 --- a/public/locales/tr/common.json +++ b/public/locales/tr/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF veya Görseller", "filesNeverLeave": "Dosyalarınız cihazınızı asla terk etmez.", "addMore": "Daha Fazla Dosya Ekle", - "clearAll": "Tümünü Temizle" + "clearAll": "Tümünü Temizle", + "clearFiles": "Dosyaları temizle" }, "loader": { "processing": "İşleniyor..." @@ -226,7 +227,8 @@ "error": "Hata", "success": "Başarılı", "file": "Dosya", - "files": "Dosya" + "files": "Dosya", + "close": "Kapat" }, "about": { "hero": { diff --git a/public/locales/vi/common.json b/public/locales/vi/common.json index 1ebaa40..2005ef7 100644 --- a/public/locales/vi/common.json +++ b/public/locales/vi/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF hoặc Hình ảnh", "filesNeverLeave": "Tệp của bạn không bao giờ rời khỏi thiết bị.", "addMore": "Thêm tệp", - "clearAll": "Xóa tất cả" + "clearAll": "Xóa tất cả", + "clearFiles": "Xóa tệp" }, "loader": { "processing": "Đang xử lý..." @@ -226,7 +227,8 @@ "error": "Lỗi", "success": "Thành công", "file": "Tệp", - "files": "Tệp" + "files": "Tệp", + "close": "Đóng" }, "about": { "hero": { diff --git a/public/locales/zh-TW/common.json b/public/locales/zh-TW/common.json index 777dde8..2b2b033 100644 --- a/public/locales/zh-TW/common.json +++ b/public/locales/zh-TW/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF 或圖片", "filesNeverLeave": "你的檔案永遠不會離開你的裝置。", "addMore": "添加更多檔案", - "clearAll": "清除全部" + "clearAll": "清除全部", + "clearFiles": "清除檔案" }, "loader": { "processing": "正在處理..." @@ -226,7 +227,8 @@ "error": "錯誤", "success": "成功", "file": "檔案", - "files": "檔案" + "files": "檔案", + "close": "關閉" }, "about": { "hero": { diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json index 9fe300b..be7e069 100644 --- a/public/locales/zh/common.json +++ b/public/locales/zh/common.json @@ -66,7 +66,8 @@ "pdfOrImages": "PDF 或图片", "filesNeverLeave": "您的文件从未离开您的设备。", "addMore": "添加更多文件", - "clearAll": "清空所有" + "clearAll": "清空所有", + "clearFiles": "清除文件" }, "loader": { "processing": "处理中..." @@ -226,7 +227,8 @@ "error": "错误", "success": "成功", "file": "文件", - "files": "文件" + "files": "文件", + "close": "关闭" }, "about": { "hero": { diff --git a/public/pdfjs-viewer/viewer.css b/public/pdfjs-viewer/viewer.css index f127b2a..4dcd817 100644 --- a/public/pdfjs-viewer/viewer.css +++ b/public/pdfjs-viewer/viewer.css @@ -13,2431 +13,2651 @@ * limitations under the License. */ -.messageBar{ - --closing-button-icon:url(images/messageBar_closingButton.svg); - --message-bar-close-button-color:var(--text-primary-color); - --message-bar-close-button-color-hover:var(--text-primary-color); - --message-bar-close-button-border-radius:4px; - --message-bar-close-button-border:none; - --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.07)); -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.messageBar{ - --message-bar-close-button-hover-bg-color:light-dark( - rgb(21 20 26 / 0.14), - rgb(251 251 254 / 0.14) +.messageBar { + --closing-button-icon: url(images/messageBar_closingButton.svg); + --message-bar-close-button-color: var(--text-primary-color); + --message-bar-close-button-color-hover: var(--text-primary-color); + --message-bar-close-button-border-radius: 4px; + --message-bar-close-button-border: none; + --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.14); + --message-bar-close-button-hover-bg-color: var( + --csstools-light-dark-toggle--31, + rgb(21 20 26 / 0.14) ); - --message-bar-close-button-active-bg-color:light-dark( - rgb(21 20 26 / 0.21), - rgb(251 251 254 / 0.21) + --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.21); + --message-bar-close-button-active-bg-color: var( + --csstools-light-dark-toggle--32, + rgb(21 20 26 / 0.21) ); - --message-bar-close-button-focus-bg-color:light-dark( - rgb(21 20 26 / 0.07), - rgb(251 251 254 / 0.07) + --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.07); + --message-bar-close-button-focus-bg-color: var( + --csstools-light-dark-toggle--33, + rgb(21 20 26 / 0.07) ); } -} -@supports not (color: light-dark(tan, tan)){ - -.messageBar *{ - --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.07)); +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .messageBar { + --message-bar-close-button-hover-bg-color: light-dark( + rgb(21 20 26 / 0.14), + rgb(251 251 254 / 0.14) + ); + --message-bar-close-button-active-bg-color: light-dark( + rgb(21 20 26 / 0.21), + rgb(251 251 254 / 0.21) + ); + --message-bar-close-button-focus-bg-color: light-dark( + rgb(21 20 26 / 0.07), + rgb(251 251 254 / 0.07) + ); } } -@media screen and (forced-colors: active){ - -.messageBar{ - --message-bar-close-button-color:ButtonText; - --message-bar-close-button-border:1px solid ButtonText; - --message-bar-close-button-hover-bg-color:ButtonText; - --message-bar-close-button-active-bg-color:ButtonText; - --message-bar-close-button-focus-bg-color:ButtonText; - --message-bar-close-button-color-hover:HighlightText; -} +@supports not (color: light-dark(tan, tan)) { + .messageBar * { + --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.14); + --message-bar-close-button-hover-bg-color: var( + --csstools-light-dark-toggle--31, + rgb(21 20 26 / 0.14) + ); + --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.21); + --message-bar-close-button-active-bg-color: var( + --csstools-light-dark-toggle--32, + rgb(21 20 26 / 0.21) + ); + --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.07); + --message-bar-close-button-focus-bg-color: var( + --csstools-light-dark-toggle--33, + rgb(21 20 26 / 0.07) + ); } - -.messageBar{ - - display:flex; - position:relative; - padding:8px 8px 8px 16px; - flex-direction:column; - justify-content:center; - align-items:center; - gap:8px; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - - border-radius:4px; - - border:1px solid var(--message-bar-border-color); - background:var(--message-bar-bg-color); - color:var(--message-bar-fg-color); } -.messageBar > div{ - display:flex; - align-items:flex-start; - gap:8px; - align-self:stretch; +@media screen and (forced-colors: active) { + .messageBar { + --message-bar-close-button-color: ButtonText; + --message-bar-close-button-border: 1px solid ButtonText; + --message-bar-close-button-hover-bg-color: ButtonText; + --message-bar-close-button-active-bg-color: ButtonText; + --message-bar-close-button-focus-bg-color: ButtonText; + --message-bar-close-button-color-hover: HighlightText; } - -:is(.messageBar > div)::before{ - content:""; - display:inline-block; - width:16px; - height:16px; - -webkit-mask-image:var(--message-bar-icon); - mask-image:var(--message-bar-icon); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--message-bar-icon-color); - flex-shrink:0; - } - -.messageBar button{ - cursor:pointer; - } - -:is(.messageBar button):focus-visible{ - outline:var(--focus-ring-outline); - outline-offset:2px; - } - -.messageBar .closeButton{ - width:32px; - height:32px; - background:none; - border-radius:var(--message-bar-close-button-border-radius); - border:var(--message-bar-close-button-border); - - display:flex; - align-items:center; - justify-content:center; - } - -:is(.messageBar .closeButton)::before{ - content:""; - display:inline-block; - width:16px; - height:16px; - -webkit-mask-image:var(--closing-button-icon); - mask-image:var(--closing-button-icon); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--message-bar-close-button-color); - } - -:is(.messageBar .closeButton):is(:hover,:active,:focus)::before{ - background-color:var(--message-bar-close-button-color-hover); - } - -:is(.messageBar .closeButton):hover{ - background-color:var(--message-bar-close-button-hover-bg-color); - } - -:is(.messageBar .closeButton):active{ - background-color:var(--message-bar-close-button-active-bg-color); - } - -:is(.messageBar .closeButton):focus{ - background-color:var(--message-bar-close-button-focus-bg-color); - } - -:is(.messageBar .closeButton) > span{ - display:inline-block; - width:0; - height:0; - overflow:hidden; - } - -#editorUndoBar{ - --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--34, #15141a); - - --message-bar-icon:url(images/messageBar_info.svg); - --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #73a7f3; - --message-bar-icon-color:var(--csstools-light-dark-toggle--35, #0060df); - --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #003070; - --message-bar-bg-color:var(--csstools-light-dark-toggle--36, #deeafc); - --message-bar-fg-color:var(--text-primary-color); - --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--37, rgb(0 0 0 / 0.08)); - - --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - - --undo-button-bg-color:var(--csstools-light-dark-toggle--38, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); - --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--39, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); - --undo-button-bg-color-active:var(--csstools-light-dark-toggle--40, rgb(21 20 26 / 0.21)); - - --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #0df; - - --undo-button-border:1px solid var(--csstools-light-dark-toggle--41, #0060df); - - --undo-button-fg-color:var(--message-bar-fg-color); - --undo-button-fg-color-hover:var(--undo-button-fg-color); - --undo-button-fg-color-active:var(--undo-button-fg-color); } -@supports (color: light-dark(red, red)){ -#editorUndoBar{ - --text-primary-color:light-dark(#15141a, #fbfbfe); - --message-bar-icon-color:light-dark(#0060df, #73a7f3); - --message-bar-bg-color:light-dark(#deeafc, #003070); -} +.messageBar { + display: flex; + position: relative; + padding: 8px 8px 8px 16px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + border-radius: 4px; + + border: 1px solid var(--message-bar-border-color); + background: var(--message-bar-bg-color); + color: var(--message-bar-fg-color); } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#editorUndoBar{ - --message-bar-border-color:light-dark( - rgb(0 0 0 / 0.08), - rgb(255 255 255 / 0.08) +.messageBar > div { + display: flex; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +:is(.messageBar > div)::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--message-bar-icon); + mask-image: var(--message-bar-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--message-bar-icon-color); + flex-shrink: 0; +} + +.messageBar button { + cursor: pointer; +} + +:is(.messageBar button):focus-visible { + outline: var(--focus-ring-outline); + outline-offset: 2px; +} + +.messageBar .closeButton { + width: 32px; + height: 32px; + background: none; + border-radius: var(--message-bar-close-button-border-radius); + border: var(--message-bar-close-button-border); + + display: flex; + align-items: center; + justify-content: center; +} + +:is(.messageBar .closeButton)::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--closing-button-icon); + mask-image: var(--closing-button-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--message-bar-close-button-color); +} + +:is(.messageBar .closeButton):is(:hover, :active, :focus)::before { + background-color: var(--message-bar-close-button-color-hover); +} + +:is(.messageBar .closeButton):hover { + background-color: var(--message-bar-close-button-hover-bg-color); +} + +:is(.messageBar .closeButton):active { + background-color: var(--message-bar-close-button-active-bg-color); +} + +:is(.messageBar .closeButton):focus { + background-color: var(--message-bar-close-button-focus-bg-color); +} + +:is(.messageBar .closeButton) > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; +} + +#editorUndoBar { + --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--34, #15141a); + + --message-bar-icon: url(images/messageBar_info.svg); + --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #73a7f3; + --message-bar-icon-color: var(--csstools-light-dark-toggle--35, #0060df); + --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #003070; + --message-bar-bg-color: var(--csstools-light-dark-toggle--36, #deeafc); + --message-bar-fg-color: var(--text-primary-color); + --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + --message-bar-border-color: var( + --csstools-light-dark-toggle--37, + rgb(0 0 0 / 0.08) ); - --undo-button-bg-color:light-dark( - rgb(21 20 26 / 0.07), - rgb(255 255 255 / 0.08) + --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + + --undo-button-bg-color: var( + --csstools-light-dark-toggle--38, + rgb(21 20 26 / 0.07) ); - --undo-button-bg-color-hover:light-dark( - rgb(21 20 26 / 0.14), - rgb(255 255 255 / 0.14) + --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.14); + --undo-button-bg-color-hover: var( + --csstools-light-dark-toggle--39, + rgb(21 20 26 / 0.14) ); - --undo-button-bg-color-active:light-dark( - rgb(21 20 26 / 0.21), - rgb(255 255 255 / 0.21) + --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.21); + --undo-button-bg-color-active: var( + --csstools-light-dark-toggle--40, + rgb(21 20 26 / 0.21) ); -} + + --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #0df; + + --undo-button-border: 1px solid var(--csstools-light-dark-toggle--41, #0060df); + + --undo-button-fg-color: var(--message-bar-fg-color); + --undo-button-fg-color-hover: var(--undo-button-fg-color); + --undo-button-fg-color-active: var(--undo-button-fg-color); } -@supports (color: light-dark(red, red)){ -#editorUndoBar{ - - --undo-button-border:1px solid light-dark(#0060df, #0df); -} -} - -@supports not (color: light-dark(tan, tan)){ - -#editorUndoBar *{ - --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--34, #15141a); - --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #73a7f3; - --message-bar-icon-color:var(--csstools-light-dark-toggle--35, #0060df); - --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #003070; - --message-bar-bg-color:var(--csstools-light-dark-toggle--36, #deeafc); - --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--37, rgb(0 0 0 / 0.08)); - - --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - - --undo-button-bg-color:var(--csstools-light-dark-toggle--38, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); - --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--39, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); - --undo-button-bg-color-active:var(--csstools-light-dark-toggle--40, rgb(21 20 26 / 0.21)); - - --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #0df; - - --undo-button-border:1px solid var(--csstools-light-dark-toggle--41, #0060df); +@supports (color: light-dark(red, red)) { + #editorUndoBar { + --text-primary-color: light-dark(#15141a, #fbfbfe); + --message-bar-icon-color: light-dark(#0060df, #73a7f3); + --message-bar-bg-color: light-dark(#deeafc, #003070); } } -@media screen and (forced-colors: active){ +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + #editorUndoBar { + --message-bar-border-color: light-dark( + rgb(0 0 0 / 0.08), + rgb(255 255 255 / 0.08) + ); -#editorUndoBar{ - --text-primary-color:CanvasText; - - --message-bar-icon-color:CanvasText; - --message-bar-bg-color:Canvas; - --message-bar-border-color:CanvasText; - - --undo-button-bg-color:ButtonText; - --undo-button-bg-color-hover:SelectedItem; - --undo-button-bg-color-active:SelectedItem; - - --undo-button-fg-color:ButtonFace; - --undo-button-fg-color-hover:SelectedItemText; - --undo-button-fg-color-active:SelectedItemText; - - --undo-button-border:none; -} + --undo-button-bg-color: light-dark( + rgb(21 20 26 / 0.07), + rgb(255 255 255 / 0.08) + ); + --undo-button-bg-color-hover: light-dark( + rgb(21 20 26 / 0.14), + rgb(255 255 255 / 0.14) + ); + --undo-button-bg-color-active: light-dark( + rgb(21 20 26 / 0.21), + rgb(255 255 255 / 0.21) + ); } - -#editorUndoBar{ - - position:fixed; - top:50px; - left:50%; - transform:translateX(-50%); - z-index:10; - - padding-block:8px; - padding-inline:16px 8px; - - font:menu; - font-size:15px; - - cursor:default; } -#editorUndoBar button{ - cursor:pointer; +@supports (color: light-dark(red, red)) { + #editorUndoBar { + --undo-button-border: 1px solid light-dark(#0060df, #0df); } +} -#editorUndoBar #editorUndoBarUndoButton{ - border-radius:4px; - font-weight:590; - line-height:19.5px; - color:var(--undo-button-fg-color); - border:var(--undo-button-border); - padding:4px 16px; - margin-inline-start:8px; - height:32px; +@supports not (color: light-dark(tan, tan)) { + #editorUndoBar * { + --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) + #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--34, #15141a); + --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) + #73a7f3; + --message-bar-icon-color: var(--csstools-light-dark-toggle--35, #0060df); + --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) + #003070; + --message-bar-bg-color: var(--csstools-light-dark-toggle--36, #deeafc); + --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + --message-bar-border-color: var( + --csstools-light-dark-toggle--37, + rgb(0 0 0 / 0.08) + ); - background-color:var(--undo-button-bg-color); + --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + + --undo-button-bg-color: var( + --csstools-light-dark-toggle--38, + rgb(21 20 26 / 0.07) + ); + --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.14); + --undo-button-bg-color-hover: var( + --csstools-light-dark-toggle--39, + rgb(21 20 26 / 0.14) + ); + --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.21); + --undo-button-bg-color-active: var( + --csstools-light-dark-toggle--40, + rgb(21 20 26 / 0.21) + ); + + --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #0df; + + --undo-button-border: 1px solid + var(--csstools-light-dark-toggle--41, #0060df); } +} -:is(#editorUndoBar #editorUndoBarUndoButton):hover{ - background-color:var(--undo-button-bg-color-hover); - color:var(--undo-button-fg-color-hover); - } +@media screen and (forced-colors: active) { + #editorUndoBar { + --text-primary-color: CanvasText; -:is(#editorUndoBar #editorUndoBarUndoButton):active{ - background-color:var(--undo-button-bg-color-active); - color:var(--undo-button-fg-color-active); - } + --message-bar-icon-color: CanvasText; + --message-bar-bg-color: Canvas; + --message-bar-border-color: CanvasText; -#editorUndoBar > div{ - align-items:center; + --undo-button-bg-color: ButtonText; + --undo-button-bg-color-hover: SelectedItem; + --undo-button-bg-color-active: SelectedItem; + + --undo-button-fg-color: ButtonFace; + --undo-button-fg-color-hover: SelectedItemText; + --undo-button-fg-color-active: SelectedItemText; + + --undo-button-border: none; } +} -.dialog{ - --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color:var(--csstools-light-dark-toggle--42, white); - --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color:var(--csstools-light-dark-toggle--43, white); - --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #15141a; - --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--45, #15141a); - --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color:var(--csstools-light-dark-toggle--46, #5b5b66); - --hover-filter:brightness(0.9); - --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; - --link-fg-color:var(--csstools-light-dark-toggle--47, #0060df); - --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--48, #0250bb); - --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #52525e; - --separator-color:var(--csstools-light-dark-toggle--49, #f0f0f4); +#editorUndoBar { + position: fixed; + top: 50px; + left: 50%; + transform: translateX(-50%); + z-index: 10; - --textarea-border-color:#8f8f9d; - --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color:var(--csstools-light-dark-toggle--50, white); - --textarea-fg-color:var(--text-secondary-color); + padding-block: 8px; + padding-inline: 16px 8px; - --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #2b2a33; + font: menu; + font-size: 15px; - --radio-bg-color:var(--csstools-light-dark-toggle--51, #f0f0f4); - --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color:var(--csstools-light-dark-toggle--52, #fbfbfe); - --radio-border-color:#8f8f9d; - --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color:var(--csstools-light-dark-toggle--53, #0060df); + cursor: default; +} - --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); +#editorUndoBar button { + cursor: pointer; +} - --button-secondary-bg-color:var(--csstools-light-dark-toggle--54, rgb(21 20 26 / 0.07)); - --button-secondary-fg-color:var(--text-primary-color); - --button-secondary-border-color:var(--button-secondary-bg-color); - --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--55, rgb(21 20 26 / 0.21)); - --button-secondary-active-fg-color:var(--button-secondary-fg-color); - --button-secondary-active-border-color:var(--button-secondary-bg-color); - --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--56, rgb(21 20 26 / 0.14)); - --button-secondary-hover-fg-color:var(--button-secondary-fg-color); - --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); - --button-secondary-disabled-bg-color:var(--button-secondary-bg-color); - --button-secondary-disabled-border-color:var( +#editorUndoBar #editorUndoBarUndoButton { + border-radius: 4px; + font-weight: 590; + line-height: 19.5px; + color: var(--undo-button-fg-color); + border: var(--undo-button-border); + padding: 4px 16px; + margin-inline-start: 8px; + height: 32px; + + background-color: var(--undo-button-bg-color); +} + +:is(#editorUndoBar #editorUndoBarUndoButton):hover { + background-color: var(--undo-button-bg-color-hover); + color: var(--undo-button-fg-color-hover); +} + +:is(#editorUndoBar #editorUndoBarUndoButton):active { + background-color: var(--undo-button-bg-color-active); + color: var(--undo-button-fg-color-active); +} + +#editorUndoBar > div { + align-items: center; +} + +.dialog { + --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #1c1b22; + --dialog-bg-color: var(--csstools-light-dark-toggle--42, white); + --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #1c1b22; + --dialog-border-color: var(--csstools-light-dark-toggle--43, white); + --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #15141a; + --dialog-shadow: 0 2px 14px 0 + var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); + --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--45, #15141a); + --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #cfcfd8; + --text-secondary-color: var(--csstools-light-dark-toggle--46, #5b5b66); + --hover-filter: brightness(0.9); + --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--47, #0060df); + --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--48, #0250bb); + --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) #52525e; + --separator-color: var(--csstools-light-dark-toggle--49, #f0f0f4); + + --textarea-border-color: #8f8f9d; + --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #42414d; + --textarea-bg-color: var(--csstools-light-dark-toggle--50, white); + --textarea-fg-color: var(--text-secondary-color); + + --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #2b2a33; + + --radio-bg-color: var(--csstools-light-dark-toggle--51, #f0f0f4); + --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #15141a; + --radio-checked-bg-color: var(--csstools-light-dark-toggle--52, #fbfbfe); + --radio-border-color: #8f8f9d; + --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #0df; + --radio-checked-border-color: var(--csstools-light-dark-toggle--53, #0060df); + + --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.07); + + --button-secondary-bg-color: var( + --csstools-light-dark-toggle--54, + rgb(21 20 26 / 0.07) + ); + --button-secondary-fg-color: var(--text-primary-color); + --button-secondary-border-color: var(--button-secondary-bg-color); + --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.21); + --button-secondary-active-bg-color: var( + --csstools-light-dark-toggle--55, + rgb(21 20 26 / 0.21) + ); + --button-secondary-active-fg-color: var(--button-secondary-fg-color); + --button-secondary-active-border-color: var(--button-secondary-bg-color); + --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.14); + --button-secondary-hover-bg-color: var( + --csstools-light-dark-toggle--56, + rgb(21 20 26 / 0.14) + ); + --button-secondary-hover-fg-color: var(--button-secondary-fg-color); + --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color); + --button-secondary-disabled-bg-color: var(--button-secondary-bg-color); + --button-secondary-disabled-border-color: var( --button-secondary-border-color ); - --button-secondary-disabled-fg-color:var(--button-secondary-fg-color); + --button-secondary-disabled-fg-color: var(--button-secondary-fg-color); - --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) #0df; + --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #0df; - --button-primary-bg-color:var(--csstools-light-dark-toggle--57, #0060df); - --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color:var(--csstools-light-dark-toggle--58, #fbfbfe); - --button-primary-border-color:var(--button-primary-bg-color); - --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color:var(--csstools-light-dark-toggle--59, #054096); - --button-primary-active-fg-color:var(--button-primary-fg-color); - --button-primary-active-border-color:var(--button-primary-active-bg-color); - --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--60, #0250bb); - --button-primary-hover-fg-color:var(--button-primary-fg-color); - --button-primary-hover-border-color:var(--button-primary-hover-bg-color); - --button-primary-disabled-bg-color:var(--button-primary-bg-color); - --button-primary-disabled-border-color:var(--button-primary-border-color); - --button-primary-disabled-fg-color:var(--button-primary-fg-color); - --button-disabled-opacity:0.4; - - --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #42414d; - - --input-text-bg-color:var(--csstools-light-dark-toggle--61, white); - --input-text-fg-color:var(--text-primary-color); -} - -@supports (color: light-dark(red, red)){ -.dialog{ - --dialog-bg-color:light-dark(white, #1c1b22); - --dialog-border-color:light-dark(white, #1c1b22); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.dialog{ - --dialog-shadow:0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); -} -} - -@supports (color: light-dark(red, red)){ -.dialog{ - --text-primary-color:light-dark(#15141a, #fbfbfe); - --text-secondary-color:light-dark(#5b5b66, #cfcfd8); - --link-fg-color:light-dark(#0060df, #0df); - --link-hover-fg-color:light-dark(#0250bb, #80ebff); - --separator-color:light-dark(#f0f0f4, #52525e); - --textarea-bg-color:light-dark(white, #42414d); - - --radio-bg-color:light-dark(#f0f0f4, #2b2a33); - --radio-checked-bg-color:light-dark(#fbfbfe, #15141a); - --radio-checked-border-color:light-dark(#0060df, #0df); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.dialog{ - - --button-secondary-bg-color:light-dark( - rgb(21 20 26 / 0.07), - rgb(251 251 254 / 0.07) + --button-primary-bg-color: var(--csstools-light-dark-toggle--57, #0060df); + --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #15141a; + --button-primary-fg-color: var(--csstools-light-dark-toggle--58, #fbfbfe); + --button-primary-border-color: var(--button-primary-bg-color); + --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #aaf2ff; + --button-primary-active-bg-color: var( + --csstools-light-dark-toggle--59, + #054096 ); - --button-secondary-active-bg-color:light-dark( - rgb(21 20 26 / 0.21), - rgb(251 251 254 / 0.21) + --button-primary-active-fg-color: var(--button-primary-fg-color); + --button-primary-active-border-color: var(--button-primary-active-bg-color); + --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #80ebff; + --button-primary-hover-bg-color: var( + --csstools-light-dark-toggle--60, + #0250bb ); - --button-secondary-hover-bg-color:light-dark( - rgb(21 20 26 / 0.14), - rgb(251 251 254 / 0.14) + --button-primary-hover-fg-color: var(--button-primary-fg-color); + --button-primary-hover-border-color: var(--button-primary-hover-bg-color); + --button-primary-disabled-bg-color: var(--button-primary-bg-color); + --button-primary-disabled-border-color: var(--button-primary-border-color); + --button-primary-disabled-fg-color: var(--button-primary-fg-color); + --button-disabled-opacity: 0.4; + + --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #42414d; + + --input-text-bg-color: var(--csstools-light-dark-toggle--61, white); + --input-text-fg-color: var(--text-primary-color); +} + +@supports (color: light-dark(red, red)) { + .dialog { + --dialog-bg-color: light-dark(white, #1c1b22); + --dialog-border-color: light-dark(white, #1c1b22); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .dialog { + --dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); + } +} + +@supports (color: light-dark(red, red)) { + .dialog { + --text-primary-color: light-dark(#15141a, #fbfbfe); + --text-secondary-color: light-dark(#5b5b66, #cfcfd8); + --link-fg-color: light-dark(#0060df, #0df); + --link-hover-fg-color: light-dark(#0250bb, #80ebff); + --separator-color: light-dark(#f0f0f4, #52525e); + --textarea-bg-color: light-dark(white, #42414d); + + --radio-bg-color: light-dark(#f0f0f4, #2b2a33); + --radio-checked-bg-color: light-dark(#fbfbfe, #15141a); + --radio-checked-border-color: light-dark(#0060df, #0df); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .dialog { + --button-secondary-bg-color: light-dark( + rgb(21 20 26 / 0.07), + rgb(251 251 254 / 0.07) + ); + --button-secondary-active-bg-color: light-dark( + rgb(21 20 26 / 0.21), + rgb(251 251 254 / 0.21) + ); + --button-secondary-hover-bg-color: light-dark( + rgb(21 20 26 / 0.14), + rgb(251 251 254 / 0.14) + ); + } +} + +@supports (color: light-dark(red, red)) { + .dialog { + --button-primary-bg-color: light-dark(#0060df, #0df); + --button-primary-fg-color: light-dark(#fbfbfe, #15141a); + --button-primary-active-bg-color: light-dark(#054096, #aaf2ff); + --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff); + + --input-text-bg-color: light-dark(white, #42414d); + } +} + +@supports not (color: light-dark(tan, tan)) { + .dialog * { + --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) + #1c1b22; + --dialog-bg-color: var(--csstools-light-dark-toggle--42, white); + --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) + #1c1b22; + --dialog-border-color: var(--csstools-light-dark-toggle--43, white); + --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) + #15141a; + --dialog-shadow: 0 2px 14px 0 + var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); + --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) + #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--45, #15141a); + --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) + #cfcfd8; + --text-secondary-color: var(--csstools-light-dark-toggle--46, #5b5b66); + --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--47, #0060df); + --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) + #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--48, #0250bb); + --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) + #52525e; + --separator-color: var(--csstools-light-dark-toggle--49, #f0f0f4); + --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) + #42414d; + --textarea-bg-color: var(--csstools-light-dark-toggle--50, white); + + --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) + #2b2a33; + + --radio-bg-color: var(--csstools-light-dark-toggle--51, #f0f0f4); + --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) + #15141a; + --radio-checked-bg-color: var(--csstools-light-dark-toggle--52, #fbfbfe); + --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #0df; + --radio-checked-border-color: var( + --csstools-light-dark-toggle--53, + #0060df + ); + + --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.07); + + --button-secondary-bg-color: var( + --csstools-light-dark-toggle--54, + rgb(21 20 26 / 0.07) + ); + --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.21); + --button-secondary-active-bg-color: var( + --csstools-light-dark-toggle--55, + rgb(21 20 26 / 0.21) + ); + --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.14); + --button-secondary-hover-bg-color: var( + --csstools-light-dark-toggle--56, + rgb(21 20 26 / 0.14) + ); + + --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) #0df; + + --button-primary-bg-color: var(--csstools-light-dark-toggle--57, #0060df); + --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) + #15141a; + --button-primary-fg-color: var(--csstools-light-dark-toggle--58, #fbfbfe); + --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) + #aaf2ff; + --button-primary-active-bg-color: var( + --csstools-light-dark-toggle--59, + #054096 + ); + --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) + #80ebff; + --button-primary-hover-bg-color: var( + --csstools-light-dark-toggle--60, + #0250bb + ); + + --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) + #42414d; + + --input-text-bg-color: var(--csstools-light-dark-toggle--61, white); + } +} + +@media (prefers-color-scheme: dark) { + .dialog { + --hover-filter: brightness(1.4); + --button-disabled-opacity: 0.6; + } +} + +@media screen and (forced-colors: active) { + .dialog { + --dialog-bg-color: Canvas; + --dialog-border-color: CanvasText; + --dialog-shadow: none; + --text-primary-color: CanvasText; + --text-secondary-color: CanvasText; + --hover-filter: none; + --link-fg-color: LinkText; + --link-hover-fg-color: LinkText; + --separator-color: CanvasText; + + --textarea-border-color: ButtonBorder; + --textarea-bg-color: Field; + --textarea-fg-color: ButtonText; + + --radio-bg-color: ButtonFace; + --radio-checked-bg-color: ButtonFace; + --radio-border-color: ButtonText; + --radio-checked-border-color: ButtonText; + + --button-secondary-bg-color: ButtonFace; + --button-secondary-fg-color: ButtonText; + --button-secondary-border-color: ButtonText; + --button-secondary-active-bg-color: HighlightText; + --button-secondary-active-fg-color: SelectedItem; + --button-secondary-active-border-color: ButtonText; + --button-secondary-hover-bg-color: HighlightText; + --button-secondary-hover-fg-color: SelectedItem; + --button-secondary-hover-border-color: SelectedItem; + --button-secondary-disabled-fg-color: GrayText; + --button-secondary-disabled-border-color: GrayText; + + --button-primary-bg-color: ButtonText; + --button-primary-fg-color: ButtonFace; + --button-primary-border-color: ButtonText; + --button-primary-active-bg-color: SelectedItem; + --button-primary-active-fg-color: HighlightText; + --button-primary-active-border-color: ButtonText; + --button-primary-hover-bg-color: SelectedItem; + --button-primary-hover-fg-color: HighlightText; + --button-primary-hover-border-color: SelectedItem; + --button-primary-disabled-bg-color: GrayText; + --button-primary-disabled-fg-color: ButtonFace; + --button-primary-disabled-border-color: GrayText; + --button-disabled-opacity: 1; + + --input-text-bg-color: Field; + --input-text-fg-color: FieldText; + } +} + +.dialog { + font: message-box; + font-size: 13px; + font-weight: 400; + line-height: 150%; + border-radius: 4px; + padding: 12px 16px; + border: 1px solid var(--dialog-border-color); + background: var(--dialog-bg-color); + color: var(--text-primary-color); + box-shadow: var(--dialog-shadow); +} + +:is(.dialog .mainContainer) *:focus-visible { + outline: var(--focus-ring-outline); + outline-offset: 2px; +} + +:is(.dialog .mainContainer) .title { + display: flex; + width: auto; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; +} + +:is(:is(.dialog .mainContainer) .title) > span { + font-size: 13px; + font-style: normal; + font-weight: 590; + line-height: 150%; +} + +:is(.dialog .mainContainer) .dialogSeparator { + width: 100%; + height: 0; + margin-block: 4px; + border-top: 1px solid var(--separator-color); + border-bottom: none; +} + +:is(.dialog .mainContainer) .dialogButtonsGroup { + display: flex; + gap: 12px; + align-self: flex-end; +} + +:is(.dialog .mainContainer) .radio { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; +} + +:is(:is(.dialog .mainContainer) .radio) > .radioButton { + display: flex; + gap: 8px; + align-self: stretch; + align-items: center; +} + +:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + box-sizing: border-box; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--radio-bg-color); + border: 1px solid var(--radio-border-color); +} + +:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover { + filter: var(--hover-filter); +} + +:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked { + background-color: var(--radio-checked-bg-color); + border: 4px solid var(--radio-checked-border-color); +} + +:is(:is(.dialog .mainContainer) .radio) > .radioLabel { + display: flex; + padding-inline-start: 24px; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} + +:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span { + flex: 1 0 0; + font-size: 11px; + color: var(--text-secondary-color); +} + +:is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) { + border-radius: 4px; + border: 1px solid; + font: menu; + font-weight: 590; + font-size: 13px; + padding: 4px 16px; + width: auto; + height: 32px; +} + +:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) +):hover { + cursor: pointer; + filter: var(--hover-filter); +} + +:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ) + > span { + color: inherit; + font: inherit; +} + +.secondaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) +) { + color: var(--button-secondary-fg-color); + background-color: var(--button-secondary-bg-color); + border-color: var(--button-secondary-border-color); +} + +.secondaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):hover { + color: var(--button-secondary-hover-fg-color); + background-color: var(--button-secondary-hover-bg-color); + border-color: var(--button-secondary-hover-border-color); +} + +.secondaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):active { + color: var(--button-secondary-active-fg-color); + background-color: var(--button-secondary-active-bg-color); + border-color: var(--button-secondary-active-border-color); +} + +.secondaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):disabled { + background-color: var(--button-secondary-disabled-bg-color); + border-color: var(--button-secondary-disabled-border-color); + color: var(--button-secondary-disabled-fg-color); + opacity: var(--button-disabled-opacity); +} + +.primaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) +) { + color: var(--button-primary-fg-color); + background-color: var(--button-primary-bg-color); + border-color: var(--button-primary-border-color); + opacity: 1; +} + +.primaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):hover { + color: var(--button-primary-hover-fg-color); + background-color: var(--button-primary-hover-bg-color); + border-color: var(--button-primary-hover-border-color); +} + +.primaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):active { + color: var(--button-primary-active-fg-color); + background-color: var(--button-primary-active-bg-color); + border-color: var(--button-primary-active-border-color); +} + +.primaryButton:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) + ):disabled { + background-color: var(--button-primary-disabled-bg-color); + border-color: var(--button-primary-disabled-border-color); + color: var(--button-primary-disabled-fg-color); + opacity: var(--button-disabled-opacity); +} + +:is( + :is(.dialog .mainContainer) + button:not(:is(.toggle-button, .closeButton, .clearInputButton)) +):disabled { + pointer-events: none; +} + +:is(.dialog .mainContainer) a { + color: var(--link-fg-color); +} + +:is(:is(.dialog .mainContainer) a):hover { + color: var(--link-hover-fg-color); +} + +:is(.dialog .mainContainer) textarea { + font: inherit; + padding: 8px; + resize: none; + margin: 0; + box-sizing: border-box; + border-radius: 4px; + border: 1px solid var(--textarea-border-color); + background: var(--textarea-bg-color); + color: var(--textarea-fg-color); +} + +:is(:is(.dialog .mainContainer) textarea):focus { + outline-offset: 0; + border-color: transparent; +} + +:is(:is(.dialog .mainContainer) textarea):disabled { + pointer-events: none; + opacity: 0.4; +} + +:is(.dialog .mainContainer) input[type='text'] { + background-color: var(--input-text-bg-color); + color: var(--input-text-fg-color); +} + +:is(.dialog .mainContainer) .messageBar { + --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #5a3100; + --message-bar-bg-color: var(--csstools-light-dark-toggle--62, #ffebcd); + --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #fbfbfe; + --message-bar-fg-color: var(--csstools-light-dark-toggle--63, #15141a); + --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + --message-bar-border-color: var( + --csstools-light-dark-toggle--64, + rgb(0 0 0 / 0.08) ); -} + --message-bar-icon: url(images/messageBar_warning.svg); + --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #e49c49; + --message-bar-icon-color: var(--csstools-light-dark-toggle--65, #cd411e); } -@supports (color: light-dark(red, red)){ -.dialog{ - - --button-primary-bg-color:light-dark(#0060df, #0df); - --button-primary-fg-color:light-dark(#fbfbfe, #15141a); - --button-primary-active-bg-color:light-dark(#054096, #aaf2ff); - --button-primary-hover-bg-color:light-dark(#0250bb, #80ebff); - - --input-text-bg-color:light-dark(white, #42414d); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.dialog *{ - --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color:var(--csstools-light-dark-toggle--42, white); - --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color:var(--csstools-light-dark-toggle--43, white); - --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #15141a; - --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--45, #15141a); - --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color:var(--csstools-light-dark-toggle--46, #5b5b66); - --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; - --link-fg-color:var(--csstools-light-dark-toggle--47, #0060df); - --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--48, #0250bb); - --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #52525e; - --separator-color:var(--csstools-light-dark-toggle--49, #f0f0f4); - --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color:var(--csstools-light-dark-toggle--50, white); - - --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #2b2a33; - - --radio-bg-color:var(--csstools-light-dark-toggle--51, #f0f0f4); - --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color:var(--csstools-light-dark-toggle--52, #fbfbfe); - --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color:var(--csstools-light-dark-toggle--53, #0060df); - - --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - - --button-secondary-bg-color:var(--csstools-light-dark-toggle--54, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--55, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--56, rgb(21 20 26 / 0.14)); - - --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) #0df; - - --button-primary-bg-color:var(--csstools-light-dark-toggle--57, #0060df); - --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color:var(--csstools-light-dark-toggle--58, #fbfbfe); - --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color:var(--csstools-light-dark-toggle--59, #054096); - --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--60, #0250bb); - - --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #42414d; - - --input-text-bg-color:var(--csstools-light-dark-toggle--61, white); +@supports (color: light-dark(red, red)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-bg-color: light-dark(#ffebcd, #5a3100); + --message-bar-fg-color: light-dark(#15141a, #fbfbfe); } } -@media (prefers-color-scheme: dark){ - -.dialog{ - --hover-filter:brightness(1.4); - --button-disabled-opacity:0.6; -} - } - -@media screen and (forced-colors: active){ - -.dialog{ - --dialog-bg-color:Canvas; - --dialog-border-color:CanvasText; - --dialog-shadow:none; - --text-primary-color:CanvasText; - --text-secondary-color:CanvasText; - --hover-filter:none; - --link-fg-color:LinkText; - --link-hover-fg-color:LinkText; - --separator-color:CanvasText; - - --textarea-border-color:ButtonBorder; - --textarea-bg-color:Field; - --textarea-fg-color:ButtonText; - - --radio-bg-color:ButtonFace; - --radio-checked-bg-color:ButtonFace; - --radio-border-color:ButtonText; - --radio-checked-border-color:ButtonText; - - --button-secondary-bg-color:ButtonFace; - --button-secondary-fg-color:ButtonText; - --button-secondary-border-color:ButtonText; - --button-secondary-active-bg-color:HighlightText; - --button-secondary-active-fg-color:SelectedItem; - --button-secondary-active-border-color:ButtonText; - --button-secondary-hover-bg-color:HighlightText; - --button-secondary-hover-fg-color:SelectedItem; - --button-secondary-hover-border-color:SelectedItem; - --button-secondary-disabled-fg-color:GrayText; - --button-secondary-disabled-border-color:GrayText; - - --button-primary-bg-color:ButtonText; - --button-primary-fg-color:ButtonFace; - --button-primary-border-color:ButtonText; - --button-primary-active-bg-color:SelectedItem; - --button-primary-active-fg-color:HighlightText; - --button-primary-active-border-color:ButtonText; - --button-primary-hover-bg-color:SelectedItem; - --button-primary-hover-fg-color:HighlightText; - --button-primary-hover-border-color:SelectedItem; - --button-primary-disabled-bg-color:GrayText; - --button-primary-disabled-fg-color:ButtonFace; - --button-primary-disabled-border-color:GrayText; - --button-disabled-opacity:1; - - --input-text-bg-color:Field; - --input-text-fg-color:FieldText; -} - } - -.dialog{ - - font:message-box; - font-size:13px; - font-weight:400; - line-height:150%; - border-radius:4px; - padding:12px 16px; - border:1px solid var(--dialog-border-color); - background:var(--dialog-bg-color); - color:var(--text-primary-color); - box-shadow:var(--dialog-shadow); -} - -:is(.dialog .mainContainer) *:focus-visible{ - outline:var(--focus-ring-outline); - outline-offset:2px; - } - -:is(.dialog .mainContainer) .title{ - display:flex; - width:auto; - flex-direction:column; - justify-content:flex-end; - align-items:flex-start; - gap:12px; - } - -:is(:is(.dialog .mainContainer) .title) > span{ - font-size:13px; - font-style:normal; - font-weight:590; - line-height:150%; - } - -:is(.dialog .mainContainer) .dialogSeparator{ - width:100%; - height:0; - margin-block:4px; - border-top:1px solid var(--separator-color); - border-bottom:none; - } - -:is(.dialog .mainContainer) .dialogButtonsGroup{ - display:flex; - gap:12px; - align-self:flex-end; - } - -:is(.dialog .mainContainer) .radio{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:4px; - } - -:is(:is(.dialog .mainContainer) .radio) > .radioButton{ - display:flex; - gap:8px; - align-self:stretch; - align-items:center; - } - -:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input{ - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; - box-sizing:border-box; - width:16px; - height:16px; - border-radius:50%; - background-color:var(--radio-bg-color); - border:1px solid var(--radio-border-color); - } - -:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover{ - filter:var(--hover-filter); - } - -:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked{ - background-color:var(--radio-checked-bg-color); - border:4px solid var(--radio-checked-border-color); - } - -:is(:is(.dialog .mainContainer) .radio) > .radioLabel{ - display:flex; - padding-inline-start:24px; - align-items:flex-start; - gap:10px; - align-self:stretch; - } - -:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span{ - flex:1 0 0; - font-size:11px; - color:var(--text-secondary-color); - } - -:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)){ - border-radius:4px; - border:1px solid; - font:menu; - font-weight:590; - font-size:13px; - padding:4px 16px; - width:auto; - height:32px; - } - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ - cursor:pointer; - filter:var(--hover-filter); - } - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span{ - color:inherit; - font:inherit; - } - -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ - color:var(--button-secondary-fg-color); - background-color:var(--button-secondary-bg-color); - border-color:var(--button-secondary-border-color); - } - -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ - color:var(--button-secondary-hover-fg-color); - background-color:var(--button-secondary-hover-bg-color); - border-color:var(--button-secondary-hover-border-color); - } - -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ - color:var(--button-secondary-active-fg-color); - background-color:var(--button-secondary-active-bg-color); - border-color:var(--button-secondary-active-border-color); - } - -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ - background-color:var(--button-secondary-disabled-bg-color); - border-color:var(--button-secondary-disabled-border-color); - color:var(--button-secondary-disabled-fg-color); - opacity:var(--button-disabled-opacity); - } - -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ - color:var(--button-primary-fg-color); - background-color:var(--button-primary-bg-color); - border-color:var(--button-primary-border-color); - opacity:1; - } - -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ - color:var(--button-primary-hover-fg-color); - background-color:var(--button-primary-hover-bg-color); - border-color:var(--button-primary-hover-border-color); - } - -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ - color:var(--button-primary-active-fg-color); - background-color:var(--button-primary-active-bg-color); - border-color:var(--button-primary-active-border-color); - } - -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ - background-color:var(--button-primary-disabled-bg-color); - border-color:var(--button-primary-disabled-border-color); - color:var(--button-primary-disabled-fg-color); - opacity:var(--button-disabled-opacity); - } - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ - pointer-events:none; - } - -:is(.dialog .mainContainer) a{ - color:var(--link-fg-color); - } - -:is(:is(.dialog .mainContainer) a):hover{ - color:var(--link-hover-fg-color); - } - -:is(.dialog .mainContainer) textarea{ - font:inherit; - padding:8px; - resize:none; - margin:0; - box-sizing:border-box; - border-radius:4px; - border:1px solid var(--textarea-border-color); - background:var(--textarea-bg-color); - color:var(--textarea-fg-color); - } - -:is(:is(.dialog .mainContainer) textarea):focus{ - outline-offset:0; - border-color:transparent; - } - -:is(:is(.dialog .mainContainer) textarea):disabled{ - pointer-events:none; - opacity:0.4; - } - -:is(.dialog .mainContainer) input[type="text"]{ - background-color:var(--input-text-bg-color); - color:var(--input-text-fg-color); - } - -:is(.dialog .mainContainer) .messageBar{ - --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color:var(--csstools-light-dark-toggle--62, #ffebcd); - --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color:var(--csstools-light-dark-toggle--63, #15141a); - --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--64, rgb(0 0 0 / 0.08)); - --message-bar-icon:url(images/messageBar_warning.svg); - --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color:var(--csstools-light-dark-toggle--65, #cd411e); - } - -@supports (color: light-dark(red, red)){ -:is(.dialog .mainContainer) .messageBar{ - --message-bar-bg-color:light-dark(#ffebcd, #5a3100); - --message-bar-fg-color:light-dark(#15141a, #fbfbfe); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:is(.dialog .mainContainer) .messageBar{ - --message-bar-border-color:light-dark( - rgb(0 0 0 / 0.08), - rgb(255 255 255 / 0.08) - ); - } -} - -@supports (color: light-dark(red, red)){ -:is(.dialog .mainContainer) .messageBar{ - --message-bar-icon-color:light-dark(#cd411e, #e49c49); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.dialog .mainContainer) .messageBar) *{ - --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color:var(--csstools-light-dark-toggle--62, #ffebcd); - --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color:var(--csstools-light-dark-toggle--63, #15141a); - --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--64, rgb(0 0 0 / 0.08)); - --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color:var(--csstools-light-dark-toggle--65, #cd411e); +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-border-color: light-dark( + rgb(0 0 0 / 0.08), + rgb(255 255 255 / 0.08) + ); } } -@media screen and (forced-colors: active){ - -:is(.dialog .mainContainer) .messageBar{ - --message-bar-bg-color:HighlightText; - --message-bar-fg-color:CanvasText; - --message-bar-border-color:CanvasText; - --message-bar-icon-color:CanvasText; - } - } - -:is(.dialog .mainContainer) .messageBar{ - - align-self:stretch; - } - -:is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before,:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ - margin-block:4px; - } - -:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:8px; - flex:1 0 0; - } - -:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{ - font-size:13px; - font-weight:590; - } - -:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ - font-size:13px; - } - -:is(.dialog .mainContainer) .toggler{ - display:flex; - align-items:center; - gap:8px; - align-self:stretch; - } - -:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -.textLayer{ - position:absolute; - text-align:initial; - inset:0; - overflow:clip; - opacity:1; - line-height:1; - -webkit-text-size-adjust:none; - -moz-text-size-adjust:none; - text-size-adjust:none; - forced-color-adjust:none; - transform-origin:0 0; - caret-color:CanvasText; - z-index:0; -} - -.textLayer.highlighting{ - touch-action:none; - } - -.textLayer :is(span,br){ - color:transparent; - position:absolute; - white-space:pre; - cursor:text; - transform-origin:0% 0%; - } - -.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ - z-index:1; - } - -.textLayer span.markedContent{ - top:0; - height:0; - } - -.textLayer span[role="img"]{ - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - cursor:default; - } - -.textLayer .highlight{ - --highlight-bg-color:rgb(180 0 170 / 0.25); - --highlight-selected-bg-color:rgb(0 100 0 / 0.25); - --highlight-backdrop-filter:none; - --highlight-selected-backdrop-filter:none; - } - -@media screen and (forced-colors: active){ - -.textLayer .highlight{ - --highlight-bg-color:transparent; - --highlight-selected-bg-color:transparent; - --highlight-backdrop-filter:var(--hcm-highlight-filter); - --highlight-selected-backdrop-filter:var( - --hcm-highlight-selected-filter - ); - } - } - -.textLayer .highlight{ - - margin:-1px; - padding:1px; - background-color:var(--highlight-bg-color); - -webkit-backdrop-filter:var(--highlight-backdrop-filter); - backdrop-filter:var(--highlight-backdrop-filter); - border-radius:4px; - } - -.appended:is(.textLayer .highlight){ - position:initial; - } - -.begin:is(.textLayer .highlight){ - border-radius:4px 0 0 4px; - } - -.end:is(.textLayer .highlight){ - border-radius:0 4px 4px 0; - } - -.middle:is(.textLayer .highlight){ - border-radius:0; - } - -.selected:is(.textLayer .highlight){ - background-color:var(--highlight-selected-bg-color); - -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); - backdrop-filter:var(--highlight-selected-backdrop-filter); - } - -.textLayer ::-moz-selection{ - background:rgba(0 0 255 / 0.25); - background:color-mix(in srgb, AccentColor, transparent 75%); - } - -.textLayer ::selection{ - background:rgba(0 0 255 / 0.25); - background:color-mix(in srgb, AccentColor, transparent 75%); - } - -.textLayer br::-moz-selection{ - background:transparent; - } - -.textLayer br::selection{ - background:transparent; - } - -.textLayer .endOfContent{ - display:block; - position:absolute; - inset:100% 0 0; - z-index:0; - cursor:default; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -.textLayer.selecting .endOfContent{ - top:0; - } - -.annotationLayer{ - --csstools-color-scheme--light:initial; - color-scheme:only light; - - --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); - --input-focus-border-color:Highlight; - --input-focus-outline:1px solid Canvas; - --input-unfocused-border-color:transparent; - --input-disabled-border-color:transparent; - --input-hover-border-color:black; - --link-outline:none; -} - -@media screen and (forced-colors: active){ - -.annotationLayer{ - --input-focus-border-color:CanvasText; - --input-unfocused-border-color:ActiveText; - --input-disabled-border-color:GrayText; - --input-hover-border-color:Highlight; - --link-outline:1.5px solid LinkText; -} - - .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ - outline:1.5px solid selectedItem; - } - - .annotationLayer .linkAnnotation{ - outline:var(--link-outline); - } - - :is(.annotationLayer .linkAnnotation):hover{ - -webkit-backdrop-filter:var(--hcm-highlight-filter); - backdrop-filter:var(--hcm-highlight-filter); - } - - :is(.annotationLayer .linkAnnotation) > a:hover{ - opacity:0 !important; - background:none !important; - box-shadow:none; - } - - .annotationLayer .popupAnnotation .popup{ - outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; - background-color:ButtonFace !important; - color:ButtonText !important; - } - - .annotationLayer .highlightArea:hover::after{ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - -webkit-backdrop-filter:var(--hcm-highlight-filter); - backdrop-filter:var(--hcm-highlight-filter); - content:""; - pointer-events:none; - } - - .annotationLayer .popupAnnotation.focused .popup{ - outline:calc(3px * var(--total-scale-factor)) solid Highlight !important; - } - } - -.annotationLayer{ - - position:absolute; - top:0; - left:0; - pointer-events:none; - transform-origin:0 0; -} - -.annotationLayer[data-main-rotation="90"] .norotate{ - transform:rotate(270deg) translateX(-100%); - } - -.annotationLayer[data-main-rotation="180"] .norotate{ - transform:rotate(180deg) translate(-100%, -100%); - } - -.annotationLayer[data-main-rotation="270"] .norotate{ - transform:rotate(90deg) translateY(-100%); - } - -.annotationLayer.disabled section,.annotationLayer.disabled .popup{ - pointer-events:none; - } - -.annotationLayer .annotationContent{ - position:absolute; - width:100%; - height:100%; - pointer-events:none; - } - -.freetext:is(.annotationLayer .annotationContent){ - background:transparent; - border:none; - inset:0; - overflow:visible; - white-space:nowrap; - font:10px sans-serif; - line-height:1.35; - } - -.annotationLayer section{ - position:absolute; - text-align:initial; - pointer-events:auto; - box-sizing:border-box; - transform-origin:0 0; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{ - display:none; - } - -:is(.annotationLayer section) .overlaidText{ - position:absolute; - top:0; - left:0; - width:0; - height:0; - display:inline-block; - overflow:hidden; - } - -.textLayer.selecting ~ .annotationLayer section{ - pointer-events:none; - } - -.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton) > a{ - position:absolute; - font-size:1em; - top:0; - left:0; - width:100%; - height:100%; - } - -.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover{ - opacity:0.2; - background-color:rgb(255 255 0); - } - -.annotationLayer .linkAnnotation.hasBorder:hover{ - background-color:rgb(255 255 0 / 0.2); - } - -.annotationLayer .hasBorder{ - background-size:100% 100%; - } - -.annotationLayer .textAnnotation img{ - position:absolute; - cursor:pointer; - width:100%; - height:100%; - top:0; - left:0; - } - -.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ - background-image:var(--annotation-unfocused-field-background); - border:2px solid var(--input-unfocused-border-color); - box-sizing:border-box; - font:calc(9px * var(--total-scale-factor)) sans-serif; - height:100%; - margin:0; - vertical-align:top; - width:100%; - } - -.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ - outline:1.5px solid red; - } - -.annotationLayer .choiceWidgetAnnotation select option{ - padding:0; - } - -.annotationLayer .buttonWidgetAnnotation.radioButton input{ - border-radius:50%; - } - -.annotationLayer .textWidgetAnnotation textarea{ - resize:none; - } - -.annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea),.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{ - background:none; - border:2px solid var(--input-disabled-border-color); - cursor:not-allowed; - } - -.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{ - border:2px solid var(--input-hover-border-color); - } - -.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{ - border-radius:2px; - } - -.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{ - background:none; - border:2px solid var(--input-focus-border-color); - border-radius:2px; - outline:var(--input-focus-outline); - } - -.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{ - background-image:none; - background-color:transparent; - } - -.annotationLayer .buttonWidgetAnnotation.checkBox :focus{ - border:2px solid var(--input-focus-border-color); - border-radius:2px; - outline:var(--input-focus-outline); - } - -.annotationLayer .buttonWidgetAnnotation.radioButton :focus{ - border:2px solid var(--input-focus-border-color); - outline:var(--input-focus-outline); - } - -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ - background-color:CanvasText; - content:""; - display:block; - position:absolute; - } - -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ - height:80%; - left:45%; - width:1px; - } - -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{ - transform:rotate(45deg); - } - -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ - transform:rotate(-45deg); - } - -.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ - border-radius:50%; - height:50%; - left:25%; - top:25%; - width:50%; - } - -.annotationLayer .textWidgetAnnotation input.comb{ - font-family:monospace; - padding-left:2px; - padding-right:0; - } - -.annotationLayer .textWidgetAnnotation input.comb:focus{ - width:103%; - } - -.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; - } - -.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{ - height:100%; - width:100%; - } - -.annotationLayer .popupAnnotation{ - position:absolute; - font-size:calc(9px * var(--total-scale-factor)); - pointer-events:none; - width:-moz-max-content; - width:max-content; - max-width:45%; - height:auto; - } - -.annotationLayer .popup{ - background-color:rgb(255 255 153); - color:black; - box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136); - border-radius:calc(2px * var(--total-scale-factor)); - outline:1.5px solid rgb(255 255 74); - padding:calc(6px * var(--total-scale-factor)); - cursor:pointer; - font:message-box; - white-space:normal; - word-wrap:break-word; - pointer-events:auto; - -webkit-user-select:text; - -moz-user-select:text; - user-select:text; - } - -.annotationLayer .popupAnnotation.focused .popup{ - outline-width:3px; - } - -.annotationLayer .popup *{ - font-size:calc(9px * var(--total-scale-factor)); - } - -.annotationLayer .popup > .header{ - display:inline-block; - } - -.annotationLayer .popup > .header > .title{ - display:inline; - font-weight:bold; - } - -.annotationLayer .popup > .header .popupDate{ - display:inline-block; - margin-left:calc(5px * var(--total-scale-factor)); - width:-moz-fit-content; - width:fit-content; - } - -.annotationLayer .popupContent{ - border-top:1px solid rgb(51 51 51); - margin-top:calc(2px * var(--total-scale-factor)); - padding-top:calc(2px * var(--total-scale-factor)); - } - -.annotationLayer .richText > *{ - white-space:pre-wrap; - font-size:calc(9px * var(--total-scale-factor)); - } - -.annotationLayer .popupTriggerArea{ - cursor:pointer; - } - -:is(.annotationLayer .popupTriggerArea):hover{ - -webkit-backdrop-filter:var(--hcm-highlight-filter); - backdrop-filter:var(--hcm-highlight-filter); - } - -.annotationLayer section svg{ - position:absolute; - width:100%; - height:100%; - top:0; - left:0; - } - -.annotationLayer .annotationTextContent{ - position:absolute; - width:100%; - height:100%; - opacity:0; - color:transparent; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - pointer-events:none; - } - -:is(.annotationLayer .annotationTextContent) span{ - width:100%; - display:inline-block; - } - -.annotationLayer svg.quadrilateralsContainer{ - contain:strict; - width:0; - height:0; - position:absolute; - top:0; - left:0; - z-index:-1; - } - -:root{ - --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); - --xfa-focus-outline:auto; -} - -@media screen and (forced-colors: active){ - :root{ - --xfa-focus-outline:2px solid CanvasText; - } - .xfaLayer *:required{ - outline:1.5px solid selectedItem; +@supports (color: light-dark(red, red)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-icon-color: light-dark(#cd411e, #e49c49); } } -.xfaLayer{ - --csstools-color-scheme--light:initial; - color-scheme:only light; - - background-color:transparent; +@supports not (color: light-dark(tan, tan)) { + :is(:is(.dialog .mainContainer) .messageBar) * { + --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) + #5a3100; + --message-bar-bg-color: var(--csstools-light-dark-toggle--62, #ffebcd); + --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) + #fbfbfe; + --message-bar-fg-color: var(--csstools-light-dark-toggle--63, #15141a); + --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.08); + --message-bar-border-color: var( + --csstools-light-dark-toggle--64, + rgb(0 0 0 / 0.08) + ); + --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) + #e49c49; + --message-bar-icon-color: var(--csstools-light-dark-toggle--65, #cd411e); + } } -.xfaLayer .highlight{ - margin:-1px; - padding:1px; - background-color:rgb(239 203 237); - border-radius:4px; +@media screen and (forced-colors: active) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-bg-color: HighlightText; + --message-bar-fg-color: CanvasText; + --message-bar-border-color: CanvasText; + --message-bar-icon-color: CanvasText; + } } -.xfaLayer .highlight.appended{ - position:initial; +:is(.dialog .mainContainer) .messageBar { + align-self: stretch; } -.xfaLayer .highlight.begin{ - border-radius:4px 0 0 4px; +:is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before, +:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { + margin-block: 4px; } -.xfaLayer .highlight.end{ - border-radius:0 4px 4px 0; +:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + flex: 1 0 0; } -.xfaLayer .highlight.middle{ - border-radius:0; +:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title { + font-size: 13px; + font-weight: 590; } -.xfaLayer .highlight.selected{ - background-color:rgb(203 223 203); +:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) + .description { + font-size: 13px; } -.xfaPage{ - overflow:hidden; - position:relative; +:is(.dialog .mainContainer) .toggler { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; } -.xfaContentarea{ - position:absolute; +:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -.xfaPrintOnly{ - display:none; +.textLayer { + position: absolute; + text-align: initial; + inset: 0; + overflow: clip; + opacity: 1; + line-height: 1; + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + text-size-adjust: none; + forced-color-adjust: none; + transform-origin: 0 0; + caret-color: CanvasText; + z-index: 0; } -.xfaLayer{ - position:absolute; - text-align:initial; - top:0; - left:0; - transform-origin:0 0; - line-height:1.2; +.textLayer.highlighting { + touch-action: none; } -.xfaLayer *{ - color:inherit; - font:inherit; - font-style:inherit; - font-weight:inherit; - font-kerning:inherit; - letter-spacing:-0.01px; - text-align:inherit; - text-decoration:inherit; - box-sizing:border-box; - background-color:transparent; - padding:0; - margin:0; - pointer-events:auto; - line-height:inherit; +.textLayer :is(span, br) { + color: transparent; + position: absolute; + white-space: pre; + cursor: text; + transform-origin: 0% 0%; } -.xfaLayer *:required{ - outline:1.5px solid red; +.textLayer > :not(.markedContent), +.textLayer .markedContent span:not(.markedContent) { + z-index: 1; +} + +.textLayer span.markedContent { + top: 0; + height: 0; +} + +.textLayer span[role='img'] { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; +} + +.textLayer .highlight { + --highlight-bg-color: rgb(180 0 170 / 0.25); + --highlight-selected-bg-color: rgb(0 100 0 / 0.25); + --highlight-backdrop-filter: none; + --highlight-selected-backdrop-filter: none; +} + +@media screen and (forced-colors: active) { + .textLayer .highlight { + --highlight-bg-color: transparent; + --highlight-selected-bg-color: transparent; + --highlight-backdrop-filter: var(--hcm-highlight-filter); + --highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter); + } +} + +.textLayer .highlight { + margin: -1px; + padding: 1px; + background-color: var(--highlight-bg-color); + -webkit-backdrop-filter: var(--highlight-backdrop-filter); + backdrop-filter: var(--highlight-backdrop-filter); + border-radius: 4px; +} + +.appended:is(.textLayer .highlight) { + position: initial; +} + +.begin:is(.textLayer .highlight) { + border-radius: 4px 0 0 4px; +} + +.end:is(.textLayer .highlight) { + border-radius: 0 4px 4px 0; +} + +.middle:is(.textLayer .highlight) { + border-radius: 0; +} + +.selected:is(.textLayer .highlight) { + background-color: var(--highlight-selected-bg-color); + -webkit-backdrop-filter: var(--highlight-selected-backdrop-filter); + backdrop-filter: var(--highlight-selected-backdrop-filter); +} + +.textLayer ::-moz-selection { + background: rgba(0 0 255 / 0.25); + background: color-mix(in srgb, AccentColor, transparent 75%); +} + +.textLayer ::selection { + background: rgba(0 0 255 / 0.25); + background: color-mix(in srgb, AccentColor, transparent 75%); +} + +.textLayer br::-moz-selection { + background: transparent; +} + +.textLayer br::selection { + background: transparent; +} + +.textLayer .endOfContent { + display: block; + position: absolute; + inset: 100% 0 0; + z-index: 0; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.textLayer.selecting .endOfContent { + top: 0; +} + +.annotationLayer { + --csstools-color-scheme--light: initial; + color-scheme: only light; + + --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --input-focus-border-color: Highlight; + --input-focus-outline: 1px solid Canvas; + --input-unfocused-border-color: transparent; + --input-disabled-border-color: transparent; + --input-hover-border-color: black; + --link-outline: none; +} + +@media screen and (forced-colors: active) { + .annotationLayer { + --input-focus-border-color: CanvasText; + --input-unfocused-border-color: ActiveText; + --input-disabled-border-color: GrayText; + --input-hover-border-color: Highlight; + --link-outline: 1.5px solid LinkText; + } + + .annotationLayer .textWidgetAnnotation :is(input, textarea):required, + .annotationLayer .choiceWidgetAnnotation select:required, + .annotationLayer + .buttonWidgetAnnotation:is(.checkBox, .radioButton) + input:required { + outline: 1.5px solid selectedItem; + } + + .annotationLayer .linkAnnotation { + outline: var(--link-outline); + } + + :is(.annotationLayer .linkAnnotation):hover { + -webkit-backdrop-filter: var(--hcm-highlight-filter); + backdrop-filter: var(--hcm-highlight-filter); + } + + :is(.annotationLayer .linkAnnotation) > a:hover { + opacity: 0 !important; + background: none !important; + box-shadow: none; + } + + .annotationLayer .popupAnnotation .popup { + outline: calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; + background-color: ButtonFace !important; + color: ButtonText !important; + } + + .annotationLayer .highlightArea:hover::after { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-backdrop-filter: var(--hcm-highlight-filter); + backdrop-filter: var(--hcm-highlight-filter); + content: ''; + pointer-events: none; + } + + .annotationLayer .popupAnnotation.focused .popup { + outline: calc(3px * var(--total-scale-factor)) solid Highlight !important; + } +} + +.annotationLayer { + position: absolute; + top: 0; + left: 0; + pointer-events: none; + transform-origin: 0 0; +} + +.annotationLayer[data-main-rotation='90'] .norotate { + transform: rotate(270deg) translateX(-100%); +} + +.annotationLayer[data-main-rotation='180'] .norotate { + transform: rotate(180deg) translate(-100%, -100%); +} + +.annotationLayer[data-main-rotation='270'] .norotate { + transform: rotate(90deg) translateY(-100%); +} + +.annotationLayer.disabled section, +.annotationLayer.disabled .popup { + pointer-events: none; +} + +.annotationLayer .annotationContent { + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; +} + +.freetext:is(.annotationLayer .annotationContent) { + background: transparent; + border: none; + inset: 0; + overflow: visible; + white-space: nowrap; + font: 10px sans-serif; + line-height: 1.35; +} + +.annotationLayer section { + position: absolute; + text-align: initial; + pointer-events: auto; + box-sizing: border-box; + transform-origin: 0 0; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(.annotationLayer section):has(div.annotationContent) + canvas.annotationContent { + display: none; +} + +:is(.annotationLayer section) .overlaidText { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + display: inline-block; + overflow: hidden; +} + +.textLayer.selecting ~ .annotationLayer section { + pointer-events: none; +} + +.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a { + position: absolute; + font-size: 1em; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.annotationLayer + :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) + > a:hover { + opacity: 0.2; + background-color: rgb(255 255 0); +} + +.annotationLayer .linkAnnotation.hasBorder:hover { + background-color: rgb(255 255 0 / 0.2); +} + +.annotationLayer .hasBorder { + background-size: 100% 100%; +} + +.annotationLayer .textAnnotation img { + position: absolute; + cursor: pointer; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.annotationLayer .textWidgetAnnotation :is(input, textarea), +.annotationLayer .choiceWidgetAnnotation select, +.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { + background-image: var(--annotation-unfocused-field-background); + border: 2px solid var(--input-unfocused-border-color); + box-sizing: border-box; + font: calc(9px * var(--total-scale-factor)) sans-serif; + height: 100%; + margin: 0; + vertical-align: top; + width: 100%; +} + +.annotationLayer .textWidgetAnnotation :is(input, textarea):required, +.annotationLayer .choiceWidgetAnnotation select:required, +.annotationLayer + .buttonWidgetAnnotation:is(.checkBox, .radioButton) + input:required { + outline: 1.5px solid red; +} + +.annotationLayer .choiceWidgetAnnotation select option { + padding: 0; +} + +.annotationLayer .buttonWidgetAnnotation.radioButton input { + border-radius: 50%; +} + +.annotationLayer .textWidgetAnnotation textarea { + resize: none; +} + +.annotationLayer .textWidgetAnnotation [disabled]:is(input, textarea), +.annotationLayer .choiceWidgetAnnotation select[disabled], +.annotationLayer + .buttonWidgetAnnotation:is(.checkBox, .radioButton) + input[disabled] { + background: none; + border: 2px solid var(--input-disabled-border-color); + cursor: not-allowed; +} + +.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, +.annotationLayer .choiceWidgetAnnotation select:hover, +.annotationLayer + .buttonWidgetAnnotation:is(.checkBox, .radioButton) + input:hover { + border: 2px solid var(--input-hover-border-color); +} + +.annotationLayer .textWidgetAnnotation :is(input, textarea):hover, +.annotationLayer .choiceWidgetAnnotation select:hover, +.annotationLayer .buttonWidgetAnnotation.checkBox input:hover { + border-radius: 2px; +} + +.annotationLayer .textWidgetAnnotation :is(input, textarea):focus, +.annotationLayer .choiceWidgetAnnotation select:focus { + background: none; + border: 2px solid var(--input-focus-border-color); + border-radius: 2px; + outline: var(--input-focus-outline); +} + +.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus { + background-image: none; + background-color: transparent; +} + +.annotationLayer .buttonWidgetAnnotation.checkBox :focus { + border: 2px solid var(--input-focus-border-color); + border-radius: 2px; + outline: var(--input-focus-outline); +} + +.annotationLayer .buttonWidgetAnnotation.radioButton :focus { + border: 2px solid var(--input-focus-border-color); + outline: var(--input-focus-outline); +} + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, +.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { + background-color: CanvasText; + content: ''; + display: block; + position: absolute; +} + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { + height: 80%; + left: 45%; + width: 1px; +} + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before { + transform: rotate(45deg); +} + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { + transform: rotate(-45deg); +} + +.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { + border-radius: 50%; + height: 50%; + left: 25%; + top: 25%; + width: 50%; +} + +.annotationLayer .textWidgetAnnotation input.comb { + font-family: monospace; + padding-left: 2px; + padding-right: 0; +} + +.annotationLayer .textWidgetAnnotation input.comb:focus { + width: 103%; +} + +.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.annotationLayer .fileAttachmentAnnotation .popupTriggerArea { + height: 100%; + width: 100%; +} + +.annotationLayer .popupAnnotation { + position: absolute; + font-size: calc(9px * var(--total-scale-factor)); + pointer-events: none; + width: -moz-max-content; + width: max-content; + max-width: 45%; + height: auto; +} + +.annotationLayer .popup { + background-color: rgb(255 255 153); + color: black; + box-shadow: 0 calc(2px * var(--total-scale-factor)) + calc(5px * var(--total-scale-factor)) rgb(136 136 136); + border-radius: calc(2px * var(--total-scale-factor)); + outline: 1.5px solid rgb(255 255 74); + padding: calc(6px * var(--total-scale-factor)); + cursor: pointer; + font: message-box; + white-space: normal; + word-wrap: break-word; + pointer-events: auto; + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; +} + +.annotationLayer .popupAnnotation.focused .popup { + outline-width: 3px; +} + +.annotationLayer .popup * { + font-size: calc(9px * var(--total-scale-factor)); +} + +.annotationLayer .popup > .header { + display: inline-block; +} + +.annotationLayer .popup > .header > .title { + display: inline; + font-weight: bold; +} + +.annotationLayer .popup > .header .popupDate { + display: inline-block; + margin-left: calc(5px * var(--total-scale-factor)); + width: -moz-fit-content; + width: fit-content; +} + +.annotationLayer .popupContent { + border-top: 1px solid rgb(51 51 51); + margin-top: calc(2px * var(--total-scale-factor)); + padding-top: calc(2px * var(--total-scale-factor)); +} + +.annotationLayer .richText > * { + white-space: pre-wrap; + font-size: calc(9px * var(--total-scale-factor)); +} + +.annotationLayer .popupTriggerArea { + cursor: pointer; +} + +:is(.annotationLayer .popupTriggerArea):hover { + -webkit-backdrop-filter: var(--hcm-highlight-filter); + backdrop-filter: var(--hcm-highlight-filter); +} + +.annotationLayer section svg { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.annotationLayer .annotationTextContent { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; + color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + pointer-events: none; +} + +:is(.annotationLayer .annotationTextContent) span { + width: 100%; + display: inline-block; +} + +.annotationLayer svg.quadrilateralsContainer { + contain: strict; + width: 0; + height: 0; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +:root { + --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --xfa-focus-outline: auto; +} + +@media screen and (forced-colors: active) { + :root { + --xfa-focus-outline: 2px solid CanvasText; + } + .xfaLayer *:required { + outline: 1.5px solid selectedItem; + } +} + +.xfaLayer { + --csstools-color-scheme--light: initial; + color-scheme: only light; + + background-color: transparent; +} + +.xfaLayer .highlight { + margin: -1px; + padding: 1px; + background-color: rgb(239 203 237); + border-radius: 4px; +} + +.xfaLayer .highlight.appended { + position: initial; +} + +.xfaLayer .highlight.begin { + border-radius: 4px 0 0 4px; +} + +.xfaLayer .highlight.end { + border-radius: 0 4px 4px 0; +} + +.xfaLayer .highlight.middle { + border-radius: 0; +} + +.xfaLayer .highlight.selected { + background-color: rgb(203 223 203); +} + +.xfaPage { + overflow: hidden; + position: relative; +} + +.xfaContentarea { + position: absolute; +} + +.xfaPrintOnly { + display: none; +} + +.xfaLayer { + position: absolute; + text-align: initial; + top: 0; + left: 0; + transform-origin: 0 0; + line-height: 1.2; +} + +.xfaLayer * { + color: inherit; + font: inherit; + font-style: inherit; + font-weight: inherit; + font-kerning: inherit; + letter-spacing: -0.01px; + text-align: inherit; + text-decoration: inherit; + box-sizing: border-box; + background-color: transparent; + padding: 0; + margin: 0; + pointer-events: auto; + line-height: inherit; +} + +.xfaLayer *:required { + outline: 1.5px solid red; } .xfaLayer div, .xfaLayer svg, -.xfaLayer svg *{ - pointer-events:none; +.xfaLayer svg * { + pointer-events: none; } -.xfaLayer a{ - color:blue; +.xfaLayer a { + color: blue; } -.xfaRich li{ - margin-left:3em; +.xfaRich li { + margin-left: 3em; } -.xfaFont{ - color:black; - font-weight:normal; - font-kerning:none; - font-size:10px; - font-style:normal; - letter-spacing:0; - text-decoration:none; - vertical-align:0; +.xfaFont { + color: black; + font-weight: normal; + font-kerning: none; + font-size: 10px; + font-style: normal; + letter-spacing: 0; + text-decoration: none; + vertical-align: 0; } -.xfaCaption{ - overflow:hidden; - flex:0 0 auto; +.xfaCaption { + overflow: hidden; + flex: 0 0 auto; } -.xfaCaptionForCheckButton{ - overflow:hidden; - flex:1 1 auto; +.xfaCaptionForCheckButton { + overflow: hidden; + flex: 1 1 auto; } -.xfaLabel{ - height:100%; - width:100%; +.xfaLabel { + height: 100%; + width: 100%; } -.xfaLeft{ - display:flex; - flex-direction:row; - align-items:center; +.xfaLeft { + display: flex; + flex-direction: row; + align-items: center; } -.xfaRight{ - display:flex; - flex-direction:row-reverse; - align-items:center; +.xfaRight { + display: flex; + flex-direction: row-reverse; + align-items: center; } -:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){ - max-height:100%; +:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton) { + max-height: 100%; } -.xfaTop{ - display:flex; - flex-direction:column; - align-items:flex-start; +.xfaTop { + display: flex; + flex-direction: column; + align-items: flex-start; } -.xfaBottom{ - display:flex; - flex-direction:column-reverse; - align-items:flex-start; +.xfaBottom { + display: flex; + flex-direction: column-reverse; + align-items: flex-start; } -:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){ - width:100%; +:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) { + width: 100%; } -.xfaBorder{ - background-color:transparent; - position:absolute; - pointer-events:none; +.xfaBorder { + background-color: transparent; + position: absolute; + pointer-events: none; } -.xfaWrapped{ - width:100%; - height:100%; +.xfaWrapped { + width: 100%; + height: 100%; } -:is(.xfaTextfield, .xfaSelect):focus{ - background-image:none; - background-color:transparent; - outline:var(--xfa-focus-outline); - outline-offset:-1px; +:is(.xfaTextfield, .xfaSelect):focus { + background-image: none; + background-color: transparent; + outline: var(--xfa-focus-outline); + outline-offset: -1px; } -:is(.xfaCheckbox, .xfaRadio):focus{ - outline:var(--xfa-focus-outline); +:is(.xfaCheckbox, .xfaRadio):focus { + outline: var(--xfa-focus-outline); } .xfaTextfield, -.xfaSelect{ - height:100%; - width:100%; - flex:1 1 auto; - border:none; - resize:none; - background-image:var(--xfa-unfocused-field-background); +.xfaSelect { + height: 100%; + width: 100%; + flex: 1 1 auto; + border: none; + resize: none; + background-image: var(--xfa-unfocused-field-background); } -.xfaSelect{ - padding-inline:2px; +.xfaSelect { + padding-inline: 2px; } -:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){ - flex:0 1 auto; +:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) { + flex: 0 1 auto; } -.xfaButton{ - cursor:pointer; - width:100%; - height:100%; - border:none; - text-align:center; +.xfaButton { + cursor: pointer; + width: 100%; + height: 100%; + border: none; + text-align: center; } -.xfaLink{ - width:100%; - height:100%; - position:absolute; - top:0; - left:0; +.xfaLink { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .xfaCheckbox, -.xfaRadio{ - width:100%; - height:100%; - flex:0 0 auto; - border:none; +.xfaRadio { + width: 100%; + height: 100%; + flex: 0 0 auto; + border: none; } -.xfaRich{ - white-space:pre-wrap; - width:100%; - height:100%; +.xfaRich { + white-space: pre-wrap; + width: 100%; + height: 100%; } -.xfaImage{ - -o-object-position:left top; - object-position:left top; - -o-object-fit:contain; - object-fit:contain; - width:100%; - height:100%; +.xfaImage { + -o-object-position: left top; + object-position: left top; + -o-object-fit: contain; + object-fit: contain; + width: 100%; + height: 100%; } .xfaLrTb, .xfaRlTb, -.xfaTb{ - display:flex; - flex-direction:column; - align-items:stretch; +.xfaTb { + display: flex; + flex-direction: column; + align-items: stretch; } -.xfaLr{ - display:flex; - flex-direction:row; - align-items:stretch; +.xfaLr { + display: flex; + flex-direction: row; + align-items: stretch; } -.xfaRl{ - display:flex; - flex-direction:row-reverse; - align-items:stretch; +.xfaRl { + display: flex; + flex-direction: row-reverse; + align-items: stretch; } -.xfaTb > div{ - justify-content:left; +.xfaTb > div { + justify-content: left; } -.xfaPosition{ - position:relative; +.xfaPosition { + position: relative; } -.xfaArea{ - position:relative; +.xfaArea { + position: relative; } -.xfaValignMiddle{ - display:flex; - align-items:center; +.xfaValignMiddle { + display: flex; + align-items: center; } -.xfaTable{ - display:flex; - flex-direction:column; - align-items:stretch; +.xfaTable { + display: flex; + flex-direction: column; + align-items: stretch; } -.xfaTable .xfaRow{ - display:flex; - flex-direction:row; - align-items:stretch; +.xfaTable .xfaRow { + display: flex; + flex-direction: row; + align-items: stretch; } -.xfaTable .xfaRlRow{ - display:flex; - flex-direction:row-reverse; - align-items:stretch; - flex:1; +.xfaTable .xfaRlRow { + display: flex; + flex-direction: row-reverse; + align-items: stretch; + flex: 1; } -.xfaTable .xfaRlRow > div{ - flex:1; +.xfaTable .xfaRlRow > div { + flex: 1; } -:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){ - background:initial; +:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) { + background: initial; } -@media print{ +@media print { .xfaTextfield, - .xfaSelect{ - background:transparent; + .xfaSelect { + background: transparent; } - .xfaSelect{ - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; - text-indent:1px; - text-overflow:""; + .xfaSelect { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + text-indent: 1px; + text-overflow: ''; } } -.canvasWrapper svg{ - transform:none; +.canvasWrapper svg { + transform: none; +} + +.moving:is(.canvasWrapper svg) { + z-index: 100000; +} + +[data-main-rotation='90']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + mask, +[data-main-rotation='90']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + use:not(.clip, .mask) { + transform: matrix(0, 1, -1, 0, 1, 0); +} + +[data-main-rotation='180']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + mask, +[data-main-rotation='180']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + use:not(.clip, .mask) { + transform: matrix(-1, 0, 0, -1, 1, 1); +} + +[data-main-rotation='270']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + mask, +[data-main-rotation='270']:is( + .highlight:is(.canvasWrapper svg), + .highlightOutline:is(.canvasWrapper svg) + ) + use:not(.clip, .mask) { + transform: matrix(0, -1, 1, 0, 0, 1); +} + +.draw:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: normal; +} + +.draw[data-draw-rotation='90']:is(.canvasWrapper svg) { + transform: rotate(90deg); +} + +.draw[data-draw-rotation='180']:is(.canvasWrapper svg) { + transform: rotate(180deg); +} + +.draw[data-draw-rotation='270']:is(.canvasWrapper svg) { + transform: rotate(270deg); +} + +.highlight:is(.canvasWrapper svg) { + --blend-mode: multiply; +} + +@media screen and (forced-colors: active) { + .highlight:is(.canvasWrapper svg) { + --blend-mode: difference; } +} -.moving:is(.canvasWrapper svg){ - z-index:100000; - } +.highlight:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: var(--blend-mode); +} -[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ - transform:matrix(0, 1, -1, 0, 1, 0); - } +.highlight:is(.canvasWrapper svg):not(.free) { + fill-rule: evenodd; +} -[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ - transform:matrix(-1, 0, 0, -1, 1, 1); - } +.highlightOutline:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: normal; + fill-rule: evenodd; + fill: none; +} -[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ - transform:matrix(0, -1, 1, 0, 0, 1); - } +.highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected) { + stroke: var(--hover-outline-color); + stroke-width: var(--outline-width); +} -.draw:is(.canvasWrapper svg){ - position:absolute; - mix-blend-mode:normal; - } +.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline { + stroke: var(--outline-around-color); + stroke-width: calc(var(--outline-width) + 2 * var(--outline-around-width)); +} -.draw[data-draw-rotation="90"]:is(.canvasWrapper svg){ - transform:rotate(90deg); - } +.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline { + stroke: var(--outline-color); + stroke-width: var(--outline-width); +} -.draw[data-draw-rotation="180"]:is(.canvasWrapper svg){ - transform:rotate(180deg); - } +.highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected) { + stroke: var(--hover-outline-color); + stroke-width: calc(2 * var(--outline-width)); +} -.draw[data-draw-rotation="270"]:is(.canvasWrapper svg){ - transform:rotate(270deg); - } +.highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline { + stroke: var(--outline-around-color); + stroke-width: calc(2 * (var(--outline-width) + var(--outline-around-width))); +} -.highlight:is(.canvasWrapper svg){ - --blend-mode:multiply; - } +.highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline { + stroke: var(--outline-color); + stroke-width: calc(2 * var(--outline-width)); +} -@media screen and (forced-colors: active){ - -.highlight:is(.canvasWrapper svg){ - --blend-mode:difference; - } - } - -.highlight:is(.canvasWrapper svg){ - - position:absolute; - mix-blend-mode:var(--blend-mode); - } - -.highlight:is(.canvasWrapper svg):not(.free){ - fill-rule:evenodd; - } - -.highlightOutline:is(.canvasWrapper svg){ - position:absolute; - mix-blend-mode:normal; - fill-rule:evenodd; - fill:none; - } - -.highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){ - stroke:var(--hover-outline-color); - stroke-width:var(--outline-width); - } - -.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{ - stroke:var(--outline-around-color); - stroke-width:calc( - var(--outline-width) + 2 * var(--outline-around-width) - ); - } - -.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline{ - stroke:var(--outline-color); - stroke-width:var(--outline-width); - } - -.highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){ - stroke:var(--hover-outline-color); - stroke-width:calc(2 * var(--outline-width)); - } - -.highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{ - stroke:var(--outline-around-color); - stroke-width:calc( - 2 * (var(--outline-width) + var(--outline-around-width)) - ); - } - -.highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{ - stroke:var(--outline-color); - stroke-width:calc(2 * var(--outline-width)); - } - -.toggle-button{ - --button-background-color:color-mix(in srgb, currentColor 7%, transparent); - --button-background-color-hover:color-mix( +.toggle-button { + --button-background-color: color-mix(in srgb, currentColor 7%, transparent); + --button-background-color-hover: color-mix( in srgb, currentColor 14%, transparent ); - --button-background-color-active:color-mix( + --button-background-color-active: color-mix( in srgb, currentColor 21%, transparent ); - --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #0df; - --color-accent-primary:var(--csstools-light-dark-toggle--66, #0060df); - --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #80ebff; - --color-accent-primary-hover:var(--csstools-light-dark-toggle--67, #0250bb); - --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #aaf2ff; - --color-accent-primary-active:var(--csstools-light-dark-toggle--68, #054096); - --border-radius-circle:9999px; - --border-width:1px; - --size-item-small:16px; - --size-item-large:32px; - --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #1c1b22; - --color-canvas:var(--csstools-light-dark-toggle--69, white); - --background-color-canvas:var(--color-canvas); - --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #f9f9fa; - --border-color-interactive:var(--csstools-light-dark-toggle--70, #8f8f9d); - --border-color-interactive-hover:var(--border-color-interactive); - --border-color-interactive-active:var(--border-color-interactive); + --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #0df; + --color-accent-primary: var(--csstools-light-dark-toggle--66, #0060df); + --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #80ebff; + --color-accent-primary-hover: var(--csstools-light-dark-toggle--67, #0250bb); + --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #aaf2ff; + --color-accent-primary-active: var(--csstools-light-dark-toggle--68, #054096); + --border-radius-circle: 9999px; + --border-width: 1px; + --size-item-small: 16px; + --size-item-large: 32px; + --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #1c1b22; + --color-canvas: var(--csstools-light-dark-toggle--69, white); + --background-color-canvas: var(--color-canvas); + --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #f9f9fa; + --border-color-interactive: var(--csstools-light-dark-toggle--70, #8f8f9d); + --border-color-interactive-hover: var(--border-color-interactive); + --border-color-interactive-active: var(--border-color-interactive); } -@supports (color: light-dark(red, red)){ -.toggle-button{ - --color-accent-primary:light-dark(#0060df, #0df); - --color-accent-primary-hover:light-dark(#0250bb, #80ebff); - --color-accent-primary-active:light-dark(#054096, #aaf2ff); - --color-canvas:light-dark(white, #1c1b22); - --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.toggle-button *{ - --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #0df; - --color-accent-primary:var(--csstools-light-dark-toggle--66, #0060df); - --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #80ebff; - --color-accent-primary-hover:var(--csstools-light-dark-toggle--67, #0250bb); - --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #aaf2ff; - --color-accent-primary-active:var(--csstools-light-dark-toggle--68, #054096); - --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #1c1b22; - --color-canvas:var(--csstools-light-dark-toggle--69, white); - --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #f9f9fa; - --border-color-interactive:var(--csstools-light-dark-toggle--70, #8f8f9d); +@supports (color: light-dark(red, red)) { + .toggle-button { + --color-accent-primary: light-dark(#0060df, #0df); + --color-accent-primary-hover: light-dark(#0250bb, #80ebff); + --color-accent-primary-active: light-dark(#054096, #aaf2ff); + --color-canvas: light-dark(white, #1c1b22); + --border-color-interactive: light-dark(#8f8f9d, #f9f9fa); } } -@media (forced-colors: active){ - -.toggle-button{ - --color-accent-primary:ButtonText; - --color-accent-primary-hover:SelectedItem; - --color-accent-primary-active:SelectedItem; - --button-background-color:ButtonFace; - --border-color-interactive:ButtonText; - --border-color-interactive-hover:SelectedItem; - --border-color-interactive-active:ButtonText; - --color-canvas:ButtonText; - --background-color-canvas:Canvas; -} +@supports not (color: light-dark(tan, tan)) { + .toggle-button * { + --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #0df; + --color-accent-primary: var(--csstools-light-dark-toggle--66, #0060df); + --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) + #80ebff; + --color-accent-primary-hover: var( + --csstools-light-dark-toggle--67, + #0250bb + ); + --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) + #aaf2ff; + --color-accent-primary-active: var( + --csstools-light-dark-toggle--68, + #054096 + ); + --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) + #1c1b22; + --color-canvas: var(--csstools-light-dark-toggle--69, white); + --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) + #f9f9fa; + --border-color-interactive: var(--csstools-light-dark-toggle--70, #8f8f9d); } +} -.toggle-button{ - --toggle-background-color:var(--button-background-color); - --toggle-background-color-hover:var(--button-background-color-hover); - --toggle-background-color-active:var(--button-background-color-active); - --toggle-background-color-pressed:var(--color-accent-primary); - --toggle-background-color-pressed-hover:var(--color-accent-primary-hover); - --toggle-background-color-pressed-active:var(--color-accent-primary-active); - --toggle-border-color:var(--border-color-interactive); - --toggle-border-color-hover:var(--toggle-border-color); - --toggle-border-color-active:var(--toggle-border-color); - --toggle-border-radius:var(--border-radius-circle); - --toggle-border-width:var(--border-width); - --toggle-height:var(--size-item-small); - --toggle-width:var(--size-item-large); - --toggle-dot-background-color:var(--toggle-border-color); - --toggle-dot-background-color-hover:var(--toggle-dot-background-color); - --toggle-dot-background-color-active:var(--toggle-dot-background-color); - --toggle-dot-background-color-on-pressed:var(--background-color-canvas); - --toggle-dot-margin:1px; - --toggle-dot-height:calc( +@media (forced-colors: active) { + .toggle-button { + --color-accent-primary: ButtonText; + --color-accent-primary-hover: SelectedItem; + --color-accent-primary-active: SelectedItem; + --button-background-color: ButtonFace; + --border-color-interactive: ButtonText; + --border-color-interactive-hover: SelectedItem; + --border-color-interactive-active: ButtonText; + --color-canvas: ButtonText; + --background-color-canvas: Canvas; + } +} + +.toggle-button { + --toggle-background-color: var(--button-background-color); + --toggle-background-color-hover: var(--button-background-color-hover); + --toggle-background-color-active: var(--button-background-color-active); + --toggle-background-color-pressed: var(--color-accent-primary); + --toggle-background-color-pressed-hover: var(--color-accent-primary-hover); + --toggle-background-color-pressed-active: var(--color-accent-primary-active); + --toggle-border-color: var(--border-color-interactive); + --toggle-border-color-hover: var(--toggle-border-color); + --toggle-border-color-active: var(--toggle-border-color); + --toggle-border-radius: var(--border-radius-circle); + --toggle-border-width: var(--border-width); + --toggle-height: var(--size-item-small); + --toggle-width: var(--size-item-large); + --toggle-dot-background-color: var(--toggle-border-color); + --toggle-dot-background-color-hover: var(--toggle-dot-background-color); + --toggle-dot-background-color-active: var(--toggle-dot-background-color); + --toggle-dot-background-color-on-pressed: var(--background-color-canvas); + --toggle-dot-margin: 1px; + --toggle-dot-height: calc( var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) ); - --toggle-dot-width:var(--toggle-dot-height); - --toggle-dot-transform-x:calc( + --toggle-dot-width: var(--toggle-dot-height); + --toggle-dot-transform-x: calc( var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) ); - --input-width:var(--toggle-width); + --input-width: var(--toggle-width); - -webkit-appearance:none; + -webkit-appearance: none; - -moz-appearance:none; + -moz-appearance: none; - appearance:none; - padding:0; - border:var(--toggle-border-width) solid var(--toggle-border-color); - height:var(--toggle-height); - width:var(--toggle-width); - border-radius:var(--toggle-border-radius); - background-color:var(--toggle-background-color); - box-sizing:border-box; + appearance: none; + padding: 0; + border: var(--toggle-border-width) solid var(--toggle-border-color); + height: var(--toggle-height); + width: var(--toggle-width); + border-radius: var(--toggle-border-radius); + background-color: var(--toggle-background-color); + box-sizing: border-box; } -.toggle-button:focus-visible{ - outline:var(--focus-outline); - outline-offset:var(--focus-outline-offset); - } - -.toggle-button:enabled:hover{ - background-color:var(--toggle-background-color-hover); - border-color:var(--toggle-border-color); - } - -.toggle-button:enabled:hover:active{ - background-color:var(--toggle-background-color-active); - border-color:var(--toggle-border-color); - } - -.toggle-button::before{ - display:block; - content:""; - background-color:var(--toggle-dot-background-color); - height:var(--toggle-dot-height); - width:var(--toggle-dot-width); - margin:var(--toggle-dot-margin); - border-radius:var(--toggle-border-radius); - translate:0; - } - -.toggle-button[aria-pressed="true"]{ - background-color:var(--toggle-background-color-pressed); - border-color:transparent; +.toggle-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); } -.toggle-button[aria-pressed="true"]:enabled:hover{ - background-color:var(--toggle-background-color-pressed-hover); - border-color:transparent; - } +.toggle-button:enabled:hover { + background-color: var(--toggle-background-color-hover); + border-color: var(--toggle-border-color); +} -.toggle-button[aria-pressed="true"]:enabled:hover:active{ - background-color:var(--toggle-background-color-pressed-active); - border-color:transparent; - } +.toggle-button:enabled:hover:active { + background-color: var(--toggle-background-color-active); + border-color: var(--toggle-border-color); +} -.toggle-button[aria-pressed="true"]::before{ - translate:var(--toggle-dot-transform-x); - background-color:var(--toggle-dot-background-color-on-pressed); - } +.toggle-button::before { + display: block; + content: ''; + background-color: var(--toggle-dot-background-color); + height: var(--toggle-dot-height); + width: var(--toggle-dot-width); + margin: var(--toggle-dot-margin); + border-radius: var(--toggle-border-radius); + translate: 0; +} -.toggle-button[aria-pressed="true"]:enabled:hover::before,.toggle-button[aria-pressed="true"]:enabled:hover:active::before{ - background-color:var(--toggle-dot-background-color-on-pressed); - } +.toggle-button[aria-pressed='true'] { + background-color: var(--toggle-background-color-pressed); + border-color: transparent; +} -.toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before,[dir="rtl"] .toggle-button[aria-pressed="true"]::before{ - translate:calc(-1 * var(--toggle-dot-transform-x)); - } +.toggle-button[aria-pressed='true']:enabled:hover { + background-color: var(--toggle-background-color-pressed-hover); + border-color: transparent; +} -@media (prefers-reduced-motion: no-preference){ - .toggle-button::before{ - transition:translate 100ms; +.toggle-button[aria-pressed='true']:enabled:hover:active { + background-color: var(--toggle-background-color-pressed-active); + border-color: transparent; +} + +.toggle-button[aria-pressed='true']::before { + translate: var(--toggle-dot-transform-x); + background-color: var(--toggle-dot-background-color-on-pressed); +} + +.toggle-button[aria-pressed='true']:enabled:hover::before, +.toggle-button[aria-pressed='true']:enabled:hover:active::before { + background-color: var(--toggle-dot-background-color-on-pressed); +} + +.toggle-button[aria-pressed='true']:-moz-locale-dir(rtl)::before, +[dir='rtl'] .toggle-button[aria-pressed='true']::before { + translate: calc(-1 * var(--toggle-dot-transform-x)); +} + +@media (prefers-reduced-motion: no-preference) { + .toggle-button::before { + transition: translate 100ms; } } -@media (prefers-contrast){ - .toggle-button:enabled:hover{ - border-color:var(--toggle-border-color-hover); +@media (prefers-contrast) { + .toggle-button:enabled:hover { + border-color: var(--toggle-border-color-hover); } - .toggle-button:enabled:hover:active{ - border-color:var(--toggle-border-color-active); + .toggle-button:enabled:hover:active { + border-color: var(--toggle-border-color-active); } - .toggle-button[aria-pressed="true"]:enabled{ - border-color:var(--toggle-border-color); - position:relative; + .toggle-button[aria-pressed='true']:enabled { + border-color: var(--toggle-border-color); + position: relative; } - .toggle-button[aria-pressed="true"]:enabled:hover{ - border-color:var(--toggle-border-color-hover); - } + .toggle-button[aria-pressed='true']:enabled:hover { + border-color: var(--toggle-border-color-hover); + } - .toggle-button[aria-pressed="true"]:enabled:hover:active{ - background-color:var(--toggle-dot-background-color-active); - border-color:var(--toggle-dot-background-color-hover); - } + .toggle-button[aria-pressed='true']:enabled:hover:active { + background-color: var(--toggle-dot-background-color-active); + border-color: var(--toggle-dot-background-color-hover); + } .toggle-button:enabled:hover::before, - .toggle-button:enabled:hover:active::before{ - background-color:var(--toggle-dot-background-color-hover); + .toggle-button:enabled:hover:active::before { + background-color: var(--toggle-dot-background-color-hover); } } -@media (forced-colors){ - .toggle-button{ - --toggle-dot-background-color:var(--color-accent-primary); - --toggle-dot-background-color-hover:var(--color-accent-primary-hover); - --toggle-dot-background-color-active:var(--color-accent-primary-active); - --toggle-dot-background-color-on-pressed:var(--button-background-color); - --toggle-border-color-hover:var(--border-color-interactive-hover); - --toggle-border-color-active:var(--border-color-interactive-active); +@media (forced-colors) { + .toggle-button { + --toggle-dot-background-color: var(--color-accent-primary); + --toggle-dot-background-color-hover: var(--color-accent-primary-hover); + --toggle-dot-background-color-active: var(--color-accent-primary-active); + --toggle-dot-background-color-on-pressed: var(--button-background-color); + --toggle-border-color-hover: var(--border-color-interactive-hover); + --toggle-border-color-active: var(--border-color-interactive-active); } - .toggle-button[aria-pressed="true"]:enabled::after{ - border:1px solid var(--button-background-color); - content:""; - position:absolute; - height:var(--toggle-height); - width:var(--toggle-width); - display:block; - border-radius:var(--toggle-border-radius); - inset:-2px; + .toggle-button[aria-pressed='true']:enabled::after { + border: 1px solid var(--button-background-color); + content: ''; + position: absolute; + height: var(--toggle-height); + width: var(--toggle-width); + display: block; + border-radius: var(--toggle-border-radius); + inset: -2px; } - .toggle-button[aria-pressed="true"]:enabled:hover:active::after{ - border-color:var(--toggle-border-color-active); + .toggle-button[aria-pressed='true']:enabled:hover:active::after { + border-color: var(--toggle-border-color-active); } } -:root{ - --clear-signature-button-icon:url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #2b2a33; - --signature-bg:var(--csstools-light-dark-toggle--71, #f9f9fb); - --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) var(--signature-bg); - --signature-hover-bg:var(--csstools-light-dark-toggle--72, #f0f0f4); - --button-signature-bg:transparent; - --button-signature-color:var(--main-color); - --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #5b5b66; - --button-signature-active-bg:var(--csstools-light-dark-toggle--73, #cfcfd8); - --button-signature-active-border:none; - --button-signature-active-color:var(--button-signature-color); - --button-signature-border:none; - --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #52525e; - --button-signature-hover-bg:var(--csstools-light-dark-toggle--74, #e0e0e6); - --button-signature-hover-color:var(--button-signature-color); +:root { + --clear-signature-button-icon: url(images/editor-toolbar-delete.svg); + --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #2b2a33; + --signature-bg: var(--csstools-light-dark-toggle--71, #f9f9fb); + --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) + var(--signature-bg); + --signature-hover-bg: var(--csstools-light-dark-toggle--72, #f0f0f4); + --button-signature-bg: transparent; + --button-signature-color: var(--main-color); + --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #5b5b66; + --button-signature-active-bg: var(--csstools-light-dark-toggle--73, #cfcfd8); + --button-signature-active-border: none; + --button-signature-active-color: var(--button-signature-color); + --button-signature-border: none; + --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #52525e; + --button-signature-hover-bg: var(--csstools-light-dark-toggle--74, #e0e0e6); + --button-signature-hover-color: var(--button-signature-color); } -@supports (color: light-dark(red, red)){ -:root{ - --signature-bg:light-dark(#f9f9fb, #2b2a33); - --signature-hover-bg:light-dark(#f0f0f4, var(--signature-bg)); - --button-signature-active-bg:light-dark(#cfcfd8, #5b5b66); - --button-signature-hover-bg:light-dark(#e0e0e6, #52525e); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #2b2a33; - --signature-bg:var(--csstools-light-dark-toggle--71, #f9f9fb); - --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) var(--signature-bg); - --signature-hover-bg:var(--csstools-light-dark-toggle--72, #f0f0f4); - --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #5b5b66; - --button-signature-active-bg:var(--csstools-light-dark-toggle--73, #cfcfd8); - --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #52525e; - --button-signature-hover-bg:var(--csstools-light-dark-toggle--74, #e0e0e6); +@supports (color: light-dark(red, red)) { + :root { + --signature-bg: light-dark(#f9f9fb, #2b2a33); + --signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg)); + --button-signature-active-bg: light-dark(#cfcfd8, #5b5b66); + --button-signature-hover-bg: light-dark(#e0e0e6, #52525e); } } -@media screen and (forced-colors: active){ - -:root{ - --signature-bg:HighlightText; - --signature-hover-bg:var(--signature-bg); - --button-signature-bg:HighlightText; - --button-signature-color:ButtonText; - --button-signature-active-bg:ButtonText; - --button-signature-active-color:HighlightText; - --button-signature-border:1px solid ButtonText; - --button-signature-hover-bg:Highlight; - --button-signature-hover-color:HighlightText; -} +@supports not (color: light-dark(tan, tan)) { + :root * { + --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) + #2b2a33; + --signature-bg: var(--csstools-light-dark-toggle--71, #f9f9fb); + --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) + var(--signature-bg); + --signature-hover-bg: var(--csstools-light-dark-toggle--72, #f0f0f4); + --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) + #5b5b66; + --button-signature-active-bg: var( + --csstools-light-dark-toggle--73, + #cfcfd8 + ); + --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) + #52525e; + --button-signature-hover-bg: var(--csstools-light-dark-toggle--74, #e0e0e6); } - -.signatureDialog{ - --primary-color:var(--text-primary-color); - --border-color:#8f8f9d; - --open-link-fg:var(--link-fg-color); - --open-link-hover-fg:var(--link-hover-fg-color); } -@media screen and (forced-colors: active){ - -.signatureDialog{ - --primary-color:ButtonText; - --border-color:ButtonText; - --open-link-fg:ButtonText; - --open-link-hover-fg:ButtonText; -} +@media screen and (forced-colors: active) { + :root { + --signature-bg: HighlightText; + --signature-hover-bg: var(--signature-bg); + --button-signature-bg: HighlightText; + --button-signature-color: ButtonText; + --button-signature-active-bg: ButtonText; + --button-signature-active-color: HighlightText; + --button-signature-border: 1px solid ButtonText; + --button-signature-hover-bg: Highlight; + --button-signature-hover-color: HighlightText; } - -.signatureDialog{ - - width:570px; - max-width:100%; - min-width:300px; - padding:16px 0; } -.signatureDialog .mainContainer{ - width:100%; - display:flex; - flex-direction:column; - align-items:flex-start; - gap:12px; +.signatureDialog { + --primary-color: var(--text-primary-color); + --border-color: #8f8f9d; + --open-link-fg: var(--link-fg-color); + --open-link-hover-fg: var(--link-hover-fg-color); +} + +@media screen and (forced-colors: active) { + .signatureDialog { + --primary-color: ButtonText; + --border-color: ButtonText; + --open-link-fg: ButtonText; + --open-link-hover-fg: ButtonText; } +} -:is(.signatureDialog .mainContainer) span:not([role="sectionhead"]){ - font-size:13px; - font-style:normal; - font-weight:400; - line-height:normal; - } +.signatureDialog { + width: 570px; + max-width: 100%; + min-width: 300px; + padding: 16px 0; +} -:is(.signatureDialog .mainContainer) .title{ - margin-inline-start:16px; - } +.signatureDialog .mainContainer { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; +} -.signatureDialog .inputWithClearButton{ - --button-dimension:24px; - --clear-button-icon:url(images/messageBar_closingButton.svg); +:is(.signatureDialog .mainContainer) span:not([role='sectionhead']) { + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; +} - width:100%; - position:relative; - display:flex; - align-items:center; - justify-content:center; - } +:is(.signatureDialog .mainContainer) .title { + margin-inline-start: 16px; +} -:is(.signatureDialog .inputWithClearButton) > input{ - width:100%; - height:32px; - padding-inline:8px calc(4px + var(--button-dimension)); - box-sizing:border-box; - border-radius:4px; - border:1px solid var(--border-color); - } +.signatureDialog .inputWithClearButton { + --button-dimension: 24px; + --clear-button-icon: url(images/messageBar_closingButton.svg); -:is(.signatureDialog .inputWithClearButton) .clearInputButton{ - position:absolute; - inset-block-start:4px; - inset-inline-end:4px; - display:inline-block; - width:var(--button-dimension); - height:var(--button-dimension); - background-color:var(--input-text-fg-color); - -webkit-mask-size:cover; - mask-size:cover; - -webkit-mask-image:var(--clear-button-icon); - mask-image:var(--clear-button-icon); - padding:0; - border:0; - } + width: 100%; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} -#addSignatureDialog{ - --secondary-color:var(--text-secondary-color); - --bg-hover:#e0e0e6; - --tab-top-line-active-color:#0060df; - --tab-top-line-active-hover-color:var(--tab-text-hover-color); - --tab-top-line-hover-color:#8f8f9d; - --tab-top-line-inactive-color:#cfcfd8; - --tab-bottom-line-active-color:var(--tab-top-line-inactive-color); - --tab-bottom-line-hover-color:var(--tab-top-line-inactive-color); - --tab-bottom-line-inactive-color:var(--tab-top-line-inactive-color); - --tab-bg:var(--dialog-bg-color); - --tab-bg-active-color:var(--tab-bg); - --tab-bg-active-hover-color:var(--bg-hover); - --tab-bg-hover:var(--bg-hover); - --tab-panel-border:none; - --tab-panel-border-radius:4px; - --tab-text-color:var(--primary-color); - --tab-text-active-color:var(--tab-top-line-active-color); - --tab-text-active-hover-color:var(--tab-text-hover-color); - --tab-text-hover-color:var(--tab-text-color); - --signature-placeholder-color:var(--secondary-color); - --signature-draw-placeholder-color:var(--primary-color); - --signature-color:var(--primary-color); - --clear-signature-button-border-width:0; - --clear-signature-button-border-style:solid; - --clear-signature-button-border-color:transparent; - --clear-signature-button-border-disabled-color:transparent; - --clear-signature-button-color:var(--primary-color); - --clear-signature-button-hover-color:var(--clear-signature-button-color); - --clear-signature-button-active-color:var(--clear-signature-button-color); - --clear-signature-button-disabled-color:var(--clear-signature-button-color); - --clear-signature-button-focus-color:var(--clear-signature-button-color); - --clear-signature-button-bg:var(--dialog-bg-color); - --clear-signature-button-bg-hover:var(--bg-hover); - --clear-signature-button-bg-active:#cfcfd8; - --clear-signature-button-bg-focus:#f0f0f4; - --clear-signature-button-bg-disabled:color-mix( +:is(.signatureDialog .inputWithClearButton) > input { + width: 100%; + height: 32px; + padding-inline: 8px calc(4px + var(--button-dimension)); + box-sizing: border-box; + border-radius: 4px; + border: 1px solid var(--border-color); +} + +:is(.signatureDialog .inputWithClearButton) .clearInputButton { + position: absolute; + inset-block-start: 4px; + inset-inline-end: 4px; + display: inline-block; + width: var(--button-dimension); + height: var(--button-dimension); + background-color: var(--input-text-fg-color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--clear-button-icon); + mask-image: var(--clear-button-icon); + padding: 0; + border: 0; +} + +#addSignatureDialog { + --secondary-color: var(--text-secondary-color); + --bg-hover: #e0e0e6; + --tab-top-line-active-color: #0060df; + --tab-top-line-active-hover-color: var(--tab-text-hover-color); + --tab-top-line-hover-color: #8f8f9d; + --tab-top-line-inactive-color: #cfcfd8; + --tab-bottom-line-active-color: var(--tab-top-line-inactive-color); + --tab-bottom-line-hover-color: var(--tab-top-line-inactive-color); + --tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color); + --tab-bg: var(--dialog-bg-color); + --tab-bg-active-color: var(--tab-bg); + --tab-bg-active-hover-color: var(--bg-hover); + --tab-bg-hover: var(--bg-hover); + --tab-panel-border: none; + --tab-panel-border-radius: 4px; + --tab-text-color: var(--primary-color); + --tab-text-active-color: var(--tab-top-line-active-color); + --tab-text-active-hover-color: var(--tab-text-hover-color); + --tab-text-hover-color: var(--tab-text-color); + --signature-placeholder-color: var(--secondary-color); + --signature-draw-placeholder-color: var(--primary-color); + --signature-color: var(--primary-color); + --clear-signature-button-border-width: 0; + --clear-signature-button-border-style: solid; + --clear-signature-button-border-color: transparent; + --clear-signature-button-border-disabled-color: transparent; + --clear-signature-button-color: var(--primary-color); + --clear-signature-button-hover-color: var(--clear-signature-button-color); + --clear-signature-button-active-color: var(--clear-signature-button-color); + --clear-signature-button-disabled-color: var(--clear-signature-button-color); + --clear-signature-button-focus-color: var(--clear-signature-button-color); + --clear-signature-button-bg: var(--dialog-bg-color); + --clear-signature-button-bg-hover: var(--bg-hover); + --clear-signature-button-bg-active: #cfcfd8; + --clear-signature-button-bg-focus: #f0f0f4; + --clear-signature-button-bg-disabled: color-mix( in srgb, #f0f0f4, transparent 40% ); - --save-warning-color:var(--secondary-color); - --thickness-bg:var(--dialog-bg-color); - --thickness-label-color:var(--primary-color); - --thickness-slider-color:var(--primary-color); - --thickness-border:none; - --draw-cursor:url(images/cursor-editorInk.svg) 0 16, pointer; + --save-warning-color: var(--secondary-color); + --thickness-bg: var(--dialog-bg-color); + --thickness-label-color: var(--primary-color); + --thickness-slider-color: var(--primary-color); + --thickness-border: none; + --draw-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; } -@media (prefers-color-scheme: dark){ - -#addSignatureDialog{ - --dialog-bg-color:#42414d; - --bg-hover:#52525e; - --primary-color:#fbfbfe; - --secondary-color:#cfcfd8; - --tab-top-line-active-color:#0df; - --tab-top-line-inactive-color:#8f8f9d; - --clear-signature-button-bg-active:#5b5b66; - --clear-signature-button-bg-focus:#2b2a33; - --clear-signature-button-bg-disabled:color-mix( +@media (prefers-color-scheme: dark) { + #addSignatureDialog { + --dialog-bg-color: #42414d; + --bg-hover: #52525e; + --primary-color: #fbfbfe; + --secondary-color: #cfcfd8; + --tab-top-line-active-color: #0df; + --tab-top-line-inactive-color: #8f8f9d; + --clear-signature-button-bg-active: #5b5b66; + --clear-signature-button-bg-focus: #2b2a33; + --clear-signature-button-bg-disabled: color-mix( in srgb, #2b2a33, transparent 40% ); + } } + +@media screen and (forced-colors: active) { + #addSignatureDialog { + --secondary-color: ButtonText; + --bg: HighlightText; + --bg-hover: var(--bg); + --tab-top-line-active-color: ButtonText; + --tab-top-line-active-hover-color: HighlightText; + --tab-top-line-hover-color: SelectedItem; + --tab-top-line-inactive-color: ButtonText; + --tab-bottom-line-active-color: var(--tab-top-line-active-color); + --tab-bottom-line-hover-color: var(--tab-top-line-hover-color); + --tab-bg: var(--bg); + --tab-bg-active-color: SelectedItem; + --tab-bg-active-hover-color: SelectedItem; + --tab-panel-border: 1px solid ButtonText; + --tab-panel-border-radius: 8px; + --tab-text-color: ButtonText; + --tab-text-active-color: HighlightText; + --tab-text-active-hover-color: HighlightText; + --tab-text-hover-color: SelectedItem; + --signature-color: ButtonText; + --clear-signature-button-border-width: 1px; + --clear-signature-button-border-style: solid; + --clear-signature-button-border-color: ButtonText; + --clear-signature-button-border-disabled-color: GrayText; + --clear-signature-button-color: ButtonText; + --clear-signature-button-hover-color: HighlightText; + --clear-signature-button-active-color: SelectedItem; + --clear-signature-button-focus-color: CanvasText; + --clear-signature-button-disabled-color: GrayText; + --clear-signature-button-bg: var(--bg); + --clear-signature-button-bg-hover: SelectedItem; + --clear-signature-button-bg-active: var(--bg); + --clear-signature-button-bg-focus: var(--bg); + --clear-signature-button-bg-disabled: var(--bg); + --thickness-bg: Canvas; + --thickness-label-color: CanvasText; + --thickness-slider-color: ButtonText; + --thickness-border: 1px solid var(--border-color); } - -@media screen and (forced-colors: active){ - -#addSignatureDialog{ - --secondary-color:ButtonText; - --bg:HighlightText; - --bg-hover:var(--bg); - --tab-top-line-active-color:ButtonText; - --tab-top-line-active-hover-color:HighlightText; - --tab-top-line-hover-color:SelectedItem; - --tab-top-line-inactive-color:ButtonText; - --tab-bottom-line-active-color:var(--tab-top-line-active-color); - --tab-bottom-line-hover-color:var(--tab-top-line-hover-color); - --tab-bg:var(--bg); - --tab-bg-active-color:SelectedItem; - --tab-bg-active-hover-color:SelectedItem; - --tab-panel-border:1px solid ButtonText; - --tab-panel-border-radius:8px; - --tab-text-color:ButtonText; - --tab-text-active-color:HighlightText; - --tab-text-active-hover-color:HighlightText; - --tab-text-hover-color:SelectedItem; - --signature-color:ButtonText; - --clear-signature-button-border-width:1px; - --clear-signature-button-border-style:solid; - --clear-signature-button-border-color:ButtonText; - --clear-signature-button-border-disabled-color:GrayText; - --clear-signature-button-color:ButtonText; - --clear-signature-button-hover-color:HighlightText; - --clear-signature-button-active-color:SelectedItem; - --clear-signature-button-focus-color:CanvasText; - --clear-signature-button-disabled-color:GrayText; - --clear-signature-button-bg:var(--bg); - --clear-signature-button-bg-hover:SelectedItem; - --clear-signature-button-bg-active:var(--bg); - --clear-signature-button-bg-focus:var(--bg); - --clear-signature-button-bg-disabled:var(--bg); - --thickness-bg:Canvas; - --thickness-label-color:CanvasText; - --thickness-slider-color:ButtonText; - --thickness-border:1px solid var(--border-color); } - } -#addSignatureDialog #addSignatureDialogLabel{ - overflow:hidden; - position:absolute; - inset:0; - width:0; - height:0; - } +#addSignatureDialog #addSignatureDialogLabel { + overflow: hidden; + position: absolute; + inset: 0; + width: 0; + height: 0; +} -#addSignatureDialog.waiting::after{ - content:""; - cursor:wait; - position:absolute; - inset:0; - width:100%; - height:100%; - } +#addSignatureDialog.waiting::after { + content: ''; + cursor: wait; + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} -:is(#addSignatureDialog .mainContainer) [role="tablist"]{ - width:100%; - display:flex; - align-items:flex-start; - gap:0; - } +:is(#addSignatureDialog .mainContainer) [role='tablist'] { + width: 100%; + display: flex; + align-items: flex-start; + gap: 0; +} -:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]{ - flex:1 0 0; - align-self:stretch; - background-color:var(--tab-bg); - padding-inline:0; - cursor:default; +:is(:is(#addSignatureDialog .mainContainer) [role='tablist']) > [role='tab'] { + flex: 1 0 0; + align-self: stretch; + background-color: var(--tab-bg); + padding-inline: 0; + cursor: default; - border-inline:0; - border-block-width:1px; - border-block-style:solid; - border-block-start-color:var(--tab-top-line-inactive-color); - border-block-end-color:var(--tab-bottom-line-inactive-color); - border-radius:0; + border-inline: 0; + border-block-width: 1px; + border-block-style: solid; + border-block-start-color: var(--tab-top-line-inactive-color); + border-block-end-color: var(--tab-bottom-line-inactive-color); + border-radius: 0; - font:menu; - font-size:13px; - font-style:normal; - line-height:normal; - font-weight:400; - color:var(--tab-text-color); - } + font: menu; + font-size: 13px; + font-style: normal; + line-height: normal; + font-weight: 400; + color: var(--tab-text-color); +} -:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ - border-block-start-width:2px; - border-block-start-color:var(--tab-top-line-hover-color); - border-block-end-color:var(--tab-bottom-line-hover-color); - background-color:var(--tab-bg-hover); - color:var(--tab-text-hover-color); - } +:is( + :is(:is(#addSignatureDialog .mainContainer) [role='tablist']) > [role='tab'] +):hover { + border-block-start-width: 2px; + border-block-start-color: var(--tab-top-line-hover-color); + border-block-end-color: var(--tab-bottom-line-hover-color); + background-color: var(--tab-bg-hover); + color: var(--tab-text-hover-color); +} -:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible{ - outline:2px solid var(--tab-top-line-active-color); - outline-offset:-2px; - } +:is( + :is(:is(#addSignatureDialog .mainContainer) [role='tablist']) > [role='tab'] +):focus-visible { + outline: 2px solid var(--tab-top-line-active-color); + outline-offset: -2px; +} -[aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]){ - border-block-start-width:2px; - border-block-start-color:var(--tab-top-line-active-color); - border-block-end-color:var(--tab-bottom-line-active-color); - background-color:var(--tab-bg-active-color); - font-weight:590; - color:var(--tab-text-active-color); - } +[aria-selected='true']:is( + :is(:is(#addSignatureDialog .mainContainer) [role='tablist']) > [role='tab'] +) { + border-block-start-width: 2px; + border-block-start-color: var(--tab-top-line-active-color); + border-block-end-color: var(--tab-bottom-line-active-color); + background-color: var(--tab-bg-active-color); + font-weight: 590; + color: var(--tab-text-active-color); +} -[aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ - border-block-start-color:var(--tab-top-line-active-hover-color); - background-color:var(--tab-bg-active-hover-color); - color:var(--tab-text-active-hover-color); - } +[aria-selected='true']:is( + :is(:is(#addSignatureDialog .mainContainer) [role='tablist']) > [role='tab'] + ):hover { + border-block-start-color: var(--tab-top-line-active-hover-color); + background-color: var(--tab-bg-active-hover-color); + color: var(--tab-text-active-hover-color); +} -:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer{ - width:100%; - height:auto; - display:flex; - flex-direction:column; - align-items:flex-end; - align-self:stretch; - gap:12px; - padding-inline:16px; - box-sizing:border-box; - } +:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + align-self: stretch; + gap: 12px; + padding-inline: 16px; + box-sizing: border-box; +} -:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]{ - position:relative; - width:100%; - height:220px; - background-color:var(--signature-bg); - border:var(--tab-panel-border); - border-radius:var(--tab-panel-border-radius); - } +:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] { + position: relative; + width: 100%; + height: 220px; + background-color: var(--signature-bg); + border: var(--tab-panel-border); + border-radius: var(--tab-panel-border-radius); +} -:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ - position:absolute; - inset:0; - width:100%; - height:100%; - background-color:transparent; - } +:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + > svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background-color: transparent; +} -#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ - display:none; - } +#addSignatureTypeContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] +) { + display: none; +} /* Custom handwriting fonts for signature type input */ @font-face { - font-family: "Kalam"; - src: url("./standard_fonts/Kalam.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Sacramento"; - src: url("./standard_fonts/Sacramento.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Alex"; - src: url("./standard_fonts/AlexBrush.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "Allura"; - src: url("./standard_fonts/Allura.ttf") format("truetype"); + font-family: 'Kalam'; + src: url('./standard_fonts/Kalam.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { - font-family: "Handlee"; - src: url("./standard_fonts/Handlee.ttf") format("truetype"); + font-family: 'Sacramento'; + src: url('./standard_fonts/Sacramento.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Alex'; + src: url('./standard_fonts/AlexBrush.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Allura'; + src: url('./standard_fonts/Allura.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Handlee'; + src: url('./standard_fonts/Handlee.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; @@ -2445,5071 +2665,7620 @@ /* Custom end */ -#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput{ - position:absolute; - inset:0; - width:100%; - height:100%; - border:0; - padding:0; - text-align:center; - color:var(--signature-color); - background-color:transparent; - border-radius:var(--tab-panel-border-radius); +#addSignatureTypeContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #addSignatureTypeInput { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; + padding: 0; + text-align: center; + color: var(--signature-color); + background-color: transparent; + border-radius: var(--tab-panel-border-radius); - font-family:"Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif; - font-size:44px; - font-style:italic; - font-weight:400; - } - -#signatureTypeControls{ - position:absolute; - inset-inline:8px; - inset-block-start:8px; - display:flex; - align-items:center; - gap:8px; - padding:4px 8px; - background-color:rgba(0,0,0,0.4); - border-radius:4px; - z-index:1; -} -#signatureTypeControls label{ - font-size:11px; - color:var(--secondary-text-color); -} -#signatureFontSelect{ - font-size:11px; -} -#signatureColorPicker{ - width:20px; - height:20px; - padding:0; - border:none; - background:transparent; + font-family: + 'Brush script', 'Apple Chancery', 'Segoe script', 'Freestyle Script', + 'Palace Script MT', 'Brush Script MT', TK, cursive, serif; + font-size: 44px; + font-style: italic; + font-weight: 400; } -:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder{ - color:var(--signature-placeholder-color); - text-align:center; - - font:menu; - font-style:normal; - font-weight:274; - font-size:44px; - line-height:normal; - } - -:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder{ - color:var(--signature-placeholder-color); - text-align:center; - - font:menu; - font-style:normal; - font-weight:274; - font-size:44px; - line-height:normal; - } - -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ - display:none; - } - -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span{ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - display:grid; - align-items:center; - justify-content:center; - - background-color:transparent; - color:var(--signature-placeholder-color); - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ - stroke:var(--signature-color); - fill:none; - stroke-opacity:1; - stroke-linecap:round; - stroke-linejoin:round; - stroke-miterlimit:10; - } - -:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover{ - cursor:var(--draw-cursor); - } - -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness{ - position:absolute; - width:100%; - inset-block-end:0; - display:grid; - align-items:center; - justify-content:center; - pointer-events:none; - } - -:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span{ - color:var(--signature-draw-placeholder-color); - } - -:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div{ - width:auto; - height:auto; - display:flex; - align-items:center; - justify-content:center; - gap:8px; - padding:6px 8px 7px; - margin:0; - background-color:var(--thickness-bg); - border-radius:4px 4px 0 0; - border-inline:var(--thickness-border); - border-top:var(--thickness-border); - pointer-events:auto; - position:relative; - top:1px; - } - -:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label{ - color:var(--thickness-label-color); - } - -:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ - width:100px; - height:14px; - background-color:transparent; - } - -:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress{ - background-color:var(--thickness-slider-color); - } - -:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb{ - background-color:var(--thickness-bg); - } - -:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ - - border-radius:4.5px; - border:0; - color:var(--signature-color); - } - -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ - display:none; - } - -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ - stroke:none; - stroke-width:0; - fill:var(--signature-color); - fill-opacity:1; - } - -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder{ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - background-color:transparent; - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - } - -:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span{ - color:var(--signature-placeholder-color); - } - -:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a{ - color:var(--open-link-fg); - text-decoration:underline; - cursor:pointer; - } - -:is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover{ - color:var(--open-link-hover-fg); - } - -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker{ - visibility:hidden; - position:relative; - width:0; - height:0; - } - -[data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer,[data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer,[data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer{ - display:block; - } - -:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls{ - display:flex; - flex-direction:column; - justify-content:center; - align-items:flex-start; - gap:12px; - align-self:stretch; - } - -:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer{ - display:flex; - align-items:flex-end; - gap:16px; - align-self:stretch; - } - -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:4px; - flex:1 0 0; - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label{ - opacity:0.4; - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label{ - width:auto; - } - -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton{ - display:flex; - height:32px; - padding:4px 8px; - align-items:center; - background-color:var(--clear-signature-button-bg); - border-width:var(--clear-signature-button-border-width); - border-style:var(--clear-signature-button-border-style); - border-color:var(--clear-signature-button-border-color); - border-radius:4px; - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span{ - display:flex; - height:24px; - align-items:center; - gap:4px; - flex-shrink:0; - - color:var(--clear-signature-button-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after{ - content:""; - display:inline-block; - width:16px; - height:16px; - -webkit-mask-image:var(--clear-signature-button-icon); - mask-image:var(--clear-signature-button-icon); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--clear-signature-button-color); - flex-shrink:0; - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover{ - background-color:var(--clear-signature-button-bg-hover); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span{ - color:var(--clear-signature-button-hover-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after{ - background-color:var(--clear-signature-button-hover-color); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active{ - background-color:var(--clear-signature-button-bg-active); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span{ - color:var(--clear-signature-button-active-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after{ - background-color:var(--clear-signature-button-active-color); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible{ - background-color:var(--clear-signature-button-bg-focus); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span{ - color:var(--clear-signature-button-focus-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after{ - background-color:var(--clear-signature-button-focus-color); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled{ - background-color:var(--clear-signature-button-bg-disabled); - border-color:var(--clear-signature-button-border-disabled-color); - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span{ - color:var(--clear-signature-button-disabled-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after{ - background-color:var( - --clear-signature-button-disabled-color - ); - } - -:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer{ - display:grid; - grid-template-columns:max-content auto; - gap:4px; - width:100%; - } - -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input{ - margin:0; - } - -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label{ - opacity:0.4; - } - -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label{ - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning{ - display:none; - } - -.fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning{ - display:block; - opacity:1; - color:var(--save-warning-color); - font-size:11px; - } - -#editSignatureDescriptionDialog .mainContainer{ - padding-inline:16px; - box-sizing:border-box; - } - -:is(#editSignatureDescriptionDialog .mainContainer) .title{ - margin-inline-start:0; - } - -:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView{ - width:auto; - display:flex; - justify-content:flex-end; - align-items:flex-start; - gap:12px; - align-self:stretch; - } - -:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:4px; - flex:1 1 auto; - } - -:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg{ - width:210px; - height:180px; - padding:8px; - background-color:var(--signature-bg); - } - -:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path{ - stroke:var(--button-signature-color); - stroke-width:1px; - stroke-linecap:round; - stroke-linejoin:round; - stroke-miterlimit:10; - vector-effect:non-scaling-stroke; - fill:none; - } - -.contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path){ - fill:var(--button-signature-color); - stroke-width:0.5px; - } - -#editorSignatureParamsToolbar{ - padding:8px; +#signatureTypeControls { + position: absolute; + inset-inline: 8px; + inset-block-start: 8px; + display: flex; + align-items: center; + gap: 8px; + padding: 4px 8px; + background-color: rgba(0, 0, 0, 0.4); + border-radius: 4px; + z-index: 1; +} +#signatureTypeControls label { + font-size: 11px; + color: var(--secondary-text-color); +} +#signatureFontSelect { + font-size: 11px; +} +#signatureColorPicker { + width: 20px; + height: 20px; + padding: 0; + border: none; + background: transparent; } -#editorSignatureParamsToolbar #addSignatureDoorHanger{ - gap:8px; - padding:2px; - } +:is( + #addSignatureTypeContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #addSignatureTypeInput +)::-moz-placeholder { + color: var(--signature-placeholder-color); + text-align: center; -:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer{ - height:32px; - display:flex; - justify-content:space-between; - align-items:center; - align-self:stretch; - gap:8px; - } - -:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button{ - border:var(--button-signature-border); - border-radius:4px; - background-color:var(--button-signature-bg); - color:var(--button-signature-color); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover{ - background-color:var(--button-signature-hover-bg); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active{ - border:var(--button-signature-active-border); - background-color:var(--button-signature-active-bg); - color:var(--button-signature-active-color); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active::before{ - background-color:var(--button-signature-active-color); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible{ - outline:var(--focus-ring-outline); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before{ - background-color:var(--button-signature-color); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before{ - -webkit-mask-image:var(--clear-signature-button-icon); - mask-image:var(--clear-signature-button-icon); - } - -:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton{ - width:calc(0.8 * var(--editor-toolbar-min-width)); - height:100%; - min-height:var(--menuitem-height); - aspect-ratio:unset; - display:flex; - align-items:center; - justify-content:flex-start; - outline:none; - border-radius:4px; - box-sizing:border-box; - font:message-box; - position:relative; - flex:1 1 auto; - padding:0; - gap:8px; - text-align:start; - white-space:normal; - cursor:default; - overflow:hidden; - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg{ - display:inline-block; - height:100%; - aspect-ratio:1; - background-color:var(--signature-bg); - flex:none; - padding:4px; - box-sizing:border-box; - border:none; - border-radius:4px; - } - -:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path{ - stroke:var(--button-signature-color); - stroke-width:1px; - stroke-linecap:round; - stroke-linejoin:round; - stroke-miterlimit:10; - vector-effect:non-scaling-stroke; - fill:none; - } - -.contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path){ - fill:var(--button-signature-color); - stroke-width:0.5px; - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover,:active) > svg{ - border-radius:4px 0 0 4px; - background-color:var(--signature-hover-bg); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):hover > span{ - color:var(--button-signature-hover-color); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active{ - background-color:var(--button-signature-active-bg); - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"],[disabled]){ - opacity:0.5; - pointer-events:none; - } - -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span{ - height:auto; - text-overflow:ellipsis; - white-space:nowrap; - flex:1 1 auto; - font:menu; - font-size:13px; - font-style:normal; - font-weight:400; - line-height:normal; - overflow:hidden; - } - -.editDescription.altText{ - --alt-text-add-image:url(images/editor-toolbar-edit.svg) !important; + font: menu; + font-style: normal; + font-weight: 274; + font-size: 44px; + line-height: normal; } -.editDescription.altText::before{ - width:16px !important; - height:16px !important; - } +:is( + #addSignatureTypeContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #addSignatureTypeInput +)::placeholder { + color: var(--signature-placeholder-color); + text-align: center; + + font: menu; + font-style: normal; + font-weight: 274; + font-size: 44px; + line-height: normal; +} + +#addSignatureDrawContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] +) { + display: none; +} + +#addSignatureDrawContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + > span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: grid; + align-items: center; + justify-content: center; + + background-color: transparent; + color: var(--signature-placeholder-color); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + touch-action: none; +} + +#addSignatureDrawContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + > svg { + stroke: var(--signature-color); + fill: none; + stroke-opacity: 1; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + touch-action: none; +} + +:is( + #addSignatureDrawContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + > svg +):hover { + cursor: var(--draw-cursor); +} + +#addSignatureDrawContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #thickness { + position: absolute; + width: 100%; + inset-block-end: 0; + display: grid; + align-items: center; + justify-content: center; + pointer-events: none; +} + +:is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > span { + color: var(--signature-draw-placeholder-color); +} + +:is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div { + width: auto; + height: auto; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 6px 8px 7px; + margin: 0; + background-color: var(--thickness-bg); + border-radius: 4px 4px 0 0; + border-inline: var(--thickness-border); + border-top: var(--thickness-border); + pointer-events: auto; + position: relative; + top: 1px; +} + +:is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > label { + color: var(--thickness-label-color); +} + +:is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input { + width: 100px; + height: 14px; + background-color: transparent; +} + +:is( + :is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input +)::-webkit-slider-runnable-track, +:is( + :is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input +)::-moz-range-track, +:is( + :is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input +)::-moz-range-progress { + background-color: var(--thickness-slider-color); +} + +:is( + :is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input +)::-webkit-slider-thumb, +:is( + :is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input +)::-moz-range-thumb { + background-color: var(--thickness-bg); +} + +:is( + :is( + #addSignatureDrawContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #thickness + ) + > div + ) + > input { + border-radius: 4.5px; + border: 0; + color: var(--signature-color); +} + +#addSignatureImageContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] +) { + display: none; +} + +#addSignatureImageContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + > svg { + stroke: none; + stroke-width: 0; + fill: var(--signature-color); + fill-opacity: 1; +} + +#addSignatureImageContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #addSignatureImagePlaceholder { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +:is( + #addSignatureImageContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #addSignatureImagePlaceholder + ) + span { + color: var(--signature-placeholder-color); +} + +:is( + #addSignatureImageContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #addSignatureImagePlaceholder + ) + a { + color: var(--open-link-fg); + text-decoration: underline; + cursor: pointer; +} + +:is( + :is( + #addSignatureImageContainer:is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + > [role='tabpanel'] + ) + #addSignatureImagePlaceholder + ) + a +):hover { + color: var(--open-link-hover-fg); +} + +#addSignatureImageContainer:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + > [role='tabpanel'] + ) + #addSignatureFilePicker { + visibility: hidden; + position: relative; + width: 0; + height: 0; +} + +[data-selected='type']:is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > #addSignatureTypeContainer, +[data-selected='draw']:is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > #addSignatureDrawContainer, +[data-selected='image']:is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + > #addSignatureImageContainer { + display: block; +} + +:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + #addSignatureControls { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 12px; + align-self: stretch; +} + +:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + #addSignatureControls + ) + #horizontalContainer { + display: flex; + align-items: flex-end; + gap: 16px; + align-self: stretch; +} + +:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #addSignatureDescriptionContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 0 0; +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #addSignatureDescriptionContainer + ):has(input:disabled) + > label { + opacity: 0.4; +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #addSignatureDescriptionContainer + ) + > label { + width: auto; +} + +:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton { + display: flex; + height: 32px; + padding: 4px 8px; + align-items: center; + background-color: var(--clear-signature-button-bg); + border-width: var(--clear-signature-button-border-width); + border-style: var(--clear-signature-button-border-style); + border-color: var(--clear-signature-button-border-color); + border-radius: 4px; +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ) + > span { + display: flex; + height: 24px; + align-items: center; + gap: 4px; + flex-shrink: 0; + + color: var(--clear-signature-button-color); +} + +:is( + :is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ) + > span +)::after { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--clear-signature-button-icon); + mask-image: var(--clear-signature-button-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--clear-signature-button-color); + flex-shrink: 0; +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton +):hover { + background-color: var(--clear-signature-button-bg-hover); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):hover + > span { + color: var(--clear-signature-button-hover-color); +} + +:is( + :is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):hover + > span +)::after { + background-color: var(--clear-signature-button-hover-color); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton +):active { + background-color: var(--clear-signature-button-bg-active); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):active + > span { + color: var(--clear-signature-button-active-color); +} + +:is( + :is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):active + > span +)::after { + background-color: var(--clear-signature-button-active-color); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton +):focus-visible { + background-color: var(--clear-signature-button-bg-focus); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):focus-visible + > span { + color: var(--clear-signature-button-focus-color); +} + +:is( + :is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):focus-visible + > span +)::after { + background-color: var(--clear-signature-button-focus-color); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton +):disabled { + background-color: var(--clear-signature-button-bg-disabled); + border-color: var(--clear-signature-button-border-disabled-color); +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):disabled + > span { + color: var(--clear-signature-button-disabled-color); +} + +:is( + :is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #horizontalContainer + ) + #clearSignatureButton + ):disabled + > span +)::after { + background-color: var(--clear-signature-button-disabled-color); +} + +:is( + :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) + #addSignatureControls + ) + #addSignatureSaveContainer { + display: grid; + grid-template-columns: max-content auto; + gap: 4px; + width: 100%; +} + +:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #addSignatureSaveContainer + ) + > input { + margin: 0; +} + +:is( + :is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) + #addSignatureActionContainer + ) + #addSignatureControls + ) + #addSignatureSaveContainer + ) + > input + ):disabled + + label { + opacity: 0.4; +} + +:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #addSignatureSaveContainer + ) + > label { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #addSignatureSaveContainer + ):not(.fullStorage) + #addSignatureSaveWarning { + display: none; +} + +.fullStorage:is( + :is( + :is( + :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer + ) + #addSignatureControls + ) + #addSignatureSaveContainer + ) + #addSignatureSaveWarning { + display: block; + opacity: 1; + color: var(--save-warning-color); + font-size: 11px; +} + +#editSignatureDescriptionDialog .mainContainer { + padding-inline: 16px; + box-sizing: border-box; +} + +:is(#editSignatureDescriptionDialog .mainContainer) .title { + margin-inline-start: 0; +} + +:is(#editSignatureDescriptionDialog .mainContainer) + #editSignatureDescriptionAndView { + width: auto; + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + align-self: stretch; +} + +:is( + :is(#editSignatureDescriptionDialog .mainContainer) + #editSignatureDescriptionAndView + ) + #editSignatureDescriptionContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 1 auto; +} + +:is( + :is(#editSignatureDescriptionDialog .mainContainer) + #editSignatureDescriptionAndView + ) + > svg { + width: 210px; + height: 180px; + padding: 8px; + background-color: var(--signature-bg); +} + +:is( + :is( + :is(#editSignatureDescriptionDialog .mainContainer) + #editSignatureDescriptionAndView + ) + > svg + ) + > path { + stroke: var(--button-signature-color); + stroke-width: 1px; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + vector-effect: non-scaling-stroke; + fill: none; +} + +.contours:is( + :is( + :is( + :is(#editSignatureDescriptionDialog .mainContainer) + #editSignatureDescriptionAndView + ) + > svg + ) + > path +) { + fill: var(--button-signature-color); + stroke-width: 0.5px; +} + +#editorSignatureParamsToolbar { + padding: 8px; +} + +#editorSignatureParamsToolbar #addSignatureDoorHanger { + gap: 8px; + padding: 2px; +} + +:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer { + height: 32px; + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + gap: 8px; +} + +:is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button { + border: var(--button-signature-border); + border-radius: 4px; + background-color: var(--button-signature-bg); + color: var(--button-signature-color); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button +):hover { + background-color: var(--button-signature-hover-bg); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button +):active { + border: var(--button-signature-active-border); + background-color: var(--button-signature-active-bg); + color: var(--button-signature-active-color); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button + ):active::before { + background-color: var(--button-signature-active-color); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button +):focus-visible { + outline: var(--focus-ring-outline); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + button + ):focus-visible::before { + background-color: var(--button-signature-color); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .deleteButton +)::before { + -webkit-mask-image: var(--clear-signature-button-icon); + mask-image: var(--clear-signature-button-icon); +} + +:is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton { + width: calc(0.8 * var(--editor-toolbar-min-width)); + height: 100%; + min-height: var(--menuitem-height); + aspect-ratio: unset; + display: flex; + align-items: center; + justify-content: flex-start; + outline: none; + border-radius: 4px; + box-sizing: border-box; + font: message-box; + position: relative; + flex: 1 1 auto; + padding: 0; + gap: 8px; + text-align: start; + white-space: normal; + cursor: default; + overflow: hidden; +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ) + > svg { + display: inline-block; + height: 100%; + aspect-ratio: 1; + background-color: var(--signature-bg); + flex: none; + padding: 4px; + box-sizing: border-box; + border: none; + border-radius: 4px; +} + +:is( + :is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ) + > svg + ) + > path { + stroke: var(--button-signature-color); + stroke-width: 1px; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + vector-effect: non-scaling-stroke; + fill: none; +} + +.contours:is( + :is( + :is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ) + > svg + ) + > path +) { + fill: var(--button-signature-color); + stroke-width: 0.5px; +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ):is(:hover, :active) + > svg { + border-radius: 4px 0 0 4px; + background-color: var(--signature-hover-bg); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ):hover + > span { + color: var(--button-signature-hover-color); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton +):active { + background-color: var(--button-signature-active-bg); +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton +):is([disabled='disabled'], [disabled]) { + opacity: 0.5; + pointer-events: none; +} + +:is( + :is( + :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) + .toolbarAddSignatureButtonContainer + ) + .toolbarAddSignatureButton + ) + > span { + height: auto; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1 1 auto; + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; + overflow: hidden; +} + +.editDescription.altText { + --alt-text-add-image: url(images/editor-toolbar-edit.svg) !important; +} + +.editDescription.altText::before { + width: 16px !important; + height: 16px !important; +} .commentPopup, -#commentManagerDialog{ - width:360px; - max-width:100%; - min-width:200px; - position:absolute; - padding:8px 16px 16px; - margin-left:0; - margin-top:0; - box-sizing:border-box; +#commentManagerDialog { + width: 360px; + max-width: 100%; + min-width: 200px; + position: absolute; + padding: 8px 16px 16px; + margin-left: 0; + margin-top: 0; + box-sizing: border-box; - border-radius:8px; + border-radius: 8px; } -#commentManagerDialog{ - --comment-close-button-icon:url(images/comment-closeButton.svg); +#commentManagerDialog { + --comment-close-button-icon: url(images/comment-closeButton.svg); } -#commentManagerDialog .mainContainer{ - width:100%; - height:auto; - display:flex; - flex-direction:column; - align-items:flex-start; - gap:4px; - } - -:is(#commentManagerDialog .mainContainer) #commentManagerToolbar{ - width:100%; - height:32px; - display:flex; - justify-content:flex-start; - align-items:flex-start; - gap:8px; - align-self:stretch; - - cursor:move; - } - -:is(#commentManagerDialog .mainContainer) #commentManagerTextInput{ - width:100%; - min-height:132px; - margin-bottom:12px; - } - -.annotationLayer.disabled :is(.annotationCommentButton){ - display:none; +#commentManagerDialog .mainContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; } -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --csstools-color-scheme--light:initial; - color-scheme:light dark; - --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #1c1b22; - --comment-button-bg:var(--csstools-light-dark-toggle--75, white); - --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #fbfbfe; - --comment-button-fg:var(--csstools-light-dark-toggle--76, #5b5b66); - --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #a6ecf4; - --comment-button-active-bg:var(--csstools-light-dark-toggle--77, #0041a4); - --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #15141a; - --comment-button-active-fg:var(--csstools-light-dark-toggle--78, white); - --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #61dce9; - --comment-button-hover-bg:var(--csstools-light-dark-toggle--79, #0053cb); - --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #15141a; - --comment-button-hover-fg:var(--csstools-light-dark-toggle--80, white); - --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) #00cadb; - --comment-button-selected-bg:var(--csstools-light-dark-toggle--81, #0062fa); - --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #bfbfc9; - --comment-button-border-color:var(--csstools-light-dark-toggle--82, #8f8f9d); - --comment-button-active-border-color:var(--comment-button-active-bg); - --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #3a3944; - --comment-button-focus-border-color:var(--csstools-light-dark-toggle--83, #cfcfd8); - --comment-button-hover-border-color:var(--comment-button-hover-bg); - --comment-button-selected-border-color:var(--comment-button-selected-bg); - --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #15141a; - --comment-button-selected-fg:var(--csstools-light-dark-toggle--84, white); - --comment-button-dim:24px; - --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--85, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--86, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #00cadb; - --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--87, #0062fa); - } +:is(#commentManagerDialog .mainContainer) #commentManagerToolbar { + width: 100%; + height: 32px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 8px; + align-self: stretch; -@supports (color: light-dark(red, red)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --comment-button-bg:light-dark(white, #1c1b22); - --comment-button-fg:light-dark(#5b5b66, #fbfbfe); - --comment-button-active-bg:light-dark(#0041a4, #a6ecf4); - --comment-button-active-fg:light-dark(white, #15141a); - --comment-button-hover-bg:light-dark(#0053cb, #61dce9); - --comment-button-hover-fg:light-dark(white, #15141a); - --comment-button-selected-bg:light-dark(#0062fa, #00cadb); - --comment-button-border-color:light-dark(#8f8f9d, #bfbfc9); - --comment-button-focus-border-color:light-dark(#cfcfd8, #3a3944); - --comment-button-selected-fg:light-dark(white, #15141a); + cursor: move; +} + +:is(#commentManagerDialog .mainContainer) #commentManagerTextInput { + width: 100%; + min-height: 132px; + margin-bottom: 12px; +} + +.annotationLayer.disabled :is(.annotationCommentButton) { + display: none; +} + +:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + --csstools-color-scheme--light: initial; + color-scheme: light dark; + --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #1c1b22; + --comment-button-bg: var(--csstools-light-dark-toggle--75, white); + --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #fbfbfe; + --comment-button-fg: var(--csstools-light-dark-toggle--76, #5b5b66); + --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #a6ecf4; + --comment-button-active-bg: var(--csstools-light-dark-toggle--77, #0041a4); + --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #15141a; + --comment-button-active-fg: var(--csstools-light-dark-toggle--78, white); + --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #61dce9; + --comment-button-hover-bg: var(--csstools-light-dark-toggle--79, #0053cb); + --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #15141a; + --comment-button-hover-fg: var(--csstools-light-dark-toggle--80, white); + --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #00cadb; + --comment-button-selected-bg: var(--csstools-light-dark-toggle--81, #0062fa); + --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #bfbfc9; + --comment-button-border-color: var(--csstools-light-dark-toggle--82, #8f8f9d); + --comment-button-active-border-color: var(--comment-button-active-bg); + --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #3a3944; + --comment-button-focus-border-color: var( + --csstools-light-dark-toggle--83, + #cfcfd8 + ); + --comment-button-hover-border-color: var(--comment-button-hover-bg); + --comment-button-selected-border-color: var(--comment-button-selected-bg); + --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #15141a; + --comment-button-selected-fg: var(--csstools-light-dark-toggle--84, white); + --comment-button-dim: 24px; + --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --comment-button-box-shadow: + 0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--85, rgb(0 0 0 / 0.05)), + 0 2px 6px 0 var(--csstools-light-dark-toggle--86, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #00cadb; + --comment-button-focus-outline-color: var( + --csstools-light-dark-toggle--87, + #0062fa + ); +} + +@supports (color: light-dark(red, red)) { + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + --comment-button-bg: light-dark(white, #1c1b22); + --comment-button-fg: light-dark(#5b5b66, #fbfbfe); + --comment-button-active-bg: light-dark(#0041a4, #a6ecf4); + --comment-button-active-fg: light-dark(white, #15141a); + --comment-button-hover-bg: light-dark(#0053cb, #61dce9); + --comment-button-hover-fg: light-dark(white, #15141a); + --comment-button-selected-bg: light-dark(#0062fa, #00cadb); + --comment-button-border-color: light-dark(#8f8f9d, #bfbfc9); + --comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944); + --comment-button-selected-fg: light-dark(white, #15141a); } } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --comment-button-box-shadow:0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + --comment-button-box-shadow: + 0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), + 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); } } -@supports (color: light-dark(red, red)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --comment-button-focus-outline-color:light-dark(#0062fa, #00cadb); +@supports (color: light-dark(red, red)) { + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + --comment-button-focus-outline-color: light-dark(#0062fa, #00cadb); } } -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) *{ - --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #1c1b22; - --comment-button-bg:var(--csstools-light-dark-toggle--75, white); - --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #fbfbfe; - --comment-button-fg:var(--csstools-light-dark-toggle--76, #5b5b66); - --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #a6ecf4; - --comment-button-active-bg:var(--csstools-light-dark-toggle--77, #0041a4); - --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #15141a; - --comment-button-active-fg:var(--csstools-light-dark-toggle--78, white); - --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #61dce9; - --comment-button-hover-bg:var(--csstools-light-dark-toggle--79, #0053cb); - --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #15141a; - --comment-button-hover-fg:var(--csstools-light-dark-toggle--80, white); - --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) #00cadb; - --comment-button-selected-bg:var(--csstools-light-dark-toggle--81, #0062fa); - --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #bfbfc9; - --comment-button-border-color:var(--csstools-light-dark-toggle--82, #8f8f9d); - --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #3a3944; - --comment-button-focus-border-color:var(--csstools-light-dark-toggle--83, #cfcfd8); - --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #15141a; - --comment-button-selected-fg:var(--csstools-light-dark-toggle--84, white); - --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--85, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--86, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #00cadb; - --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--87, #0062fa); +@supports not (color: light-dark(tan, tan)) { + :is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton) + * { + --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) + #1c1b22; + --comment-button-bg: var(--csstools-light-dark-toggle--75, white); + --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) + #fbfbfe; + --comment-button-fg: var(--csstools-light-dark-toggle--76, #5b5b66); + --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) + #a6ecf4; + --comment-button-active-bg: var(--csstools-light-dark-toggle--77, #0041a4); + --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) + #15141a; + --comment-button-active-fg: var(--csstools-light-dark-toggle--78, white); + --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) + #61dce9; + --comment-button-hover-bg: var(--csstools-light-dark-toggle--79, #0053cb); + --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) + #15141a; + --comment-button-hover-fg: var(--csstools-light-dark-toggle--80, white); + --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) + #00cadb; + --comment-button-selected-bg: var( + --csstools-light-dark-toggle--81, + #0062fa + ); + --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) + #bfbfc9; + --comment-button-border-color: var( + --csstools-light-dark-toggle--82, + #8f8f9d + ); + --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) + #3a3944; + --comment-button-focus-border-color: var( + --csstools-light-dark-toggle--83, + #cfcfd8 + ); + --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) + #15141a; + --comment-button-selected-fg: var(--csstools-light-dark-toggle--84, white); + --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --comment-button-box-shadow: + 0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--85, rgb(0 0 0 / 0.05)), + 0 2px 6px 0 var(--csstools-light-dark-toggle--86, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) + #00cadb; + --comment-button-focus-outline-color: var( + --csstools-light-dark-toggle--87, + #0062fa + ); } } -@media (prefers-color-scheme: dark){ - -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ +@media (prefers-color-scheme: dark) { + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { --csstools-color-scheme--light: light; } } -@media screen and (forced-colors: active){ - -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --comment-button-bg:ButtonFace; - --comment-button-fg:ButtonText; - --comment-button-hover-bg:SelectedItemText; - --comment-button-hover-fg:SelectedItem; - --comment-button-active-bg:SelectedItemText; - --comment-button-active-fg:SelectedItem; - --comment-button-border-color:ButtonBorder; - --comment-button-active-border-color:ButtonBorder; - --comment-button-hover-border-color:SelectedItem; - --comment-button-box-shadow:none; - --comment-button-focus-outline-color:CanvasText; - --comment-button-selected-bg:ButtonBorder; - --comment-button-selected-fg:ButtonFace; +@media screen and (forced-colors: active) { + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + --comment-button-bg: ButtonFace; + --comment-button-fg: ButtonText; + --comment-button-hover-bg: SelectedItemText; + --comment-button-hover-fg: SelectedItem; + --comment-button-active-bg: SelectedItemText; + --comment-button-active-fg: SelectedItem; + --comment-button-border-color: ButtonBorder; + --comment-button-active-border-color: ButtonBorder; + --comment-button-hover-border-color: SelectedItem; + --comment-button-box-shadow: none; + --comment-button-focus-outline-color: CanvasText; + --comment-button-selected-bg: ButtonBorder; + --comment-button-selected-fg: ButtonFace; } - } +} -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ +:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton { + position: absolute; + width: var(--comment-button-dim); + height: var(--comment-button-dim); + background-color: var(--comment-button-bg); + border-radius: 6px 6px 6px 0; + border: 1px solid var(--comment-button-border-color); + box-shadow: var(--comment-button-box-shadow); + cursor: auto; + z-index: 1; + padding: 4px; + margin: 0; + box-sizing: border-box; + pointer-events: auto; +} - position:absolute; - width:var(--comment-button-dim); - height:var(--comment-button-dim); - background-color:var(--comment-button-bg); - border-radius:6px 6px 6px 0; - border:1px solid var(--comment-button-border-color); - box-shadow:var(--comment-button-box-shadow); - cursor:auto; - z-index:1; - padding:4px; - margin:0; - box-sizing:border-box; - pointer-events:auto; - } +[dir='rtl'] + :is(:is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton) { + border-radius: 6px 6px 0; +} -[dir="rtl"] :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ - border-radius:6px 6px 0; - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton +)::before { + content: ''; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + background-color: var(--comment-button-fg); + margin: 0; + padding: 0; + transform: scaleX(var(--dir-factor)); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ - content:""; - display:inline-block; - width:100%; - height:100%; - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-size:cover; - mask-size:cover; - -webkit-mask-image:var(--comment-edit-button-icon); - mask-image:var(--comment-edit-button-icon); - background-color:var(--comment-button-fg); - margin:0; - padding:0; - transform:scaleX(var(--dir-factor)); - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton +):focus-visible { + outline: 2px solid var(--comment-button-focus-outline-color); + outline-offset: 1px; + border-color: var(--comment-button-focus-border-color); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):focus-visible{ - outline:2px solid var(--comment-button-focus-outline-color); - outline-offset:1px; - border-color:var(--comment-button-focus-border-color); - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton +):hover { + background-color: var(--comment-button-hover-bg) !important; + border-color: var(--comment-button-hover-border-color); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover{ - background-color:var(--comment-button-hover-bg) !important; - border-color:var(--comment-button-hover-border-color); - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton + ):hover::before { + background-color: var(--comment-button-hover-fg); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover::before{ - background-color:var(--comment-button-hover-fg); - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton +):active { + background-color: var(--comment-button-active-bg) !important; + border-color: var(--comment-button-active-border-color); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active{ - background-color:var(--comment-button-active-bg) !important; - border-color:var(--comment-button-active-border-color); - } +:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton + ):active::before { + background-color: var(--comment-button-active-fg); +} -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active::before{ - background-color:var(--comment-button-active-fg); - } +.selected:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton +) { + background-color: var(--comment-button-selected-bg) !important; + border-color: var(--comment-button-selected-border-color); +} -.selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ - background-color:var(--comment-button-selected-bg) !important; - border-color:var(--comment-button-selected-border-color); - } - -.selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ - background-color:var(--comment-button-selected-fg); - } +.selected:is( + :is(.annotationLayer, .annotationEditorLayer) .annotationCommentButton + )::before { + background-color: var(--comment-button-selected-fg); +} #editorCommentsSidebar, -.commentPopup{ - --comment-close-button-icon:url(images/comment-closeButton.svg); - --comment-popup-edit-button-icon:url(images/comment-popup-editButton.svg); - --comment-popup-delete-button-icon:url(images/editor-toolbar-delete.svg); +.commentPopup { + --comment-close-button-icon: url(images/comment-closeButton.svg); + --comment-popup-edit-button-icon: url(images/comment-popup-editButton.svg); + --comment-popup-delete-button-icon: url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); + --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.69); - --comment-date-fg-color:var(--csstools-light-dark-toggle--88, rgb(21 20 26 / 0.69)); - --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #1c1b22; - --comment-bg-color:var(--csstools-light-dark-toggle--89, #f9f9fb); - --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #2c2b33; - --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, #e0e0e6); - --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #3a3944; - --comment-active-bg-color:var(--csstools-light-dark-toggle--91, #d1d1d9); - --comment-hover-brightness:0.89; - --comment-hover-filter:brightness(var(--comment-hover-brightness)); - --comment-active-brightness:0.825; - --comment-active-filter:brightness(var(--comment-active-brightness)); - --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #52525e; - --comment-border-color:var(--csstools-light-dark-toggle--92, #f0f0f4); - --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #00cadb; - --comment-focus-outline-color:var(--csstools-light-dark-toggle--93, #0062fa); - --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) #fbfbfe; - --comment-fg-color:var(--csstools-light-dark-toggle--94, #15141a); - --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) #00317e; - --comment-count-bg-color:var(--csstools-light-dark-toggle--95, #e2f7ff); - --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #a6ecf4; - --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--96, #0041a4); - --comment-indicator-active-filter:brightness( + --comment-date-fg-color: var( + --csstools-light-dark-toggle--88, + rgb(21 20 26 / 0.69) + ); + --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #1c1b22; + --comment-bg-color: var(--csstools-light-dark-toggle--89, #f9f9fb); + --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #2c2b33; + --comment-hover-bg-color: var(--csstools-light-dark-toggle--90, #e0e0e6); + --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #3a3944; + --comment-active-bg-color: var(--csstools-light-dark-toggle--91, #d1d1d9); + --comment-hover-brightness: 0.89; + --comment-hover-filter: brightness(var(--comment-hover-brightness)); + --comment-active-brightness: 0.825; + --comment-active-filter: brightness(var(--comment-active-brightness)); + --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #52525e; + --comment-border-color: var(--csstools-light-dark-toggle--92, #f0f0f4); + --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #00cadb; + --comment-focus-outline-color: var(--csstools-light-dark-toggle--93, #0062fa); + --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #fbfbfe; + --comment-fg-color: var(--csstools-light-dark-toggle--94, #15141a); + --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) #00317e; + --comment-count-bg-color: var(--csstools-light-dark-toggle--95, #e2f7ff); + --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) #a6ecf4; + --comment-indicator-active-fg-color: var( + --csstools-light-dark-toggle--96, + #0041a4 + ); + --comment-indicator-active-filter: brightness( calc(1 / var(--comment-active-brightness)) ); - --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #fbfbfe; - --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--97, #5b5b66); - --csstools-light-dark-toggle--98:var(--csstools-color-scheme--light) #61dce9; - --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--98, #0053cb); - --comment-indicator-hover-filter:brightness( + --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) #fbfbfe; + --comment-indicator-focus-fg-color: var( + --csstools-light-dark-toggle--97, + #5b5b66 + ); + --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #61dce9; + --comment-indicator-hover-fg-color: var( + --csstools-light-dark-toggle--98, + #0053cb + ); + --comment-indicator-hover-filter: brightness( calc(1 / var(--comment-hover-brightness)) ); - --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) #00cadb; - --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--99, #0062fa); - - --button-comment-bg:transparent; - --button-comment-color:var(--main-color); - --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #5b5b66; - --button-comment-active-bg:var(--csstools-light-dark-toggle--100, #cfcfd8); - --button-comment-active-border:none; - --button-comment-active-color:var(--button-comment-color); - --button-comment-border:none; - --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #52525e; - --button-comment-hover-bg:var(--csstools-light-dark-toggle--101, #e0e0e6); - --button-comment-hover-color:var(--button-comment-color); -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#editorCommentsSidebar, -.commentPopup{ - - --comment-date-fg-color:light-dark( - rgb(21 20 26 / 0.69), - rgb(251 251 254 / 0.69) + --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) #00cadb; + --comment-indicator-selected-fg-color: var( + --csstools-light-dark-toggle--99, + #0062fa ); -} + + --button-comment-bg: transparent; + --button-comment-color: var(--main-color); + --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) #5b5b66; + --button-comment-active-bg: var(--csstools-light-dark-toggle--100, #cfcfd8); + --button-comment-active-border: none; + --button-comment-active-color: var(--button-comment-color); + --button-comment-border: none; + --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #52525e; + --button-comment-hover-bg: var(--csstools-light-dark-toggle--101, #e0e0e6); + --button-comment-hover-color: var(--button-comment-color); } -@supports (color: light-dark(red, red)){ -#editorCommentsSidebar, -.commentPopup{ - --comment-bg-color:light-dark(#f9f9fb, #1c1b22); - --comment-hover-bg-color:light-dark(#e0e0e6, #2c2b33); - --comment-active-bg-color:light-dark(#d1d1d9, #3a3944); - --comment-border-color:light-dark(#f0f0f4, #52525e); - --comment-focus-outline-color:light-dark(#0062fa, #00cadb); - --comment-fg-color:light-dark(#15141a, #fbfbfe); - --comment-count-bg-color:light-dark(#e2f7ff, #00317e); - --comment-indicator-active-fg-color:light-dark(#0041a4, #a6ecf4); - --comment-indicator-focus-fg-color:light-dark(#5b5b66, #fbfbfe); - --comment-indicator-hover-fg-color:light-dark(#0053cb, #61dce9); - --comment-indicator-selected-fg-color:light-dark(#0062fa, #00cadb); - --button-comment-active-bg:light-dark(#cfcfd8, #5b5b66); - --button-comment-hover-bg:light-dark(#e0e0e6, #52525e); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:is(#editorCommentsSidebar,.commentPopup) *{ - - --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); - - --comment-date-fg-color:var(--csstools-light-dark-toggle--88, rgb(21 20 26 / 0.69)); - --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #1c1b22; - --comment-bg-color:var(--csstools-light-dark-toggle--89, #f9f9fb); - --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #2c2b33; - --comment-hover-bg-color:var(--csstools-light-dark-toggle--90, #e0e0e6); - --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #3a3944; - --comment-active-bg-color:var(--csstools-light-dark-toggle--91, #d1d1d9); - --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #52525e; - --comment-border-color:var(--csstools-light-dark-toggle--92, #f0f0f4); - --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #00cadb; - --comment-focus-outline-color:var(--csstools-light-dark-toggle--93, #0062fa); - --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) #fbfbfe; - --comment-fg-color:var(--csstools-light-dark-toggle--94, #15141a); - --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) #00317e; - --comment-count-bg-color:var(--csstools-light-dark-toggle--95, #e2f7ff); - --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #a6ecf4; - --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--96, #0041a4); - --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #fbfbfe; - --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--97, #5b5b66); - --csstools-light-dark-toggle--98:var(--csstools-color-scheme--light) #61dce9; - --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--98, #0053cb); - --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) #00cadb; - --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--99, #0062fa); - --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #5b5b66; - --button-comment-active-bg:var(--csstools-light-dark-toggle--100, #cfcfd8); - --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #52525e; - --button-comment-hover-bg:var(--csstools-light-dark-toggle--101, #e0e0e6); +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + #editorCommentsSidebar, + .commentPopup { + --comment-date-fg-color: light-dark( + rgb(21 20 26 / 0.69), + rgb(251 251 254 / 0.69) + ); } } -@media screen and (forced-colors: active){ - -#editorCommentsSidebar, -.commentPopup{ - --comment-date-fg-color:CanvasText; - --comment-bg-color:Canvas; - --comment-hover-bg-color:Canvas; - --comment-hover-filter:none; - --comment-active-bg-color:Canvas; - --comment-active-filter:none; - --comment-border-color:CanvasText; - --comment-fg-color:CanvasText; - --comment-count-bg-color:Canvas; - --comment-indicator-active-fg-color:SelectedItem; - --comment-indicator-focus-fg-color:CanvasText; - --comment-indicator-hover-fg-color:CanvasText; - --comment-indicator-selected-fg-color:SelectedItem; - --button-comment-bg:ButtonFace; - --button-comment-color:ButtonText; - --button-comment-active-bg:ButtonText; - --button-comment-active-color:HighlightText; - --button-comment-border:1px solid ButtonText; - --button-comment-hover-bg:Highlight; - --button-comment-hover-color:HighlightText; -} - } - -#editorCommentsSidebar{ - display:flex; - height:auto; - padding-bottom:16px; - flex-direction:column; - align-items:flex-start; -} - -#editorCommentsSidebar #editorCommentsSidebarHeader{ - width:100%; - box-sizing:border-box; - padding:16px; - display:flex; - align-items:center; - justify-content:space-between; - } - -:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount{ - display:flex; - align-items:baseline; - gap:6px; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarTitle{ - font:menu; - font-style:normal; - font-weight:590; - line-height:normal; - font-size:17px; - color:var(--comment-fg-color); - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarCount{ - padding:0 4px; - border-radius:4px; - background-color:var(--comment-count-bg-color); - - color:var(--comment-fg-color); - text-align:center; - - font:menu; - font-size:13px; - font-style:normal; - font-weight:400; - line-height:normal; - } - -:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton{ - width:32px; - height:32px; - padding:8px; - border-radius:4px; - border:none; - background:none; - cursor:pointer; - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton)::before{ - content:""; - display:inline-block; - width:100%; - height:100%; - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - -webkit-mask-image:var(--comment-close-button-icon); - mask-image:var(--comment-close-button-icon); - background-color:var(--comment-fg-color); - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover{ - background-color:var(--comment-hover-bg-color); - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active{ - background-color:var(--comment-active-bg-color); - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible{ - outline:var(--focus-ring-outline); - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton) > span{ - display:inline-block; - width:0; - height:0; - overflow:hidden; - } - -#editorCommentsSidebar #editorCommentsSidebarListContainer{ - overflow:auto; - width:100%; - } - -:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList{ - display:flex; - width:auto; - padding:4px 16px; - gap:10px; - align-items:flex-start; - flex-direction:column; - list-style-type:none; - } - -:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment{ - display:flex; - width:auto; - padding:8px 16px 16px; - flex-direction:column; - align-items:flex-start; - align-self:stretch; - gap:4px; - - border-radius:8px; - border:0.5px solid var(--comment-border-color); - background-color:var(--comment-bg-color); - } - -@media screen and (forced-colors: active){ - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ - background-color:var(--comment-hover-bg-color); - } - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ - filter:var(--comment-hover-filter); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after{ - display:inline-block; - background-color:var(--comment-indicator-hover-fg-color); - filter:var(--comment-indicator-hover-filter); - } - -@media screen and (forced-colors: active){ - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ - background-color:var(--comment-active-bg-color); - } - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ - filter:var(--comment-active-filter); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after{ - display:inline-block; - background-color:var(--comment-indicator-active-fg-color); - filter:var(--comment-indicator-active-filter); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after{ - display:inline-block; - background-color:var(--comment-indicator-focus-fg-color); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible{ - outline:2px solid var(--comment-focus-outline-color); - outline-offset:2px; - } - -.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText{ - max-height:-moz-fit-content; - max-height:fit-content; - -webkit-line-clamp:unset; - } - -.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after{ - display:inline-block; - background-color:var(--comment-indicator-selected-fg-color); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ - font:menu; - font-style:normal; - font-weight:400; - line-height:normal; - font-size:15px; - width:100%; - height:-moz-fit-content; - height:fit-content; - max-height:80px; - display:-webkit-box; - -webkit-box-orient:vertical; - -webkit-line-clamp:2; - overflow:hidden; - overflow-wrap:break-word; - } - -:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText{ - --total-scale-factor:1.5; - } - -.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ - max-height:-moz-fit-content; - max-height:fit-content; - -webkit-line-clamp:unset; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a{ - font:menu; - font-style:normal; - font-weight:400; - line-height:normal; - font-size:15px; - width:100%; - height:auto; - overflow-wrap:break-word; - margin-block-start:15px; - } - -:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible{ - outline:var(--focus-ring-outline); - } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time{ - width:100%; - display:inline-flex; - align-items:center; - justify-content:space-between; - - font:menu; - font-style:normal; - font-weight:400; - line-height:normal; - font-size:13px; - } - -:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time)::after{ - content:""; - display:none; - width:16px; - height:16px; - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - -webkit-mask-image:var(--comment-edit-button-icon); - mask-image:var(--comment-edit-button-icon); - transform:scaleX(var(--dir-factor)); - } - -.commentPopup{ - --csstools-color-scheme--light:initial; - color-scheme:light dark; - - --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #3a3944; - - --divider-color:var(--csstools-light-dark-toggle--102, #cfcfd8); - --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1)); -} - -@supports (color: light-dark(red, red)){ -.commentPopup{ - - --divider-color:light-dark(#cfcfd8, #3a3944); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.commentPopup{ - --comment-shadow:0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.commentPopup *{ - - --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #3a3944; - - --divider-color:var(--csstools-light-dark-toggle--102, #cfcfd8); - --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1)); +@supports (color: light-dark(red, red)) { + #editorCommentsSidebar, + .commentPopup { + --comment-bg-color: light-dark(#f9f9fb, #1c1b22); + --comment-hover-bg-color: light-dark(#e0e0e6, #2c2b33); + --comment-active-bg-color: light-dark(#d1d1d9, #3a3944); + --comment-border-color: light-dark(#f0f0f4, #52525e); + --comment-focus-outline-color: light-dark(#0062fa, #00cadb); + --comment-fg-color: light-dark(#15141a, #fbfbfe); + --comment-count-bg-color: light-dark(#e2f7ff, #00317e); + --comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4); + --comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe); + --comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9); + --comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb); + --button-comment-active-bg: light-dark(#cfcfd8, #5b5b66); + --button-comment-hover-bg: light-dark(#e0e0e6, #52525e); } } -@media (prefers-color-scheme: dark){ +@supports not (color: light-dark(tan, tan)) { + :is(#editorCommentsSidebar, .commentPopup) * { + --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.69); -.commentPopup{ - --csstools-color-scheme--light: light; -} + --comment-date-fg-color: var( + --csstools-light-dark-toggle--88, + rgb(21 20 26 / 0.69) + ); + --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) + #1c1b22; + --comment-bg-color: var(--csstools-light-dark-toggle--89, #f9f9fb); + --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) + #2c2b33; + --comment-hover-bg-color: var(--csstools-light-dark-toggle--90, #e0e0e6); + --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) + #3a3944; + --comment-active-bg-color: var(--csstools-light-dark-toggle--91, #d1d1d9); + --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) + #52525e; + --comment-border-color: var(--csstools-light-dark-toggle--92, #f0f0f4); + --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) + #00cadb; + --comment-focus-outline-color: var( + --csstools-light-dark-toggle--93, + #0062fa + ); + --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) + #fbfbfe; + --comment-fg-color: var(--csstools-light-dark-toggle--94, #15141a); + --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) + #00317e; + --comment-count-bg-color: var(--csstools-light-dark-toggle--95, #e2f7ff); + --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) + #a6ecf4; + --comment-indicator-active-fg-color: var( + --csstools-light-dark-toggle--96, + #0041a4 + ); + --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) + #fbfbfe; + --comment-indicator-focus-fg-color: var( + --csstools-light-dark-toggle--97, + #5b5b66 + ); + --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) + #61dce9; + --comment-indicator-hover-fg-color: var( + --csstools-light-dark-toggle--98, + #0053cb + ); + --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) + #00cadb; + --comment-indicator-selected-fg-color: var( + --csstools-light-dark-toggle--99, + #0062fa + ); + --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) + #5b5b66; + --button-comment-active-bg: var(--csstools-light-dark-toggle--100, #cfcfd8); + --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) + #52525e; + --button-comment-hover-bg: var(--csstools-light-dark-toggle--101, #e0e0e6); + } } -@media screen and (forced-colors: active){ - -.commentPopup{ - --divider-color:CanvasText; - --comment-shadow:none; -} +@media screen and (forced-colors: active) { + #editorCommentsSidebar, + .commentPopup { + --comment-date-fg-color: CanvasText; + --comment-bg-color: Canvas; + --comment-hover-bg-color: Canvas; + --comment-hover-filter: none; + --comment-active-bg-color: Canvas; + --comment-active-filter: none; + --comment-border-color: CanvasText; + --comment-fg-color: CanvasText; + --comment-count-bg-color: Canvas; + --comment-indicator-active-fg-color: SelectedItem; + --comment-indicator-focus-fg-color: CanvasText; + --comment-indicator-hover-fg-color: CanvasText; + --comment-indicator-selected-fg-color: SelectedItem; + --button-comment-bg: ButtonFace; + --button-comment-color: ButtonText; + --button-comment-active-bg: ButtonText; + --button-comment-active-color: HighlightText; + --button-comment-border: 1px solid ButtonText; + --button-comment-hover-bg: Highlight; + --button-comment-hover-color: HighlightText; } - -.commentPopup{ - - display:flex; - flex-direction:column; - align-items:flex-start; - gap:12px; - z-index:100001; - pointer-events:auto; - margin-top:2px; - - border:0.5px solid var(--comment-border-color); - background:var(--comment-bg-color); - box-shadow:var(--comment-shadow); } -.commentPopup:focus-visible{ - outline:none; +#editorCommentsSidebar { + display: flex; + height: auto; + padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; +} + +#editorCommentsSidebar #editorCommentsSidebarHeader { + width: 100%; + box-sizing: border-box; + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; +} + +:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount { + display: flex; + align-items: baseline; + gap: 6px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) + #editorCommentsSidebarTitle { + font: menu; + font-style: normal; + font-weight: 590; + line-height: normal; + font-size: 17px; + color: var(--comment-fg-color); +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) + #editorCommentsSidebarCount { + padding: 0 4px; + border-radius: 4px; + background-color: var(--comment-count-bg-color); + + color: var(--comment-fg-color); + text-align: center; + + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +:is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton { + width: 32px; + height: 32px; + padding: 8px; + border-radius: 4px; + border: none; + background: none; + cursor: pointer; +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton +)::before { + content: ''; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-image: var(--comment-close-button-icon); + mask-image: var(--comment-close-button-icon); + background-color: var(--comment-fg-color); +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton +):hover { + background-color: var(--comment-hover-bg-color); +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton +):active { + background-color: var(--comment-active-bg-color); +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton +):focus-visible { + outline: var(--focus-ring-outline); +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarHeader) + #editorCommentsSidebarCloseButton + ) + > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; +} + +#editorCommentsSidebar #editorCommentsSidebarListContainer { + overflow: auto; + width: 100%; +} + +:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList { + display: flex; + width: auto; + padding: 4px 16px; + gap: 10px; + align-items: flex-start; + flex-direction: column; + list-style-type: none; +} + +:is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment { + display: flex; + width: auto; + padding: 8px 16px 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + gap: 4px; + + border-radius: 8px; + border: 0.5px solid var(--comment-border-color); + background-color: var(--comment-bg-color); +} + +@media screen and (forced-colors: active) { + :is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):hover { + background-color: var(--comment-hover-bg-color); } +} -.commentPopup.dragging{ - cursor:move !important; +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):hover { + filter: var(--comment-hover-filter); +} + +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):hover + time::after { + display: inline-block; + background-color: var(--comment-indicator-hover-fg-color); + filter: var(--comment-indicator-hover-filter); +} + +@media screen and (forced-colors: active) { + :is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):active { + background-color: var(--comment-active-bg-color); } +} -.commentPopup.dragging *{ - cursor:move !important; - } +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):active { + filter: var(--comment-active-filter); +} -.commentPopup.dragging button{ - pointer-events:none !important; - } +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):active + time::after { + display: inline-block; + background-color: var(--comment-indicator-active-fg-color); + filter: var(--comment-indicator-active-filter); +} -.commentPopup:not(.selected) .commentPopupButtons{ - visibility:hidden !important; +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):is(:focus, :focus-visible) + time::after { + display: inline-block; + background-color: var(--comment-indicator-focus-fg-color); +} + +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments):focus-visible { + outline: 2px solid var(--comment-focus-outline-color); + outline-offset: 2px; +} + +.selected:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments) + .sidebarCommentText { + max-height: -moz-fit-content; + max-height: fit-content; + -webkit-line-clamp: unset; +} + +.selected:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ):not(.noComments) + time::after { + display: inline-block; + background-color: var(--comment-indicator-selected-fg-color); +} + +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + .sidebarCommentText { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + width: 100%; + height: -moz-fit-content; + height: fit-content; + max-height: 80px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + overflow-wrap: break-word; +} + +:is( + :is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + .sidebarCommentText + ) + .richText { + --total-scale-factor: 1.5; +} + +.noComments:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + .sidebarCommentText { + max-height: -moz-fit-content; + max-height: fit-content; + -webkit-line-clamp: unset; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.noComments:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + a { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + width: 100%; + height: auto; + overflow-wrap: break-word; + margin-block-start: 15px; +} + +:is( + .noComments:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + a +):focus-visible { + outline: var(--focus-ring-outline); +} + +:is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + time { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: space-between; + + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 13px; +} + +:is( + :is( + :is( + :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) + #editorCommentsSidebarList + ) + .sidebarComment + ) + time +)::after { + content: ''; + display: none; + width: 16px; + height: 16px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + transform: scaleX(var(--dir-factor)); +} + +.commentPopup { + --csstools-color-scheme--light: initial; + color-scheme: light dark; + + --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #3a3944; + + --divider-color: var(--csstools-light-dark-toggle--102, #cfcfd8); + --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --comment-shadow: + 0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), + 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1)); +} + +@supports (color: light-dark(red, red)) { + .commentPopup { + --divider-color: light-dark(#cfcfd8, #3a3944); } +} -.commentPopup hr{ - width:100%; - height:1px; - border:none; - border-top:1px solid var(--divider-color); - margin:0; - padding:0; +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .commentPopup { + --comment-shadow: + 0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), + 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); } +} -.commentPopup .commentPopupTop{ - display:flex; - width:100%; - height:auto; - padding-bottom:4px; - justify-content:space-between; - align-items:center; - align-self:stretch; - cursor:move; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; +@supports not (color: light-dark(tan, tan)) { + .commentPopup * { + --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) + #3a3944; + + --divider-color: var(--csstools-light-dark-toggle--102, #cfcfd8); + --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --comment-shadow: + 0 0.5px 2px 0 var(--csstools-light-dark-toggle--103, rgb(0 0 0 / 0.05)), + 0 4px 16px 0 var(--csstools-light-dark-toggle--104, rgb(0 0 0 / 0.1)); } +} -:is(.commentPopup .commentPopupTop) .commentPopupTime{ - font:menu; - font-style:normal; - font-weight:400; - line-height:normal; - font-size:13px; - color:var(--comment-date-fg-color); - } - -:is(.commentPopup .commentPopupTop) .commentPopupButtons{ - display:flex; - align-items:center; - gap:2px; - cursor:default; - } - -:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button{ - width:32px; - height:32px; - padding:8px; - border:var(--button-comment-border); - border-radius:4px; - background-color:var(--button-comment-bg); - color:var(--button-comment-color); - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover{ - background-color:var(--button-comment-hover-bg); - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover::before{ - background-color:var(--button-comment-hover-color); - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active{ - border:var(--button-comment-active-border); - background-color:var(--button-comment-active-bg); - color:var(--button-comment-active-color); - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active::before{ - background-color:var(--button-comment-active-color); - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible{ - background-color:var(--button-comment-hover-bg); - outline:2px solid var(--comment-focus-outline-color); - outline-offset:0; - } - -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ - content:""; - display:inline-block; - width:100%; - height:100%; - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - } - -.commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ - -webkit-mask-image:var(--comment-popup-edit-button-icon); - mask-image:var(--comment-popup-edit-button-icon); - } - -.commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ - -webkit-mask-image:var(--comment-popup-delete-button-icon); - mask-image:var(--comment-popup-delete-button-icon); - } - -.commentPopup .commentPopupText{ - width:100%; - height:auto; - - font:menu; - font-style:normal; - font-weight:400; - line-height:normal; - font-size:15px; - color:var(--comment-fg-color); +@media (prefers-color-scheme: dark) { + .commentPopup { + --csstools-color-scheme--light: light; } +} + +@media screen and (forced-colors: active) { + .commentPopup { + --divider-color: CanvasText; + --comment-shadow: none; + } +} + +.commentPopup { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + z-index: 100001; + pointer-events: auto; + margin-top: 2px; + + border: 0.5px solid var(--comment-border-color); + background: var(--comment-bg-color); + box-shadow: var(--comment-shadow); +} + +.commentPopup:focus-visible { + outline: none; +} + +.commentPopup.dragging { + cursor: move !important; +} + +.commentPopup.dragging * { + cursor: move !important; +} + +.commentPopup.dragging button { + pointer-events: none !important; +} + +.commentPopup:not(.selected) .commentPopupButtons { + visibility: hidden !important; +} + +.commentPopup hr { + width: 100%; + height: 1px; + border: none; + border-top: 1px solid var(--divider-color); + margin: 0; + padding: 0; +} + +.commentPopup .commentPopupTop { + display: flex; + width: 100%; + height: auto; + padding-bottom: 4px; + justify-content: space-between; + align-items: center; + align-self: stretch; + cursor: move; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(.commentPopup .commentPopupTop) .commentPopupTime { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 13px; + color: var(--comment-date-fg-color); +} + +:is(.commentPopup .commentPopupTop) .commentPopupButtons { + display: flex; + align-items: center; + gap: 2px; + cursor: default; +} + +:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button { + width: 32px; + height: 32px; + padding: 8px; + border: var(--button-comment-border); + border-radius: 4px; + background-color: var(--button-comment-bg); + color: var(--button-comment-color); +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button +):hover { + background-color: var(--button-comment-hover-bg); +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button + ):hover::before { + background-color: var(--button-comment-hover-color); +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button +):active { + border: var(--button-comment-active-border); + background-color: var(--button-comment-active-bg); + color: var(--button-comment-active-color); +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button + ):active::before { + background-color: var(--button-comment-active-color); +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button +):focus-visible { + background-color: var(--button-comment-hover-bg); + outline: 2px solid var(--comment-focus-outline-color); + outline-offset: 0; +} + +:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button +)::before { + content: ''; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} + +.commentPopupEdit:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button + )::before { + -webkit-mask-image: var(--comment-popup-edit-button-icon); + mask-image: var(--comment-popup-edit-button-icon); +} + +.commentPopupDelete:is( + :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button + )::before { + -webkit-mask-image: var(--comment-popup-delete-button-icon); + mask-image: var(--comment-popup-delete-button-icon); +} + +.commentPopup .commentPopupText { + width: 100%; + height: auto; + + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + color: var(--comment-fg-color); +} .commentPopupText, -.sidebarCommentText .richText{ - margin-block:0; +.sidebarCommentText .richText { + margin-block: 0; } -:is(.commentPopupText,.sidebarCommentText .richText) p:first-of-type{ - margin-block:0; - } +:is(.commentPopupText, .sidebarCommentText .richText) p:first-of-type { + margin-block: 0; +} -:is(.commentPopupText,.sidebarCommentText .richText) > *{ - white-space:pre-wrap; - font-size:max(15px, calc(10px * var(--total-scale-factor))); - overflow-wrap:break-word; - } +:is(.commentPopupText, .sidebarCommentText .richText) > * { + white-space: pre-wrap; + font-size: max(15px, calc(10px * var(--total-scale-factor))); + overflow-wrap: break-word; +} -:is(.commentPopupText,.sidebarCommentText .richText) span{ - color:var(--comment-fg-color) !important; - } +:is(.commentPopupText, .sidebarCommentText .richText) span { + color: var(--comment-fg-color) !important; +} -:root{ - --editor-toolbar-vert-offset:6px; - --outline-width:2px; - --outline-color:#0060df; - --outline-around-width:1px; - --outline-around-color:#f0f0f4; - --hover-outline-around-color:var(--outline-around-color); - --focus-outline:solid var(--outline-width) var(--outline-color); - --unfocus-outline:solid var(--outline-width) transparent; - --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color); - --hover-outline-color:#8f8f9d; - --hover-outline:solid var(--outline-width) var(--hover-outline-color); - --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color); - --freetext-line-height:1.35; - --freetext-padding:2px; - --resizer-bg-color:var(--outline-color); - --resizer-size:6px; - --resizer-shift:calc( +:root { + --editor-toolbar-vert-offset: 6px; + --outline-width: 2px; + --outline-color: #0060df; + --outline-around-width: 1px; + --outline-around-color: #f0f0f4; + --hover-outline-around-color: var(--outline-around-color); + --focus-outline: solid var(--outline-width) var(--outline-color); + --unfocus-outline: solid var(--outline-width) transparent; + --focus-outline-around: solid var(--outline-around-width) + var(--outline-around-color); + --hover-outline-color: #8f8f9d; + --hover-outline: solid var(--outline-width) var(--hover-outline-color); + --hover-outline-around: solid var(--outline-around-width) + var(--hover-outline-around-color); + --freetext-line-height: 1.35; + --freetext-padding: 2px; + --resizer-bg-color: var(--outline-color); + --resizer-size: 6px; + --resizer-shift: calc( 0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width) ); - --editorFreeText-editing-cursor:text; - --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer; - --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text; - --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer; + --editorFreeText-editing-cursor: text; + --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; + --editorHighlight-editing-cursor: + url(images/cursor-editorTextHighlight.svg) 24 24, text; + --editorFreeHighlight-editing-cursor: + url(images/cursor-editorFreeHighlight.svg) 1 18, pointer; - --new-alt-text-warning-image:url(images/altText_warning.svg); + --new-alt-text-warning-image: url(images/altText_warning.svg); } -.textLayer.highlighting{ - cursor:var(--editorFreeHighlight-editing-cursor); - } +.textLayer.highlighting { + cursor: var(--editorFreeHighlight-editing-cursor); +} -.textLayer.highlighting:not(.free) span{ - cursor:var(--editorHighlight-editing-cursor); - } +.textLayer.highlighting:not(.free) span { + cursor: var(--editorHighlight-editing-cursor); +} -[role="img"]:is(.textLayer.highlighting:not(.free) span){ - cursor:var(--editorFreeHighlight-editing-cursor); - } +[role='img']:is(.textLayer.highlighting:not(.free) span) { + cursor: var(--editorFreeHighlight-editing-cursor); +} -.textLayer.highlighting.free span{ - cursor:var(--editorFreeHighlight-editing-cursor); - } +.textLayer.highlighting.free span { + cursor: var(--editorFreeHighlight-editing-cursor); +} .page:has(.annotationEditorLayer.nonEditing) .annotationLayer - .editorAnnotation{ - position:absolute; - pointer-events:none; + .editorAnnotation { + position: absolute; + pointer-events: none; } -:is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{ - display:none !important; - } +:is( + #viewerContainer.pdfPresentationMode:fullscreen, + .annotationEditorLayer.disabled + ) + .noAltTextBadge { + display: none !important; +} -@media (min-resolution: 1.1dppx){ - :root{ - --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text; +@media (min-resolution: 1.1dppx) { + :root { + --editorFreeText-editing-cursor: + url(images/cursor-editorFreeText.svg) 0 16, text; } } -@media screen and (forced-colors: active){ - :root{ - --outline-color:CanvasText; - --outline-around-color:ButtonFace; - --resizer-bg-color:ButtonText; - --hover-outline-color:Highlight; - --hover-outline-around-color:SelectedItemText; +@media screen and (forced-colors: active) { + :root { + --outline-color: CanvasText; + --outline-around-color: ButtonFace; + --resizer-bg-color: ButtonText; + --hover-outline-color: Highlight; + --hover-outline-around-color: SelectedItemText; } } -[data-editor-rotation="90"]{ - transform:rotate(90deg); +[data-editor-rotation='90'] { + transform: rotate(90deg); } -[data-editor-rotation="180"]{ - transform:rotate(180deg); +[data-editor-rotation='180'] { + transform: rotate(180deg); } -[data-editor-rotation="270"]{ - transform:rotate(270deg); +[data-editor-rotation='270'] { + transform: rotate(270deg); } -.annotationEditorLayer{ - background:transparent; - position:absolute; - inset:0; - font-size:calc(100px * var(--total-scale-factor)); - transform-origin:0 0; - cursor:auto; +.annotationEditorLayer { + background: transparent; + position: absolute; + inset: 0; + font-size: calc(100px * var(--total-scale-factor)); + transform-origin: 0 0; + cursor: auto; } -.annotationEditorLayer .selectedEditor{ - z-index:100000 !important; - } - -.annotationEditorLayer.drawing *{ - pointer-events:none !important; - } - -.annotationEditorLayer.getElements{ - pointer-events:auto !important; - } - -.annotationEditorLayer.getElements > div{ - pointer-events:auto !important; - } - -.annotationEditorLayer.waiting{ - content:""; - cursor:wait; - position:absolute; - inset:0; - width:100%; - height:100%; +.annotationEditorLayer .selectedEditor { + z-index: 100000 !important; } -.annotationEditorLayer.disabled{ - pointer-events:none; +.annotationEditorLayer.drawing * { + pointer-events: none !important; } -.annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor,.commentPopup){ - pointer-events:auto; - } - -.annotationEditorLayer.freetextEditing{ - cursor:var(--editorFreeText-editing-cursor); +.annotationEditorLayer.getElements { + pointer-events: auto !important; } -.annotationEditorLayer.inkEditing{ - cursor:var(--editorInk-editing-cursor); +.annotationEditorLayer.getElements > div { + pointer-events: auto !important; } -.annotationEditorLayer .draw{ - box-sizing:border-box; +.annotationEditorLayer.waiting { + content: ''; + cursor: wait; + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +.annotationEditorLayer.disabled { + pointer-events: none; +} + +.annotationEditorLayer.disabled.highlightEditing + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .signatureEditor, + .commentPopup + ) { + pointer-events: auto; +} + +.annotationEditorLayer.freetextEditing { + cursor: var(--editorFreeText-editing-cursor); +} + +.annotationEditorLayer.inkEditing { + cursor: var(--editorInk-editing-cursor); +} + +.annotationEditorLayer .draw { + box-sizing: border-box; } .annotationEditorLayer - :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){ - position:absolute; - background:transparent; - z-index:1; - transform-origin:0 0; - cursor:auto; - max-width:100%; - max-height:100%; - border:var(--unfocus-outline); + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) { + position: absolute; + background: transparent; + z-index: 1; + transform-origin: 0 0; + cursor: auto; + max-width: 100%; + max-height: 100%; + border: var(--unfocus-outline); } -.draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ - cursor:move; - } - -.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ - border:var(--focus-outline); - outline:var(--focus-outline-around); - } - -.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor))::before{ - content:""; - position:absolute; - inset:0; - border:var(--focus-outline-around); - pointer-events:none; - } - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor){ - border:var(--hover-outline); - outline:var(--hover-outline-around); - } - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor)::before{ - content:""; - position:absolute; - inset:0; - border:var(--focus-outline-around); - } - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ - --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #2b2a33; - --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--105, #f0f0f4); - --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg); - --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #fbfbfe; - --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--106, #2e2e56); - --editor-toolbar-border-color:#8f8f9d; - --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); - --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #52525e; - --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--107, #e0e0e6); - --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); - --editor-toolbar-hover-outline:none; - --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #0df; - --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--108, #0060df); - --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); - --editor-toolbar-height:28px; - --editor-toolbar-padding:2px; - --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #54ffbd; - --alt-text-done-color:var(--csstools-light-dark-toggle--109, #2ac3a2); - --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #80ebff; - --alt-text-warning-color:var(--csstools-light-dark-toggle--110, #0090ed); - --alt-text-hover-done-color:var(--alt-text-done-color); - --alt-text-hover-warning-color:var(--alt-text-warning-color); - } - -@supports (color: light-dark(red, red)){ -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ - --editor-toolbar-bg-color:light-dark(#f0f0f4, #2b2a33); - --editor-toolbar-fg-color:light-dark(#2e2e56, #fbfbfe); - --editor-toolbar-hover-bg-color:light-dark(#e0e0e6, #52525e); - --editor-toolbar-focus-outline-color:light-dark(#0060df, #0df); - --alt-text-done-color:light-dark(#2ac3a2, #54ffbd); - --alt-text-warning-color:light-dark(#0090ed, #80ebff); - } +.draggable.selectedEditor:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) { + cursor: move; } -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) *{ - --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #2b2a33; - --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--105, #f0f0f4); - --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #fbfbfe; - --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--106, #2e2e56); - --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #52525e; - --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--107, #e0e0e6); - --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #0df; - --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--108, #0060df); - --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #54ffbd; - --alt-text-done-color:var(--csstools-light-dark-toggle--109, #2ac3a2); - --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #80ebff; - --alt-text-warning-color:var(--csstools-light-dark-toggle--110, #0090ed); - } +.selectedEditor:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) +) { + border: var(--focus-outline); + outline: var(--focus-outline-around); } -@media screen and (forced-colors: active){ - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ - --editor-toolbar-bg-color:ButtonFace; - --editor-toolbar-fg-color:ButtonText; - --editor-toolbar-border-color:ButtonText; - --editor-toolbar-hover-border-color:AccentColor; - --editor-toolbar-hover-bg-color:ButtonFace; - --editor-toolbar-hover-fg-color:AccentColor; - --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color); - --editor-toolbar-focus-outline-color:ButtonBorder; - --editor-toolbar-shadow:none; - --alt-text-done-color:var(--editor-toolbar-fg-color); - --alt-text-warning-color:var(--editor-toolbar-fg-color); - --alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color); - --alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color); - } - } - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ - - display:flex; - width:-moz-fit-content; - width:fit-content; - height:var(--editor-toolbar-height); - flex-direction:column; - justify-content:center; - align-items:center; - cursor:default; - pointer-events:auto; - box-sizing:content-box; - padding:var(--editor-toolbar-padding); - - position:absolute; - inset-inline-end:0; - inset-block-start:calc(100% + var(--editor-toolbar-vert-offset)); - - border-radius:6px; - background-color:var(--editor-toolbar-bg-color); - border:1px solid var(--editor-toolbar-border-color); - box-shadow:var(--editor-toolbar-shadow); - } - -.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ - display:none; - } - -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar):has(:focus-visible){ - border-color:transparent; - } - -[dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ - transform-origin:100% 0; - } - -[dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ - transform-origin:0 0; - } - -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons{ - display:flex; - justify-content:center; - align-items:center; - gap:0; - height:100%; - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) button{ - padding:0; - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .divider{ - width:0; - height:calc( - 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) - ); - border-left:1px solid var(--editor-toolbar-border-color); - border-right:none; - display:inline-block; - margin-inline:2px; - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic{ - width:var(--editor-toolbar-height); - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ - content:""; - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - display:inline-block; - background-color:var(--editor-toolbar-fg-color); - width:100%; - height:100%; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic):hover::before{ - background-color:var(--editor-toolbar-hover-fg-color); - } - -.highlightButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ - -webkit-mask-image:var(--editor-toolbar-highlight-image); - mask-image:var(--editor-toolbar-highlight-image); - } - -.commentButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ - -webkit-mask-image:var(--comment-edit-button-icon); - mask-image:var(--comment-edit-button-icon); - } - -.deleteButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ - -webkit-mask-image:var(--editor-toolbar-delete-image); - mask-image:var(--editor-toolbar-delete-image); - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > *{ - height:var(--editor-toolbar-height); - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider){ - border:none; - background-color:transparent; - cursor:pointer; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover{ - border-radius:2px; - background-color:var(--editor-toolbar-hover-bg-color); - color:var(--editor-toolbar-hover-fg-color); - outline:var(--editor-toolbar-hover-outline); - outline-offset:1px; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active{ - outline:none; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible{ - border-radius:2px; - outline:2px solid var(--editor-toolbar-focus-outline-color); - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText{ - --alt-text-add-image:url(images/altText_add.svg); - --alt-text-done-image:url(images/altText_done.svg); - - display:flex; - align-items:center; - justify-content:center; - width:-moz-max-content; - width:max-content; - padding-inline:8px; - pointer-events:all; - font:menu; - font-weight:590; - font-size:12px; - color:var(--editor-toolbar-fg-color); - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):disabled{ - pointer-events:none; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ - content:""; - -webkit-mask-image:var(--alt-text-add-image); - mask-image:var(--alt-text-add-image); - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - display:inline-block; - width:12px; - height:13px; - background-color:var(--editor-toolbar-fg-color); - margin-inline-end:4px; - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ - background-color:var(--editor-toolbar-hover-fg-color); - } - -.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ - -webkit-mask-image:var(--alt-text-done-image); - mask-image:var(--alt-text-done-image); - } - -.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ - width:16px; - height:16px; - -webkit-mask-image:var(--new-alt-text-warning-image); - mask-image:var(--new-alt-text-warning-image); - background-color:var(--alt-text-warning-color); - -webkit-mask-size:cover; - mask-size:cover; - } - -.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ - background-color:var(--alt-text-hover-warning-color); - } - -.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ - -webkit-mask-image:var(--alt-text-done-image); - mask-image:var(--alt-text-done-image); - background-color:var(--alt-text-done-color); - } - -.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ - background-color:var(--alt-text-hover-done-color); - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip{ - display:none; - word-wrap:anywhere; - } - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #1c1b22; - --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--111, #f0f0f4); - --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #fbfbfe; - --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--112, #15141a); - --alt-text-tooltip-border:#8f8f9d; - --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #15141a; - --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2)); - } - -@supports (color: light-dark(red, red)){ -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - --alt-text-tooltip-bg:light-dark(#f0f0f4, #1c1b22); - --alt-text-tooltip-fg:light-dark(#15141a, #fbfbfe); - } +.selectedEditor:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + )::before { + content: ''; + position: absolute; + inset: 0; + border: var(--focus-outline-around); + pointer-events: none; } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - --alt-text-tooltip-shadow:0 2px 6px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); - } +:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ):hover:not(.selectedEditor) { + border: var(--hover-outline); + outline: var(--hover-outline-around); } -@supports not (color: light-dark(tan, tan)){ - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) *{ - --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #1c1b22; - --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--111, #f0f0f4); - --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #fbfbfe; - --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--112, #15141a); - --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #15141a; - --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2)); - } +:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ):hover:not(.selectedEditor)::before { + content: ''; + position: absolute; + inset: 0; + border: var(--focus-outline-around); } -@media screen and (forced-colors: active){ - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - --alt-text-tooltip-bg:Canvas; - --alt-text-tooltip-fg:CanvasText; - --alt-text-tooltip-border:CanvasText; - --alt-text-tooltip-shadow:none; - } - } - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - - display:inline-flex; - flex-direction:column; - align-items:center; - justify-content:center; - position:absolute; - top:calc(100% + 2px); - inset-inline-start:0; - padding-block:2px 3px; - padding-inline:3px; - max-width:300px; - width:-moz-max-content; - width:max-content; - height:auto; - font-size:12px; - - border:0.5px solid var(--alt-text-tooltip-border); - background:var(--alt-text-tooltip-bg); - box-shadow:var(--alt-text-tooltip-shadow); - color:var(--alt-text-tooltip-fg); - - pointer-events:none; - } - -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment{ - width:var(--editor-toolbar-height); - } - -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment)::before{ - content:""; - -webkit-mask-image:var(--comment-edit-button-icon); - mask-image:var(--comment-edit-button-icon); - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - display:inline-block; - background-color:var(--editor-toolbar-fg-color); - width:100%; - height:100%; - } - -.annotationEditorLayer .freeTextEditor{ - padding:calc(var(--freetext-padding) * var(--total-scale-factor)); - width:auto; - height:auto; - touch-action:none; -} - -.annotationEditorLayer .freeTextEditor .internal{ - background:transparent; - border:none; - inset:0; - overflow:visible; - white-space:nowrap; - font:10px sans-serif; - line-height:var(--freetext-line-height); - text-align:start; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; -} - -.annotationEditorLayer .freeTextEditor .overlay{ - position:absolute; - display:none; - background:transparent; - inset:0; - width:100%; - height:100%; -} - -.annotationEditorLayer freeTextEditor .overlay.enabled{ - display:block; -} - -.annotationEditorLayer .freeTextEditor .internal:empty::before{ - content:attr(default-content); - color:gray; -} - -.annotationEditorLayer .freeTextEditor .internal:focus{ - outline:none; - -webkit-user-select:auto; - -moz-user-select:auto; - user-select:auto; -} - -.annotationEditorLayer .inkEditor{ - width:100%; - height:100%; -} - -.annotationEditorLayer .inkEditor.editing{ - cursor:inherit; -} - -.annotationEditorLayer .inkEditor .inkEditorCanvas{ - position:absolute; - inset:0; - width:100%; - height:100%; - touch-action:none; -} - -.annotationEditorLayer .stampEditor{ - width:auto; - height:auto; -} - -:is(.annotationEditorLayer .stampEditor) canvas{ - position:absolute; - width:100%; - height:100%; - margin:0; - top:0; - left:0; - } - -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ - --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #52525e; - --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--114, #f0f0f4); - --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #fbfbfe; - --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--115, #cfcfd8); - --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #15141a; - --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--116, #5b5b66); - } - -@supports (color: light-dark(red, red)){ -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ - --no-alt-text-badge-border-color:light-dark(#f0f0f4, #52525e); - --no-alt-text-badge-bg-color:light-dark(#cfcfd8, #fbfbfe); - --no-alt-text-badge-fg-color:light-dark(#5b5b66, #15141a); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) *{ - --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #52525e; - --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--114, #f0f0f4); - --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #fbfbfe; - --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--115, #cfcfd8); - --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #15141a; - --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--116, #5b5b66); - } -} - -@media screen and (forced-colors: active){ - -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ - --no-alt-text-badge-border-color:ButtonText; - --no-alt-text-badge-bg-color:ButtonFace; - --no-alt-text-badge-fg-color:ButtonText; - } - } - -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ - - position:absolute; - inset-inline-end:5px; - inset-block-end:5px; - display:inline-flex; - width:32px; - height:32px; - padding:3px; - justify-content:center; - align-items:center; - pointer-events:none; - z-index:1; - - border-radius:2px; - border:1px solid var(--no-alt-text-badge-border-color); - background:var(--no-alt-text-badge-bg-color); - } - -:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before{ - content:""; - display:inline-block; - width:16px; - height:16px; - -webkit-mask-image:var(--new-alt-text-warning-image); - mask-image:var(--new-alt-text-warning-image); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--no-alt-text-badge-fg-color); - } - -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers{ - position:absolute; - inset:0; - z-index:1; - } - -.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers){ - display:none; - } - -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer{ - width:var(--resizer-size); - height:var(--resizer-size); - background:content-box var(--resizer-bg-color); - border:var(--focus-outline-around); - border-radius:2px; - position:absolute; - } - -.topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - top:var(--resizer-shift); - left:var(--resizer-shift); - } - -.topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - top:var(--resizer-shift); - left:calc(50% + var(--resizer-shift)); - } - -.topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - top:var(--resizer-shift); - right:var(--resizer-shift); - } - -.middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - top:calc(50% + var(--resizer-shift)); - right:var(--resizer-shift); - } - -.bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - bottom:var(--resizer-shift); - right:var(--resizer-shift); - } - -.bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - bottom:var(--resizer-shift); - left:calc(50% + var(--resizer-shift)); - } - -.bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - bottom:var(--resizer-shift); - left:var(--resizer-shift); - } - -.middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ - top:calc(50% + var(--resizer-shift)); - left:var(--resizer-shift); - } - -.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ - cursor:nwse-resize; - } - -.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ - cursor:ns-resize; - } - -.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ - cursor:nesw-resize; - } - -.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ - cursor:ew-resize; - } - -.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ - cursor:nesw-resize; - } - -.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ - cursor:ew-resize; - } - -.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ - cursor:nwse-resize; - } - -.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ - cursor:ns-resize; - } - -:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar{ - rotate:270deg; - } - -[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ - inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset)); - inset-block-start:0; - } - -[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ - inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); - inset-block-start:0; - } - -:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],[data-main-rotation="90"] [data-editor-rotation="90"],[data-main-rotation="180"] [data-editor-rotation="0"],[data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar{ - rotate:180deg; - inset-inline-end:100%; - inset-block-start:calc(0px - var(--editor-toolbar-vert-offset)); - } - -:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar{ - rotate:90deg; - } - -[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ - inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); - inset-block-start:100%; - } - -[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ - inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset)); - inset-block-start:0; - } - -.dialog.altText::backdrop{ - -webkit-mask:url(#alttext-manager-mask); - mask:url(#alttext-manager-mask); - } - -.dialog.altText.positioned{ - margin:0; - } - -.dialog.altText #altTextContainer{ - width:300px; - height:-moz-fit-content; - height:fit-content; - display:inline-flex; - flex-direction:column; - align-items:flex-start; - gap:16px; - } - -:is(.dialog.altText #altTextContainer) #overallDescription{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:4px; - align-self:stretch; - } - -:is(:is(.dialog.altText #altTextContainer) #overallDescription) span{ - align-self:stretch; - } - -:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title{ - font-size:13px; - font-style:normal; - font-weight:590; - } - -:is(.dialog.altText #altTextContainer) #addDescription{ - display:flex; - flex-direction:column; - align-items:stretch; - gap:8px; - } - -:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea{ - flex:1; - padding-inline:24px 10px; - } - -:is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea{ - width:100%; - min-height:75px; - } - -:is(.dialog.altText #altTextContainer) #buttons{ - display:flex; - justify-content:flex-end; - align-items:flex-start; - gap:8px; - align-self:stretch; - } - -.dialog.newAltText{ - --new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg); - --new-alt-text-spinner-icon:url(images/altText_spinner.svg); - --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color:var(--csstools-light-dark-toggle--117, #f0f0f4); - --preview-image-border:none; -} - -@supports (color: light-dark(red, red)){ -.dialog.newAltText{ - --preview-image-bg-color:light-dark(#f0f0f4, #2b2a33); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.dialog.newAltText *{ - --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color:var(--csstools-light-dark-toggle--117, #f0f0f4); - } -} - -@media screen and (forced-colors: active){ - -.dialog.newAltText{ - --preview-image-bg-color:ButtonFace; - --preview-image-border:1px solid ButtonText; -} - } - -.dialog.newAltText{ - - width:80%; - max-width:570px; - min-width:300px; - padding:0; -} - -.dialog.newAltText.noAi #newAltTextDisclaimer,.dialog.newAltText.noAi #newAltTextCreateAutomatically{ - display:none !important; - } - -.dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ - display:none !important; - } - -.dialog.newAltText.aiInstalling #newAltTextDownloadModel{ - display:flex !important; - } - -.dialog.newAltText.error #newAltTextNotNow{ - display:none !important; - } - -.dialog.newAltText.error #newAltTextCancel{ - display:inline-block !important; - } - -.dialog.newAltText:not(.error) #newAltTextError{ - display:none !important; - } - -.dialog.newAltText #newAltTextContainer{ - display:flex; - width:auto; - padding:16px; - flex-direction:column; - justify-content:flex-end; - align-items:flex-start; - gap:12px; - flex:0 1 auto; - line-height:normal; - } - -:is(.dialog.newAltText #newAltTextContainer) #mainContent{ - display:flex; - justify-content:flex-end; - align-items:flex-start; - gap:12px; - align-self:stretch; - flex:1 1 auto; - } - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:16px; - flex:1 0 0; - align-self:stretch; - } - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:8px; - align-self:stretch; - flex:1 1 auto; - } - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer{ - width:100%; - height:70px; - position:relative; - } - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{ - width:100%; - height:100%; - padding:8px; - } - -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder{ - color:var(--text-secondary-color); - } - -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{ - color:var(--text-secondary-color); - } - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ - display:none; - position:absolute; - width:16px; - height:16px; - inset-inline-start:8px; - inset-block-start:8px; - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--text-secondary-color); - pointer-events:none; - } - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder{ - color:transparent; - } - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{ - color:transparent; - } - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ - display:inline-block; - -webkit-mask-image:var(--new-alt-text-spinner-icon); - mask-image:var(--new-alt-text-spinner-icon); - } - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription{ - font-size:11px; - } - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{ - display:flex; - flex-direction:row; - align-items:flex-start; - gap:4px; - font-size:11px; - } - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before{ - content:""; - display:inline-block; - width:17px; - height:16px; - -webkit-mask-image:var(--new-alt-text-ai-disclaimer-icon); - mask-image:var(--new-alt-text-ai-disclaimer-icon); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--text-secondary-color); - flex:1 0 auto; - } - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{ - display:flex; - align-items:center; - gap:4px; - align-self:stretch; - } - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{ - content:""; - display:inline-block; - width:16px; - height:16px; - -webkit-mask-image:var(--new-alt-text-spinner-icon); - mask-image:var(--new-alt-text-spinner-icon); - -webkit-mask-size:cover; - mask-size:cover; - background-color:var(--text-secondary-color); - } - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{ - width:180px; - aspect-ratio:1; - display:flex; - justify-content:center; - align-items:center; - flex:0 0 auto; - background-color:var(--preview-image-bg-color); - border:var(--preview-image-border); - } - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas{ - max-width:100%; - max-height:100%; - } - -.colorPicker{ - --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color:var(--csstools-light-dark-toggle--118, #0250bb); - --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color:var(--csstools-light-dark-toggle--119, #0060df); - --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #52525e; - --swatch-border-color:var(--csstools-light-dark-toggle--120, #cfcfd8); -} - -@supports (color: light-dark(red, red)){ -.colorPicker{ - --hover-outline-color:light-dark(#0250bb, #80ebff); - --selected-outline-color:light-dark(#0060df, #aaf2ff); - --swatch-border-color:light-dark(#cfcfd8, #52525e); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.colorPicker *{ - --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color:var(--csstools-light-dark-toggle--118, #0250bb); - --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color:var(--csstools-light-dark-toggle--119, #0060df); - --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #52525e; - --swatch-border-color:var(--csstools-light-dark-toggle--120, #cfcfd8); - } -} - -@media screen and (forced-colors: active){ - -.colorPicker{ - --hover-outline-color:Highlight; - --selected-outline-color:var(--hover-outline-color); - --swatch-border-color:ButtonText; -} - } - -.colorPicker .swatch{ - width:16px; - height:16px; - border:1px solid var(--swatch-border-color); - border-radius:100%; - outline-offset:2px; - box-sizing:border-box; - forced-color-adjust:none; - } - -.colorPicker button:is(:hover,.selected) > .swatch{ - border:none; - } - -.basicColorPicker{ - width:28px; -} - -.basicColorPicker::-moz-color-swatch{ - border-radius:100%; - } - -.basicColorPicker::-webkit-color-swatch{ - border-radius:100%; - } - -.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{ - rotate:0deg; - } - -.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{ - rotate:270deg; - } - -.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{ - rotate:180deg; - } - -.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{ - rotate:90deg; - } - -.annotationEditorLayer .highlightEditor{ - position:absolute; - background:transparent; - z-index:1; - cursor:auto; - max-width:100%; - max-height:100%; - border:none; - outline:none; - pointer-events:none; - transform-origin:0 0; - } - -:is(.annotationEditorLayer .highlightEditor):not(.free){ - transform:none; - } - -:is(.annotationEditorLayer .highlightEditor) .internal{ - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - pointer-events:auto; - } - -.disabled:is(.annotationEditorLayer .highlightEditor) .internal{ - pointer-events:none; - } - -.selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal{ - cursor:pointer; - } - -:is(.annotationEditorLayer .highlightEditor) .editToolbar{ - --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg); - - transform-origin:center !important; - } - -:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{ - position:relative; - width:auto; - display:flex; - justify-content:center; - align-items:center; - gap:4px; - padding:4px; - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{ - content:""; - -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image); - mask-image:var(--editor-toolbar-colorpicker-arrow-image); - -webkit-mask-repeat:no-repeat; - mask-repeat:no-repeat; - -webkit-mask-position:center; - mask-position:center; - display:inline-block; - background-color:var(--editor-toolbar-fg-color); - width:12px; - height:12px; - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{ - background-color:var(--editor-toolbar-hover-fg-color); - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){ - background-color:var(--editor-toolbar-hover-bg-color); - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after{ - scale:-1; - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{ - position:absolute; - display:flex; - justify-content:center; - align-items:center; - flex-direction:column; - gap:11px; - padding-block:8px; - border-radius:6px; - background-color:var(--editor-toolbar-bg-color); - border:1px solid var(--editor-toolbar-border-color); - box-shadow:var(--editor-toolbar-shadow); - inset-block-start:calc(100% + 4px); - width:calc(100% + 2 * var(--editor-toolbar-padding)); - } - -:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button{ - width:100%; - height:auto; - border:none; - cursor:pointer; - display:flex; - justify-content:center; - align-items:center; - background:none; - } - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible){ - outline:none; - } - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ - outline-offset:2px; - } - -[aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ - outline:2px solid var(--selected-outline-color); - } - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ - outline:2px solid var(--hover-outline-color); - } - -.editorParamsToolbar:has(#highlightParamsToolbarContainer){ - padding:unset; -} - -#highlightParamsToolbarContainer{ - gap:16px; - padding-inline:10px; - padding-block-end:12px; -} - -#highlightParamsToolbarContainer .colorPicker{ - display:flex; - flex-direction:column; - gap:8px; - } - -:is(#highlightParamsToolbarContainer .colorPicker) .dropdown{ - display:flex; - justify-content:space-between; - align-items:center; - flex-direction:row; - height:auto; - } - -:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{ - width:auto; - height:auto; - border:none; - cursor:pointer; - display:flex; - justify-content:center; - align-items:center; - background:none; - flex:0 0 auto; - padding:0; - } - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{ - width:24px; - height:24px; - } - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){ - outline:none; - } - -[aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{ - outline:2px solid var(--selected-outline-color); - } - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ - outline:2px solid var(--hover-outline-color); - } - -#highlightParamsToolbarContainer #editorHighlightThickness{ - display:flex; - flex-direction:column; - align-items:center; - gap:4px; - align-self:stretch; - } - -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{ - height:auto; - align-self:stretch; - } - -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ - display:flex; - justify-content:space-between; - align-items:center; - align-self:stretch; - - --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) #80808e; - - --example-color:var(--csstools-light-dark-toggle--121, #bfbfc9); - } - -@supports (color: light-dark(red, red)){ -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ - - --example-color:light-dark(#bfbfc9, #80808e); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) *{ - - --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) #80808e; - - --example-color:var(--csstools-light-dark-toggle--121, #bfbfc9); - } -} - -@media screen and (forced-colors: active){ - -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ - --example-color:CanvasText; - } - } - -:is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]){ - opacity:0.4; - } - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before,:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ - content:""; - width:8px; - aspect-ratio:1; - display:block; - border-radius:100%; - background-color:var(--example-color); - } - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ - width:24px; - } - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider{ - width:unset; - height:14px; - } - -#highlightParamsToolbarContainer #editorHighlightVisibility{ - display:flex; - flex-direction:column; - align-items:flex-start; - gap:8px; - align-self:stretch; - } - -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #8f8f9d; - --divider-color:var(--csstools-light-dark-toggle--122, #d7d7db); - } - -@supports (color: light-dark(red, red)){ -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - --divider-color:light-dark(#d7d7db, #8f8f9d); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) *{ - --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) #8f8f9d; - --divider-color:var(--csstools-light-dark-toggle--122, #d7d7db); - } -} - -@media screen and (forced-colors: active){ - -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - --divider-color:CanvasText; - } - } - -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - - margin-block:4px; - width:100%; - height:1px; - background-color:var(--divider-color); - } - -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{ - display:flex; - justify-content:space-between; - align-items:center; - align-self:stretch; - } - -#altTextSettingsDialog{ - padding:16px; -} - -#altTextSettingsDialog #altTextSettingsContainer{ - display:flex; - width:573px; - flex-direction:column; - gap:16px; - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{ - gap:16px; - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) .description{ - color:var(--text-secondary-color); - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{ - display:flex; - flex-direction:column; - gap:12px; - } - -:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button{ - width:-moz-fit-content; - width:fit-content; - } - -.download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton{ - display:none; - } - -:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton{ - display:none; - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{ - display:flex; - flex-direction:column; - gap:8px; - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{ - padding-inline-start:40px; - } - -:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{ - display:flex; - flex-direction:column; - gap:16px; - } - -.sidebar{ - --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color:var(--csstools-light-dark-toggle--123, #fff); - --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color:var(--csstools-light-dark-toggle--124, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1)); - --sidebar-border-radius:8px; - --sidebar-padding:5px; - --sidebar-min-width:180px; - --sidebar-max-width:632px; - --sidebar-width:239px; - --resizer-width:4px; - --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color:var(--csstools-light-dark-toggle--127, #0062fa); -} - -@supports (color: light-dark(red, red)){ -.sidebar{ - --sidebar-bg-color:light-dark(#fff, #23222b); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.sidebar{ - --sidebar-border-color:light-dark( - rgb(21 20 26 / 0.1), - rgb(251 251 254 / 0.1) +:is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar { + --editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg); + --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) #2b2a33; + --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--105, #f0f0f4); + --editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg); + --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) #fbfbfe; + --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--106, #2e2e56); + --editor-toolbar-border-color: #8f8f9d; + --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color); + --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) #52525e; + --editor-toolbar-hover-bg-color: var( + --csstools-light-dark-toggle--107, + #e0e0e6 ); - --sidebar-box-shadow:0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); -} + --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color); + --editor-toolbar-hover-outline: none; + --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #0df; + --editor-toolbar-focus-outline-color: var( + --csstools-light-dark-toggle--108, + #0060df + ); + --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2); + --editor-toolbar-height: 28px; + --editor-toolbar-padding: 2px; + --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) #54ffbd; + --alt-text-done-color: var(--csstools-light-dark-toggle--109, #2ac3a2); + --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) #80ebff; + --alt-text-warning-color: var(--csstools-light-dark-toggle--110, #0090ed); + --alt-text-hover-done-color: var(--alt-text-done-color); + --alt-text-hover-warning-color: var(--alt-text-warning-color); } -@supports (color: light-dark(red, red)){ -.sidebar{ - --resizer-hover-bg-color:light-dark(#0062fa, #00cadb); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.sidebar *{ - --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color:var(--csstools-light-dark-toggle--123, #fff); - --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color:var(--csstools-light-dark-toggle--124, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color:var(--csstools-light-dark-toggle--127, #0062fa); +@supports (color: light-dark(red, red)) { + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar { + --editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33); + --editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe); + --editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e); + --editor-toolbar-focus-outline-color: light-dark(#0060df, #0df); + --alt-text-done-color: light-dark(#2ac3a2, #54ffbd); + --alt-text-warning-color: light-dark(#0090ed, #80ebff); } } -@media screen and (forced-colors: active){ - -.sidebar{ - --sidebar-bg-color:Canvas; - --sidebar-border-color:CanvasText; - --sidebar-box-shadow:none; - --resizer-hover-bg-color:CanvasText; -} - } - -.sidebar{ - - border-radius:var(--sidebar-border-radius); - box-shadow:var(--sidebar-box-shadow); - border:1px solid var(--sidebar-border-color); - background-color:var(--sidebar-bg-color); - inset-block-start:calc(100% + var(--doorhanger-height) - 2px); - padding-block:var(--sidebar-padding); - width:var(--sidebar-width); - min-width:var(--sidebar-min-width); - max-width:var(--sidebar-max-width); -} - -.sidebar .sidebarResizer{ - width:var(--resizer-width); - background-color:transparent; - forced-color-adjust:none; - cursor:ew-resize; - position:absolute; - inset-block:calc(var(--sidebar-padding) + var(--sidebar-border-radius)); - inset-inline-start:calc(0px - var(--resizer-width) / 2); - transition:background-color 0.5s ease-in-out; - box-sizing:border-box; - border:1px solid transparent; - border-block-width:0; - background-clip:content-box; - } - -:is(.sidebar .sidebarResizer):hover{ - background-color:var(--resizer-hover-bg-color); - } - -.sidebar.resizing{ - cursor:ew-resize; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - } - -.sidebar.resizing :not(.sidebarResizer){ - pointer-events:none; - } - -:root{ - --csstools-color-scheme--light:initial; - color-scheme:light dark; - - --viewer-container-height:0; - --pdfViewer-padding-bottom:0; - --page-margin:1px auto -8px; - --page-border:9px solid transparent; - --spreadHorizontalWrapped-margin-LR:-3.5px; - --loading-icon-delay:400ms; - --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) #0df; - --focus-ring-color:var(--csstools-light-dark-toggle--128, #0060df); - --focus-ring-outline:2px solid var(--focus-ring-color); -} - -@supports (color: light-dark(red, red)){ -:root{ - --focus-ring-color:light-dark(#0060df, #0df); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) #0df; - --focus-ring-color:var(--csstools-light-dark-toggle--128, #0060df); +@supports not (color: light-dark(tan, tan)) { + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + * { + --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) + #2b2a33; + --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--105, #f0f0f4); + --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) + #fbfbfe; + --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--106, #2e2e56); + --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) + #52525e; + --editor-toolbar-hover-bg-color: var( + --csstools-light-dark-toggle--107, + #e0e0e6 + ); + --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #0df; + --editor-toolbar-focus-outline-color: var( + --csstools-light-dark-toggle--108, + #0060df + ); + --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) + #54ffbd; + --alt-text-done-color: var(--csstools-light-dark-toggle--109, #2ac3a2); + --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) + #80ebff; + --alt-text-warning-color: var(--csstools-light-dark-toggle--110, #0090ed); } } -@media (prefers-color-scheme: dark){ - -:root{ - --csstools-color-scheme--light: light; -} -} - -@media screen and (forced-colors: active){ - -:root{ - --pdfViewer-padding-bottom:9px; - --page-margin:8px auto -1px; - --page-border:1px solid CanvasText; - --spreadHorizontalWrapped-margin-LR:3.5px; - --focus-ring-color:CanvasText; -} +@media screen and (forced-colors: active) { + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar { + --editor-toolbar-bg-color: ButtonFace; + --editor-toolbar-fg-color: ButtonText; + --editor-toolbar-border-color: ButtonText; + --editor-toolbar-hover-border-color: AccentColor; + --editor-toolbar-hover-bg-color: ButtonFace; + --editor-toolbar-hover-fg-color: AccentColor; + --editor-toolbar-hover-outline: 2px solid + var(--editor-toolbar-hover-border-color); + --editor-toolbar-focus-outline-color: ButtonBorder; + --editor-toolbar-shadow: none; + --alt-text-done-color: var(--editor-toolbar-fg-color); + --alt-text-warning-color: var(--editor-toolbar-fg-color); + --alt-text-hover-done-color: var(--editor-toolbar-hover-fg-color); + --alt-text-hover-warning-color: var(--editor-toolbar-hover-fg-color); } +} -[data-main-rotation="90"]{ - transform:rotate(90deg) translateY(-100%); +:is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar { + display: flex; + width: -moz-fit-content; + width: fit-content; + height: var(--editor-toolbar-height); + flex-direction: column; + justify-content: center; + align-items: center; + cursor: default; + pointer-events: auto; + box-sizing: content-box; + padding: var(--editor-toolbar-padding); + + position: absolute; + inset-inline-end: 0; + inset-block-start: calc(100% + var(--editor-toolbar-vert-offset)); + + border-radius: 6px; + background-color: var(--editor-toolbar-bg-color); + border: 1px solid var(--editor-toolbar-border-color); + box-shadow: var(--editor-toolbar-shadow); } -[data-main-rotation="180"]{ - transform:rotate(180deg) translate(-100%, -100%); + +.hidden:is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar +) { + display: none; } -[data-main-rotation="270"]{ - transform:rotate(270deg) translateX(-100%); + +:is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar +):has(:focus-visible) { + border-color: transparent; +} + +[dir='ltr'] + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) { + transform-origin: 100% 0; +} + +[dir='rtl'] + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) { + transform-origin: 0 0; +} + +:is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 0; + height: 100%; +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + button { + padding: 0; +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .divider { + width: 0; + height: calc( + 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) + ); + border-left: 1px solid var(--editor-toolbar-border-color); + border-right: none; + display: inline-block; + margin-inline: 2px; +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic { + width: var(--editor-toolbar-height); +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic +)::before { + content: ''; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 100%; + height: 100%; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic + ):hover::before { + background-color: var(--editor-toolbar-hover-fg-color); +} + +.highlightButton:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic + )::before { + -webkit-mask-image: var(--editor-toolbar-highlight-image); + mask-image: var(--editor-toolbar-highlight-image); +} + +.commentButton:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic + )::before { + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); +} + +.deleteButton:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .basic + )::before { + -webkit-mask-image: var(--editor-toolbar-delete-image); + mask-image: var(--editor-toolbar-delete-image); +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + > * { + height: var(--editor-toolbar-height); +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + > :not(.divider) { + border: none; + background-color: transparent; + cursor: pointer; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + > :not(.divider) +):hover { + border-radius: 2px; + background-color: var(--editor-toolbar-hover-bg-color); + color: var(--editor-toolbar-hover-fg-color); + outline: var(--editor-toolbar-hover-outline); + outline-offset: 1px; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + > :not(.divider) + ):hover:active { + outline: none; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + > :not(.divider) +):focus-visible { + border-radius: 2px; + outline: 2px solid var(--editor-toolbar-focus-outline-color); +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText { + --alt-text-add-image: url(images/altText_add.svg); + --alt-text-done-image: url(images/altText_done.svg); + + display: flex; + align-items: center; + justify-content: center; + width: -moz-max-content; + width: max-content; + padding-inline: 8px; + pointer-events: all; + font: menu; + font-weight: 590; + font-size: 12px; + color: var(--editor-toolbar-fg-color); +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText +):disabled { + pointer-events: none; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText +)::before { + content: ''; + -webkit-mask-image: var(--alt-text-add-image); + mask-image: var(--alt-text-add-image); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + width: 12px; + height: 13px; + background-color: var(--editor-toolbar-fg-color); + margin-inline-end: 4px; +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ):hover::before { + background-color: var(--editor-toolbar-hover-fg-color); +} + +.done:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + )::before { + -webkit-mask-image: var(--alt-text-done-image); + mask-image: var(--alt-text-done-image); +} + +.new:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + )::before { + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-warning-image); + mask-image: var(--new-alt-text-warning-image); + background-color: var(--alt-text-warning-color); + -webkit-mask-size: cover; + mask-size: cover; +} + +.new:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ):hover::before { + background-color: var(--alt-text-hover-warning-color); +} + +.new.done:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + )::before { + -webkit-mask-image: var(--alt-text-done-image); + mask-image: var(--alt-text-done-image); + background-color: var(--alt-text-done-color); +} + +.new.done:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ):hover::before { + background-color: var(--alt-text-hover-done-color); +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip { + display: none; + word-wrap: anywhere; +} + +.show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip +) { + --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) #1c1b22; + --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--111, #f0f0f4); + --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) #fbfbfe; + --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--112, #15141a); + --alt-text-tooltip-border: #8f8f9d; + --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) #15141a; + --alt-text-tooltip-shadow: 0 2px 6px 0 + var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2)); +} + +@supports (color: light-dark(red, red)) { + .show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip + ) { + --alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22); + --alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip + ) { + --alt-text-tooltip-shadow: 0 2px 6px 0 + light-dark(rgb(58 57 68 / 0.2), #15141a); + } +} + +@supports not (color: light-dark(tan, tan)) { + .show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip + ) + * { + --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) + #1c1b22; + --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--111, #f0f0f4); + --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) + #fbfbfe; + --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--112, #15141a); + --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) + #15141a; + --alt-text-tooltip-shadow: 0 2px 6px 0 + var(--csstools-light-dark-toggle--113, rgb(58 57 68 / 0.2)); + } +} + +@media screen and (forced-colors: active) { + .show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip + ) { + --alt-text-tooltip-bg: Canvas; + --alt-text-tooltip-fg: CanvasText; + --alt-text-tooltip-border: CanvasText; + --alt-text-tooltip-shadow: none; + } +} + +.show:is( + :is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .altText + ) + .tooltip +) { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: absolute; + top: calc(100% + 2px); + inset-inline-start: 0; + padding-block: 2px 3px; + padding-inline: 3px; + max-width: 300px; + width: -moz-max-content; + width: max-content; + height: auto; + font-size: 12px; + + border: 0.5px solid var(--alt-text-tooltip-border); + background: var(--alt-text-tooltip-bg); + box-shadow: var(--alt-text-tooltip-shadow); + color: var(--alt-text-tooltip-fg); + + pointer-events: none; +} + +:is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .comment { + width: var(--editor-toolbar-height); +} + +:is( + :is( + :is( + :is( + .annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), + .textLayer + ) + .editToolbar + ) + .buttons + ) + .comment +)::before { + content: ''; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 100%; + height: 100%; +} + +.annotationEditorLayer .freeTextEditor { + padding: calc(var(--freetext-padding) * var(--total-scale-factor)); + width: auto; + height: auto; + touch-action: none; +} + +.annotationEditorLayer .freeTextEditor .internal { + background: transparent; + border: none; + inset: 0; + overflow: visible; + white-space: nowrap; + font: 10px sans-serif; + line-height: var(--freetext-line-height); + text-align: start; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.annotationEditorLayer .freeTextEditor .overlay { + position: absolute; + display: none; + background: transparent; + inset: 0; + width: 100%; + height: 100%; +} + +.annotationEditorLayer freeTextEditor .overlay.enabled { + display: block; +} + +.annotationEditorLayer .freeTextEditor .internal:empty::before { + content: attr(default-content); + color: gray; +} + +.annotationEditorLayer .freeTextEditor .internal:focus { + outline: none; + -webkit-user-select: auto; + -moz-user-select: auto; + user-select: auto; +} + +.annotationEditorLayer .inkEditor { + width: 100%; + height: 100%; +} + +.annotationEditorLayer .inkEditor.editing { + cursor: inherit; +} + +.annotationEditorLayer .inkEditor .inkEditorCanvas { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + touch-action: none; +} + +.annotationEditorLayer .stampEditor { + width: auto; + height: auto; +} + +:is(.annotationEditorLayer .stampEditor) canvas { + position: absolute; + width: 100%; + height: 100%; + margin: 0; + top: 0; + left: 0; +} + +:is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) #52525e; + --no-alt-text-badge-border-color: var( + --csstools-light-dark-toggle--114, + #f0f0f4 + ); + --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) #fbfbfe; + --no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--115, #cfcfd8); + --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) #15141a; + --no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--116, #5b5b66); +} + +@supports (color: light-dark(red, red)) { + :is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --no-alt-text-badge-border-color: light-dark(#f0f0f4, #52525e); + --no-alt-text-badge-bg-color: light-dark(#cfcfd8, #fbfbfe); + --no-alt-text-badge-fg-color: light-dark(#5b5b66, #15141a); + } +} + +@supports not (color: light-dark(tan, tan)) { + :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) * { + --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) + #52525e; + --no-alt-text-badge-border-color: var( + --csstools-light-dark-toggle--114, + #f0f0f4 + ); + --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) + #fbfbfe; + --no-alt-text-badge-bg-color: var( + --csstools-light-dark-toggle--115, + #cfcfd8 + ); + --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) + #15141a; + --no-alt-text-badge-fg-color: var( + --csstools-light-dark-toggle--116, + #5b5b66 + ); + } +} + +@media screen and (forced-colors: active) { + :is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --no-alt-text-badge-border-color: ButtonText; + --no-alt-text-badge-bg-color: ButtonFace; + --no-alt-text-badge-fg-color: ButtonText; + } +} + +:is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + position: absolute; + inset-inline-end: 5px; + inset-block-end: 5px; + display: inline-flex; + width: 32px; + height: 32px; + padding: 3px; + justify-content: center; + align-items: center; + pointer-events: none; + z-index: 1; + + border-radius: 2px; + border: 1px solid var(--no-alt-text-badge-border-color); + background: var(--no-alt-text-badge-bg-color); +} + +:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-warning-image); + mask-image: var(--new-alt-text-warning-image); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--no-alt-text-badge-fg-color); +} + +:is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers { + position: absolute; + inset: 0; + z-index: 1; +} + +.hidden:is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers +) { + display: none; +} + +:is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer { + width: var(--resizer-size); + height: var(--resizer-size); + background: content-box var(--resizer-bg-color); + border: var(--focus-outline-around); + border-radius: 2px; + position: absolute; +} + +.topLeft:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + top: var(--resizer-shift); + left: var(--resizer-shift); +} + +.topMiddle:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + top: var(--resizer-shift); + left: calc(50% + var(--resizer-shift)); +} + +.topRight:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + top: var(--resizer-shift); + right: var(--resizer-shift); +} + +.middleRight:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + top: calc(50% + var(--resizer-shift)); + right: var(--resizer-shift); +} + +.bottomRight:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + bottom: var(--resizer-shift); + right: var(--resizer-shift); +} + +.bottomMiddle:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + bottom: var(--resizer-shift); + left: calc(50% + var(--resizer-shift)); +} + +.bottomLeft:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + bottom: var(--resizer-shift); + left: var(--resizer-shift); +} + +.middleLeft:is( + :is( + :is( + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) + ) + > .resizers + ) + > .resizer +) { + top: calc(50% + var(--resizer-shift)); + left: var(--resizer-shift); +} + +.topLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +), +.bottomRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +) { + cursor: nwse-resize; +} + +.topMiddle:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +), +.bottomMiddle:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +) { + cursor: ns-resize; +} + +.topRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +), +.bottomLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +) { + cursor: nesw-resize; +} + +.middleRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +), +.middleLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']) + ) + > .resizers + > .resizer +) { + cursor: ew-resize; +} + +.topLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +), +.bottomRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +) { + cursor: nesw-resize; +} + +.topMiddle:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +), +.bottomMiddle:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +) { + cursor: ew-resize; +} + +.topRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +), +.bottomLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +) { + cursor: nwse-resize; +} + +.middleRight:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +), +.middleLeft:is( + :is( + .annotationEditorLayer[data-main-rotation='0'] + :is([data-editor-rotation='90'], [data-editor-rotation='270']), + .annotationEditorLayer[data-main-rotation='90'] + :is([data-editor-rotation='0'], [data-editor-rotation='180']), + .annotationEditorLayer[data-main-rotation='180'] + :is([data-editor-rotation='270'], [data-editor-rotation='90']), + .annotationEditorLayer[data-main-rotation='270'] + :is([data-editor-rotation='180'], [data-editor-rotation='0']) + ) + > .resizers + > .resizer +) { + cursor: ns-resize; +} + +:is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='90'], + [data-main-rotation='90'] [data-editor-rotation='0'], + [data-main-rotation='180'] [data-editor-rotation='270'], + [data-main-rotation='270'] [data-editor-rotation='180'] + ) + ) + .editToolbar { + rotate: 270deg; +} + +[dir='ltr'] + :is( + :is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='90'], + [data-main-rotation='90'] [data-editor-rotation='0'], + [data-main-rotation='180'] [data-editor-rotation='270'], + [data-main-rotation='270'] [data-editor-rotation='180'] + ) + ) + .editToolbar + ) { + inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +[dir='rtl'] + :is( + :is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='90'], + [data-main-rotation='90'] [data-editor-rotation='0'], + [data-main-rotation='180'] [data-editor-rotation='270'], + [data-main-rotation='270'] [data-editor-rotation='180'] + ) + ) + .editToolbar + ) { + inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +:is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='180'], + [data-main-rotation='90'] [data-editor-rotation='90'], + [data-main-rotation='180'] [data-editor-rotation='0'], + [data-main-rotation='270'] [data-editor-rotation='270'] + ) + ) + .editToolbar { + rotate: 180deg; + inset-inline-end: 100%; + inset-block-start: calc(0px - var(--editor-toolbar-vert-offset)); +} + +:is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='270'], + [data-main-rotation='90'] [data-editor-rotation='180'], + [data-main-rotation='180'] [data-editor-rotation='90'], + [data-main-rotation='270'] [data-editor-rotation='0'] + ) + ) + .editToolbar { + rotate: 90deg; +} + +[dir='ltr'] + :is( + :is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='270'], + [data-main-rotation='90'] [data-editor-rotation='180'], + [data-main-rotation='180'] [data-editor-rotation='90'], + [data-main-rotation='270'] [data-editor-rotation='0'] + ) + ) + .editToolbar + ) { + inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset)); + inset-block-start: 100%; +} + +[dir='rtl'] + :is( + :is( + .annotationEditorLayer + :is( + [data-main-rotation='0'] [data-editor-rotation='270'], + [data-main-rotation='90'] [data-editor-rotation='180'], + [data-main-rotation='180'] [data-editor-rotation='90'], + [data-main-rotation='270'] [data-editor-rotation='0'] + ) + ) + .editToolbar + ) { + inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +.dialog.altText::backdrop { + -webkit-mask: url(#alttext-manager-mask); + mask: url(#alttext-manager-mask); +} + +.dialog.altText.positioned { + margin: 0; +} + +.dialog.altText #altTextContainer { + width: 300px; + height: -moz-fit-content; + height: fit-content; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +:is(.dialog.altText #altTextContainer) #overallDescription { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; +} + +:is(:is(.dialog.altText #altTextContainer) #overallDescription) span { + align-self: stretch; +} + +:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title { + font-size: 13px; + font-style: normal; + font-weight: 590; +} + +:is(.dialog.altText #altTextContainer) #addDescription { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 8px; +} + +:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea { + flex: 1; + padding-inline: 24px 10px; +} + +:is( + :is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea + ) + textarea { + width: 100%; + min-height: 75px; +} + +:is(.dialog.altText #altTextContainer) #buttons { + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +.dialog.newAltText { + --new-alt-text-ai-disclaimer-icon: url(images/altText_disclaimer.svg); + --new-alt-text-spinner-icon: url(images/altText_spinner.svg); + --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) #2b2a33; + --preview-image-bg-color: var(--csstools-light-dark-toggle--117, #f0f0f4); + --preview-image-border: none; +} + +@supports (color: light-dark(red, red)) { + .dialog.newAltText { + --preview-image-bg-color: light-dark(#f0f0f4, #2b2a33); + } +} + +@supports not (color: light-dark(tan, tan)) { + .dialog.newAltText * { + --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) + #2b2a33; + --preview-image-bg-color: var(--csstools-light-dark-toggle--117, #f0f0f4); + } +} + +@media screen and (forced-colors: active) { + .dialog.newAltText { + --preview-image-bg-color: ButtonFace; + --preview-image-border: 1px solid ButtonText; + } +} + +.dialog.newAltText { + width: 80%; + max-width: 570px; + min-width: 300px; + padding: 0; +} + +.dialog.newAltText.noAi #newAltTextDisclaimer, +.dialog.newAltText.noAi #newAltTextCreateAutomatically { + display: none !important; +} + +.dialog.newAltText.aiInstalling #newAltTextCreateAutomatically { + display: none !important; +} + +.dialog.newAltText.aiInstalling #newAltTextDownloadModel { + display: flex !important; +} + +.dialog.newAltText.error #newAltTextNotNow { + display: none !important; +} + +.dialog.newAltText.error #newAltTextCancel { + display: inline-block !important; +} + +.dialog.newAltText:not(.error) #newAltTextError { + display: none !important; +} + +.dialog.newAltText #newAltTextContainer { + display: flex; + width: auto; + padding: 16px; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + flex: 0 1 auto; + line-height: normal; +} + +:is(.dialog.newAltText #newAltTextContainer) #mainContent { + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + align-self: stretch; + flex: 1 1 auto; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionAndSettings { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + flex: 1 0 0; + align-self: stretch; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; + flex: 1 1 auto; +} + +:is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer { + width: 100%; + height: 70px; + position: relative; +} + +:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + textarea { + width: 100%; + height: 100%; + padding: 8px; +} + +:is( + :is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + textarea +)::-moz-placeholder { + color: var(--text-secondary-color); +} + +:is( + :is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + textarea +)::placeholder { + color: var(--text-secondary-color); +} + +:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + .altTextSpinner { + display: none; + position: absolute; + width: 16px; + height: 16px; + inset-inline-start: 8px; + inset-block-start: 8px; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); + pointer-events: none; +} + +.loading:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + textarea::-moz-placeholder { + color: transparent; +} + +.loading:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + textarea::placeholder { + color: transparent; +} + +.loading:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescriptionContainer + ) + .altTextSpinner { + display: inline-block; + -webkit-mask-image: var(--new-alt-text-spinner-icon); + mask-image: var(--new-alt-text-spinner-icon); +} + +:is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDescription { + font-size: 11px; +} + +:is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDisclaimer { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 4px; + font-size: 11px; +} + +:is( + :is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #descriptionInstruction + ) + #newAltTextDisclaimer +)::before { + content: ''; + display: inline-block; + width: 17px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon); + mask-image: var(--new-alt-text-ai-disclaimer-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); + flex: 1 0 auto; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #newAltTextDownloadModel { + display: flex; + align-items: center; + gap: 4px; + align-self: stretch; +} + +:is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #newAltTextDownloadModel +)::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-spinner-icon); + mask-image: var(--new-alt-text-spinner-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #newAltTextImagePreview { + width: 180px; + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + flex: 0 0 auto; + background-color: var(--preview-image-bg-color); + border: var(--preview-image-border); +} + +:is( + :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) + #newAltTextImagePreview + ) + > canvas { + max-width: 100%; + max-height: 100%; +} + +.colorPicker { + --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) #80ebff; + --hover-outline-color: var(--csstools-light-dark-toggle--118, #0250bb); + --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) #aaf2ff; + --selected-outline-color: var(--csstools-light-dark-toggle--119, #0060df); + --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) #52525e; + --swatch-border-color: var(--csstools-light-dark-toggle--120, #cfcfd8); +} + +@supports (color: light-dark(red, red)) { + .colorPicker { + --hover-outline-color: light-dark(#0250bb, #80ebff); + --selected-outline-color: light-dark(#0060df, #aaf2ff); + --swatch-border-color: light-dark(#cfcfd8, #52525e); + } +} + +@supports not (color: light-dark(tan, tan)) { + .colorPicker * { + --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) + #80ebff; + --hover-outline-color: var(--csstools-light-dark-toggle--118, #0250bb); + --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) + #aaf2ff; + --selected-outline-color: var(--csstools-light-dark-toggle--119, #0060df); + --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) + #52525e; + --swatch-border-color: var(--csstools-light-dark-toggle--120, #cfcfd8); + } +} + +@media screen and (forced-colors: active) { + .colorPicker { + --hover-outline-color: Highlight; + --selected-outline-color: var(--hover-outline-color); + --swatch-border-color: ButtonText; + } +} + +.colorPicker .swatch { + width: 16px; + height: 16px; + border: 1px solid var(--swatch-border-color); + border-radius: 100%; + outline-offset: 2px; + box-sizing: border-box; + forced-color-adjust: none; +} + +.colorPicker button:is(:hover, .selected) > .swatch { + border: none; +} + +.basicColorPicker { + width: 28px; +} + +.basicColorPicker::-moz-color-swatch { + border-radius: 100%; +} + +.basicColorPicker::-webkit-color-swatch { + border-radius: 100%; +} + +.annotationEditorLayer[data-main-rotation='0'] + .highlightEditor:not(.free) + > .editToolbar { + rotate: 0deg; +} + +.annotationEditorLayer[data-main-rotation='90'] + .highlightEditor:not(.free) + > .editToolbar { + rotate: 270deg; +} + +.annotationEditorLayer[data-main-rotation='180'] + .highlightEditor:not(.free) + > .editToolbar { + rotate: 180deg; +} + +.annotationEditorLayer[data-main-rotation='270'] + .highlightEditor:not(.free) + > .editToolbar { + rotate: 90deg; +} + +.annotationEditorLayer .highlightEditor { + position: absolute; + background: transparent; + z-index: 1; + cursor: auto; + max-width: 100%; + max-height: 100%; + border: none; + outline: none; + pointer-events: none; + transform-origin: 0 0; +} + +:is(.annotationEditorLayer .highlightEditor):not(.free) { + transform: none; +} + +:is(.annotationEditorLayer .highlightEditor) .internal { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: auto; +} + +.disabled:is(.annotationEditorLayer .highlightEditor) .internal { + pointer-events: none; +} + +.selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal { + cursor: pointer; +} + +:is(.annotationEditorLayer .highlightEditor) .editToolbar { + --editor-toolbar-colorpicker-arrow-image: url(images/toolbarButton-menuArrow.svg); + + transform-origin: center !important; +} + +:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker { + position: relative; + width: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + padding: 4px; +} + +:is( + :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker +)::after { + content: ''; + -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image); + mask-image: var(--editor-toolbar-colorpicker-arrow-image); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 12px; + height: 12px; +} + +:is( + :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker + ):hover::after { + background-color: var(--editor-toolbar-hover-fg-color); +} + +:is( + :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker +):has(.dropdown:not(.hidden)) { + background-color: var(--editor-toolbar-hover-bg-color); +} + +:is( + :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker + ):has(.dropdown:not(.hidden))::after { + scale: -1; +} + +:is( + :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) + .colorPicker + ) + .dropdown { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 11px; + padding-block: 8px; + border-radius: 6px; + background-color: var(--editor-toolbar-bg-color); + border: 1px solid var(--editor-toolbar-border-color); + box-shadow: var(--editor-toolbar-shadow); + inset-block-start: calc(100% + 4px); + width: calc(100% + 2 * var(--editor-toolbar-padding)); +} + +:is( + :is( + :is( + :is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) + .buttons + ) + .colorPicker + ) + .dropdown + ) + button { + width: 100%; + height: auto; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: none; +} + +:is( + :is( + :is( + :is( + :is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) + .buttons + ) + .colorPicker + ) + .dropdown + ) + button +):is(:active, :focus-visible) { + outline: none; +} + +:is( + :is( + :is( + :is( + :is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) + .buttons + ) + .colorPicker + ) + .dropdown + ) + button + ) + > .swatch { + outline-offset: 2px; +} + +[aria-selected='true']:is( + :is( + :is( + :is( + :is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) + .buttons + ) + .colorPicker + ) + .dropdown + ) + button + ) + > .swatch { + outline: 2px solid var(--selected-outline-color); +} + +:is( + :is( + :is( + :is( + :is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) + .buttons + ) + .colorPicker + ) + .dropdown + ) + button + ):is(:hover, :active, :focus-visible) + > .swatch { + outline: 2px solid var(--hover-outline-color); +} + +.editorParamsToolbar:has(#highlightParamsToolbarContainer) { + padding: unset; +} + +#highlightParamsToolbarContainer { + gap: 16px; + padding-inline: 10px; + padding-block-end: 12px; +} + +#highlightParamsToolbarContainer .colorPicker { + display: flex; + flex-direction: column; + gap: 8px; +} + +:is(#highlightParamsToolbarContainer .colorPicker) .dropdown { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + height: auto; +} + +:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button { + width: auto; + height: auto; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: none; + flex: 0 0 auto; + padding: 0; +} + +:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) + .swatch { + width: 24px; + height: 24px; +} + +:is( + :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button +):is(:active, :focus-visible) { + outline: none; +} + +[aria-selected='true']:is( + :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button + ) + > .swatch { + outline: 2px solid var(--selected-outline-color); +} + +:is( + :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button + ):is(:hover, :active, :focus-visible) + > .swatch { + outline: 2px solid var(--hover-outline-color); +} + +#highlightParamsToolbarContainer #editorHighlightThickness { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightThickness) + .editorParamsLabel { + height: auto; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + + --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) #80808e; + + --example-color: var(--csstools-light-dark-toggle--121, #bfbfc9); +} + +@supports (color: light-dark(red, red)) { + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker { + --example-color: light-dark(#bfbfc9, #80808e); + } +} + +@supports not (color: light-dark(tan, tan)) { + :is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker + ) + * { + --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) + #80808e; + + --example-color: var(--csstools-light-dark-toggle--121, #bfbfc9); + } +} + +@media screen and (forced-colors: active) { + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker { + --example-color: CanvasText; + } +} + +:is( + :is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker + ) + > .editorParamsSlider[disabled] +) { + opacity: 0.4; +} + +:is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker +)::before, +:is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker +)::after { + content: ''; + width: 8px; + aspect-ratio: 1; + display: block; + border-radius: 100%; + background-color: var(--example-color); +} + +:is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker +)::after { + width: 24px; +} + +:is( + :is(#highlightParamsToolbarContainer #editorHighlightThickness) + .thicknessPicker + ) + .editorParamsSlider { + width: unset; + height: 14px; +} + +#highlightParamsToolbarContainer #editorHighlightVisibility { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) #8f8f9d; + --divider-color: var(--csstools-light-dark-toggle--122, #d7d7db); +} + +@supports (color: light-dark(red, red)) { + :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --divider-color: light-dark(#d7d7db, #8f8f9d); + } +} + +@supports not (color: light-dark(tan, tan)) { + :is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) + * { + --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) + #8f8f9d; + --divider-color: var(--csstools-light-dark-toggle--122, #d7d7db); + } +} + +@media screen and (forced-colors: active) { + :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --divider-color: CanvasText; + } +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + margin-block: 4px; + width: 100%; + height: 1px; + background-color: var(--divider-color); +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +#altTextSettingsDialog { + padding: 16px; +} + +#altTextSettingsDialog #altTextSettingsContainer { + display: flex; + width: 573px; + flex-direction: column; + gap: 16px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer { + gap: 16px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) .description { + color: var(--text-secondary-color); +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings { + display: flex; + flex-direction: column; + gap: 12px; +} + +:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) + button { + width: -moz-fit-content; + width: fit-content; +} + +.download:is( + :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings + ) + #deleteModelButton { + display: none; +} + +:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not( + .download + ) + #downloadModelButton { + display: none; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText, +:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor { + display: flex; + flex-direction: column; + gap: 8px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription, +:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings, +:is(#altTextSettingsDialog #altTextSettingsContainer) + #showAltTextDialogDescription { + padding-inline-start: 40px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings { + display: flex; + flex-direction: column; + gap: 16px; +} + +.sidebar { + --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) #23222b; + --sidebar-bg-color: var(--csstools-light-dark-toggle--123, #fff); + --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.1); + --sidebar-border-color: var( + --csstools-light-dark-toggle--124, + rgb(21 20 26 / 0.1) + ); + --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --sidebar-box-shadow: + 0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), + 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1)); + --sidebar-border-radius: 8px; + --sidebar-padding: 5px; + --sidebar-min-width: 180px; + --sidebar-max-width: 632px; + --sidebar-width: 239px; + --resizer-width: 4px; + --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) #00cadb; + --resizer-hover-bg-color: var(--csstools-light-dark-toggle--127, #0062fa); +} + +@supports (color: light-dark(red, red)) { + .sidebar { + --sidebar-bg-color: light-dark(#fff, #23222b); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .sidebar { + --sidebar-border-color: light-dark( + rgb(21 20 26 / 0.1), + rgb(251 251 254 / 0.1) + ); + --sidebar-box-shadow: + 0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), + 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); + } +} + +@supports (color: light-dark(red, red)) { + .sidebar { + --resizer-hover-bg-color: light-dark(#0062fa, #00cadb); + } +} + +@supports not (color: light-dark(tan, tan)) { + .sidebar * { + --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) + #23222b; + --sidebar-bg-color: var(--csstools-light-dark-toggle--123, #fff); + --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) + rgb(251 251 254 / 0.1); + --sidebar-border-color: var( + --csstools-light-dark-toggle--124, + rgb(21 20 26 / 0.1) + ); + --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) + rgb(0 0 0 / 0.4); + --sidebar-box-shadow: + 0 0.25px 0.75px var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.05)), + 0 2px 6px 0 var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) + #00cadb; + --resizer-hover-bg-color: var(--csstools-light-dark-toggle--127, #0062fa); + } +} + +@media screen and (forced-colors: active) { + .sidebar { + --sidebar-bg-color: Canvas; + --sidebar-border-color: CanvasText; + --sidebar-box-shadow: none; + --resizer-hover-bg-color: CanvasText; + } +} + +.sidebar { + border-radius: var(--sidebar-border-radius); + box-shadow: var(--sidebar-box-shadow); + border: 1px solid var(--sidebar-border-color); + background-color: var(--sidebar-bg-color); + inset-block-start: calc(100% + var(--doorhanger-height) - 2px); + padding-block: var(--sidebar-padding); + width: var(--sidebar-width); + min-width: var(--sidebar-min-width); + max-width: var(--sidebar-max-width); +} + +.sidebar .sidebarResizer { + width: var(--resizer-width); + background-color: transparent; + forced-color-adjust: none; + cursor: ew-resize; + position: absolute; + inset-block: calc(var(--sidebar-padding) + var(--sidebar-border-radius)); + inset-inline-start: calc(0px - var(--resizer-width) / 2); + transition: background-color 0.5s ease-in-out; + box-sizing: border-box; + border: 1px solid transparent; + border-block-width: 0; + background-clip: content-box; +} + +:is(.sidebar .sidebarResizer):hover { + background-color: var(--resizer-hover-bg-color); +} + +.sidebar.resizing { + cursor: ew-resize; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.sidebar.resizing :not(.sidebarResizer) { + pointer-events: none; +} + +:root { + --csstools-color-scheme--light: initial; + color-scheme: light dark; + + --viewer-container-height: 0; + --pdfViewer-padding-bottom: 0; + --page-margin: 1px auto -8px; + --page-border: 9px solid transparent; + --spreadHorizontalWrapped-margin-LR: -3.5px; + --loading-icon-delay: 400ms; + --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) #0df; + --focus-ring-color: var(--csstools-light-dark-toggle--128, #0060df); + --focus-ring-outline: 2px solid var(--focus-ring-color); +} + +@supports (color: light-dark(red, red)) { + :root { + --focus-ring-color: light-dark(#0060df, #0df); + } +} + +@supports not (color: light-dark(tan, tan)) { + :root * { + --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) #0df; + --focus-ring-color: var(--csstools-light-dark-toggle--128, #0060df); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --csstools-color-scheme--light: light; + } +} + +@media screen and (forced-colors: active) { + :root { + --pdfViewer-padding-bottom: 9px; + --page-margin: 8px auto -1px; + --page-border: 1px solid CanvasText; + --spreadHorizontalWrapped-margin-LR: 3.5px; + --focus-ring-color: CanvasText; + } +} + +[data-main-rotation='90'] { + transform: rotate(90deg) translateY(-100%); +} +[data-main-rotation='180'] { + transform: rotate(180deg) translate(-100%, -100%); +} +[data-main-rotation='270'] { + transform: rotate(270deg) translateX(-100%); } #hiddenCopyElement, -.hiddenCanvasElement{ - position:absolute; - top:0; - left:0; - width:0; - height:0; - display:none; +.hiddenCanvasElement { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + display: none; } -.pdfViewer{ - --scale-factor:1; - --page-bg-color:unset; +.pdfViewer { + --scale-factor: 1; + --page-bg-color: unset; - padding-bottom:var(--pdfViewer-padding-bottom); + padding-bottom: var(--pdfViewer-padding-bottom); - --hcm-highlight-filter:none; - --hcm-highlight-selected-filter:none; + --hcm-highlight-filter: none; + --hcm-highlight-selected-filter: none; } -@media screen and (forced-colors: active){ - -.pdfViewer{ - --hcm-highlight-filter:invert(100%); -} +@media screen and (forced-colors: active) { + .pdfViewer { + --hcm-highlight-filter: invert(100%); } - -.pdfViewer.copyAll{ - cursor:wait; - } - -.pdfViewer .canvasWrapper{ - overflow:hidden; - width:100%; - height:100%; - } - -:is(.pdfViewer .canvasWrapper) canvas{ - position:absolute; - top:0; - left:0; - margin:0; - display:block; - width:100%; - height:100%; - contain:content; - } - -:is(:is(.pdfViewer .canvasWrapper) canvas) .structTree{ - contain:strict; - } - -.detailView:is(:is(.pdfViewer .canvasWrapper) canvas){ - image-rendering:pixelated; - } - -.pdfViewer .page{ - --user-unit:1; - --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); - --scale-round-x:1px; - --scale-round-y:1px; - - direction:ltr; - width:816px; - height:1056px; - margin:var(--page-margin); - position:relative; - overflow:visible; - border:var(--page-border); - background-clip:content-box; - background-color:var(--page-bg-color, rgb(255 255 255)); } -.pdfViewer .dummyPage{ - position:relative; - width:0; - height:var(--viewer-container-height); +.pdfViewer.copyAll { + cursor: wait; } -.pdfViewer.noUserSelect{ - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; +.pdfViewer .canvasWrapper { + overflow: hidden; + width: 100%; + height: 100%; } -.pdfViewer.removePageBorders .page{ - margin:0 auto 10px; - border:none; +:is(.pdfViewer .canvasWrapper) canvas { + position: absolute; + top: 0; + left: 0; + margin: 0; + display: block; + width: 100%; + height: 100%; + contain: content; +} + +:is(:is(.pdfViewer .canvasWrapper) canvas) .structTree { + contain: strict; +} + +.detailView:is(:is(.pdfViewer .canvasWrapper) canvas) { + image-rendering: pixelated; +} + +.pdfViewer .page { + --user-unit: 1; + --total-scale-factor: calc(var(--scale-factor) * var(--user-unit)); + --scale-round-x: 1px; + --scale-round-y: 1px; + + direction: ltr; + width: 816px; + height: 1056px; + margin: var(--page-margin); + position: relative; + overflow: visible; + border: var(--page-border); + background-clip: content-box; + background-color: var(--page-bg-color, rgb(255 255 255)); +} + +.pdfViewer .dummyPage { + position: relative; + width: 0; + height: var(--viewer-container-height); +} + +.pdfViewer.noUserSelect { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.pdfViewer.removePageBorders .page { + margin: 0 auto 10px; + border: none; } .pdfViewer:is(.scrollHorizontal, .scrollWrapped), -.spread{ - margin-inline:3.5px; - text-align:center; +.spread { + margin-inline: 3.5px; + text-align: center; } .pdfViewer.scrollHorizontal, -.spread{ - white-space:nowrap; +.spread { + white-space: nowrap; } .pdfViewer.removePageBorders, -.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{ - margin-inline:0; +.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread { + margin-inline: 0; } .spread :is(.page, .dummyPage), -.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){ - display:inline-block; - vertical-align:middle; +.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) { + display: inline-block; + vertical-align: middle; } .spread .page, -.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{ - margin-inline:var(--spreadHorizontalWrapped-margin-LR); +.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page { + margin-inline: var(--spreadHorizontalWrapped-margin-LR); } .pdfViewer.removePageBorders .spread .page, -.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{ - margin-inline:5px; +.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page { + margin-inline: 5px; } -.pdfViewer .page.loadingIcon::after{ - position:absolute; - top:0; - left:0; - content:""; - width:100%; - height:100%; - background:url("images/loading-icon.gif") center no-repeat; - display:none; - transition-property:display; - transition-delay:var(--loading-icon-delay); - z-index:5; - contain:strict; +.pdfViewer .page.loadingIcon::after { + position: absolute; + top: 0; + left: 0; + content: ''; + width: 100%; + height: 100%; + background: url('images/loading-icon.gif') center no-repeat; + display: none; + transition-property: display; + transition-delay: var(--loading-icon-delay); + z-index: 5; + contain: strict; } -.pdfViewer .page.loading::after{ - display:block; +.pdfViewer .page.loading::after { + display: block; } -.pdfViewer .page:not(.loading)::after{ - transition-property:none; - display:none; +.pdfViewer .page:not(.loading)::after { + transition-property: none; + display: none; } -.pdfPresentationMode .pdfViewer{ - padding-bottom:0; +.pdfPresentationMode .pdfViewer { + padding-bottom: 0; } -.pdfPresentationMode .spread{ - margin:0; +.pdfPresentationMode .spread { + margin: 0; } -.pdfPresentationMode .pdfViewer .page{ - margin:0 auto; - border:2px solid transparent; +.pdfPresentationMode .pdfViewer .page { + margin: 0 auto; + border: 2px solid transparent; } -:root{ - --dir-factor:1; - --inline-start:left; - --inline-end:right; +:root { + --dir-factor: 1; + --inline-start: left; + --inline-end: right; - --sidebar-width:200px; - --sidebar-transition-duration:200ms; - --sidebar-transition-timing-function:ease; + --sidebar-width: 200px; + --sidebar-transition-duration: 200ms; + --sidebar-transition-timing-function: ease; - --toolbar-height:32px; - --toolbar-horizontal-padding:1px; - --toolbar-vertical-padding:2px; - --icon-size:16px; + --toolbar-height: 32px; + --toolbar-horizontal-padding: 1px; + --toolbar-vertical-padding: 2px; + --icon-size: 16px; - --toolbar-icon-opacity:0.7; - --doorhanger-icon-opacity:0.9; - --doorhanger-height:8px; + --toolbar-icon-opacity: 0.7; + --doorhanger-icon-opacity: 0.9; + --doorhanger-height: 8px; - --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(249 249 250); + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) + rgb(249 249 250); - --main-color:var(--csstools-light-dark-toggle--0, rgb(12 12 13)); - --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(42 42 46); - --body-bg-color:var(--csstools-light-dark-toggle--1, rgb(212 212 215)); - --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(0 96 223); - --progressBar-color:var(--csstools-light-dark-toggle--2, rgb(10 132 255)); - --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) rgb(40 40 43); - --progressBar-bg-color:var(--csstools-light-dark-toggle--3, rgb(221 221 222)); - --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) rgb(20 68 133); - --progressBar-blend-color:var(--csstools-light-dark-toggle--4, rgb(116 177 239)); - --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) rgb(121 121 123); - --scrollbar-color:var(--csstools-light-dark-toggle--5, auto); - --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(35 35 39); - --scrollbar-bg-color:var(--csstools-light-dark-toggle--6, auto); - --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-bg-color:var(--csstools-light-dark-toggle--7, rgb(0 0 0)); - --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-hover-bg-color:var(--csstools-light-dark-toggle--8, rgb(0 0 0)); + --main-color: var(--csstools-light-dark-toggle--0, rgb(12 12 13)); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) + rgb(42 42 46); + --body-bg-color: var(--csstools-light-dark-toggle--1, rgb(212 212 215)); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) + rgb(0 96 223); + --progressBar-color: var(--csstools-light-dark-toggle--2, rgb(10 132 255)); + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) + rgb(40 40 43); + --progressBar-bg-color: var( + --csstools-light-dark-toggle--3, + rgb(221 221 222) + ); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) + rgb(20 68 133); + --progressBar-blend-color: var( + --csstools-light-dark-toggle--4, + rgb(116 177 239) + ); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) + rgb(121 121 123); + --scrollbar-color: var(--csstools-light-dark-toggle--5, auto); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) + rgb(35 35 39); + --scrollbar-bg-color: var(--csstools-light-dark-toggle--6, auto); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toolbar-icon-bg-color: var(--csstools-light-dark-toggle--7, rgb(0 0 0)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toolbar-icon-hover-bg-color: var( + --csstools-light-dark-toggle--8, + rgb(0 0 0) + ); - --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) + rgb(42 42 46 / 0.9); - --sidebar-narrow-bg-color:var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); - --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) rgb(50 50 52); - --sidebar-toolbar-bg-color:var(--csstools-light-dark-toggle--10, rgb(245 246 247)); - --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(56 56 61); - --toolbar-bg-color:var(--csstools-light-dark-toggle--11, rgb(249 249 250)); - --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(12 12 13); - --toolbar-border-color:var(--csstools-light-dark-toggle--12, rgb(184 184 184)); - --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color); - --toolbar-border-bottom:none; - --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1); - --toolbarSidebar-border-bottom:none; - --button-hover-color:color-mix(in srgb, currentColor 17%, transparent); - --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) rgb(255 255 255); - --toggled-btn-color:var(--csstools-light-dark-toggle--13, rgb(0 0 0)); - --toggled-btn-bg-color:rgb(0 0 0 / 0.3); - --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4); - --toggled-hover-btn-outline:none; - --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) rgb(74 74 79); - --dropdown-btn-bg-color:var(--csstools-light-dark-toggle--14, rgb(215 215 219)); - --dropdown-btn-border:none; - --separator-color:rgb(0 0 0 / 0.3); - --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) rgb(250 250 250); - --field-color:var(--csstools-light-dark-toggle--15, rgb(6 6 6)); - --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) rgb(64 64 68); - --field-bg-color:var(--csstools-light-dark-toggle--16, rgb(255 255 255)); - --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) rgb(115 115 115); - --field-border-color:var(--csstools-light-dark-toggle--17, rgb(187 187 188)); - --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --treeitem-color:var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --treeitem-bg-color:var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-hover-color:var(--csstools-light-dark-toggle--20, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-selected-color:var(--csstools-light-dark-toggle--21, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); - --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--22, rgb(0 0 0 / 0.25)); - --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.1); - --thumbnail-hover-color:var(--csstools-light-dark-toggle--23, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.2); - --thumbnail-selected-color:var(--csstools-light-dark-toggle--24, rgb(0 0 0 / 0.2)); - --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) #42414d; - --doorhanger-bg-color:var(--csstools-light-dark-toggle--25, rgb(255 255 255)); - --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(39 39 43); - --doorhanger-border-color:var(--csstools-light-dark-toggle--26, rgb(12 12 13 / 0.2)); - --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) rgb(249 249 250); - --doorhanger-hover-color:var(--csstools-light-dark-toggle--27, rgb(12 12 13)); - --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) rgb(92 92 97); - --doorhanger-separator-color:var(--csstools-light-dark-toggle--28, rgb(222 222 222)); - --dialog-button-border:none; - --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) rgb(92 92 97); - --dialog-button-bg-color:var(--csstools-light-dark-toggle--29, rgb(12 12 13 / 0.1)); - --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(115 115 115); - --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--30, rgb(12 12 13 / 0.3)); + --sidebar-narrow-bg-color: var( + --csstools-light-dark-toggle--9, + rgb(212 212 215 / 0.9) + ); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) + rgb(50 50 52); + --sidebar-toolbar-bg-color: var( + --csstools-light-dark-toggle--10, + rgb(245 246 247) + ); + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) + rgb(56 56 61); + --toolbar-bg-color: var(--csstools-light-dark-toggle--11, rgb(249 249 250)); + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) + rgb(12 12 13); + --toolbar-border-color: var( + --csstools-light-dark-toggle--12, + rgb(184 184 184) + ); + --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color); + --toolbar-border-bottom: none; + --toolbarSidebar-box-shadow: + inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), + 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1); + --toolbarSidebar-border-bottom: none; + --button-hover-color: color-mix(in srgb, currentColor 17%, transparent); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toggled-btn-color: var(--csstools-light-dark-toggle--13, rgb(0 0 0)); + --toggled-btn-bg-color: rgb(0 0 0 / 0.3); + --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4); + --toggled-hover-btn-outline: none; + --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) + rgb(74 74 79); + --dropdown-btn-bg-color: var( + --csstools-light-dark-toggle--14, + rgb(215 215 219) + ); + --dropdown-btn-border: none; + --separator-color: rgb(0 0 0 / 0.3); + --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) + rgb(250 250 250); + --field-color: var(--csstools-light-dark-toggle--15, rgb(6 6 6)); + --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) + rgb(64 64 68); + --field-bg-color: var(--csstools-light-dark-toggle--16, rgb(255 255 255)); + --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) + rgb(115 115 115); + --field-border-color: var(--csstools-light-dark-toggle--17, rgb(187 187 188)); + --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.8); + --treeitem-color: var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); + --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.15); + --treeitem-bg-color: var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15)); + --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.9); + --treeitem-hover-color: var( + --csstools-light-dark-toggle--20, + rgb(0 0 0 / 0.9) + ); + --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.9); + --treeitem-selected-color: var( + --csstools-light-dark-toggle--21, + rgb(0 0 0 / 0.9) + ); + --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.25); + --treeitem-selected-bg-color: var( + --csstools-light-dark-toggle--22, + rgb(0 0 0 / 0.25) + ); + --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.1); + --thumbnail-hover-color: var( + --csstools-light-dark-toggle--23, + rgb(0 0 0 / 0.1) + ); + --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.2); + --thumbnail-selected-color: var( + --csstools-light-dark-toggle--24, + rgb(0 0 0 / 0.2) + ); + --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) #42414d; + --doorhanger-bg-color: var( + --csstools-light-dark-toggle--25, + rgb(255 255 255) + ); + --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) + rgb(39 39 43); + --doorhanger-border-color: var( + --csstools-light-dark-toggle--26, + rgb(12 12 13 / 0.2) + ); + --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) + rgb(249 249 250); + --doorhanger-hover-color: var( + --csstools-light-dark-toggle--27, + rgb(12 12 13) + ); + --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) + rgb(92 92 97); + --doorhanger-separator-color: var( + --csstools-light-dark-toggle--28, + rgb(222 222 222) + ); + --dialog-button-border: none; + --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) + rgb(92 92 97); + --dialog-button-bg-color: var( + --csstools-light-dark-toggle--29, + rgb(12 12 13 / 0.1) + ); + --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) + rgb(115 115 115); + --dialog-button-hover-bg-color: var( + --csstools-light-dark-toggle--30, + rgb(12 12 13 / 0.3) + ); - --loading-icon:url(images/loading.svg); - --treeitem-expanded-icon:url(images/treeitem-expanded.svg); - --treeitem-collapsed-icon:url(images/treeitem-collapsed.svg); - --toolbarButton-editorComment-icon:url(images/comment-editButton.svg); - --toolbarButton-editorFreeText-icon:url(images/toolbarButton-editorFreeText.svg); - --toolbarButton-editorHighlight-icon:url(images/toolbarButton-editorHighlight.svg); - --toolbarButton-editorInk-icon:url(images/toolbarButton-editorInk.svg); - --toolbarButton-editorStamp-icon:url(images/toolbarButton-editorStamp.svg); - --toolbarButton-editorSignature-icon:url(images/toolbarButton-editorSignature.svg); - --toolbarButton-menuArrow-icon:url(images/toolbarButton-menuArrow.svg); - --toolbarButton-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.svg); - --toolbarButton-secondaryToolbarToggle-icon:url(images/toolbarButton-secondaryToolbarToggle.svg); - --toolbarButton-pageUp-icon:url(images/toolbarButton-pageUp.svg); - --toolbarButton-pageDown-icon:url(images/toolbarButton-pageDown.svg); - --toolbarButton-zoomOut-icon:url(images/toolbarButton-zoomOut.svg); - --toolbarButton-zoomIn-icon:url(images/toolbarButton-zoomIn.svg); - --toolbarButton-presentationMode-icon:url(images/toolbarButton-presentationMode.svg); - --toolbarButton-print-icon:url(images/toolbarButton-print.svg); - --toolbarButton-openFile-icon:url(images/toolbarButton-openFile.svg); - --toolbarButton-download-icon:url(images/toolbarButton-download.svg); - --toolbarButton-bookmark-icon:url(images/toolbarButton-bookmark.svg); - --toolbarButton-viewThumbnail-icon:url(images/toolbarButton-viewThumbnail.svg); - --toolbarButton-viewOutline-icon:url(images/toolbarButton-viewOutline.svg); - --toolbarButton-viewAttachments-icon:url(images/toolbarButton-viewAttachments.svg); - --toolbarButton-viewLayers-icon:url(images/toolbarButton-viewLayers.svg); - --toolbarButton-currentOutlineItem-icon:url(images/toolbarButton-currentOutlineItem.svg); - --toolbarButton-search-icon:url(images/toolbarButton-search.svg); - --findbarButton-previous-icon:url(images/findbarButton-previous.svg); - --findbarButton-next-icon:url(images/findbarButton-next.svg); - --secondaryToolbarButton-firstPage-icon:url(images/secondaryToolbarButton-firstPage.svg); - --secondaryToolbarButton-lastPage-icon:url(images/secondaryToolbarButton-lastPage.svg); - --secondaryToolbarButton-rotateCcw-icon:url(images/secondaryToolbarButton-rotateCcw.svg); - --secondaryToolbarButton-rotateCw-icon:url(images/secondaryToolbarButton-rotateCw.svg); - --secondaryToolbarButton-selectTool-icon:url(images/secondaryToolbarButton-selectTool.svg); - --secondaryToolbarButton-handTool-icon:url(images/secondaryToolbarButton-handTool.svg); - --secondaryToolbarButton-scrollPage-icon:url(images/secondaryToolbarButton-scrollPage.svg); - --secondaryToolbarButton-scrollVertical-icon:url(images/secondaryToolbarButton-scrollVertical.svg); - --secondaryToolbarButton-scrollHorizontal-icon:url(images/secondaryToolbarButton-scrollHorizontal.svg); - --secondaryToolbarButton-scrollWrapped-icon:url(images/secondaryToolbarButton-scrollWrapped.svg); - --secondaryToolbarButton-spreadNone-icon:url(images/secondaryToolbarButton-spreadNone.svg); - --secondaryToolbarButton-spreadOdd-icon:url(images/secondaryToolbarButton-spreadOdd.svg); - --secondaryToolbarButton-spreadEven-icon:url(images/secondaryToolbarButton-spreadEven.svg); - --secondaryToolbarButton-imageAltTextSettings-icon:var( + --loading-icon: url(images/loading.svg); + --treeitem-expanded-icon: url(images/treeitem-expanded.svg); + --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg); + --toolbarButton-editorComment-icon: url(images/comment-editButton.svg); + --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg); + --toolbarButton-editorHighlight-icon: url(images/toolbarButton-editorHighlight.svg); + --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg); + --toolbarButton-editorStamp-icon: url(images/toolbarButton-editorStamp.svg); + --toolbarButton-editorSignature-icon: url(images/toolbarButton-editorSignature.svg); + --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg); + --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg); + --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg); + --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg); + --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg); + --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg); + --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg); + --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg); + --toolbarButton-print-icon: url(images/toolbarButton-print.svg); + --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg); + --toolbarButton-download-icon: url(images/toolbarButton-download.svg); + --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg); + --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg); + --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg); + --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg); + --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg); + --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg); + --toolbarButton-search-icon: url(images/toolbarButton-search.svg); + --findbarButton-previous-icon: url(images/findbarButton-previous.svg); + --findbarButton-next-icon: url(images/findbarButton-next.svg); + --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg); + --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg); + --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg); + --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg); + --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg); + --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg); + --secondaryToolbarButton-scrollPage-icon: url(images/secondaryToolbarButton-scrollPage.svg); + --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg); + --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg); + --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg); + --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg); + --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg); + --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg); + --secondaryToolbarButton-imageAltTextSettings-icon: var( --toolbarButton-editorStamp-icon ); - --secondaryToolbarButton-documentProperties-icon:url(images/secondaryToolbarButton-documentProperties.svg); - --editorParams-stampAddImage-icon:url(images/toolbarButton-zoomIn.svg); - --comment-edit-button-icon:url(images/comment-editButton.svg); + --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg); + --editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg); + --comment-edit-button-icon: url(images/comment-editButton.svg); } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:root{ +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + :root { + --main-color: light-dark(rgb(12 12 13), rgb(249 249 250)); + --body-bg-color: light-dark(rgb(212 212 215), rgb(42 42 46)); + --progressBar-color: light-dark(rgb(10 132 255), rgb(0 96 223)); + --progressBar-bg-color: light-dark(rgb(221 221 222), rgb(40 40 43)); + --progressBar-blend-color: light-dark(rgb(116 177 239), rgb(20 68 133)); + --scrollbar-color: light-dark(auto, rgb(121 121 123)); + --scrollbar-bg-color: light-dark(auto, rgb(35 35 39)); + --toolbar-icon-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255)); + --toolbar-icon-hover-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255)); - --main-color:light-dark(rgb(12 12 13), rgb(249 249 250)); - --body-bg-color:light-dark(rgb(212 212 215), rgb(42 42 46)); - --progressBar-color:light-dark(rgb(10 132 255), rgb(0 96 223)); - --progressBar-bg-color:light-dark(rgb(221 221 222), rgb(40 40 43)); - --progressBar-blend-color:light-dark(rgb(116 177 239), rgb(20 68 133)); - --scrollbar-color:light-dark(auto, rgb(121 121 123)); - --scrollbar-bg-color:light-dark(auto, rgb(35 35 39)); - --toolbar-icon-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - --toolbar-icon-hover-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - - --sidebar-narrow-bg-color:light-dark( - rgb(212 212 215 / 0.9), - rgb(42 42 46 / 0.9) - ); - --sidebar-toolbar-bg-color:light-dark(rgb(245 246 247), rgb(50 50 52)); - --toolbar-bg-color:light-dark(rgb(249 249 250), rgb(56 56 61)); - --toolbar-border-color:light-dark(rgb(184 184 184), rgb(12 12 13)); - --toggled-btn-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - --dropdown-btn-bg-color:light-dark(rgb(215 215 219), rgb(74 74 79)); - --field-color:light-dark(rgb(6 6 6), rgb(250 250 250)); - --field-bg-color:light-dark(rgb(255 255 255), rgb(64 64 68)); - --field-border-color:light-dark(rgb(187 187 188), rgb(115 115 115)); - --treeitem-color:light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); - --treeitem-bg-color:light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15)); - --treeitem-hover-color:light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9)); - --treeitem-selected-color:light-dark( - rgb(0 0 0 / 0.9), - rgb(255 255 255 / 0.9) - ); - --treeitem-selected-bg-color:light-dark( - rgb(0 0 0 / 0.25), - rgb(255 255 255 / 0.25) - ); - --thumbnail-hover-color:light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1)); - --thumbnail-selected-color:light-dark( - rgb(0 0 0 / 0.2), - rgb(255 255 255 / 0.2) - ); - --doorhanger-bg-color:light-dark(rgb(255 255 255), #42414d); - --doorhanger-border-color:light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43)); - --doorhanger-hover-color:light-dark(rgb(12 12 13), rgb(249 249 250)); - --doorhanger-separator-color:light-dark(rgb(222 222 222), rgb(92 92 97)); - --dialog-button-bg-color:light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97)); - --dialog-button-hover-bg-color:light-dark( - rgb(12 12 13 / 0.3), - rgb(115 115 115) - ); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - - --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(249 249 250); - - --main-color:var(--csstools-light-dark-toggle--0, rgb(12 12 13)); - --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(42 42 46); - --body-bg-color:var(--csstools-light-dark-toggle--1, rgb(212 212 215)); - --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(0 96 223); - --progressBar-color:var(--csstools-light-dark-toggle--2, rgb(10 132 255)); - --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) rgb(40 40 43); - --progressBar-bg-color:var(--csstools-light-dark-toggle--3, rgb(221 221 222)); - --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) rgb(20 68 133); - --progressBar-blend-color:var(--csstools-light-dark-toggle--4, rgb(116 177 239)); - --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) rgb(121 121 123); - --scrollbar-color:var(--csstools-light-dark-toggle--5, auto); - --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(35 35 39); - --scrollbar-bg-color:var(--csstools-light-dark-toggle--6, auto); - --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-bg-color:var(--csstools-light-dark-toggle--7, rgb(0 0 0)); - --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-hover-bg-color:var(--csstools-light-dark-toggle--8, rgb(0 0 0)); - - --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); - - --sidebar-narrow-bg-color:var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); - --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) rgb(50 50 52); - --sidebar-toolbar-bg-color:var(--csstools-light-dark-toggle--10, rgb(245 246 247)); - --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(56 56 61); - --toolbar-bg-color:var(--csstools-light-dark-toggle--11, rgb(249 249 250)); - --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(12 12 13); - --toolbar-border-color:var(--csstools-light-dark-toggle--12, rgb(184 184 184)); - --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) rgb(255 255 255); - --toggled-btn-color:var(--csstools-light-dark-toggle--13, rgb(0 0 0)); - --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) rgb(74 74 79); - --dropdown-btn-bg-color:var(--csstools-light-dark-toggle--14, rgb(215 215 219)); - --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) rgb(250 250 250); - --field-color:var(--csstools-light-dark-toggle--15, rgb(6 6 6)); - --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) rgb(64 64 68); - --field-bg-color:var(--csstools-light-dark-toggle--16, rgb(255 255 255)); - --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) rgb(115 115 115); - --field-border-color:var(--csstools-light-dark-toggle--17, rgb(187 187 188)); - --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --treeitem-color:var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --treeitem-bg-color:var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-hover-color:var(--csstools-light-dark-toggle--20, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-selected-color:var(--csstools-light-dark-toggle--21, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); - --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--22, rgb(0 0 0 / 0.25)); - --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.1); - --thumbnail-hover-color:var(--csstools-light-dark-toggle--23, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.2); - --thumbnail-selected-color:var(--csstools-light-dark-toggle--24, rgb(0 0 0 / 0.2)); - --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) #42414d; - --doorhanger-bg-color:var(--csstools-light-dark-toggle--25, rgb(255 255 255)); - --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(39 39 43); - --doorhanger-border-color:var(--csstools-light-dark-toggle--26, rgb(12 12 13 / 0.2)); - --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) rgb(249 249 250); - --doorhanger-hover-color:var(--csstools-light-dark-toggle--27, rgb(12 12 13)); - --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) rgb(92 92 97); - --doorhanger-separator-color:var(--csstools-light-dark-toggle--28, rgb(222 222 222)); - --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) rgb(92 92 97); - --dialog-button-bg-color:var(--csstools-light-dark-toggle--29, rgb(12 12 13 / 0.1)); - --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(115 115 115); - --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--30, rgb(12 12 13 / 0.3)); + --sidebar-narrow-bg-color: light-dark( + rgb(212 212 215 / 0.9), + rgb(42 42 46 / 0.9) + ); + --sidebar-toolbar-bg-color: light-dark(rgb(245 246 247), rgb(50 50 52)); + --toolbar-bg-color: light-dark(rgb(249 249 250), rgb(56 56 61)); + --toolbar-border-color: light-dark(rgb(184 184 184), rgb(12 12 13)); + --toggled-btn-color: light-dark(rgb(0 0 0), rgb(255 255 255)); + --dropdown-btn-bg-color: light-dark(rgb(215 215 219), rgb(74 74 79)); + --field-color: light-dark(rgb(6 6 6), rgb(250 250 250)); + --field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68)); + --field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115)); + --treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); + --treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15)); + --treeitem-hover-color: light-dark( + rgb(0 0 0 / 0.9), + rgb(255 255 255 / 0.9) + ); + --treeitem-selected-color: light-dark( + rgb(0 0 0 / 0.9), + rgb(255 255 255 / 0.9) + ); + --treeitem-selected-bg-color: light-dark( + rgb(0 0 0 / 0.25), + rgb(255 255 255 / 0.25) + ); + --thumbnail-hover-color: light-dark( + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) + ); + --thumbnail-selected-color: light-dark( + rgb(0 0 0 / 0.2), + rgb(255 255 255 / 0.2) + ); + --doorhanger-bg-color: light-dark(rgb(255 255 255), #42414d); + --doorhanger-border-color: light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43)); + --doorhanger-hover-color: light-dark(rgb(12 12 13), rgb(249 249 250)); + --doorhanger-separator-color: light-dark(rgb(222 222 222), rgb(92 92 97)); + --dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97)); + --dialog-button-hover-bg-color: light-dark( + rgb(12 12 13 / 0.3), + rgb(115 115 115) + ); } } -[dir="rtl"]:root{ - --dir-factor:-1; - --inline-start:right; - --inline-end:left; -} +@supports not (color: light-dark(tan, tan)) { + :root * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) + rgb(249 249 250); -@media screen and (forced-colors: active){ - :root{ - --button-hover-color:Highlight; - --toolbar-icon-opacity:1; - --toolbar-icon-bg-color:ButtonText; - --toolbar-icon-hover-bg-color:ButtonFace; - --toggled-hover-active-btn-color:ButtonText; - --toggled-hover-btn-outline:2px solid ButtonBorder; - --toolbar-border-color:CanvasText; - --toolbar-border-bottom:1px solid var(--toolbar-border-color); - --toolbar-box-shadow:none; - --toggled-btn-color:HighlightText; - --toggled-btn-bg-color:LinkText; - --doorhanger-hover-color:ButtonFace; - --doorhanger-border-color-whcm:1px solid ButtonText; - --doorhanger-triangle-opacity-whcm:0; - --dialog-button-border:1px solid Highlight; - --dialog-button-hover-bg-color:Highlight; - --dialog-button-hover-color:ButtonFace; - --dropdown-btn-border:1px solid ButtonText; - --field-border-color:ButtonText; - --main-color:CanvasText; - --separator-color:GrayText; - --doorhanger-separator-color:GrayText; - --toolbarSidebar-box-shadow:none; - --toolbarSidebar-border-bottom:1px solid var(--toolbar-border-color); + --main-color: var(--csstools-light-dark-toggle--0, rgb(12 12 13)); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) + rgb(42 42 46); + --body-bg-color: var(--csstools-light-dark-toggle--1, rgb(212 212 215)); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) + rgb(0 96 223); + --progressBar-color: var(--csstools-light-dark-toggle--2, rgb(10 132 255)); + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) + rgb(40 40 43); + --progressBar-bg-color: var( + --csstools-light-dark-toggle--3, + rgb(221 221 222) + ); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) + rgb(20 68 133); + --progressBar-blend-color: var( + --csstools-light-dark-toggle--4, + rgb(116 177 239) + ); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) + rgb(121 121 123); + --scrollbar-color: var(--csstools-light-dark-toggle--5, auto); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) + rgb(35 35 39); + --scrollbar-bg-color: var(--csstools-light-dark-toggle--6, auto); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toolbar-icon-bg-color: var(--csstools-light-dark-toggle--7, rgb(0 0 0)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toolbar-icon-hover-bg-color: var( + --csstools-light-dark-toggle--8, + rgb(0 0 0) + ); + + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) + rgb(42 42 46 / 0.9); + + --sidebar-narrow-bg-color: var( + --csstools-light-dark-toggle--9, + rgb(212 212 215 / 0.9) + ); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) + rgb(50 50 52); + --sidebar-toolbar-bg-color: var( + --csstools-light-dark-toggle--10, + rgb(245 246 247) + ); + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) + rgb(56 56 61); + --toolbar-bg-color: var(--csstools-light-dark-toggle--11, rgb(249 249 250)); + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) + rgb(12 12 13); + --toolbar-border-color: var( + --csstools-light-dark-toggle--12, + rgb(184 184 184) + ); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) + rgb(255 255 255); + --toggled-btn-color: var(--csstools-light-dark-toggle--13, rgb(0 0 0)); + --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) + rgb(74 74 79); + --dropdown-btn-bg-color: var( + --csstools-light-dark-toggle--14, + rgb(215 215 219) + ); + --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) + rgb(250 250 250); + --field-color: var(--csstools-light-dark-toggle--15, rgb(6 6 6)); + --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) + rgb(64 64 68); + --field-bg-color: var(--csstools-light-dark-toggle--16, rgb(255 255 255)); + --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) + rgb(115 115 115); + --field-border-color: var( + --csstools-light-dark-toggle--17, + rgb(187 187 188) + ); + --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.8); + --treeitem-color: var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); + --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.15); + --treeitem-bg-color: var( + --csstools-light-dark-toggle--19, + rgb(0 0 0 / 0.15) + ); + --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.9); + --treeitem-hover-color: var( + --csstools-light-dark-toggle--20, + rgb(0 0 0 / 0.9) + ); + --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.9); + --treeitem-selected-color: var( + --csstools-light-dark-toggle--21, + rgb(0 0 0 / 0.9) + ); + --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.25); + --treeitem-selected-bg-color: var( + --csstools-light-dark-toggle--22, + rgb(0 0 0 / 0.25) + ); + --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.1); + --thumbnail-hover-color: var( + --csstools-light-dark-toggle--23, + rgb(0 0 0 / 0.1) + ); + --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) + rgb(255 255 255 / 0.2); + --thumbnail-selected-color: var( + --csstools-light-dark-toggle--24, + rgb(0 0 0 / 0.2) + ); + --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) + #42414d; + --doorhanger-bg-color: var( + --csstools-light-dark-toggle--25, + rgb(255 255 255) + ); + --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) + rgb(39 39 43); + --doorhanger-border-color: var( + --csstools-light-dark-toggle--26, + rgb(12 12 13 / 0.2) + ); + --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) + rgb(249 249 250); + --doorhanger-hover-color: var( + --csstools-light-dark-toggle--27, + rgb(12 12 13) + ); + --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) + rgb(92 92 97); + --doorhanger-separator-color: var( + --csstools-light-dark-toggle--28, + rgb(222 222 222) + ); + --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) + rgb(92 92 97); + --dialog-button-bg-color: var( + --csstools-light-dark-toggle--29, + rgb(12 12 13 / 0.1) + ); + --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) + rgb(115 115 115); + --dialog-button-hover-bg-color: var( + --csstools-light-dark-toggle--30, + rgb(12 12 13 / 0.3) + ); } } -@media screen and (prefers-reduced-motion: reduce){ - :root{ - --sidebar-transition-duration:0; +[dir='rtl']:root { + --dir-factor: -1; + --inline-start: right; + --inline-end: left; +} + +@media screen and (forced-colors: active) { + :root { + --button-hover-color: Highlight; + --toolbar-icon-opacity: 1; + --toolbar-icon-bg-color: ButtonText; + --toolbar-icon-hover-bg-color: ButtonFace; + --toggled-hover-active-btn-color: ButtonText; + --toggled-hover-btn-outline: 2px solid ButtonBorder; + --toolbar-border-color: CanvasText; + --toolbar-border-bottom: 1px solid var(--toolbar-border-color); + --toolbar-box-shadow: none; + --toggled-btn-color: HighlightText; + --toggled-btn-bg-color: LinkText; + --doorhanger-hover-color: ButtonFace; + --doorhanger-border-color-whcm: 1px solid ButtonText; + --doorhanger-triangle-opacity-whcm: 0; + --dialog-button-border: 1px solid Highlight; + --dialog-button-hover-bg-color: Highlight; + --dialog-button-hover-color: ButtonFace; + --dropdown-btn-border: 1px solid ButtonText; + --field-border-color: ButtonText; + --main-color: CanvasText; + --separator-color: GrayText; + --doorhanger-separator-color: GrayText; + --toolbarSidebar-box-shadow: none; + --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color); } } -@keyframes progressIndeterminate{ - 0%{ - transform:translateX(calc(-142px * var(--dir-factor))); - } - - 100%{ - transform:translateX(0); +@media screen and (prefers-reduced-motion: reduce) { + :root { + --sidebar-transition-duration: 0; } } -html[data-toolbar-density="compact"]{ - --toolbar-height:30px; +@keyframes progressIndeterminate { + 0% { + transform: translateX(calc(-142px * var(--dir-factor))); } -html[data-toolbar-density="touch"]{ - --toolbar-height:44px; + 100% { + transform: translateX(0); } +} + +html[data-toolbar-density='compact'] { + --toolbar-height: 30px; +} + +html[data-toolbar-density='touch'] { + --toolbar-height: 44px; +} html, -body{ - height:100%; - width:100%; +body { + height: 100%; + width: 100%; } -body{ - margin:0; - background-color:var(--body-bg-color); - scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color); +body { + margin: 0; + background-color: var(--body-bg-color); + scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); } -body.wait::before{ - content:""; - position:fixed; - width:100%; - height:100%; - z-index:100000; - cursor:wait; - } -.visuallyHidden{ - position:absolute; - top:0; - left:0; - border:0; - margin:0; - padding:0; - width:0; - height:0; - overflow:hidden; - white-space:nowrap; - font-size:0; +body.wait::before { + content: ''; + position: fixed; + width: 100%; + height: 100%; + z-index: 100000; + cursor: wait; +} +.visuallyHidden { + position: absolute; + top: 0; + left: 0; + border: 0; + margin: 0; + padding: 0; + width: 0; + height: 0; + overflow: hidden; + white-space: nowrap; + font-size: 0; } .hidden, -[hidden]{ - display:none !important; +[hidden] { + display: none !important; } -#viewerContainer.pdfPresentationMode:fullscreen{ - top:0; - background-color:rgb(0 0 0); - width:100%; - height:100%; - overflow:hidden; - cursor:none; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; +#viewerContainer.pdfPresentationMode:fullscreen { + top: 0; + background-color: rgb(0 0 0); + width: 100%; + height: 100%; + overflow: hidden; + cursor: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -.pdfPresentationMode:fullscreen section:not([data-internal-link]){ - pointer-events:none; +.pdfPresentationMode:fullscreen section:not([data-internal-link]) { + pointer-events: none; } -.pdfPresentationMode:fullscreen .textLayer span{ - cursor:none; +.pdfPresentationMode:fullscreen .textLayer span { + cursor: none; } .pdfPresentationMode.pdfPresentationModeControls > *, -.pdfPresentationMode.pdfPresentationModeControls .textLayer span{ - cursor:default; +.pdfPresentationMode.pdfPresentationModeControls .textLayer span { + cursor: default; } -#outerContainer{ - width:100%; - height:100%; - position:relative; - margin:0; +#outerContainer { + width: 100%; + height: 100%; + position: relative; + margin: 0; } -#sidebarContainer{ - position:absolute; - inset-block:var(--toolbar-height) 0; - inset-inline-start:calc(-1 * var(--sidebar-width)); - width:var(--sidebar-width); - visibility:hidden; - z-index:1; - font:message-box; - border-top:1px solid transparent; - border-inline-end:var(--doorhanger-border-color-whcm); - transition-property:inset-inline-start; - transition-duration:var(--sidebar-transition-duration); - transition-timing-function:var(--sidebar-transition-timing-function); +#sidebarContainer { + position: absolute; + inset-block: var(--toolbar-height) 0; + inset-inline-start: calc(-1 * var(--sidebar-width)); + width: var(--sidebar-width); + visibility: hidden; + z-index: 1; + font: message-box; + border-top: 1px solid transparent; + border-inline-end: var(--doorhanger-border-color-whcm); + transition-property: inset-inline-start; + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); } -#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{ - visibility:visible; +#outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer { + visibility: visible; } -#outerContainer.sidebarOpen #sidebarContainer{ - inset-inline-start:0; +#outerContainer.sidebarOpen #sidebarContainer { + inset-inline-start: 0; } -#mainContainer{ - position:absolute; - inset:0; - min-width:350px; - margin:0; - display:flex; - flex-direction:column; +#mainContainer { + position: absolute; + inset: 0; + min-width: 350px; + margin: 0; + display: flex; + flex-direction: column; } -#sidebarContent{ - inset-block:var(--toolbar-height) 0; - inset-inline-start:0; - overflow:auto; - position:absolute; - width:100%; - box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25); +#sidebarContent { + inset-block: var(--toolbar-height) 0; + inset-inline-start: 0; + overflow: auto; + position: absolute; + width: 100%; + box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25); } -#viewerContainer{ - overflow:auto; - position:absolute; - inset:var(--toolbar-height) 0 0; - outline:none; - z-index:0; +#viewerContainer { + overflow: auto; + position: absolute; + inset: var(--toolbar-height) 0 0; + outline: none; + z-index: 0; } -#viewerContainer:not(.pdfPresentationMode){ - transition-duration:var(--sidebar-transition-duration); - transition-timing-function:var(--sidebar-transition-timing-function); +#viewerContainer:not(.pdfPresentationMode) { + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); } -#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){ - inset-inline-start:var(--sidebar-width); - transition-property:inset-inline-start; +#outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) { + inset-inline-start: var(--sidebar-width); + transition-property: inset-inline-start; } -#sidebarContainer :is(input, button, select){ - font:message-box; +#sidebarContainer :is(input, button, select) { + font: message-box; } -.toolbar{ - z-index:2; +.toolbar { + z-index: 2; } -#toolbarSidebar{ - width:100%; - height:var(--toolbar-height); - background-color:var(--sidebar-toolbar-bg-color); - box-shadow:var(--toolbarSidebar-box-shadow); - border-bottom:var(--toolbarSidebar-border-bottom); - padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); - justify-content:space-between; +#toolbarSidebar { + width: 100%; + height: var(--toolbar-height); + background-color: var(--sidebar-toolbar-bg-color); + box-shadow: var(--toolbarSidebar-box-shadow); + border-bottom: var(--toolbarSidebar-border-bottom); + padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); + justify-content: space-between; } -#toolbarSidebar #toolbarSidebarLeft{ - width:auto; - height:100%; - } - -:is(#toolbarSidebar #toolbarSidebarLeft) #viewThumbnail::before{ - -webkit-mask-image:var(--toolbarButton-viewThumbnail-icon); - mask-image:var(--toolbarButton-viewThumbnail-icon); - } - -:is(#toolbarSidebar #toolbarSidebarLeft) #viewOutline::before{ - -webkit-mask-image:var(--toolbarButton-viewOutline-icon); - mask-image:var(--toolbarButton-viewOutline-icon); - transform:scaleX(var(--dir-factor)); - } - -:is(#toolbarSidebar #toolbarSidebarLeft) #viewAttachments::before{ - -webkit-mask-image:var(--toolbarButton-viewAttachments-icon); - mask-image:var(--toolbarButton-viewAttachments-icon); - } - -:is(#toolbarSidebar #toolbarSidebarLeft) #viewLayers::before{ - -webkit-mask-image:var(--toolbarButton-viewLayers-icon); - mask-image:var(--toolbarButton-viewLayers-icon); - } - -#toolbarSidebar #toolbarSidebarRight{ - width:auto; - height:100%; - padding-inline-end:2px; - } - -#sidebarResizer{ - position:absolute; - inset-block:0; - inset-inline-end:-6px; - width:6px; - z-index:200; - cursor:ew-resize; +#toolbarSidebar #toolbarSidebarLeft { + width: auto; + height: 100%; } -#outerContainer.sidebarOpen #loadingBar{ - inset-inline-start:var(--sidebar-width); +:is(#toolbarSidebar #toolbarSidebarLeft) #viewThumbnail::before { + -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon); + mask-image: var(--toolbarButton-viewThumbnail-icon); +} + +:is(#toolbarSidebar #toolbarSidebarLeft) #viewOutline::before { + -webkit-mask-image: var(--toolbarButton-viewOutline-icon); + mask-image: var(--toolbarButton-viewOutline-icon); + transform: scaleX(var(--dir-factor)); +} + +:is(#toolbarSidebar #toolbarSidebarLeft) #viewAttachments::before { + -webkit-mask-image: var(--toolbarButton-viewAttachments-icon); + mask-image: var(--toolbarButton-viewAttachments-icon); +} + +:is(#toolbarSidebar #toolbarSidebarLeft) #viewLayers::before { + -webkit-mask-image: var(--toolbarButton-viewLayers-icon); + mask-image: var(--toolbarButton-viewLayers-icon); +} + +#toolbarSidebar #toolbarSidebarRight { + width: auto; + height: 100%; + padding-inline-end: 2px; +} + +#sidebarResizer { + position: absolute; + inset-block: 0; + inset-inline-end: -6px; + width: 6px; + z-index: 200; + cursor: ew-resize; +} + +#outerContainer.sidebarOpen #loadingBar { + inset-inline-start: var(--sidebar-width); } #outerContainer.sidebarResizing - :is(#sidebarContainer, #viewerContainer, #loadingBar){ - transition-duration:0s; + :is(#sidebarContainer, #viewerContainer, #loadingBar) { + transition-duration: 0s; } .doorHanger, -.doorHangerRight{ - border-radius:2px; - box-shadow:0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color); - border:var(--doorhanger-border-color-whcm); - background-color:var(--doorhanger-bg-color); - inset-block-start:calc(100% + var(--doorhanger-height) - 2px); +.doorHangerRight { + border-radius: 2px; + box-shadow: + 0 1px 5px var(--doorhanger-border-color), + 0 0 0 1px var(--doorhanger-border-color); + border: var(--doorhanger-border-color-whcm); + background-color: var(--doorhanger-bg-color); + inset-block-start: calc(100% + var(--doorhanger-height) - 2px); } -:is(.doorHanger,.doorHangerRight)::after,:is(.doorHanger,.doorHangerRight)::before{ - bottom:100%; - border-style:solid; - border-color:transparent; - content:""; - height:0; - width:0; - position:absolute; - pointer-events:none; - opacity:var(--doorhanger-triangle-opacity-whcm); - } - -:is(.doorHanger,.doorHangerRight)::before{ - border-width:calc(var(--doorhanger-height) + 2px); - border-bottom-color:var(--doorhanger-border-color); - } - -:is(.doorHanger,.doorHangerRight)::after{ - border-width:var(--doorhanger-height); - } - -.doorHangerRight{ - inset-inline-end:calc(50% - var(--doorhanger-height) - 1px); +:is(.doorHanger, .doorHangerRight)::after, +:is(.doorHanger, .doorHangerRight)::before { + bottom: 100%; + border-style: solid; + border-color: transparent; + content: ''; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + opacity: var(--doorhanger-triangle-opacity-whcm); } -.doorHangerRight::before{ - inset-inline-end:-1px; - } - -.doorHangerRight::after{ - border-bottom-color:var(--doorhanger-bg-color); - inset-inline-end:1px; - } - -.doorHanger{ - inset-inline-start:calc(50% - var(--doorhanger-height) - 1px); +:is(.doorHanger, .doorHangerRight)::before { + border-width: calc(var(--doorhanger-height) + 2px); + border-bottom-color: var(--doorhanger-border-color); } -.doorHanger::before{ - inset-inline-start:-1px; - } - -.doorHanger::after{ - border-bottom-color:var(--toolbar-bg-color); - inset-inline-start:1px; - } - -.dialogButton{ - border:none; - background:none; - width:28px; - height:28px; - outline:none; +:is(.doorHanger, .doorHangerRight)::after { + border-width: var(--doorhanger-height); } -.dialogButton:is(:hover, :focus-visible){ - background-color:var(--dialog-button-hover-bg-color); +.doorHangerRight { + inset-inline-end: calc(50% - var(--doorhanger-height) - 1px); } -.dialogButton:is(:hover, :focus-visible) > span{ - color:var(--dialog-button-hover-color); +.doorHangerRight::before { + inset-inline-end: -1px; } -.splitToolbarButtonSeparator{ - float:var(--inline-start); - width:0; - height:62%; - border-left:1px solid var(--separator-color); - border-right:none; +.doorHangerRight::after { + border-bottom-color: var(--doorhanger-bg-color); + inset-inline-end: 1px; } -.dialogButton{ - min-width:16px; - margin:2px 1px; - padding:2px 6px 0; - border:none; - border-radius:2px; - color:var(--main-color); - font-size:12px; - line-height:14px; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - cursor:default; - box-sizing:border-box; +.doorHanger { + inset-inline-start: calc(50% - var(--doorhanger-height) - 1px); } -.treeItemToggler::before{ - position:absolute; - display:inline-block; - width:16px; - height:16px; - - content:""; - background-color:var(--toolbar-icon-bg-color); - -webkit-mask-size:cover; - mask-size:cover; +.doorHanger::before { + inset-inline-start: -1px; } -#sidebarToggleButton::before{ - -webkit-mask-image:var(--toolbarButton-sidebarToggle-icon); - mask-image:var(--toolbarButton-sidebarToggle-icon); - transform:scaleX(var(--dir-factor)); +.doorHanger::after { + border-bottom-color: var(--toolbar-bg-color); + inset-inline-start: 1px; } -#secondaryToolbarToggleButton::before{ - -webkit-mask-image:var(--toolbarButton-secondaryToolbarToggle-icon); - mask-image:var(--toolbarButton-secondaryToolbarToggle-icon); - transform:scaleX(var(--dir-factor)); +.dialogButton { + border: none; + background: none; + width: 28px; + height: 28px; + outline: none; } -#previous::before{ - -webkit-mask-image:var(--toolbarButton-pageUp-icon); - mask-image:var(--toolbarButton-pageUp-icon); +.dialogButton:is(:hover, :focus-visible) { + background-color: var(--dialog-button-hover-bg-color); } -#next::before{ - -webkit-mask-image:var(--toolbarButton-pageDown-icon); - mask-image:var(--toolbarButton-pageDown-icon); +.dialogButton:is(:hover, :focus-visible) > span { + color: var(--dialog-button-hover-color); } -#zoomOutButton::before{ - -webkit-mask-image:var(--toolbarButton-zoomOut-icon); - mask-image:var(--toolbarButton-zoomOut-icon); +.splitToolbarButtonSeparator { + float: var(--inline-start); + width: 0; + height: 62%; + border-left: 1px solid var(--separator-color); + border-right: none; } -#zoomInButton::before{ - -webkit-mask-image:var(--toolbarButton-zoomIn-icon); - mask-image:var(--toolbarButton-zoomIn-icon); +.dialogButton { + min-width: 16px; + margin: 2px 1px; + padding: 2px 6px 0; + border: none; + border-radius: 2px; + color: var(--main-color); + font-size: 12px; + line-height: 14px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; } -#editorCommentButton::before{ - -webkit-mask-image:var(--toolbarButton-editorComment-icon); - mask-image:var(--toolbarButton-editorComment-icon); - transform:scaleX(var(--dir-factor)); +.treeItemToggler::before { + position: absolute; + display: inline-block; + width: 16px; + height: 16px; + + content: ''; + background-color: var(--toolbar-icon-bg-color); + -webkit-mask-size: cover; + mask-size: cover; } -#editorFreeTextButton::before{ - -webkit-mask-image:var(--toolbarButton-editorFreeText-icon); - mask-image:var(--toolbarButton-editorFreeText-icon); +#sidebarToggleButton::before { + -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon); + mask-image: var(--toolbarButton-sidebarToggle-icon); + transform: scaleX(var(--dir-factor)); } -#editorHighlightButton::before{ - -webkit-mask-image:var(--toolbarButton-editorHighlight-icon); - mask-image:var(--toolbarButton-editorHighlight-icon); +#secondaryToolbarToggleButton::before { + -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); + mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); + transform: scaleX(var(--dir-factor)); } -#editorInkButton::before{ - -webkit-mask-image:var(--toolbarButton-editorInk-icon); - mask-image:var(--toolbarButton-editorInk-icon); +#previous::before { + -webkit-mask-image: var(--toolbarButton-pageUp-icon); + mask-image: var(--toolbarButton-pageUp-icon); } -#editorStampButton::before{ - -webkit-mask-image:var(--toolbarButton-editorStamp-icon); - mask-image:var(--toolbarButton-editorStamp-icon); +#next::before { + -webkit-mask-image: var(--toolbarButton-pageDown-icon); + mask-image: var(--toolbarButton-pageDown-icon); } -#editorSignatureButton::before{ - -webkit-mask-image:var(--toolbarButton-editorSignature-icon); - mask-image:var(--toolbarButton-editorSignature-icon); +#zoomOutButton::before { + -webkit-mask-image: var(--toolbarButton-zoomOut-icon); + mask-image: var(--toolbarButton-zoomOut-icon); } -#printButton::before{ - -webkit-mask-image:var(--toolbarButton-print-icon); - mask-image:var(--toolbarButton-print-icon); +#zoomInButton::before { + -webkit-mask-image: var(--toolbarButton-zoomIn-icon); + mask-image: var(--toolbarButton-zoomIn-icon); } -#downloadButton::before{ - -webkit-mask-image:var(--toolbarButton-download-icon); - mask-image:var(--toolbarButton-download-icon); +#editorCommentButton::before { + -webkit-mask-image: var(--toolbarButton-editorComment-icon); + mask-image: var(--toolbarButton-editorComment-icon); + transform: scaleX(var(--dir-factor)); } -#currentOutlineItem::before{ - -webkit-mask-image:var(--toolbarButton-currentOutlineItem-icon); - mask-image:var(--toolbarButton-currentOutlineItem-icon); - transform:scaleX(var(--dir-factor)); +#editorFreeTextButton::before { + -webkit-mask-image: var(--toolbarButton-editorFreeText-icon); + mask-image: var(--toolbarButton-editorFreeText-icon); } -#viewFindButton::before{ - -webkit-mask-image:var(--toolbarButton-search-icon); - mask-image:var(--toolbarButton-search-icon); +#editorHighlightButton::before { + -webkit-mask-image: var(--toolbarButton-editorHighlight-icon); + mask-image: var(--toolbarButton-editorHighlight-icon); } -.pdfSidebarNotification::after{ - position:absolute; - display:inline-block; - top:2px; - inset-inline-end:2px; - content:""; - background-color:rgb(112 219 85); - height:9px; - width:9px; - border-radius:50%; +#editorInkButton::before { + -webkit-mask-image: var(--toolbarButton-editorInk-icon); + mask-image: var(--toolbarButton-editorInk-icon); } -.verticalToolbarSeparator{ - display:block; - margin-inline:2px; - width:0; - height:80%; - border-left:1px solid var(--separator-color); - border-right:none; - box-sizing:border-box; +#editorStampButton::before { + -webkit-mask-image: var(--toolbarButton-editorStamp-icon); + mask-image: var(--toolbarButton-editorStamp-icon); } -.horizontalToolbarSeparator{ - display:block; - margin:6px 0; - border-top:1px solid var(--doorhanger-separator-color); - border-bottom:none; - height:0; - width:100%; +#editorSignatureButton::before { + -webkit-mask-image: var(--toolbarButton-editorSignature-icon); + mask-image: var(--toolbarButton-editorSignature-icon); } -.toggleButton{ - display:inline; +#printButton::before { + -webkit-mask-image: var(--toolbarButton-print-icon); + mask-image: var(--toolbarButton-print-icon); } -.toggleButton:has( > input:checked){ - color:var(--toggled-btn-color); - background-color:var(--toggled-btn-bg-color); - } - -.toggleButton:is(:hover,:has( > input:focus-visible)){ - color:var(--toggled-btn-color); - background-color:var(--button-hover-color); - } - -.toggleButton > input{ - position:absolute; - top:50%; - left:50%; - opacity:0; - width:0; - height:0; - } - -.toolbarField{ - padding:4px 7px; - margin:3px 0; - border-radius:2px; - background-color:var(--field-bg-color); - background-clip:padding-box; - border:1px solid var(--field-border-color); - box-shadow:none; - color:var(--field-color); - font-size:12px; - line-height:16px; - outline:none; +#downloadButton::before { + -webkit-mask-image: var(--toolbarButton-download-icon); + mask-image: var(--toolbarButton-download-icon); } -.toolbarField:focus{ - border-color:#0a84ff; - } - -#pageNumber{ - -moz-appearance:textfield; - text-align:end; - width:40px; - background-size:0 0; - transition-property:none; +#currentOutlineItem::before { + -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon); + mask-image: var(--toolbarButton-currentOutlineItem-icon); + transform: scaleX(var(--dir-factor)); } -#pageNumber::-webkit-inner-spin-button{ - -webkit-appearance:none; - } - -.loadingInput:has( > .loading:is(#pageNumber))::after{ - display:inline; - visibility:visible; - - transition-property:visibility; - transition-delay:var(--loading-icon-delay); - } - -.loadingInput{ - position:relative; +#viewFindButton::before { + -webkit-mask-image: var(--toolbarButton-search-icon); + mask-image: var(--toolbarButton-search-icon); } -.loadingInput::after{ - position:absolute; - visibility:hidden; - display:none; - width:var(--icon-size); - height:var(--icon-size); +.pdfSidebarNotification::after { + position: absolute; + display: inline-block; + top: 2px; + inset-inline-end: 2px; + content: ''; + background-color: rgb(112 219 85); + height: 9px; + width: 9px; + border-radius: 50%; +} - content:""; - background-color:var(--toolbar-icon-bg-color); - -webkit-mask-size:cover; - mask-size:cover; - -webkit-mask-image:var(--loading-icon); - mask-image:var(--loading-icon); - } +.verticalToolbarSeparator { + display: block; + margin-inline: 2px; + width: 0; + height: 80%; + border-left: 1px solid var(--separator-color); + border-right: none; + box-sizing: border-box; +} -.loadingInput.start::after{ - inset-inline-start:4px; - } +.horizontalToolbarSeparator { + display: block; + margin: 6px 0; + border-top: 1px solid var(--doorhanger-separator-color); + border-bottom: none; + height: 0; + width: 100%; +} -.loadingInput.end::after{ - inset-inline-end:4px; - } +.toggleButton { + display: inline; +} + +.toggleButton:has(> input:checked) { + color: var(--toggled-btn-color); + background-color: var(--toggled-btn-bg-color); +} + +.toggleButton:is(:hover, :has(> input:focus-visible)) { + color: var(--toggled-btn-color); + background-color: var(--button-hover-color); +} + +.toggleButton > input { + position: absolute; + top: 50%; + left: 50%; + opacity: 0; + width: 0; + height: 0; +} + +.toolbarField { + padding: 4px 7px; + margin: 3px 0; + border-radius: 2px; + background-color: var(--field-bg-color); + background-clip: padding-box; + border: 1px solid var(--field-border-color); + box-shadow: none; + color: var(--field-color); + font-size: 12px; + line-height: 16px; + outline: none; +} + +.toolbarField:focus { + border-color: #0a84ff; +} + +#pageNumber { + -moz-appearance: textfield; + text-align: end; + width: 40px; + background-size: 0 0; + transition-property: none; +} + +#pageNumber::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +.loadingInput:has(> .loading:is(#pageNumber))::after { + display: inline; + visibility: visible; + + transition-property: visibility; + transition-delay: var(--loading-icon-delay); +} + +.loadingInput { + position: relative; +} + +.loadingInput::after { + position: absolute; + visibility: hidden; + display: none; + width: var(--icon-size); + height: var(--icon-size); + + content: ''; + background-color: var(--toolbar-icon-bg-color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--loading-icon); + mask-image: var(--loading-icon); +} + +.loadingInput.start::after { + inset-inline-start: 4px; +} + +.loadingInput.end::after { + inset-inline-end: 4px; +} #thumbnailView, #outlineView, #attachmentsView, -#layersView{ - position:absolute; - width:calc(100% - 8px); - inset-block:0; - padding:4px 4px 0; - overflow:auto; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; +#layersView { + position: absolute; + width: calc(100% - 8px); + inset-block: 0; + padding: 4px 4px 0; + overflow: auto; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -#thumbnailView{ - width:calc(100% - 60px); - padding:10px 30px 0; +#thumbnailView { + width: calc(100% - 60px); + padding: 10px 30px 0; } -#thumbnailView > a:is(:active, :focus){ - outline:0; +#thumbnailView > a:is(:active, :focus) { + outline: 0; } -.thumbnail{ - --thumbnail-width:0; - --thumbnail-height:0; +.thumbnail { + --thumbnail-width: 0; + --thumbnail-height: 0; - float:var(--inline-start); - width:var(--thumbnail-width); - height:var(--thumbnail-height); - margin:0 10px 5px; - padding:1px; - border:7px solid transparent; - border-radius:2px; + float: var(--inline-start); + width: var(--thumbnail-width); + height: var(--thumbnail-height); + margin: 0 10px 5px; + padding: 1px; + border: 7px solid transparent; + border-radius: 2px; } -#thumbnailView > a:last-of-type > .thumbnail{ - margin-bottom:10px; +#thumbnailView > a:last-of-type > .thumbnail { + margin-bottom: 10px; } a:focus > .thumbnail, -.thumbnail:hover{ - border-color:var(--thumbnail-hover-color); +.thumbnail:hover { + border-color: var(--thumbnail-hover-color); } -.thumbnail.selected{ - border-color:var(--thumbnail-selected-color) !important; +.thumbnail.selected { + border-color: var(--thumbnail-selected-color) !important; } -.thumbnailImage{ - width:var(--thumbnail-width); - height:var(--thumbnail-height); - opacity:0.9; +.thumbnailImage { + width: var(--thumbnail-width); + height: var(--thumbnail-height); + opacity: 0.9; } a:focus > .thumbnail > .thumbnailImage, -.thumbnail:hover > .thumbnailImage{ - opacity:0.95; +.thumbnail:hover > .thumbnailImage { + opacity: 0.95; } -.thumbnail.selected > .thumbnailImage{ - opacity:1 !important; +.thumbnail.selected > .thumbnailImage { + opacity: 1 !important; } -.thumbnail:not([data-loaded]) > .thumbnailImage{ - width:calc(var(--thumbnail-width) - 2px); - height:calc(var(--thumbnail-height) - 2px); - border:1px dashed rgb(132 132 132); +.thumbnail:not([data-loaded]) > .thumbnailImage { + width: calc(var(--thumbnail-width) - 2px); + height: calc(var(--thumbnail-height) - 2px); + border: 1px dashed rgb(132 132 132); } .treeWithDeepNesting > .treeItem, -.treeItem > .treeItems{ - margin-inline-start:20px; +.treeItem > .treeItems { + margin-inline-start: 20px; } -.treeItem > a{ - text-decoration:none; - display:inline-block; - min-width:calc(100% - 4px); - height:auto; - margin-bottom:1px; - padding:2px 0 5px; - padding-inline-start:4px; - border-radius:2px; - color:var(--treeitem-color); - font-size:13px; - line-height:15px; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - white-space:normal; - cursor:pointer; +.treeItem > a { + text-decoration: none; + display: inline-block; + min-width: calc(100% - 4px); + height: auto; + margin-bottom: 1px; + padding: 2px 0 5px; + padding-inline-start: 4px; + border-radius: 2px; + color: var(--treeitem-color); + font-size: 13px; + line-height: 15px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + white-space: normal; + cursor: pointer; } -#layersView .treeItem > a *{ - cursor:pointer; +#layersView .treeItem > a * { + cursor: pointer; } -#layersView .treeItem > a > label{ - padding-inline-start:4px; +#layersView .treeItem > a > label { + padding-inline-start: 4px; } -#layersView .treeItem > a > label > input{ - float:var(--inline-start); - margin-top:1px; +#layersView .treeItem > a > label > input { + float: var(--inline-start); + margin-top: 1px; } -.treeItemToggler{ - position:relative; - float:var(--inline-start); - height:0; - width:0; - color:rgb(255 255 255 / 0.5); +.treeItemToggler { + position: relative; + float: var(--inline-start); + height: 0; + width: 0; + color: rgb(255 255 255 / 0.5); } -.treeItemToggler::before{ - inset-inline-end:4px; - -webkit-mask-image:var(--treeitem-expanded-icon); - mask-image:var(--treeitem-expanded-icon); +.treeItemToggler::before { + inset-inline-end: 4px; + -webkit-mask-image: var(--treeitem-expanded-icon); + mask-image: var(--treeitem-expanded-icon); } -.treeItemToggler.treeItemsHidden::before{ - -webkit-mask-image:var(--treeitem-collapsed-icon); - mask-image:var(--treeitem-collapsed-icon); - transform:scaleX(var(--dir-factor)); +.treeItemToggler.treeItemsHidden::before { + -webkit-mask-image: var(--treeitem-collapsed-icon); + mask-image: var(--treeitem-collapsed-icon); + transform: scaleX(var(--dir-factor)); } -.treeItemToggler.treeItemsHidden ~ .treeItems{ - display:none; +.treeItemToggler.treeItemsHidden ~ .treeItems { + display: none; } -.treeItem.selected > a{ - background-color:var(--treeitem-selected-bg-color); - color:var(--treeitem-selected-color); +.treeItem.selected > a { + background-color: var(--treeitem-selected-bg-color); + color: var(--treeitem-selected-color); } .treeItemToggler:hover, .treeItemToggler:hover + a, .treeItemToggler:hover ~ .treeItems, -.treeItem > a:hover{ - background-color:var(--treeitem-bg-color); - background-clip:padding-box; - border-radius:2px; - color:var(--treeitem-hover-color); +.treeItem > a:hover { + background-color: var(--treeitem-bg-color); + background-clip: padding-box; + border-radius: 2px; + color: var(--treeitem-hover-color); } -#outlineOptionsContainer{ - display:none; +#outlineOptionsContainer { + display: none; } -#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{ - display:inline flex; - } - -.dialogButton{ - width:auto; - margin:3px 4px 2px !important; - padding:2px 11px; - color:var(--main-color); - background-color:var(--dialog-button-bg-color); - border:var(--dialog-button-border) !important; +#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer { + display: inline flex; } -dialog{ - margin:auto; - padding:15px; - border-spacing:4px; - color:var(--main-color); - font:message-box; - font-size:12px; - line-height:14px; - background-color:var(--doorhanger-bg-color); - border:1px solid rgb(0 0 0 / 0.5); - border-radius:4px; - box-shadow:0 1px 4px rgb(0 0 0 / 0.3); +.dialogButton { + width: auto; + margin: 3px 4px 2px !important; + padding: 2px 11px; + color: var(--main-color); + background-color: var(--dialog-button-bg-color); + border: var(--dialog-button-border) !important; } -dialog::backdrop{ - background-color:rgb(0 0 0 / 0.2); +dialog { + margin: auto; + padding: 15px; + border-spacing: 4px; + color: var(--main-color); + font: message-box; + font-size: 12px; + line-height: 14px; + background-color: var(--doorhanger-bg-color); + border: 1px solid rgb(0 0 0 / 0.5); + border-radius: 4px; + box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); } -dialog > .row{ - display:table-row; +dialog::backdrop { + background-color: rgb(0 0 0 / 0.2); } -dialog > .row > *{ - display:table-cell; +dialog > .row { + display: table-row; } -dialog .toolbarField{ - margin:5px 0; +dialog > .row > * { + display: table-cell; } -dialog .separator{ - display:block; - margin:4px 0; - height:0; - width:100%; - border-top:1px solid var(--separator-color); - border-bottom:none; +dialog .toolbarField { + margin: 5px 0; } -dialog .buttonRow{ - text-align:center; - vertical-align:middle; +dialog .separator { + display: block; + margin: 4px 0; + height: 0; + width: 100%; + border-top: 1px solid var(--separator-color); + border-bottom: none; } -dialog :link{ - color:rgb(255 255 255); +dialog .buttonRow { + text-align: center; + vertical-align: middle; } -#passwordDialog{ - text-align:center; +dialog :link { + color: rgb(255 255 255); } -#passwordDialog .toolbarField{ - width:200px; +#passwordDialog { + text-align: center; } -#documentPropertiesDialog{ - text-align:left; +#passwordDialog .toolbarField { + width: 200px; } -#documentPropertiesDialog .row > *{ - min-width:100px; - text-align:start; +#documentPropertiesDialog { + text-align: left; } -#documentPropertiesDialog .row > span{ - width:125px; - word-wrap:break-word; +#documentPropertiesDialog .row > * { + min-width: 100px; + text-align: start; } -#documentPropertiesDialog .row > p{ - max-width:225px; - word-wrap:break-word; +#documentPropertiesDialog .row > span { + width: 125px; + word-wrap: break-word; } -#documentPropertiesDialog .buttonRow{ - margin-top:10px; +#documentPropertiesDialog .row > p { + max-width: 225px; + word-wrap: break-word; } -.grab-to-pan-grab{ - cursor:grab !important; +#documentPropertiesDialog .buttonRow { + margin-top: 10px; +} + +.grab-to-pan-grab { + cursor: grab !important; } .grab-to-pan-grab - *:not(input):not(textarea):not(button):not(select):not(:link){ - cursor:inherit !important; + *:not(input):not(textarea):not(button):not(select):not(:link) { + cursor: inherit !important; } .grab-to-pan-grab:active, -.grab-to-pan-grabbing{ - cursor:grabbing !important; +.grab-to-pan-grabbing { + cursor: grabbing !important; } -.grab-to-pan-grabbing{ - position:fixed; - background:rgb(0 0 0 / 0); - display:block; - inset:0; - overflow:hidden; - z-index:50000; +.grab-to-pan-grabbing { + position: fixed; + background: rgb(0 0 0 / 0); + display: block; + inset: 0; + overflow: hidden; + z-index: 50000; } -.toolbarButton{ - height:100%; - aspect-ratio:1; - display:flex; - align-items:center; - justify-content:center; - background:none; - border:none; - color:var(--main-color); - outline:none; - border-radius:2px; - box-sizing:border-box; - font:message-box; - flex:none; - position:relative; - padding:0; +.toolbarButton { + height: 100%; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--main-color); + outline: none; + border-radius: 2px; + box-sizing: border-box; + font: message-box; + flex: none; + position: relative; + padding: 0; } -.toolbarButton > span{ - display:inline-block; - width:0; - height:0; - overflow:hidden; - } - -.toolbarButton::before{ - opacity:var(--toolbar-icon-opacity); - display:inline-block; - width:var(--icon-size); - height:var(--icon-size); - content:""; - background-color:var(--toolbar-icon-bg-color); - -webkit-mask-size:cover; - mask-size:cover; - -webkit-mask-position:center; - mask-position:center; - } - -.toolbarButton.toggled{ - background-color:var(--toggled-btn-bg-color); - color:var(--toggled-btn-color); - } - -.toolbarButton.toggled::before{ - background-color:var(--toggled-btn-color); - } - -.toolbarButton.toggled:hover{ - outline:var(--toggled-hover-btn-outline) !important; - } - -.toolbarButton.toggled:hover:active{ - background-color:var(--toggled-hover-active-btn-color); - } - -.toolbarButton:is(:hover,:focus-visible){ - background-color:var(--button-hover-color); - } - -.toolbarButton:is(:hover,:focus-visible)::before{ - background-color:var(--toolbar-icon-hover-bg-color); - } - -.toolbarButton:is([disabled="disabled"],[disabled]){ - opacity:0.5; - pointer-events:none; - } - -.toolbarButton.labeled{ - width:100%; - min-height:var(--menuitem-height); - justify-content:flex-start; - gap:8px; - padding-inline-start:12px; - aspect-ratio:unset; - text-align:start; - white-space:normal; - cursor:default; - } - -.toolbarButton.labeled:is(a){ - text-decoration:none; - } - -.toolbarButton.labeled[href="#"]:is(a){ - opacity:0.5; - pointer-events:none; - } - -.toolbarButton.labeled::before{ - opacity:var(--doorhanger-icon-opacity); - } - -.toolbarButton.labeled:is(:hover,:focus-visible){ - color:var(--doorhanger-hover-color); - } - -.toolbarButton.labeled > span{ - display:inline-block; - width:-moz-max-content; - width:max-content; - height:auto; - } - -.toolbarButtonWithContainer{ - height:100%; - aspect-ratio:1; - display:inline-block; - position:relative; - flex:none; +.toolbarButton > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; } -.toolbarButtonWithContainer > .toolbarButton{ - width:100%; - height:100%; - } - -.toolbarButtonWithContainer .menu{ - padding-block:5px; - } - -.toolbarButtonWithContainer .menuContainer{ - height:auto; - max-height:calc( - var(--viewer-container-height) - var(--toolbar-height) - - var(--doorhanger-height) - ); - display:flex; - flex-direction:column; - box-sizing:border-box; - overflow-y:auto; - } - -.toolbarButtonWithContainer .editorParamsToolbar{ - --editor-toolbar-min-width:220px; - - height:auto; - min-width:var(--editor-toolbar-min-width); - width:-moz-max-content; - width:max-content; - position:absolute; - z-index:30000; - cursor:default; - } - -:is(.toolbarButtonWithContainer .editorParamsToolbar) :is(#editorStampAddImage,#editorSignatureAddSignature)::before{ - -webkit-mask-image:var(--editorParams-stampAddImage-icon); - mask-image:var(--editorParams-stampAddImage-icon); - } - -:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsLabel{ - flex:none; - font:menu; - font-size:13px; - font-style:normal; - font-weight:400; - line-height:150%; - width:-moz-fit-content; - width:fit-content; - inset-inline-start:0; - color:var(--main-color); - } - -:is(.toolbarButtonWithContainer .editorParamsToolbar) button:is(:hover,:focus-visible) .editorParamsLabel{ - color:var(--doorhanger-hover-color); - } - -:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer{ - width:100%; - height:auto; - display:flex; - flex-direction:column; - box-sizing:border-box; - padding-inline:10px; - padding-block:10px; - } - -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) > .editorParamsSetter{ - min-height:26px; - display:flex; - align-items:center; - justify-content:space-between; - } - -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsColor{ - width:32px; - height:32px; - flex:none; - padding:0; - } - -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider{ - background-color:transparent; - width:90px; - flex:0 1 0; - font:message-box; - } - -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-progress{ - background-color:black; - } - -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-runnable-track,:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-track{ - background-color:black; - } - -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-thumb,:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-thumb{ - background-color:white; - } - -#secondaryToolbar{ - height:auto; - width:220px; - position:absolute; - z-index:30000; - cursor:default; - min-height:26px; - max-height:calc(var(--viewer-container-height) - 40px); +.toolbarButton::before { + opacity: var(--toolbar-icon-opacity); + display: inline-block; + width: var(--icon-size); + height: var(--icon-size); + content: ''; + background-color: var(--toolbar-icon-bg-color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-position: center; + mask-position: center; } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryOpenFile::before{ - -webkit-mask-image:var(--toolbarButton-openFile-icon); - mask-image:var(--toolbarButton-openFile-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryPrint::before{ - -webkit-mask-image:var(--toolbarButton-print-icon); - mask-image:var(--toolbarButton-print-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryDownload::before{ - -webkit-mask-image:var(--toolbarButton-download-icon); - mask-image:var(--toolbarButton-download-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #presentationMode::before{ - -webkit-mask-image:var(--toolbarButton-presentationMode-icon); - mask-image:var(--toolbarButton-presentationMode-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #viewBookmark::before{ - -webkit-mask-image:var(--toolbarButton-bookmark-icon); - mask-image:var(--toolbarButton-bookmark-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #firstPage::before{ - -webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon); - mask-image:var(--secondaryToolbarButton-firstPage-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #lastPage::before{ - -webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon); - mask-image:var(--secondaryToolbarButton-lastPage-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCcw::before{ - -webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon); - mask-image:var(--secondaryToolbarButton-rotateCcw-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCw::before{ - -webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon); - mask-image:var(--secondaryToolbarButton-rotateCw-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorSelectTool::before{ - -webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon); - mask-image:var(--secondaryToolbarButton-selectTool-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorHandTool::before{ - -webkit-mask-image:var(--secondaryToolbarButton-handTool-icon); - mask-image:var(--secondaryToolbarButton-handTool-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollPage::before{ - -webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon); - mask-image:var(--secondaryToolbarButton-scrollPage-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollVertical::before{ - -webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon); - mask-image:var(--secondaryToolbarButton-scrollVertical-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollHorizontal::before{ - -webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon); - mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollWrapped::before{ - -webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon); - mask-image:var(--secondaryToolbarButton-scrollWrapped-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadNone::before{ - -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon); - mask-image:var(--secondaryToolbarButton-spreadNone-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadOdd::before{ - -webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon); - mask-image:var(--secondaryToolbarButton-spreadOdd-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadEven::before{ - -webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon); - mask-image:var(--secondaryToolbarButton-spreadEven-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #imageAltTextSettings::before{ - -webkit-mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon); - mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon); - } - -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #documentProperties::before{ - -webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon); - mask-image:var(--secondaryToolbarButton-documentProperties-icon); - } - -#findbar{ - --input-horizontal-padding:4px; - --findbar-padding:2px; - - width:-moz-max-content; - - width:max-content; - max-width:90vw; - min-height:var(--toolbar-height); - height:auto; - position:absolute; - z-index:30000; - cursor:default; - padding:0; - min-width:300px; - background-color:var(--toolbar-bg-color); - box-sizing:border-box; - flex-wrap:wrap; - justify-content:flex-start; +.toolbarButton.toggled { + background-color: var(--toggled-btn-bg-color); + color: var(--toggled-btn-color); } -#findbar > *{ - height:var(--toolbar-height); - padding:var(--findbar-padding); - } - -#findbar #findInputContainer{ - margin-inline-start:2px; - } - -:is(#findbar #findInputContainer) #findPreviousButton::before{ - -webkit-mask-image:var(--findbarButton-previous-icon); - mask-image:var(--findbarButton-previous-icon); - } - -:is(#findbar #findInputContainer) #findNextButton::before{ - -webkit-mask-image:var(--findbarButton-next-icon); - mask-image:var(--findbarButton-next-icon); - } - -:is(#findbar #findInputContainer) #findInput{ - width:200px; - padding:5px var(--input-horizontal-padding); - } - -:is(:is(#findbar #findInputContainer) #findInput)::-moz-placeholder{ - font-style:normal; - } - -:is(:is(#findbar #findInputContainer) #findInput)::placeholder{ - font-style:normal; - } - -.loadingInput:has( > [data-status="pending"]:is(:is(#findbar #findInputContainer) #findInput))::after{ - display:inline; - visibility:visible; - inset-inline-end:calc(var(--input-horizontal-padding) + 1px); - } - -[data-status="notFound"]:is(:is(#findbar #findInputContainer) #findInput){ - background-color:rgb(255 102 102); - } - -#findbar #findbarMessageContainer{ - display:none; - gap:4px; - } - -:is(#findbar #findbarMessageContainer):has( > :is(#findResultsCount,#findMsg):not(:empty)){ - display:inline flex; - } - -:is(#findbar #findbarMessageContainer) #findResultsCount{ - background-color:rgb(217 217 217); - color:rgb(82 82 82); - padding-block:4px; - } - -:is(:is(#findbar #findbarMessageContainer) #findResultsCount):empty{ - display:none; - } - -[data-status="notFound"]:is(:is(#findbar #findbarMessageContainer) #findMsg){ - font-weight:bold; - } - -:is(:is(#findbar #findbarMessageContainer) #findMsg):empty{ - display:none; - } - -#findbar.wrapContainers{ - flex-direction:column; - align-items:flex-start; - height:-moz-max-content; - height:max-content; - } - -#findbar.wrapContainers .toolbarLabel{ - margin:0 4px; - } - -#findbar.wrapContainers #findbarMessageContainer{ - flex-wrap:wrap; - flex-flow:column nowrap; - align-items:flex-start; - height:-moz-max-content; - height:max-content; - } - -:is(#findbar.wrapContainers #findbarMessageContainer) #findResultsCount{ - height:calc(var(--toolbar-height) - 2 * var(--findbar-padding)); - } - -:is(#findbar.wrapContainers #findbarMessageContainer) #findMsg{ - min-height:var(--toolbar-height); - } - -@page{ - margin:0; +.toolbarButton.toggled::before { + background-color: var(--toggled-btn-color); } -#printContainer{ - display:none; +.toolbarButton.toggled:hover { + outline: var(--toggled-hover-btn-outline) !important; } -@media print{ - body{ - background:rgb(0 0 0 / 0) none; +.toolbarButton.toggled:hover:active { + background-color: var(--toggled-hover-active-btn-color); +} + +.toolbarButton:is(:hover, :focus-visible) { + background-color: var(--button-hover-color); +} + +.toolbarButton:is(:hover, :focus-visible)::before { + background-color: var(--toolbar-icon-hover-bg-color); +} + +.toolbarButton:is([disabled='disabled'], [disabled]) { + opacity: 0.5; + pointer-events: none; +} + +.toolbarButton.labeled { + width: 100%; + min-height: var(--menuitem-height); + justify-content: flex-start; + gap: 8px; + padding-inline-start: 12px; + aspect-ratio: unset; + text-align: start; + white-space: normal; + cursor: default; +} + +.toolbarButton.labeled:is(a) { + text-decoration: none; +} + +.toolbarButton.labeled[href='#']:is(a) { + opacity: 0.5; + pointer-events: none; +} + +.toolbarButton.labeled::before { + opacity: var(--doorhanger-icon-opacity); +} + +.toolbarButton.labeled:is(:hover, :focus-visible) { + color: var(--doorhanger-hover-color); +} + +.toolbarButton.labeled > span { + display: inline-block; + width: -moz-max-content; + width: max-content; + height: auto; +} + +.toolbarButtonWithContainer { + height: 100%; + aspect-ratio: 1; + display: inline-block; + position: relative; + flex: none; +} + +.toolbarButtonWithContainer > .toolbarButton { + width: 100%; + height: 100%; +} + +.toolbarButtonWithContainer .menu { + padding-block: 5px; +} + +.toolbarButtonWithContainer .menuContainer { + height: auto; + max-height: calc( + var(--viewer-container-height) - var(--toolbar-height) - + var(--doorhanger-height) + ); + display: flex; + flex-direction: column; + box-sizing: border-box; + overflow-y: auto; +} + +.toolbarButtonWithContainer .editorParamsToolbar { + --editor-toolbar-min-width: 220px; + + height: auto; + min-width: var(--editor-toolbar-min-width); + width: -moz-max-content; + width: max-content; + position: absolute; + z-index: 30000; + cursor: default; +} + +:is(.toolbarButtonWithContainer .editorParamsToolbar) + :is(#editorStampAddImage, #editorSignatureAddSignature)::before { + -webkit-mask-image: var(--editorParams-stampAddImage-icon); + mask-image: var(--editorParams-stampAddImage-icon); +} + +:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsLabel { + flex: none; + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 150%; + width: -moz-fit-content; + width: fit-content; + inset-inline-start: 0; + color: var(--main-color); +} + +:is(.toolbarButtonWithContainer .editorParamsToolbar) + button:is(:hover, :focus-visible) + .editorParamsLabel { + color: var(--doorhanger-hover-color); +} + +:is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + box-sizing: border-box; + padding-inline: 10px; + padding-block: 10px; +} + +:is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + > .editorParamsSetter { + min-height: 26px; + display: flex; + align-items: center; + justify-content: space-between; +} + +:is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsColor { + width: 32px; + height: 32px; + flex: none; + padding: 0; +} + +:is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider { + background-color: transparent; + width: 90px; + flex: 0 1 0; + font: message-box; +} + +:is( + :is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider +)::-moz-range-progress { + background-color: black; +} + +:is( + :is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider +)::-webkit-slider-runnable-track, +:is( + :is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider +)::-moz-range-track { + background-color: black; +} + +:is( + :is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider +)::-webkit-slider-thumb, +:is( + :is( + :is(.toolbarButtonWithContainer .editorParamsToolbar) + .editorParamsToolbarContainer + ) + .editorParamsSlider +)::-moz-range-thumb { + background-color: white; +} + +#secondaryToolbar { + height: auto; + width: 220px; + position: absolute; + z-index: 30000; + cursor: default; + min-height: 26px; + max-height: calc(var(--viewer-container-height) - 40px); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #secondaryOpenFile::before { + -webkit-mask-image: var(--toolbarButton-openFile-icon); + mask-image: var(--toolbarButton-openFile-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #secondaryPrint::before { + -webkit-mask-image: var(--toolbarButton-print-icon); + mask-image: var(--toolbarButton-print-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #secondaryDownload::before { + -webkit-mask-image: var(--toolbarButton-download-icon); + mask-image: var(--toolbarButton-download-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #presentationMode::before { + -webkit-mask-image: var(--toolbarButton-presentationMode-icon); + mask-image: var(--toolbarButton-presentationMode-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #viewBookmark::before { + -webkit-mask-image: var(--toolbarButton-bookmark-icon); + mask-image: var(--toolbarButton-bookmark-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #firstPage::before { + -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon); + mask-image: var(--secondaryToolbarButton-firstPage-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #lastPage::before { + -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon); + mask-image: var(--secondaryToolbarButton-lastPage-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCcw::before { + -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon); + mask-image: var(--secondaryToolbarButton-rotateCcw-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCw::before { + -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon); + mask-image: var(--secondaryToolbarButton-rotateCw-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #cursorSelectTool::before { + -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon); + mask-image: var(--secondaryToolbarButton-selectTool-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #cursorHandTool::before { + -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon); + mask-image: var(--secondaryToolbarButton-handTool-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollPage::before { + -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon); + mask-image: var(--secondaryToolbarButton-scrollPage-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #scrollVertical::before { + -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon); + mask-image: var(--secondaryToolbarButton-scrollVertical-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #scrollHorizontal::before { + -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); + mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollWrapped::before { + -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); + mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadNone::before { + -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon); + mask-image: var(--secondaryToolbarButton-spreadNone-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadOdd::before { + -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon); + mask-image: var(--secondaryToolbarButton-spreadOdd-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadEven::before { + -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon); + mask-image: var(--secondaryToolbarButton-spreadEven-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #imageAltTextSettings::before { + -webkit-mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon); + mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon); +} + +:is(#secondaryToolbar #secondaryToolbarButtonContainer) + #documentProperties::before { + -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon); + mask-image: var(--secondaryToolbarButton-documentProperties-icon); +} + +#findbar { + --input-horizontal-padding: 4px; + --findbar-padding: 2px; + + width: -moz-max-content; + + width: max-content; + max-width: 90vw; + min-height: var(--toolbar-height); + height: auto; + position: absolute; + z-index: 30000; + cursor: default; + padding: 0; + min-width: 300px; + background-color: var(--toolbar-bg-color); + box-sizing: border-box; + flex-wrap: wrap; + justify-content: flex-start; +} + +#findbar > * { + height: var(--toolbar-height); + padding: var(--findbar-padding); +} + +#findbar #findInputContainer { + margin-inline-start: 2px; +} + +:is(#findbar #findInputContainer) #findPreviousButton::before { + -webkit-mask-image: var(--findbarButton-previous-icon); + mask-image: var(--findbarButton-previous-icon); +} + +:is(#findbar #findInputContainer) #findNextButton::before { + -webkit-mask-image: var(--findbarButton-next-icon); + mask-image: var(--findbarButton-next-icon); +} + +:is(#findbar #findInputContainer) #findInput { + width: 200px; + padding: 5px var(--input-horizontal-padding); +} + +:is(:is(#findbar #findInputContainer) #findInput)::-moz-placeholder { + font-style: normal; +} + +:is(:is(#findbar #findInputContainer) #findInput)::placeholder { + font-style: normal; +} + +.loadingInput:has( + > [data-status='pending']:is(:is(#findbar #findInputContainer) #findInput) + )::after { + display: inline; + visibility: visible; + inset-inline-end: calc(var(--input-horizontal-padding) + 1px); +} + +[data-status='notFound']:is(:is(#findbar #findInputContainer) #findInput) { + background-color: rgb(255 102 102); +} + +#findbar #findbarMessageContainer { + display: none; + gap: 4px; +} + +:is(#findbar #findbarMessageContainer):has( + > :is(#findResultsCount, #findMsg):not(:empty) +) { + display: inline flex; +} + +:is(#findbar #findbarMessageContainer) #findResultsCount { + background-color: rgb(217 217 217); + color: rgb(82 82 82); + padding-block: 4px; +} + +:is(:is(#findbar #findbarMessageContainer) #findResultsCount):empty { + display: none; +} + +[data-status='notFound']:is(:is(#findbar #findbarMessageContainer) #findMsg) { + font-weight: bold; +} + +:is(:is(#findbar #findbarMessageContainer) #findMsg):empty { + display: none; +} + +#findbar.wrapContainers { + flex-direction: column; + align-items: flex-start; + height: -moz-max-content; + height: max-content; +} + +#findbar.wrapContainers .toolbarLabel { + margin: 0 4px; +} + +#findbar.wrapContainers #findbarMessageContainer { + flex-wrap: wrap; + flex-flow: column nowrap; + align-items: flex-start; + height: -moz-max-content; + height: max-content; +} + +:is(#findbar.wrapContainers #findbarMessageContainer) #findResultsCount { + height: calc(var(--toolbar-height) - 2 * var(--findbar-padding)); +} + +:is(#findbar.wrapContainers #findbarMessageContainer) #findMsg { + min-height: var(--toolbar-height); +} + +@page { + margin: 0; +} + +#printContainer { + display: none; +} + +@media print { + body { + background: rgb(0 0 0 / 0) none; } - body[data-pdfjsprinting] #outerContainer{ - display:none; + body[data-pdfjsprinting] #outerContainer { + display: none; } - body[data-pdfjsprinting] #printContainer{ - display:block; + body[data-pdfjsprinting] #printContainer { + display: block; } - #printContainer{ - height:100%; + #printContainer { + height: 100%; } - #printContainer > .printedPage{ - page-break-after:always; - page-break-inside:avoid; - height:100%; - width:100%; + #printContainer > .printedPage { + page-break-after: always; + page-break-inside: avoid; + height: 100%; + width: 100%; - display:flex; - flex-direction:column; - justify-content:center; - align-items:center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } - #printContainer > .xfaPrintedPage .xfaPage{ - position:absolute; + #printContainer > .xfaPrintedPage .xfaPage { + position: absolute; } - #printContainer > .xfaPrintedPage{ - page-break-after:always; - page-break-inside:avoid; - width:100%; - height:100%; - position:relative; + #printContainer > .xfaPrintedPage { + page-break-after: always; + page-break-inside: avoid; + width: 100%; + height: 100%; + position: relative; } - #printContainer > .printedPage :is(canvas, img){ - max-width:100%; - max-height:100%; + #printContainer > .printedPage :is(canvas, img) { + max-width: 100%; + max-height: 100%; - direction:ltr; - display:block; + direction: ltr; + display: block; } } -.visibleMediumView{ - display:none !important; +.visibleMediumView { + display: none !important; } -.toolbarLabel{ - width:-moz-max-content; - width:max-content; - min-width:16px; - height:100%; - padding-inline:4px; - margin:2px; - border-radius:2px; - color:var(--main-color); - font-size:12px; - line-height:14px; - text-align:left; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - cursor:default; - box-sizing:border-box; +.toolbarLabel { + width: -moz-max-content; + width: max-content; + min-width: 16px; + height: 100%; + padding-inline: 4px; + margin: 2px; + border-radius: 2px; + color: var(--main-color); + font-size: 12px; + line-height: 14px; + text-align: left; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; - display:inline flex; - flex-direction:column; - align-items:center; - justify-content:center; + display: inline flex; + flex-direction: column; + align-items: center; + justify-content: center; } -.toolbarLabel > label{ - width:100%; - } - -.toolbarHorizontalGroup{ - height:100%; - display:inline flex; - flex-direction:row; - align-items:center; - justify-content:space-between; - gap:1px; - box-sizing:border-box; +.toolbarLabel > label { + width: 100%; } -.dropdownToolbarButton{ - display:inline flex; - flex-direction:row; - align-items:center; - justify-content:center; - position:relative; - - width:-moz-fit-content; - - width:fit-content; - min-width:140px; - padding:0; - background-color:var(--dropdown-btn-bg-color); - border:var(--dropdown-btn-border); - border-radius:2px; - color:var(--main-color); - font-size:12px; - line-height:14px; - -webkit-user-select:none; - -moz-user-select:none; - user-select:none; - cursor:default; - box-sizing:border-box; - outline:none; +.toolbarHorizontalGroup { + height: 100%; + display: inline flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1px; + box-sizing: border-box; } -.dropdownToolbarButton:hover{ - background-color:var(--button-hover-color); - } +.dropdownToolbarButton { + display: inline flex; + flex-direction: row; + align-items: center; + justify-content: center; + position: relative; -.dropdownToolbarButton > select{ - -webkit-appearance:none; - -moz-appearance:none; - appearance:none; - width:inherit; - min-width:inherit; - height:28px; - font:message-box; - font-size:12px; - color:var(--main-color); - margin:0; - padding-block:1px 2px; - padding-inline:6px 38px; - border:none; - outline:none; - background-color:var(--dropdown-btn-bg-color); - } + width: -moz-fit-content; -:is(.dropdownToolbarButton > select) > option{ - background:var(--doorhanger-bg-color); - color:var(--main-color); - } - -:is(.dropdownToolbarButton > select):is(:hover,:focus-visible){ - background-color:var(--button-hover-color); - color:var(--toggled-btn-color); - } - -.dropdownToolbarButton::after{ - position:absolute; - display:inline; - width:var(--icon-size); - height:var(--icon-size); - - content:""; - background-color:var(--toolbar-icon-bg-color); - -webkit-mask-size:cover; - mask-size:cover; - - inset-inline-end:4px; - pointer-events:none; - -webkit-mask-image:var(--toolbarButton-menuArrow-icon); - mask-image:var(--toolbarButton-menuArrow-icon); - } - -.dropdownToolbarButton:is(:hover,:focus-visible,:active)::after{ - background-color:var(--toolbar-icon-hover-bg-color); - } - -#toolbarContainer{ - --menuitem-height:calc(var(--toolbar-height) - 6px); - - width:100%; - height:var(--toolbar-height); - padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); - position:relative; - box-sizing:border-box; - font:message-box; - background-color:var(--toolbar-bg-color); - box-shadow:var(--toolbar-box-shadow); - border-bottom:var(--toolbar-border-bottom); + width: fit-content; + min-width: 140px; + padding: 0; + background-color: var(--dropdown-btn-bg-color); + border: var(--dropdown-btn-border); + border-radius: 2px; + color: var(--main-color); + font-size: 12px; + line-height: 14px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; + box-sizing: border-box; + outline: none; } -#toolbarContainer #toolbarViewer{ - width:100%; - height:100%; - justify-content:space-between; +.dropdownToolbarButton:hover { + background-color: var(--button-hover-color); +} + +.dropdownToolbarButton > select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: inherit; + min-width: inherit; + height: 28px; + font: message-box; + font-size: 12px; + color: var(--main-color); + margin: 0; + padding-block: 1px 2px; + padding-inline: 6px 38px; + border: none; + outline: none; + background-color: var(--dropdown-btn-bg-color); +} + +:is(.dropdownToolbarButton > select) > option { + background: var(--doorhanger-bg-color); + color: var(--main-color); +} + +:is(.dropdownToolbarButton > select):is(:hover, :focus-visible) { + background-color: var(--button-hover-color); + color: var(--toggled-btn-color); +} + +.dropdownToolbarButton::after { + position: absolute; + display: inline; + width: var(--icon-size); + height: var(--icon-size); + + content: ''; + background-color: var(--toolbar-icon-bg-color); + -webkit-mask-size: cover; + mask-size: cover; + + inset-inline-end: 4px; + pointer-events: none; + -webkit-mask-image: var(--toolbarButton-menuArrow-icon); + mask-image: var(--toolbarButton-menuArrow-icon); +} + +.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after { + background-color: var(--toolbar-icon-hover-bg-color); +} + +#toolbarContainer { + --menuitem-height: calc(var(--toolbar-height) - 6px); + + width: 100%; + height: var(--toolbar-height); + padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); + position: relative; + box-sizing: border-box; + font: message-box; + background-color: var(--toolbar-bg-color); + box-shadow: var(--toolbar-box-shadow); + border-bottom: var(--toolbar-border-bottom); +} + +#toolbarContainer #toolbarViewer { + width: 100%; + height: 100%; + justify-content: space-between; +} + +:is(#toolbarContainer #toolbarViewer) > * { + flex: none; +} + +:is(#toolbarContainer #toolbarViewer) input { + font: message-box; +} + +:is(#toolbarContainer #toolbarViewer) .toolbarButtonSpacer { + width: 30px; + display: block; + height: 1px; +} + +:is(#toolbarContainer #toolbarViewer) + #toolbarViewerLeft + #numPages.toolbarLabel { + padding-inline-start: 3px; + flex: none; +} + +#toolbarContainer #loadingBar { + --progressBar-percent: 0%; + --progressBar-end-offset: 0; + + position: absolute; + top: var(--toolbar-height); + inset-inline: 0 var(--progressBar-end-offset); + height: 4px; + background-color: var(--progressBar-bg-color); + border-bottom: 1px solid var(--toolbar-border-color); + transition-property: inset-inline-start; + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); +} + +:is(#toolbarContainer #loadingBar) .progress { + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + transform: scaleX(var(--progressBar-percent)); + transform-origin: calc(50% - 50% * var(--dir-factor)) 0; + height: 100%; + background-color: var(--progressBar-color); + overflow: hidden; + transition: transform 200ms; +} + +.indeterminate:is(#toolbarContainer #loadingBar) .progress { + transform: none; + background-color: var(--progressBar-bg-color); + transition: none; +} + +:is(.indeterminate:is(#toolbarContainer #loadingBar) .progress) .glimmer { + position: absolute; + top: 0; + inset-inline-start: 0; + height: 100%; + width: calc(100% + 150px); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-blend-color) 0, + var(--progressBar-bg-color) 5px, + var(--progressBar-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-blend-color) 100px + ); + animation: progressIndeterminate 1s linear infinite; +} + +@media all and (max-width: 840px) { + #sidebarContainer { + background-color: var(--sidebar-narrow-bg-color); } - -:is(#toolbarContainer #toolbarViewer) > *{ - flex:none; - } - -:is(#toolbarContainer #toolbarViewer) input{ - font:message-box; - } - -:is(#toolbarContainer #toolbarViewer) .toolbarButtonSpacer{ - width:30px; - display:block; - height:1px; - } - -:is(#toolbarContainer #toolbarViewer) #toolbarViewerLeft #numPages.toolbarLabel{ - padding-inline-start:3px; - flex:none; - } - -#toolbarContainer #loadingBar{ - --progressBar-percent:0%; - --progressBar-end-offset:0; - - position:absolute; - top:var(--toolbar-height); - inset-inline:0 var(--progressBar-end-offset); - height:4px; - background-color:var(--progressBar-bg-color); - border-bottom:1px solid var(--toolbar-border-color); - transition-property:inset-inline-start; - transition-duration:var(--sidebar-transition-duration); - transition-timing-function:var(--sidebar-transition-timing-function); - } - -:is(#toolbarContainer #loadingBar) .progress{ - position:absolute; - top:0; - inset-inline-start:0; - width:100%; - transform:scaleX(var(--progressBar-percent)); - transform-origin:calc(50% - 50% * var(--dir-factor)) 0; - height:100%; - background-color:var(--progressBar-color); - overflow:hidden; - transition:transform 200ms; - } - -.indeterminate:is(#toolbarContainer #loadingBar) .progress{ - transform:none; - background-color:var(--progressBar-bg-color); - transition:none; - } - -:is(.indeterminate:is(#toolbarContainer #loadingBar) .progress) .glimmer{ - position:absolute; - top:0; - inset-inline-start:0; - height:100%; - width:calc(100% + 150px); - background:repeating-linear-gradient( - 135deg, - var(--progressBar-blend-color) 0, - var(--progressBar-bg-color) 5px, - var(--progressBar-bg-color) 45px, - var(--progressBar-color) 55px, - var(--progressBar-color) 95px, - var(--progressBar-blend-color) 100px - ); - animation:progressIndeterminate 1s linear infinite; - } - -@media all and (max-width: 840px){ - #sidebarContainer{ - background-color:var(--sidebar-narrow-bg-color); - } - #outerContainer.sidebarOpen #viewerContainer{ - inset-inline-start:0 !important; + #outerContainer.sidebarOpen #viewerContainer { + inset-inline-start: 0 !important; } } -@media all and (max-width: 750px){ - #outerContainer .hiddenMediumView{ - display:none !important; +@media all and (max-width: 750px) { + #outerContainer .hiddenMediumView { + display: none !important; } - #outerContainer .visibleMediumView:not(.hidden, [hidden]){ - display:inline-block !important; + #outerContainer .visibleMediumView:not(.hidden, [hidden]) { + display: inline-block !important; } } -@media all and (max-width: 690px){ +@media all and (max-width: 690px) { .hiddenSmallView, - .hiddenSmallView *{ - display:none !important; + .hiddenSmallView * { + display: none !important; } - #toolbarContainer #toolbarViewer .toolbarButtonSpacer{ - width:0; + #toolbarContainer #toolbarViewer .toolbarButtonSpacer { + width: 0; } } -@media all and (max-width: 560px){ - #scaleSelectContainer{ - display:none; +@media all and (max-width: 560px) { + #scaleSelectContainer { + display: none; } } diff --git a/public/sw.js b/public/sw.js index bfb6c83..3695cc9 100644 --- a/public/sw.js +++ b/public/sw.js @@ -5,107 +5,123 @@ * Version: 1.1.0 */ -const CACHE_VERSION = 'bentopdf-v7'; +const CACHE_VERSION = 'bentopdf-v8'; const CACHE_NAME = `${CACHE_VERSION}-static`; - const getBasePath = () => { - const scope = self.registration?.scope || self.location.href; - const url = new URL(scope); - return url.pathname.replace(/\/$/, '') || ''; + const scope = self.registration?.scope || self.location.href; + const url = new URL(scope); + return url.pathname.replace(/\/$/, '') || ''; }; const buildCriticalAssets = (basePath) => [ - `${basePath}/pymupdf-wasm/pyodide.js`, - `${basePath}/pymupdf-wasm/pyodide.asm.js`, - `${basePath}/pymupdf-wasm/pyodide.asm.wasm`, - `${basePath}/pymupdf-wasm/python_stdlib.zip`, - `${basePath}/pymupdf-wasm/pyodide-lock.json`, + `${basePath}/pymupdf-wasm/pyodide.js`, + `${basePath}/pymupdf-wasm/pyodide.asm.js`, + `${basePath}/pymupdf-wasm/pyodide.asm.wasm`, + `${basePath}/pymupdf-wasm/python_stdlib.zip`, + `${basePath}/pymupdf-wasm/pyodide-lock.json`, - `${basePath}/pymupdf-wasm/pymupdf-1.26.3-cp313-none-pyodide_2025_0_wasm32.whl`, - `${basePath}/pymupdf-wasm/numpy-2.2.5-cp313-cp313-pyodide_2025_0_wasm32.whl`, - `${basePath}/pymupdf-wasm/opencv_python-4.11.0.86-cp313-cp313-pyodide_2025_0_wasm32.whl`, - `${basePath}/pymupdf-wasm/lxml-5.4.0-cp313-cp313-pyodide_2025_0_wasm32.whl`, - `${basePath}/pymupdf-wasm/python_docx-1.2.0-py3-none-any.whl`, - `${basePath}/pymupdf-wasm/pdf2docx-0.5.8-py3-none-any.whl`, - `${basePath}/pymupdf-wasm/fonttools-4.56.0-py3-none-any.whl`, - `${basePath}/pymupdf-wasm/typing_extensions-4.12.2-py3-none-any.whl`, - `${basePath}/pymupdf-wasm/pymupdf4llm-0.0.27-py3-none-any.whl`, + `${basePath}/pymupdf-wasm/pymupdf-1.26.3-cp313-none-pyodide_2025_0_wasm32.whl`, + `${basePath}/pymupdf-wasm/numpy-2.2.5-cp313-cp313-pyodide_2025_0_wasm32.whl`, + `${basePath}/pymupdf-wasm/opencv_python-4.11.0.86-cp313-cp313-pyodide_2025_0_wasm32.whl`, + `${basePath}/pymupdf-wasm/lxml-5.4.0-cp313-cp313-pyodide_2025_0_wasm32.whl`, + `${basePath}/pymupdf-wasm/python_docx-1.2.0-py3-none-any.whl`, + `${basePath}/pymupdf-wasm/pdf2docx-0.5.8-py3-none-any.whl`, + `${basePath}/pymupdf-wasm/fonttools-4.56.0-py3-none-any.whl`, + `${basePath}/pymupdf-wasm/typing_extensions-4.12.2-py3-none-any.whl`, + `${basePath}/pymupdf-wasm/pymupdf4llm-0.0.27-py3-none-any.whl`, - `${basePath}/ghostscript-wasm/gs.js`, - `${basePath}/ghostscript-wasm/gs.wasm`, + `${basePath}/ghostscript-wasm/gs.js`, + `${basePath}/ghostscript-wasm/gs.wasm`, ]; self.addEventListener('install', (event) => { - const basePath = getBasePath(); - const CRITICAL_ASSETS = buildCriticalAssets(basePath); - // console.log('🚀 [ServiceWorker] Installing version:', CACHE_VERSION); - // console.log('📍 [ServiceWorker] Base path detected:', basePath || '/'); - // console.log('📦 [ServiceWorker] Will cache', CRITICAL_ASSETS.length, 'critical assets'); + const basePath = getBasePath(); + const CRITICAL_ASSETS = buildCriticalAssets(basePath); + // console.log('🚀 [ServiceWorker] Installing version:', CACHE_VERSION); + // console.log('📍 [ServiceWorker] Base path detected:', basePath || '/'); + // console.log('📦 [ServiceWorker] Will cache', CRITICAL_ASSETS.length, 'critical assets'); - event.waitUntil( - caches.open(CACHE_NAME) - .then((cache) => { - // console.log('[ServiceWorker] Caching critical assets...'); - return cacheInBatches(cache, CRITICAL_ASSETS, 5); - }) - .then(() => { - // console.log('✅ [ServiceWorker] All critical assets cached successfully!'); - // console.log('⏭️ [ServiceWorker] Skipping waiting, activating immediately...'); - return self.skipWaiting(); - }) - .catch((error) => { - console.error('[ServiceWorker] Cache installation failed:', error); - }) - ); + event.waitUntil( + caches + .open(CACHE_NAME) + .then((cache) => { + // console.log('[ServiceWorker] Caching critical assets...'); + return cacheInBatches(cache, CRITICAL_ASSETS, 5); + }) + .then(() => { + // console.log('✅ [ServiceWorker] All critical assets cached successfully!'); + // console.log('⏭️ [ServiceWorker] Skipping waiting, activating immediately...'); + return self.skipWaiting(); + }) + .catch((error) => { + console.error('[ServiceWorker] Cache installation failed:', error); + }) + ); }); self.addEventListener('activate', (event) => { - // console.log('🔄 [ServiceWorker] Activating version:', CACHE_VERSION); + // console.log('🔄 [ServiceWorker] Activating version:', CACHE_VERSION); - event.waitUntil( - caches.keys() - .then((cacheNames) => { - return Promise.all( - cacheNames.map((cacheName) => { - if (cacheName.startsWith('bentopdf-') && cacheName !== CACHE_NAME) { - // console.log('[ServiceWorker] Deleting old cache:', cacheName); - return caches.delete(cacheName); - } - }) - ); - }) - .then(() => { - // console.log('✅ [ServiceWorker] Activated successfully!'); - // console.log('🎯 [ServiceWorker] Taking control of all pages...'); - return self.clients.claim(); - }) - ); + event.waitUntil( + caches + .keys() + .then((cacheNames) => { + return Promise.all( + cacheNames.map((cacheName) => { + if (cacheName.startsWith('bentopdf-') && cacheName !== CACHE_NAME) { + // console.log('[ServiceWorker] Deleting old cache:', cacheName); + return caches.delete(cacheName); + } + }) + ); + }) + .then(() => { + // console.log('✅ [ServiceWorker] Activated successfully!'); + // console.log('🎯 [ServiceWorker] Taking control of all pages...'); + return self.clients.claim(); + }) + ); }); self.addEventListener('fetch', (event) => { - const url = new URL(event.request.url); + const url = new URL(event.request.url); - const isCDN = url.hostname === 'cdn.jsdelivr.net'; - const isLocal = url.origin === location.origin; + const isCDN = url.hostname === 'cdn.jsdelivr.net'; + const isLocal = url.origin === location.origin; - if (!isLocal && !isCDN) { - return; - } - if (isLocal && (url.searchParams.has('t') || url.searchParams.has('import') || url.searchParams.has('direct'))) { - // console.log('🔧 [Dev Mode] Skipping Vite HMR request:', url.pathname); - return; - } + if (!isLocal && !isCDN) { + return; + } + if ( + isLocal && + (url.searchParams.has('t') || + url.searchParams.has('import') || + url.searchParams.has('direct')) + ) { + // console.log('🔧 [Dev Mode] Skipping Vite HMR request:', url.pathname); + return; + } - if (isLocal && (url.pathname.includes('/@vite') || url.pathname.includes('/@id') || url.pathname.includes('/@fs'))) { - return; - } + if ( + isLocal && + (url.pathname.includes('/@vite') || + url.pathname.includes('/@id') || + url.pathname.includes('/@fs')) + ) { + return; + } - if (shouldCache(url.pathname, isCDN)) { - event.respondWith(cacheFirstStrategyWithDedup(event.request, isCDN)); - } else if (isLocal && (url.pathname.endsWith('.html') || url.pathname === '/')) { - event.respondWith(networkFirstStrategy(event.request)); - } + if (isLocal && url.pathname.includes('/locales/')) { + event.respondWith(networkFirstStrategy(event.request)); + } else if (shouldCache(url.pathname, isCDN)) { + event.respondWith(cacheFirstStrategyWithDedup(event.request, isCDN)); + } else if ( + isLocal && + (url.pathname.endsWith('.html') || url.pathname === '/') + ) { + event.respondWith(networkFirstStrategy(event.request)); + } }); /** @@ -113,82 +129,85 @@ self.addEventListener('fetch', (event) => { * Ensures we only cache CDN OR local version, never both */ async function cacheFirstStrategyWithDedup(request, isCDN) { - const url = new URL(request.url); - const fileName = url.pathname.split('/').pop(); + const url = new URL(request.url); + const fileName = url.pathname.split('/').pop(); - try { - const cachedResponse = await findCachedFile(fileName); - if (cachedResponse) { - // console.log('⚡ [Cache HIT] Instant load:', fileName); - return cachedResponse; - } - - // console.log(`📥 [Cache MISS] Downloading from ${isCDN ? 'CDN' : 'local'}:`, fileName); - - const networkResponse = await fetch(request); - - if (networkResponse && networkResponse.status === 200) { - const cache = await caches.open(CACHE_NAME); - - await removeDuplicateCache(cache, fileName, isCDN); - - await cache.put(request, networkResponse.clone()); - // console.log(`💾 [Cached from ${isCDN ? 'CDN' : 'local'}] Saved:`, fileName); - } - - return networkResponse; - } catch (error) { - if (isCDN) { - console.warn(`⚠️ [CDN Failed] Trying local fallback for: ${fileName}`); - const basePath = getBasePath(); - const localPath = getLocalPathForCDNUrl(url.pathname); - - if (localPath) { - const localUrl = `${basePath}${localPath}${fileName}`; - try { - const fallbackResponse = await fetch(localUrl); - if (fallbackResponse && fallbackResponse.status === 200) { - const cache = await caches.open(CACHE_NAME); - await cache.put(localUrl, fallbackResponse.clone()); - // console.log('✅ [Fallback Success] Cached local version:', fileName); - return fallbackResponse; - } - } catch (fallbackError) { - console.error('[ServiceWorker] Both CDN and local failed for:', fileName); - } - } - } - throw error; + try { + const cachedResponse = await findCachedFile(fileName); + if (cachedResponse) { + // console.log('⚡ [Cache HIT] Instant load:', fileName); + return cachedResponse; } + + // console.log(`📥 [Cache MISS] Downloading from ${isCDN ? 'CDN' : 'local'}:`, fileName); + + const networkResponse = await fetch(request); + + if (networkResponse && networkResponse.status === 200) { + const cache = await caches.open(CACHE_NAME); + + await removeDuplicateCache(cache, fileName, isCDN); + + await cache.put(request, networkResponse.clone()); + // console.log(`💾 [Cached from ${isCDN ? 'CDN' : 'local'}] Saved:`, fileName); + } + + return networkResponse; + } catch (error) { + if (isCDN) { + console.warn(`⚠️ [CDN Failed] Trying local fallback for: ${fileName}`); + const basePath = getBasePath(); + const localPath = getLocalPathForCDNUrl(url.pathname); + + if (localPath) { + const localUrl = `${basePath}${localPath}${fileName}`; + try { + const fallbackResponse = await fetch(localUrl); + if (fallbackResponse && fallbackResponse.status === 200) { + const cache = await caches.open(CACHE_NAME); + await cache.put(localUrl, fallbackResponse.clone()); + // console.log('✅ [Fallback Success] Cached local version:', fileName); + return fallbackResponse; + } + } catch (fallbackError) { + console.error( + '[ServiceWorker] Both CDN and local failed for:', + fileName + ); + } + } + } + throw error; + } } async function findCachedFile(fileName) { - const cache = await caches.open(CACHE_NAME); - const requests = await cache.keys(); + const cache = await caches.open(CACHE_NAME); + const requests = await cache.keys(); - for (const req of requests) { - const reqUrl = new URL(req.url); - if (reqUrl.pathname.endsWith(fileName)) { - return await cache.match(req); - } + for (const req of requests) { + const reqUrl = new URL(req.url); + if (reqUrl.pathname.endsWith(fileName)) { + return await cache.match(req); } - return null; + } + return null; } async function removeDuplicateCache(cache, fileName, isCDN) { - const requests = await cache.keys(); + const requests = await cache.keys(); - for (const req of requests) { - const reqUrl = new URL(req.url); - if (reqUrl.pathname.endsWith(fileName)) { - // If caching CDN version, remove local version (and vice versa) - const reqIsCDN = reqUrl.hostname === 'cdn.jsdelivr.net'; - if (reqIsCDN !== isCDN) { - await cache.delete(req); - // console.log(`[Dedup] Removed ${reqIsCDN ? 'CDN' : 'local'} version of:`, fileName); - } - } + for (const req of requests) { + const reqUrl = new URL(req.url); + if (reqUrl.pathname.endsWith(fileName)) { + // If caching CDN version, remove local version (and vice versa) + const reqIsCDN = reqUrl.hostname === 'cdn.jsdelivr.net'; + if (reqIsCDN !== isCDN) { + await cache.delete(req); + // console.log(`[Dedup] Removed ${reqIsCDN ? 'CDN' : 'local'} version of:`, fileName); + } } + } } /** @@ -196,23 +215,23 @@ async function removeDuplicateCache(cache, fileName, isCDN) { * Perfect for HTML files that might update */ async function networkFirstStrategy(request) { - try { - const networkResponse = await fetch(request); + try { + const networkResponse = await fetch(request); - if (networkResponse && networkResponse.status === 200) { - const cache = await caches.open(CACHE_NAME); - cache.put(request, networkResponse.clone()); - } - - return networkResponse; - } catch (error) { - const cachedResponse = await caches.match(request); - if (cachedResponse) { - // console.log('[Offline Mode] Serving from cache:', request.url.split('/').pop()); - return cachedResponse; - } - throw error; + if (networkResponse && networkResponse.status === 200) { + const cache = await caches.open(CACHE_NAME); + cache.put(request, networkResponse.clone()); } + + return networkResponse; + } catch (error) { + const cachedResponse = await caches.match(request); + if (cachedResponse) { + // console.log('[Offline Mode] Serving from cache:', request.url.split('/').pop()); + return cachedResponse; + } + throw error; + } } /** @@ -220,16 +239,16 @@ async function networkFirstStrategy(request) { * Returns the local directory path for a given CDN package */ function getLocalPathForCDNUrl(pathname) { - if (pathname.includes('/@bentopdf/pymupdf-wasm')) { - return '/pymupdf-wasm/'; - } - if (pathname.includes('/@bentopdf/gs-wasm')) { - return '/ghostscript-wasm/'; - } - if (pathname.includes('/@matbee/libreoffice-converter')) { - return '/libreoffice-wasm/'; - } - return null; + if (pathname.includes('/@bentopdf/pymupdf-wasm')) { + return '/pymupdf-wasm/'; + } + if (pathname.includes('/@bentopdf/gs-wasm')) { + return '/ghostscript-wasm/'; + } + if (pathname.includes('/@matbee/libreoffice-converter')) { + return '/libreoffice-wasm/'; + } + return null; } /** @@ -237,60 +256,65 @@ function getLocalPathForCDNUrl(pathname) { * Handles both local and CDN URLs */ function shouldCache(pathname, isCDN = false) { - if (isCDN) { - return ( - pathname.includes('/@bentopdf/pymupdf-wasm') || - pathname.includes('/@bentopdf/gs-wasm') || - pathname.includes('/@matbee/libreoffice-converter') || - pathname.match(/\.(wasm|whl|zip|json|js|gz)$/) - ); - } - + if (isCDN) { return ( - pathname.includes('/libreoffice-wasm/') || - pathname.includes('/pymupdf-wasm/') || - pathname.includes('/ghostscript-wasm/') || - pathname.includes('/embedpdf/') || - pathname.includes('/assets/') || - pathname.match(/\.(js|mjs|css|wasm|whl|zip|json|png|jpg|jpeg|gif|svg|woff|woff2|ttf|gz|br)$/) + pathname.includes('/@bentopdf/pymupdf-wasm') || + pathname.includes('/@bentopdf/gs-wasm') || + pathname.includes('/@matbee/libreoffice-converter') || + pathname.match(/\.(wasm|whl|zip|json|js|gz)$/) ); + } + + return ( + pathname.includes('/libreoffice-wasm/') || + pathname.includes('/pymupdf-wasm/') || + pathname.includes('/ghostscript-wasm/') || + pathname.includes('/embedpdf/') || + pathname.includes('/assets/') || + pathname.match( + /\.(js|mjs|css|wasm|whl|zip|json|png|jpg|jpeg|gif|svg|woff|woff2|ttf|gz|br)$/ + ) + ); } /** * Cache assets in batches to avoid overwhelming the browser */ async function cacheInBatches(cache, urls, batchSize = 5) { - for (let i = 0; i < urls.length; i += batchSize) { - const batch = urls.slice(i, i + batchSize); - // console.log(`[ServiceWorker] Caching batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(urls.length / batchSize)}`); + for (let i = 0; i < urls.length; i += batchSize) { + const batch = urls.slice(i, i + batchSize); + // console.log(`[ServiceWorker] Caching batch ${Math.floor(i / batchSize) + 1}/${Math.ceil(urls.length / batchSize)}`); - await Promise.all( - batch.map(async (url) => { - try { - await cache.add(url); - const fileName = url.split('/').pop(); - const fileSize = fileName.includes('.wasm') || fileName.includes('.whl') ? '(large file)' : ''; - // console.log(` ✓ Cached: ${fileName} ${fileSize}`); - } catch (error) { - console.warn('[ServiceWorker] Failed to cache:', url, error.message); - } - }) - ); - } + await Promise.all( + batch.map(async (url) => { + try { + await cache.add(url); + const fileName = url.split('/').pop(); + const fileSize = + fileName.includes('.wasm') || fileName.includes('.whl') + ? '(large file)' + : ''; + // console.log(` ✓ Cached: ${fileName} ${fileSize}`); + } catch (error) { + console.warn('[ServiceWorker] Failed to cache:', url, error.message); + } + }) + ); + } } self.addEventListener('message', (event) => { - if (event.data && event.data.type === 'SKIP_WAITING') { - self.skipWaiting(); - } + if (event.data && event.data.type === 'SKIP_WAITING') { + self.skipWaiting(); + } - if (event.data && event.data.type === 'CLEAR_CACHE') { - event.waitUntil( - caches.delete(CACHE_NAME).then(() => { - console.log('[ServiceWorker] Cache cleared'); - }) - ); - } + if (event.data && event.data.type === 'CLEAR_CACHE') { + event.waitUntil( + caches.delete(CACHE_NAME).then(() => { + console.log('[ServiceWorker] Cache cleared'); + }) + ); + } }); // console.log('🎉 [ServiceWorker] Script loaded successfully! Ready to cache assets.'); diff --git a/src/js/i18n/i18n.ts b/src/js/i18n/i18n.ts index 197c1ce..6b9af76 100644 --- a/src/js/i18n/i18n.ts +++ b/src/js/i18n/i18n.ts @@ -1,5 +1,4 @@ import i18next from 'i18next'; -import LanguageDetector from 'i18next-browser-languagedetector'; import HttpBackend from 'i18next-http-backend'; // Supported languages @@ -48,7 +47,6 @@ export const getLanguageFromUrl = (): SupportedLanguage => { const langMatch = path.match( /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl)(?:\/|$)/ - /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt)(?:\/|$)/ ); if ( langMatch && @@ -75,27 +73,24 @@ export const initI18n = async (): Promise => { const currentLang = getLanguageFromUrl(); - await i18next - .use(HttpBackend) - .use(LanguageDetector) - .init({ - lng: currentLang, - fallbackLng: 'en', - supportedLngs: supportedLanguages as unknown as string[], - ns: ['common', 'tools'], - defaultNS: 'common', - backend: { - loadPath: `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}locales/{{lng}}/{{ns}}.json`, - }, - detection: { - order: ['path', 'localStorage', 'navigator'], - lookupFromPathIndex: 0, - caches: ['localStorage'], - }, - interpolation: { - escapeValue: false, - }, - }); + localStorage.setItem('i18nextLng', currentLang); + + await i18next.use(HttpBackend).init({ + lng: currentLang, + fallbackLng: 'en', + supportedLngs: supportedLanguages as unknown as string[], + ns: ['common', 'tools'], + defaultNS: 'common', + preload: [currentLang], + backend: { + loadPath: `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}locales/{{lng}}/{{ns}}.json`, + }, + interpolation: { + escapeValue: false, + }, + }); + + await i18next.loadNamespaces('tools'); initialized = true; return i18next; @@ -122,7 +117,7 @@ export const changeLanguage = (lang: SupportedLanguage): void => { let pagePathWithoutLang = relativePath; const langPrefixMatch = relativePath.match( - /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt)(\/.*)?$/ + /^\/(en|fr|es|de|zh|zh-TW|vi|tr|id|it|pt|nl)(\/.*)?$/ ); if (langPrefixMatch) { pagePathWithoutLang = langPrefixMatch[2] || '/'; @@ -237,7 +232,7 @@ export const rewriteLinks = (): void => { newHref = `/${currentLang}/`; } } else { - newHref = `${currentLang}/${href}`; + newHref = `/${currentLang}/${href}`; } newHref = newHref.replace(/([^:])\/+/g, '$1/'); diff --git a/src/js/utils/render-utils.ts b/src/js/utils/render-utils.ts index 5e4511a..7a0e807 100644 --- a/src/js/utils/render-utils.ts +++ b/src/js/utils/render-utils.ts @@ -1,381 +1,443 @@ import * as pdfjsLib from 'pdfjs-dist'; -pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString(); +pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( + 'pdfjs-dist/build/pdf.worker.min.mjs', + import.meta.url +).toString(); /** * Configuration for progressive rendering */ export interface RenderConfig { - batchSize?: number; - useLazyLoading?: boolean; - lazyLoadMargin?: string; - eagerLoadBatches?: number; // Number of batches to load ahead eagerly (default: 2) - onProgress?: (current: number, total: number) => void; - onPageRendered?: (pageIndex: number, element: HTMLElement) => void; - onBatchComplete?: () => void; - shouldCancel?: () => boolean; + batchSize?: number; + useLazyLoading?: boolean; + lazyLoadMargin?: string; + eagerLoadBatches?: number; // Number of batches to load ahead eagerly (default: 2) + onProgress?: (current: number, total: number) => void; + onPageRendered?: (pageIndex: number, element: HTMLElement) => void; + onBatchComplete?: () => void; + shouldCancel?: () => boolean; } /** * Page rendering task */ interface PageTask { - pageNumber: number; - pdfjsDoc: any; - fileName?: string; - container: HTMLElement; - scale?: number; - createWrapper: (canvas: HTMLCanvasElement, pageNumber: number, fileName?: string) => HTMLElement; + pageNumber: number; + pdfjsDoc: any; + fileName?: string; + container: HTMLElement; + scale?: number; + createWrapper: ( + canvas: HTMLCanvasElement, + pageNumber: number, + fileName?: string + ) => HTMLElement; + placeholderElement?: HTMLElement; } /** * Lazy loading state */ interface LazyLoadState { - observer: IntersectionObserver | null; - pendingTasks: Map; - isRendering: boolean; - eagerLoadQueue: PageTask[]; - nextEagerIndex: number; + observer: IntersectionObserver | null; + pendingTasks: Map; + pendingTasksByPageNumber: Map; + isRendering: boolean; + eagerLoadQueue: PageTask[]; + nextEagerIndex: number; } const lazyLoadState: LazyLoadState = { - observer: null, - pendingTasks: new Map(), - isRendering: false, - eagerLoadQueue: [], - nextEagerIndex: 0, + observer: null, + pendingTasks: new Map(), + pendingTasksByPageNumber: new Map(), + isRendering: false, + eagerLoadQueue: [], + nextEagerIndex: 0, }; /** * Creates a placeholder element for a page that will be lazy-loaded */ -export function createPlaceholder(pageNumber: number, fileName?: string): HTMLElement { - const placeholder = document.createElement('div'); - placeholder.className = - 'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 rounded-lg bg-gray-800 transition-colors'; - placeholder.dataset.pageNumber = pageNumber.toString(); - if (fileName) { - placeholder.dataset.fileName = fileName; - } - placeholder.dataset.lazyLoad = 'true'; +export function createPlaceholder( + pageNumber: number, + fileName?: string +): HTMLElement { + const placeholder = document.createElement('div'); + placeholder.className = + 'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 rounded-lg bg-gray-800 transition-colors'; + placeholder.dataset.pageNumber = pageNumber.toString(); + if (fileName) { + placeholder.dataset.fileName = fileName; + } + placeholder.dataset.lazyLoad = 'true'; - // Create skeleton loader - const skeletonContainer = document.createElement('div'); - skeletonContainer.className = 'relative w-full h-36 bg-gray-700 rounded-md animate-pulse flex items-center justify-center'; + // Create skeleton loader + const skeletonContainer = document.createElement('div'); + skeletonContainer.className = + 'relative w-full h-36 bg-gray-700 rounded-md animate-pulse flex items-center justify-center'; - const loadingText = document.createElement('span'); - loadingText.className = 'text-gray-500 text-xs'; - loadingText.textContent = 'Loading...'; + const loadingText = document.createElement('span'); + loadingText.className = 'text-gray-500 text-xs'; + loadingText.textContent = 'Loading...'; - skeletonContainer.appendChild(loadingText); - placeholder.appendChild(skeletonContainer); + skeletonContainer.appendChild(loadingText); + placeholder.appendChild(skeletonContainer); - return placeholder; + return placeholder; } /** * Renders a single page to canvas */ export async function renderPageToCanvas( - pdfjsDoc: any, - pageNumber: number, - scale: number = 0.5 + pdfjsDoc: any, + pageNumber: number, + scale: number = 0.5 ): Promise { - const page = await pdfjsDoc.getPage(pageNumber); - const viewport = page.getViewport({ scale }); + const page = await pdfjsDoc.getPage(pageNumber); + const viewport = page.getViewport({ scale }); - const canvas = document.createElement('canvas'); - canvas.height = viewport.height; - canvas.width = viewport.width; + const canvas = document.createElement('canvas'); + canvas.height = viewport.height; + canvas.width = viewport.width; - const context = canvas.getContext('2d')!; + const context = canvas.getContext('2d')!; - await page.render({ - canvasContext: context, - canvas: canvas, - viewport, - }).promise; + await page.render({ + canvasContext: context, + canvas: canvas, + viewport, + }).promise; - return canvas; + return canvas; } /** * Renders a batch of pages in parallel */ async function renderPageBatch( - tasks: PageTask[], - onProgress?: (current: number, total: number) => void + tasks: PageTask[], + onProgress?: (current: number, total: number) => void ): Promise { - const renderPromises = tasks.map(async (task) => { - try { - const canvas = await renderPageToCanvas( - task.pdfjsDoc, - task.pageNumber, - task.scale || 0.5 - ); + for (const task of tasks) { + try { + const canvas = await renderPageToCanvas( + task.pdfjsDoc, + task.pageNumber, + task.scale || 0.5 + ); - const wrapper = task.createWrapper(canvas, task.pageNumber, task.fileName); + const wrapper = task.createWrapper( + canvas, + task.pageNumber, + task.fileName + ); - // Find and replace the placeholder for this specific page number - const placeholder = task.container.querySelector( - `[data-page-number="${task.pageNumber}"][data-lazy-load="true"]` - ); + let placeholder: Element | null = task.placeholderElement || null; + if (!placeholder) { + placeholder = task.container.querySelector( + `[data-page-number="${task.pageNumber}"][data-lazy-load="true"]` + ); + } - if (placeholder) { - // Replace placeholder with rendered page - task.container.replaceChild(wrapper, placeholder); - } else { - // Fallback: shouldn't happen with new approach, but just in case - console.warn(`No placeholder found for page ${task.pageNumber}, appending instead`); - task.container.appendChild(wrapper); - } + if (placeholder && placeholder.parentNode) { + const parent = placeholder.parentNode; + parent.insertBefore(wrapper, placeholder); + parent.removeChild(placeholder); + } else { + const allChildren = Array.from( + task.container.children + ) as HTMLElement[]; + let insertBefore: Element | null = null; - return wrapper; - } catch (error) { - console.error(`Error rendering page ${task.pageNumber}:`, error); - return null; + for (const child of allChildren) { + const childPageNum = parseInt(child.dataset.pageNumber || '0', 10); + if (childPageNum > task.pageNumber) { + insertBefore = child; + break; + } } - }); - await Promise.all(renderPromises); + if (insertBefore) { + task.container.insertBefore(wrapper, insertBefore); + } else { + task.container.appendChild(wrapper); + } + console.warn( + `Placeholder not found for page ${task.pageNumber}, inserted at calculated position` + ); + } + } catch (error) { + console.error(`Error rendering page ${task.pageNumber}:`, error); + } + } } /** * Sets up Intersection Observer for lazy loading */ function setupLazyRendering( - container: HTMLElement, - config: RenderConfig + container: HTMLElement, + config: RenderConfig ): IntersectionObserver { - const options = { - root: container.closest('.overflow-auto') || null, - rootMargin: config.lazyLoadMargin || '200px', - threshold: 0.01, - }; + const options = { + root: container.closest('.overflow-auto') || null, + rootMargin: config.lazyLoadMargin || '200px', + threshold: 0.01, + }; - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - const placeholder = entry.target as HTMLElement; - const task = lazyLoadState.pendingTasks.get(placeholder); + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const placeholder = entry.target as HTMLElement; + const pageNumberStr = placeholder.dataset.pageNumber; + if (!pageNumberStr) return; - if (task) { - // Immediately unobserve to prevent multiple triggers - observer.unobserve(placeholder); - lazyLoadState.pendingTasks.delete(placeholder); + const pageNumber = parseInt(pageNumberStr, 10); + const task = lazyLoadState.pendingTasksByPageNumber.get(pageNumber); - // Render this page immediately (not waiting for isRendering flag) - renderPageBatch([task], config.onProgress) - .then(() => { - // Trigger callback after lazy load batch - if (config.onBatchComplete) { - config.onBatchComplete(); - } + if (task) { + // Immediately unobserve to prevent multiple triggers + observer.unobserve(placeholder); + lazyLoadState.pendingTasks.delete(placeholder); + lazyLoadState.pendingTasksByPageNumber.delete(pageNumber); - // Check if all pages are rendered - if (lazyLoadState.pendingTasks.size === 0 && lazyLoadState.observer) { - lazyLoadState.observer.disconnect(); - lazyLoadState.observer = null; - } - }) - .catch((error) => { - console.error(`Error lazy loading page ${task.pageNumber}:`, error); - }); - } - } - }); - }, options); + task.placeholderElement = placeholder; - lazyLoadState.observer = observer; - return observer; + // Render this page immediately (not waiting for isRendering flag) + renderPageBatch([task], config.onProgress) + .then(() => { + // Trigger callback after lazy load batch + if (config.onBatchComplete) { + config.onBatchComplete(); + } + + // Check if all pages are rendered + if ( + lazyLoadState.pendingTasks.size === 0 && + lazyLoadState.observer + ) { + lazyLoadState.observer.disconnect(); + lazyLoadState.observer = null; + } + }) + .catch((error) => { + console.error( + `Error lazy loading page ${task.pageNumber}:`, + error + ); + }); + } + } + }); + }, options); + + lazyLoadState.observer = observer; + return observer; } /** * Request idle callback with fallback */ function requestIdleCallbackPolyfill(callback: () => void): void { - if ('requestIdleCallback' in window) { - requestIdleCallback(callback); - } else { - setTimeout(callback, 16); // ~60fps - } + if ('requestIdleCallback' in window) { + requestIdleCallback(callback); + } else { + setTimeout(callback, 16); // ~60fps + } } /** * Main function to render pages progressively with optional lazy loading */ export async function renderPagesProgressively( - pdfjsDoc: any, - container: HTMLElement, - createWrapper: (canvas: HTMLCanvasElement, pageNumber: number, fileName?: string) => HTMLElement, - config: RenderConfig = {} + pdfjsDoc: any, + container: HTMLElement, + createWrapper: ( + canvas: HTMLCanvasElement, + pageNumber: number, + fileName?: string + ) => HTMLElement, + config: RenderConfig = {} ): Promise { - const { - batchSize = 8, // Increased from 5 to 8 for faster initial render - useLazyLoading = true, - eagerLoadBatches = 2, // Eagerly load 1 batch ahead by default - onProgress, - onBatchComplete, - } = config; + const { + batchSize = 8, // Increased from 5 to 8 for faster initial render + useLazyLoading = true, + eagerLoadBatches = 2, // Eagerly load 1 batch ahead by default + onProgress, + onBatchComplete, + } = config; - const totalPages = pdfjsDoc.numPages; + const totalPages = pdfjsDoc.numPages; - // Render more pages initially to reduce lazy loading issues - const initialRenderCount = useLazyLoading - ? Math.min(20, totalPages) // Increased from 12 to 20 pages - : totalPages; + // Render more pages initially to reduce lazy loading issues + const initialRenderCount = useLazyLoading + ? Math.min(20, totalPages) // Increased from 12 to 20 pages + : totalPages; - // CRITICAL FIX: Create placeholders for ALL pages first to maintain order - const placeholders: HTMLElement[] = []; - for (let i = 1; i <= totalPages; i++) { - const placeholder = createPlaceholder(i); - container.appendChild(placeholder); - placeholders.push(placeholder); + // CRITICAL FIX: Create placeholders for ALL pages first to maintain order + const placeholders: HTMLElement[] = []; + for (let i = 1; i <= totalPages; i++) { + const placeholder = createPlaceholder(i); + container.appendChild(placeholder); + placeholders.push(placeholder); + } + + const tasks: PageTask[] = []; + + // Create tasks for all pages with direct placeholder references + for (let i = 1; i <= totalPages; i++) { + tasks.push({ + pageNumber: i, + pdfjsDoc, + container, + scale: config.useLazyLoading ? 0.3 : 0.5, + createWrapper, + placeholderElement: placeholders[i - 1], + }); + } + + // If lazy loading is enabled, set up observer for pages beyond initial render + if (useLazyLoading && totalPages > initialRenderCount) { + const observer = setupLazyRendering(container, config); + + for (let i = initialRenderCount + 1; i <= totalPages; i++) { + const placeholder = placeholders[i - 1]; + const task = tasks[i - 1]; + // Store the task for lazy rendering + lazyLoadState.pendingTasks.set(placeholder, task); + lazyLoadState.pendingTasksByPageNumber.set(task.pageNumber, task); + observer.observe(placeholder); } - const tasks: PageTask[] = []; + // Prepare eager load queue + const eagerStartIndex = initialRenderCount; + const eagerEndIndex = Math.min( + eagerStartIndex + eagerLoadBatches * batchSize, + totalPages + ); + lazyLoadState.eagerLoadQueue = tasks.slice(eagerStartIndex, eagerEndIndex); + lazyLoadState.nextEagerIndex = 0; + } - // Create tasks for all pages - for (let i = 1; i <= totalPages; i++) { - tasks.push({ - pageNumber: i, - pdfjsDoc, - container, - scale: config.useLazyLoading ? 0.3 : 0.5, - createWrapper, - }); - } + // Render initial pages in batches + const initialTasks = tasks.slice(0, initialRenderCount); - // If lazy loading is enabled, set up observer for pages beyond initial render - if (useLazyLoading && totalPages > initialRenderCount) { - const observer = setupLazyRendering(container, config); + for (let i = 0; i < initialTasks.length; i += batchSize) { + if (config.shouldCancel?.()) return; - for (let i = initialRenderCount + 1; i <= totalPages; i++) { - const placeholder = placeholders[i - 1]; - // Store the task for lazy rendering - lazyLoadState.pendingTasks.set(placeholder, tasks[i - 1]); - observer.observe(placeholder); + const batch = initialTasks.slice(i, i + batchSize); + + await new Promise((resolve) => { + requestIdleCallbackPolyfill(async () => { + await renderPageBatch(batch, onProgress); + + if (onProgress) { + onProgress(Math.min(i + batchSize, initialRenderCount), totalPages); } - // Prepare eager load queue - const eagerStartIndex = initialRenderCount; - const eagerEndIndex = Math.min( - eagerStartIndex + (eagerLoadBatches * batchSize), - totalPages - ); - lazyLoadState.eagerLoadQueue = tasks.slice(eagerStartIndex, eagerEndIndex); - lazyLoadState.nextEagerIndex = 0; - } + if (onBatchComplete) { + onBatchComplete(); + } - // Render initial pages in batches - const initialTasks = tasks.slice(0, initialRenderCount); + resolve(); + }); + }); + } - for (let i = 0; i < initialTasks.length; i += batchSize) { - if (config.shouldCancel?.()) return; - - const batch = initialTasks.slice(i, i + batchSize); - - await new Promise((resolve) => { - requestIdleCallbackPolyfill(async () => { - await renderPageBatch(batch, onProgress); - - if (onProgress) { - onProgress(Math.min(i + batchSize, initialRenderCount), totalPages); - } - - if (onBatchComplete) { - onBatchComplete(); - } - - resolve(); - }); - }); - } - - // Start eager loading AFTER initial batch is complete - if (useLazyLoading && eagerLoadBatches > 0 && totalPages > initialRenderCount) { - renderEagerBatch(config); - } + // Start eager loading AFTER initial batch is complete + if ( + useLazyLoading && + eagerLoadBatches > 0 && + totalPages > initialRenderCount + ) { + renderEagerBatch(config); + } } /** * Manually observe a placeholder element (useful for dynamically created placeholders) */ export function observePlaceholder( - placeholder: HTMLElement, - task: PageTask + placeholder: HTMLElement, + task: PageTask ): void { - if (!lazyLoadState.observer) { - console.warn('No active observer to register placeholder'); - return; - } - lazyLoadState.pendingTasks.set(placeholder, task); - lazyLoadState.observer.observe(placeholder); + if (!lazyLoadState.observer) { + console.warn('No active observer to register placeholder'); + return; + } + lazyLoadState.pendingTasks.set(placeholder, task); + lazyLoadState.pendingTasksByPageNumber.set(task.pageNumber, task); + lazyLoadState.observer.observe(placeholder); } /** * Eagerly renders the next batch in the background */ function renderEagerBatch(config: RenderConfig): void { - const { eagerLoadBatches = 2, batchSize = 8 } = config; + const { eagerLoadBatches = 2, batchSize = 8 } = config; - if (eagerLoadBatches <= 0 || lazyLoadState.eagerLoadQueue.length === 0) { - return; - } + if (eagerLoadBatches <= 0 || lazyLoadState.eagerLoadQueue.length === 0) { + return; + } + if (config.shouldCancel?.()) return; + + const { nextEagerIndex, eagerLoadQueue } = lazyLoadState; + + if (nextEagerIndex >= eagerLoadQueue.length) { + return; // All eager batches rendered + } + + const batchEnd = Math.min(nextEagerIndex + batchSize, eagerLoadQueue.length); + const batch = eagerLoadQueue.slice(nextEagerIndex, batchEnd); + + requestIdleCallbackPolyfill(async () => { if (config.shouldCancel?.()) return; - const { nextEagerIndex, eagerLoadQueue } = lazyLoadState; + // Remove these tasks from pending since we're rendering them eagerly + batch.forEach((task) => { + const placeholder = task.placeholderElement; + if (placeholder && lazyLoadState.observer) { + lazyLoadState.observer.unobserve(placeholder); + lazyLoadState.pendingTasks.delete(placeholder); + lazyLoadState.pendingTasksByPageNumber.delete(task.pageNumber); + } + }); - if (nextEagerIndex >= eagerLoadQueue.length) { - return; // All eager batches rendered + await renderPageBatch(batch, config.onProgress); + + if (config.onBatchComplete) { + config.onBatchComplete(); } - const batchEnd = Math.min(nextEagerIndex + batchSize, eagerLoadQueue.length); - const batch = eagerLoadQueue.slice(nextEagerIndex, batchEnd); + // Update next eager index + lazyLoadState.nextEagerIndex = batchEnd; - requestIdleCallbackPolyfill(async () => { - if (config.shouldCancel?.()) return; - - // Remove these tasks from pending since we're rendering them eagerly - batch.forEach(task => { - const placeholder = Array.from(lazyLoadState.pendingTasks.entries()) - .find(([_, t]) => t.pageNumber === task.pageNumber)?.[0]; - if (placeholder && lazyLoadState.observer) { - lazyLoadState.observer.unobserve(placeholder); - lazyLoadState.pendingTasks.delete(placeholder); - } - }); - - await renderPageBatch(batch, config.onProgress); - - if (config.onBatchComplete) { - config.onBatchComplete(); - } - - // Update next eager index - lazyLoadState.nextEagerIndex = batchEnd; - - // Queue next eager batch - const remainingBatches = Math.ceil((eagerLoadQueue.length - batchEnd) / batchSize); - if (remainingBatches > 0 && remainingBatches < eagerLoadBatches) { - // Continue eager loading if we have more batches within the eager threshold - renderEagerBatch(config); - } - }); + // Queue next eager batch + const remainingBatches = Math.ceil( + (eagerLoadQueue.length - batchEnd) / batchSize + ); + if (remainingBatches > 0 && remainingBatches < eagerLoadBatches) { + // Continue eager loading if we have more batches within the eager threshold + renderEagerBatch(config); + } + }); } /** * Cleanup function to disconnect observers */ export function cleanupLazyRendering(): void { - if (lazyLoadState.observer) { - lazyLoadState.observer.disconnect(); - lazyLoadState.observer = null; - } - lazyLoadState.pendingTasks.clear(); - lazyLoadState.isRendering = false; - lazyLoadState.eagerLoadQueue = []; - lazyLoadState.nextEagerIndex = 0; + if (lazyLoadState.observer) { + lazyLoadState.observer.disconnect(); + lazyLoadState.observer = null; + } + lazyLoadState.pendingTasks.clear(); + lazyLoadState.pendingTasksByPageNumber.clear(); + lazyLoadState.isRendering = false; + lazyLoadState.eagerLoadQueue = []; + lazyLoadState.nextEagerIndex = 0; }