russell@unturf.com
93926bfbfc
fitPageContent() in content.js: 6 progressive collapse stages (dedup, nav links, references, lists, code blocks, sidebar debris) before hard truncation. No summarization, real content structurally compressed. Wired into both page extraction points in embed modal. Added .working pulse and .uncloseai-spinner CSS animations for #004. Updated tickets #001 (CSP root cause), #004 (CSS ready), #005 (fixed).
1715 lines
37 KiB
CSS
1715 lines
37 KiB
CSS
/*
|
|
* This is free software for the public good of a permacomputer hosted at
|
|
* permacomputer.com, an always-on computer by the people, for the people.
|
|
* One which is durable, easy to repair, & distributed like tap water
|
|
* for machine learning intelligence.
|
|
*
|
|
* The permacomputer is community-owned infrastructure optimized around
|
|
* four values:
|
|
*
|
|
* TRUTH First principles, math & science, open source code freely distributed
|
|
* FREEDOM Voluntary partnerships, freedom from tyranny & corporate control
|
|
* HARMONY Minimal waste, self-renewing systems with diverse thriving connections
|
|
* LOVE Be yourself without hurting others, cooperation through natural law
|
|
*
|
|
* This software contributes to that vision by making machine learning
|
|
* accessible to everyone through a free, open, embeddable chat interface.
|
|
* Code is seeds to sprout on any abandoned technology.
|
|
*/
|
|
|
|
/* uncloseai. Modal - PicoCSS Override Styles */
|
|
|
|
/* Remove PicoCSS backdrop for main modal */
|
|
dialog#uncloseai-embedded-modal::backdrop {
|
|
backdrop-filter: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Override PicoCSS dialog styles with higher specificity */
|
|
dialog#uncloseai-embedded-modal[data-theme] {
|
|
/* Override PicoCSS positioning that sets top:0, left:0, right:0, bottom:0 */
|
|
position: fixed !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
|
|
/* Override PicoCSS sizing that sets min-width:100%, min-height:100% */
|
|
width: 80vw !important;
|
|
max-width: 1000px !important;
|
|
height: 90vh !important;
|
|
min-width: auto !important;
|
|
min-height: auto !important;
|
|
|
|
/* Override PicoCSS defaults */
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
z-index: 2000;
|
|
|
|
/* Styling */
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
|
|
/* PicoCSS sets display:flex with justify-content:center, we need to override */
|
|
display: block;
|
|
align-items: unset;
|
|
justify-content: unset;
|
|
}
|
|
|
|
/* Mobile full-screen - override PicoCSS for small screens */
|
|
@media (max-width: 768px) {
|
|
dialog#uncloseai-embedded-modal[data-theme] {
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
max-width: 100vw !important;
|
|
max-height: 100vh !important;
|
|
transform: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* Theme colors */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] {
|
|
background: rgb(26, 26, 26);
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] {
|
|
background: rgb(255, 255, 255);
|
|
color: rgb(33, 37, 41);
|
|
}
|
|
|
|
/* Modal container */
|
|
.uncloseai-modal-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header */
|
|
.uncloseai-modal-header {
|
|
padding: 16px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
|
|
/* Settings button */
|
|
dialog#uncloseai-embedded-modal .uncloseai-modal-settings-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
font-size: 18px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-content: center;
|
|
transition: background 0.2s;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.uncloseai-modal-settings-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Chat area */
|
|
.uncloseai-modal-chat-area {
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Settings panel */
|
|
.uncloseai-modal-settings {
|
|
padding: 16px;
|
|
display: none;
|
|
overflow-y: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.uncloseai-modal-settings.open {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1fr !important;
|
|
grid-template-rows: auto 1fr !important;
|
|
gap: 20px !important;
|
|
align-content: start !important;
|
|
}
|
|
|
|
.uncloseai-actions-full-width {
|
|
grid-column: 1 / -1 !important;
|
|
}
|
|
|
|
.uncloseai-settings-column {
|
|
display: block !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.uncloseai-modal-settings.open {
|
|
grid-template-columns: 1fr !important;
|
|
grid-template-rows: auto auto auto !important;
|
|
}
|
|
}
|
|
|
|
/* Dark theme settings panel */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
|
|
background: rgb(26, 26, 26);
|
|
}
|
|
|
|
/* Light theme settings panel */
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
|
|
background: rgb(255, 255, 255);
|
|
}
|
|
|
|
/* Controls */
|
|
.uncloseai-modal-controls {
|
|
padding: 8px 16px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: max-content;
|
|
gap: 18px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Input area */
|
|
.uncloseai-modal-input-area {
|
|
padding: 16px;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
align-items: end;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Input field */
|
|
.uncloseai-modal-input {
|
|
min-height: 44px;
|
|
max-height: 120px;
|
|
padding: 12px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
border-radius: 24px;
|
|
resize: none;
|
|
font-size: 16px;
|
|
font-family: inherit;
|
|
line-height: 1.4;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.uncloseai-modal-input:focus {
|
|
border-color: #667eea;
|
|
}
|
|
|
|
/* Send button */
|
|
.uncloseai-modal-send-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
display: grid;
|
|
place-items: center;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.uncloseai-modal-send-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Chat messages */
|
|
.uncloseai-chat-box {
|
|
max-width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.user-message {
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 4px 18px;
|
|
max-width: 95%;
|
|
word-wrap: break-word;
|
|
font-size: 14px;
|
|
margin-left: auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
.ai-message {
|
|
background: white;
|
|
color: #495057;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 18px 4px;
|
|
max-width: 95%;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
font-size: 14px;
|
|
margin-right: auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
/* Dark theme message colors */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .ai-message {
|
|
background: #2d3748;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* TRANSLATE MODAL STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Translate modal dialog - override PicoCSS dialog styles */
|
|
dialog#translate-modal {
|
|
/* Override PicoCSS positioning */
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
right: auto;
|
|
bottom: auto;
|
|
transform: translate(-50%, -50%);
|
|
|
|
/* Override PicoCSS sizing */
|
|
width: 95vw;
|
|
max-width: 800px;
|
|
max-height: 95vh;
|
|
min-width: auto;
|
|
min-height: auto;
|
|
|
|
/* Override PicoCSS defaults */
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
/*background: white;*/
|
|
overflow: auto;
|
|
|
|
/* Override PicoCSS flex layout */
|
|
display: block;
|
|
align-items: unset;
|
|
justify-content: unset;
|
|
}
|
|
|
|
/* Remove PicoCSS backdrop */
|
|
dialog#translate-modal::backdrop {
|
|
backdrop-filter: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Override PicoCSS modal overlay variables for translate modal */
|
|
dialog#translate-modal {
|
|
--pico-modal-overlay-backdrop-filter: none !important;
|
|
--pico-modal-overlay-background-color: transparent !important;
|
|
}
|
|
|
|
/* Translate modal header */
|
|
.translate-modal-header {
|
|
background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%);
|
|
color: white;
|
|
padding: 16px 20px;
|
|
margin: -1em -1em 1em -1em;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.translate-modal-header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.translate-modal-header .close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.translate-modal-header .close-btn:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Tab navigation */
|
|
.translate-tab-nav {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 2px solid #e9ecef;
|
|
gap: 2px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.translate-tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.translate-tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.translate-language-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.translate-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.translate-result-container {
|
|
margin-top: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.translate-result-container.show {
|
|
display: block;
|
|
}
|
|
|
|
.translate-progress-text {
|
|
font-weight: bold;
|
|
color: #4CAF50;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.translate-eta-text {
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.translate-status-text {
|
|
color: #777;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.translate-notice {
|
|
background: #e7f3ff;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
|
|
.translate-ai-notice {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
z-index: 10000;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.translate-raw-toggle-btn {
|
|
padding: 8px 16px;
|
|
background: #666;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.translate-result-area {
|
|
white-space: normal;
|
|
}
|
|
|
|
.translate-result-area.pre-wrap {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.translate-tab-nav li {
|
|
margin: 0;
|
|
}
|
|
|
|
.translate-tab-nav a {
|
|
display: block;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
color: #6c757d;
|
|
background: #f8f9fa;
|
|
border: 2px solid #dee2e6;
|
|
border-bottom: none;
|
|
border-radius: 6px 6px 0 0;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.translate-tab-nav a:hover {
|
|
background: #e9ecef;
|
|
color: #495057;
|
|
}
|
|
|
|
.translate-tab-nav a[aria-selected="true"] {
|
|
background: #c8e6c9;
|
|
color: #2e7d32;
|
|
border-color: #c8e6c9;
|
|
}
|
|
|
|
/* Form elements */
|
|
.translate-textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: inherit;
|
|
border: 1px solid rgba(128, 128, 128, 0.3);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(10px);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.translate-url-input {
|
|
width: 100%;
|
|
height: 2.5rem; /* Single line height instead of 150px */
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: inherit;
|
|
border: 1px solid rgba(128, 128, 128, 0.3);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(10px);
|
|
padding: 0.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.translate-language-select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.translate-btn {
|
|
padding: 12px 24px;
|
|
background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
margin: 16px 10px 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.translate-btn:hover {
|
|
background: linear-gradient(45deg, #45a049 0%, #4CAF50 100%);
|
|
}
|
|
|
|
/* Progress indicator */
|
|
.translate-progress-container {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 2px solid #4CAF50;
|
|
border-radius: 8px;
|
|
background: #f0fff0;
|
|
text-align: center;
|
|
}
|
|
|
|
.translate-progress-bar {
|
|
width: 100%;
|
|
height: 20px;
|
|
background: #e0e0e0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.translate-progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%);
|
|
width: 0%;
|
|
transition: width 0.5s ease;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Result display */
|
|
.translate-result {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
background: #f9f9f9;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* TTS MODAL STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* TTS modal dialog - override PicoCSS dialog styles */
|
|
dialog#tts-modal {
|
|
/* Override PicoCSS positioning */
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
right: auto;
|
|
bottom: auto;
|
|
transform: translate(-50%, -50%);
|
|
|
|
/* Override PicoCSS sizing */
|
|
width: 90vw;
|
|
max-width: 600px;
|
|
min-width: auto;
|
|
min-height: auto;
|
|
|
|
/* Override PicoCSS defaults */
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
background: white;
|
|
|
|
/* Override PicoCSS flex layout */
|
|
display: block;
|
|
align-items: unset;
|
|
justify-content: unset;
|
|
}
|
|
|
|
/* Remove PicoCSS backdrop */
|
|
dialog#tts-modal::backdrop {
|
|
backdrop-filter: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Override PicoCSS modal overlay variables for TTS modal */
|
|
dialog#tts-modal {
|
|
--pico-modal-overlay-backdrop-filter: none !important;
|
|
--pico-modal-overlay-background-color: transparent !important;
|
|
}
|
|
|
|
/* TTS modal header */
|
|
.tts-modal-header {
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.tts-modal-header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.tts-modal-header .close-btn {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
/* TTS content container */
|
|
.tts-modal-content {
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* TTS modal article */
|
|
.tts-modal-article {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* TTS textarea */
|
|
.tts-modal-textarea {
|
|
width: 100%;
|
|
height: 100px;
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* TTS result container */
|
|
.tts-result {
|
|
margin-top: 16px;
|
|
padding: 16px;
|
|
background: #f5f5f5;
|
|
border-radius: 6px;
|
|
display: none;
|
|
}
|
|
|
|
.tts-result.show {
|
|
display: block !important;
|
|
}
|
|
|
|
/* TTS time display */
|
|
.tts-time-display {
|
|
font-size: 12px;
|
|
color: #666;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* TTS error message */
|
|
.tts-error-message {
|
|
color: #d32f2f;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: #ffebee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Voice selection */
|
|
.tts-voice-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.tts-voice-label {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Speed control */
|
|
.tts-speed-control {
|
|
margin: 16px 0;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Play button */
|
|
.tts-play-btn {
|
|
padding: 12px 24px;
|
|
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.tts-play-btn:hover {
|
|
background: linear-gradient(45deg, #764ba2 0%, #667eea 100%);
|
|
}
|
|
|
|
/* Audio controls */
|
|
.tts-audio-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.tts-audio-controls button {
|
|
padding: 8px 16px;
|
|
background: #2196F3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.tts-audio-controls .download-btn {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
.tts-progress-container {
|
|
height: 6px;
|
|
background: #e0e0e0;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tts-progress-bar {
|
|
height: 100%;
|
|
background: #2196F3;
|
|
border-radius: 3px;
|
|
width: 0%;
|
|
transition: width 0.1s;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* COMMON UTILITY CLASSES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Container Classes */
|
|
.uncloseai-flex-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.uncloseai-flex-row {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: max-content;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.uncloseai-grid-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.uncloseai-panel {
|
|
background: #ffffff;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Button Classes with CSS Variables */
|
|
.uncloseai-btn-primary {
|
|
padding: 8px 16px;
|
|
background: var(--uncloseai-button-background, #f8f9fa);
|
|
border: 1px solid var(--uncloseai-button-border, #dee2e6);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
color: var(--uncloseai-primary-text, #495057);
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uncloseai-btn-primary.emoji-only {
|
|
font-size: 18px;
|
|
padding: 8px;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.uncloseai-btn-primary:hover {
|
|
background: var(--uncloseai-button-hover, #e9ecef);
|
|
}
|
|
|
|
.uncloseai-btn-small {
|
|
padding: 4px 8px;
|
|
font-size: 18px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border: 1px solid var(--uncloseai-action-border, rgba(255, 255, 255, 0.3));
|
|
background: var(--uncloseai-action-background, rgba(255, 255, 255, 0.2));
|
|
color: var(--uncloseai-action-text, #495057);
|
|
}
|
|
|
|
.uncloseai-btn-small:hover {
|
|
background: var(--uncloseai-action-hover, rgba(255, 255, 255, 0.3));
|
|
}
|
|
|
|
.uncloseai-btn-control {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--uncloseai-button-border, #dee2e6);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
color: var(--uncloseai-primary-text, #495057);
|
|
background: var(--uncloseai-button-background, #f8f9fa);
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uncloseai-btn-control:hover {
|
|
background: var(--uncloseai-button-hover, #e9ecef);
|
|
}
|
|
|
|
.uncloseai-btn-close {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.2);
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-content: center;
|
|
font-size: 18px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.uncloseai-btn-close:hover {
|
|
background: rgba(255,255,255,0.3);
|
|
}
|
|
|
|
/* Form Element Classes */
|
|
.uncloseai-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--uncloseai-button-border, #dee2e6);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background: var(--uncloseai-button-background, #ffffff);
|
|
color: var(--uncloseai-primary-text, #495057);
|
|
}
|
|
|
|
.uncloseai-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: var(--uncloseai-primary-text, #495057);
|
|
}
|
|
|
|
.uncloseai-section {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.uncloseai-title-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Code block styles - scoped to modal for specificity */
|
|
dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
opacity: 0.9;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
visibility: visible;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal .uncloseai-code-copy-btn:hover {
|
|
opacity: 1;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Message action buttons */
|
|
.uncloseai-message-actions {
|
|
margin-top: 8px;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: max-content;
|
|
gap: 18px;
|
|
opacity: 0.8;
|
|
justify-content: end;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* EMBED MODAL SPECIFIC STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Reset blog site heading styles that might interfere with our modals */
|
|
dialog#uncloseai-embedded-modal h1,
|
|
dialog#uncloseai-embedded-modal h2,
|
|
dialog#uncloseai-embedded-modal h3,
|
|
dialog#uncloseai-embedded-modal h4,
|
|
dialog#uncloseai-embedded-modal h5,
|
|
dialog#uncloseai-embedded-modal h6,
|
|
dialog#tts-modal h1,
|
|
dialog#tts-modal h2,
|
|
dialog#tts-modal h3,
|
|
dialog#tts-modal h4,
|
|
dialog#tts-modal h5,
|
|
dialog#tts-modal h6,
|
|
dialog#translate-modal h1,
|
|
dialog#translate-modal h2,
|
|
dialog#translate-modal h3,
|
|
dialog#translate-modal h4,
|
|
dialog#translate-modal h5,
|
|
dialog#translate-modal h6 {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Reset host page button styles that leak into our modals */
|
|
dialog#uncloseai-embedded-modal button,
|
|
dialog#tts-modal button,
|
|
dialog#translate-modal button {
|
|
min-width: unset;
|
|
max-width: unset;
|
|
min-height: unset;
|
|
max-height: unset;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
font: inherit;
|
|
line-height: normal;
|
|
letter-spacing: normal;
|
|
text-transform: none;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
/* API Configuration Styles */
|
|
.uncloseai-toggle-container {
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.uncloseai-toggle-label {
|
|
font-size: 14px;
|
|
color: #495057;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.uncloseai-input-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.uncloseai-input-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.uncloseai-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
background: white;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uncloseai-input:focus {
|
|
outline: none;
|
|
border-color: #007bff;
|
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.uncloseai-api-inputs {
|
|
margin-top: 12px;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.02);
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Main modal container and layout */
|
|
.uncloseai-modal-container {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: grid !important;
|
|
grid-template-rows: auto 1fr auto auto !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.uncloseai-modal-header {
|
|
padding: 16px !important;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
|
color: white !important;
|
|
display: grid !important;
|
|
grid-template-columns: 1fr auto !important;
|
|
align-items: center !important;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
position: relative !important;
|
|
z-index: 20 !important;
|
|
}
|
|
|
|
.uncloseai-modal-title {
|
|
margin: 0 !important;
|
|
font-weight: 600 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.uncloseai-modal-title-mobile {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.uncloseai-modal-title-desktop {
|
|
font-size: 20px !important;
|
|
}
|
|
|
|
.uncloseai-modal-subtitle {
|
|
font-size: 12px !important;
|
|
opacity: 0.9 !important;
|
|
font-weight: normal !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
.uncloseai-modal-subtitle-dim {
|
|
opacity: 0.8 !important;
|
|
}
|
|
|
|
/* Chat area */
|
|
.uncloseai-modal-chat-area {
|
|
overflow-y: auto !important;
|
|
padding: 0px !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
}
|
|
|
|
.uncloseai-chat-box {
|
|
max-width: 100% !important;
|
|
display: grid !important;
|
|
grid-template-columns: 1fr !important;
|
|
gap: 12px !important;
|
|
background: #f8f9fa !important;
|
|
padding: 16px !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* Dark theme chat box */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
|
|
background: #1a1a1a !important;
|
|
}
|
|
|
|
/* Settings panel */
|
|
.uncloseai-modal-settings {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
padding: 16px !important;
|
|
display: none !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.uncloseai-modal-settings.open {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Form inputs in modal */
|
|
.uncloseai-modal-select {
|
|
width: 100% !important;
|
|
padding: 8px 12px !important;
|
|
border: 1px solid var(--uncloseai-button-border, #dee2e6) !important;
|
|
border-radius: 6px !important;
|
|
font-size: 14px !important;
|
|
background: var(--uncloseai-button-background, #ffffff) !important;
|
|
color: var(--uncloseai-primary-text, #495057) !important;
|
|
}
|
|
|
|
/* Action grid and controls */
|
|
.uncloseai-modal-controls {
|
|
padding: 8px 16px !important;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
display: grid !important;
|
|
grid-auto-flow: column !important;
|
|
grid-auto-columns: max-content !important;
|
|
gap: 18px !important;
|
|
overflow-x: auto !important;
|
|
-webkit-overflow-scrolling: touch !important;
|
|
}
|
|
|
|
/* Input area */
|
|
.uncloseai-modal-input-area {
|
|
padding: 16px !important;
|
|
display: grid !important;
|
|
grid-template-columns: 1fr auto !important;
|
|
gap: 12px !important;
|
|
align-items: end !important;
|
|
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* Chat input */
|
|
.uncloseai-modal-input {
|
|
min-height: 44px !important;
|
|
max-height: 120px !important;
|
|
padding: 12px !important;
|
|
border: 1px solid rgba(0, 0, 0, 0.2) !important;
|
|
border-radius: 24px !important;
|
|
resize: none !important;
|
|
font-size: 16px !important;
|
|
font-family: inherit !important;
|
|
line-height: 1.4 !important;
|
|
outline: none !important;
|
|
transition: border-color 0.2s !important;
|
|
background: var(--uncloseai-button-background, #ffffff) !important;
|
|
color: var(--uncloseai-primary-text, #495057) !important;
|
|
}
|
|
|
|
.uncloseai-modal-input:focus {
|
|
border-color: #667eea !important;
|
|
}
|
|
|
|
/* Send button */
|
|
.uncloseai-modal-send-btn {
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
padding: 0 !important;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 50% !important;
|
|
cursor: pointer !important;
|
|
font-size: 20px !important;
|
|
font-weight: bold !important;
|
|
display: grid !important;
|
|
place-items: center !important;
|
|
transition: transform 0.2s !important;
|
|
}
|
|
|
|
.uncloseai-modal-send-btn:hover {
|
|
transform: scale(1.05) !important;
|
|
}
|
|
|
|
/* Messages */
|
|
.user-message {
|
|
background: rgba(0, 123, 255, 0.95);
|
|
color: white;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 4px 18px;
|
|
max-width: 95%;
|
|
word-wrap: break-word;
|
|
margin-left: auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
.ai-message {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
color: #495057;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 18px 4px;
|
|
max-width: 95%;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
margin-right: auto;
|
|
width: fit-content;
|
|
}
|
|
|
|
/* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */
|
|
.ai-message pre {
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
max-width: min(72vw, 900px);
|
|
background: #2b2b2b;
|
|
color: #f8f8f2;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.ai-message code {
|
|
max-width: min(72vw, 900px);
|
|
}
|
|
|
|
/* Remove double border: pre has the border, inner code should be transparent */
|
|
.ai-message pre > code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Mobile: use viewport units since modal is fullscreen */
|
|
@media (max-width: 768px) {
|
|
.ai-message pre {
|
|
max-width: 85vw;
|
|
}
|
|
|
|
.ai-message code {
|
|
max-width: 85vw;
|
|
}
|
|
}
|
|
|
|
.message-text {
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
/* Dark theme message colors */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .ai-message {
|
|
background: #2d3748 !important;
|
|
color: #e2e8f0 !important;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
|
|
background: #667eea !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Read page container */
|
|
.uncloseai-read-page-container {
|
|
display: inline-flex !important;
|
|
position: relative !important;
|
|
margin-right: 8px !important;
|
|
}
|
|
|
|
/* Translate dropdown */
|
|
.translate-dropdown {
|
|
position: absolute !important;
|
|
top: 100% !important;
|
|
left: 0 !important;
|
|
min-width: 200px !important;
|
|
max-height: 300px !important;
|
|
overflow-y: auto !important;
|
|
margin-top: 4px !important;
|
|
border-radius: 8px !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
|
z-index: 1000 !important;
|
|
background: var(--uncloseai-button-background, white) !important;
|
|
border: 1px solid var(--uncloseai-button-border, #ddd) !important;
|
|
}
|
|
|
|
.translate-dropdown-current {
|
|
padding: 8px 12px !important;
|
|
color: var(--uncloseai-primary-text, #333) !important;
|
|
background: var(--uncloseai-button-background, #f5f5f5) !important;
|
|
font-weight: bold !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.translate-dropdown-option {
|
|
padding: 8px 12px !important;
|
|
cursor: pointer !important;
|
|
transition: background-color 0.2s !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.4 !important;
|
|
color: var(--uncloseai-primary-text, #333) !important;
|
|
}
|
|
|
|
.translate-dropdown-option:hover {
|
|
background: var(--uncloseai-button-hover, #f5f5f5) !important;
|
|
}
|
|
|
|
.translate-dropdown-option-disabled {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Download button */
|
|
.uncloseai-download-btn {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
border-radius: 4px !important;
|
|
color: white !important;
|
|
cursor: pointer !important;
|
|
font-size: 12px !important;
|
|
margin-left: 8px !important;
|
|
padding: 4px 8px !important;
|
|
text-decoration: none !important;
|
|
transition: all 0.2s !important;
|
|
}
|
|
|
|
.uncloseai-download-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
/* Page reader status div - REMOVED (using tooltips now) */
|
|
max-width: 280px !important;
|
|
backdrop-filter: blur(4px) !important;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
gap: 8px !important;
|
|
flex-wrap: wrap !important;
|
|
animation: tooltip-fade-in 0.3s ease-out !important;
|
|
}
|
|
|
|
@keyframes tooltip-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Button with left margin - tooltip style buttons */
|
|
.uncloseai-btn-margin-left {
|
|
margin-left: 8px !important;
|
|
padding: 4px 8px !important;
|
|
background: rgba(255, 255, 255, 0.15) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
|
border-radius: 4px !important;
|
|
color: white !important;
|
|
cursor: pointer !important;
|
|
font-size: 11px !important;
|
|
transition: all 0.2s !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.uncloseai-btn-margin-left:hover {
|
|
background: rgba(255, 255, 255, 0.25) !important;
|
|
border-color: rgba(255, 255, 255, 0.4) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* UI.JS COMPONENT STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Container styles */
|
|
.uncloseai-ui-container {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
/* Button margin utilities */
|
|
.uncloseai-ui-button-margin {
|
|
margin: 10px;
|
|
}
|
|
|
|
/* Floating AI button */
|
|
.uncloseai-floating-button {
|
|
position: fixed;
|
|
bottom: 141px;
|
|
right: 10px;
|
|
width: 120px;
|
|
height: 55px;
|
|
border-radius: 22px;
|
|
font-family: 'ChunkFiveRegular', monospace;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
max-width: calc(100vw - 20px);
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
/* Dynamic colors set by JavaScript */
|
|
background: var(--floating-button-bg, #000000);
|
|
border: 2px solid var(--floating-button-border, #ffffff);
|
|
color: var(--floating-button-text, #ffffff);
|
|
}
|
|
|
|
.uncloseai-floating-button:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.uncloseai-floating-button.loading {
|
|
opacity: 0.7;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* Spinner animation for async operation buttons (ticket #004) */
|
|
@keyframes uncloseai-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes uncloseai-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.uncloseai-btn-small.working {
|
|
pointer-events: none;
|
|
animation: uncloseai-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.uncloseai-btn-primary.working {
|
|
pointer-events: none;
|
|
animation: uncloseai-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.uncloseai-spinner {
|
|
display: inline-block;
|
|
animation: uncloseai-spin 1s linear infinite;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* WIDGET LIBRARY STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Full interface chat container */
|
|
.widget-chat-box {
|
|
min-height: 200px;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
overflow-y: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.widget-input-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.widget-input-field {
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.widget-send-btn {
|
|
padding: 8px 16px;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Custom interface grid */
|
|
.widget-custom-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 10px;
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Feature containers */
|
|
.widget-feature-container {
|
|
border: 1px solid #ccc;
|
|
height: 150px;
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.widget-tts-container {
|
|
width: 100%;
|
|
height: 80px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
/* Smart translate dropdown */
|
|
.widget-translate-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 200px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
margin-top: 4px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
z-index: 1000;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.widget-translate-dropdown .option {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.widget-translate-dropdown .option:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* VAULT GATE STYLES - PICOCSS OVERRIDES */
|
|
/* =================================================================== */
|
|
|
|
/* Vault gate overlay */
|
|
.uncloseai-vault-gate {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
background: #1a1a2e;
|
|
}
|
|
|
|
/* Vault gate content card */
|
|
.uncloseai-vault-card {
|
|
display: grid;
|
|
gap: 14px;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
text-align: center;
|
|
padding: 28px 24px;
|
|
border-radius: 12px;
|
|
animation: vault-fade-in 0.25s ease-out;
|
|
}
|
|
|
|
/* Vault lock icon */
|
|
.uncloseai-vault-icon {
|
|
font-size: 1.8em;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Vault title */
|
|
.uncloseai-vault-title {
|
|
font-family: 'ChunkFiveRegular', monospace;
|
|
font-size: 1.5em;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Vault explanation text */
|
|
.uncloseai-vault-explanation {
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Vault password input */
|
|
.uncloseai-vault-input {
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
font-size: 0.95em;
|
|
border-radius: 8px;
|
|
border: 1.5px solid transparent;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uncloseai-vault-input:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
/* Vault submit button */
|
|
.uncloseai-vault-submit {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 0.95em;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
transition: opacity 0.15s, box-shadow 0.15s;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.uncloseai-vault-submit:hover {
|
|
opacity: 0.92;
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
|
|
}
|
|
|
|
.uncloseai-vault-submit:active {
|
|
opacity: 0.85;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Vault error message */
|
|
.uncloseai-vault-error {
|
|
font-size: 0.85em;
|
|
color: #dc3545;
|
|
display: none;
|
|
}
|
|
|
|
/* Dark theme vault gate */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-gate {
|
|
background: var(--uncloseai-modal-background, #1a1a2e);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-card {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-title {
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-explanation {
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-input {
|
|
background: rgba(255, 255, 255, 0.07);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
color: white;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Light theme vault gate */
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-gate {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-card {
|
|
background: white;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-title {
|
|
color: #1a1a2e;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-explanation {
|
|
color: #495057;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-input {
|
|
background: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
color: #212529;
|
|
}
|
|
|
|
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-input::placeholder {
|
|
color: #adb5bd;
|
|
}
|
|
|
|
/* Vault gate fade-in animation */
|
|
@keyframes vault-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.96);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|