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).
1655 lines
34 KiB
CSS
1655 lines
34 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 - Built-in Styles (for blog versions without PicoCSS) */
|
|
|
|
/* Main modal dialog */
|
|
dialog#uncloseai-embedded-modal {
|
|
position: fixed;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
z-index: 2000;
|
|
|
|
/* Desktop centered */
|
|
width: 80vw;
|
|
max-width: 1000px;
|
|
height: 90vh;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Mobile full-screen */
|
|
@media (max-width: 768px) {
|
|
dialog#uncloseai-embedded-modal {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
transform: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* 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 */
|
|
.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: 0px;
|
|
-webkit-overflow-scrolling: touch;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Settings panel */
|
|
.uncloseai-modal-settings {
|
|
padding: 16px;
|
|
display: none;
|
|
overflow-y: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.uncloseai-modal-settings.open {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
gap: 20px;
|
|
align-content: start;
|
|
}
|
|
|
|
.uncloseai-actions-full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.uncloseai-settings-column {
|
|
display: block;
|
|
}
|
|
|
|
@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 {
|
|
justify-self: end;
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 4px 18px;
|
|
max-width: 80%;
|
|
word-wrap: break-word;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.ai-message {
|
|
justify-self: start;
|
|
background: white;
|
|
color: #495057;
|
|
padding: 12px 16px;
|
|
border-radius: 18px 18px 18px 4px;
|
|
max-width: 80%;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 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 */
|
|
/* =================================================================== */
|
|
|
|
/* Remove backdrop for translate modal */
|
|
dialog#translate-modal::backdrop {
|
|
backdrop-filter: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Translate modal dialog */
|
|
dialog#translate-modal {
|
|
width: 95vw;
|
|
max-width: 800px;
|
|
max-height: 95vh;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
margin: 0;
|
|
overflow: auto;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
background: white;
|
|
}
|
|
|
|
/* 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 */
|
|
/* =================================================================== */
|
|
|
|
/* Remove backdrop for TTS modal */
|
|
dialog#tts-modal::backdrop {
|
|
backdrop-filter: none !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* TTS modal dialog */
|
|
dialog#tts-modal {
|
|
width: 90vw;
|
|
max-width: 600px;
|
|
background: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
padding: 0;
|
|
}
|
|
|
|
/* 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-columns: 1fr;
|
|
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;
|
|
}
|
|
|
|
/* 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 */
|
|
/* =================================================================== */
|
|
|
|
/* 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 */
|
|
/* =================================================================== */
|
|
|
|
/* 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;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 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%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.uncloseai-modal-title {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.uncloseai-modal-title-mobile {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.uncloseai-modal-title-desktop {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.uncloseai-modal-subtitle {
|
|
font-size: 12px;
|
|
opacity: 0.9;
|
|
font-weight: normal;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.uncloseai-modal-subtitle-dim {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Chat area */
|
|
.uncloseai-modal-chat-area {
|
|
overflow-y: auto;
|
|
padding: 0px;
|
|
-webkit-overflow-scrolling: touch;
|
|
background: transparent;
|
|
}
|
|
|
|
.uncloseai-chat-box {
|
|
max-width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 12px;
|
|
background: #f8f9fa;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Dark theme chat box */
|
|
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
/* Settings panel */
|
|
.uncloseai-modal-settings {
|
|
padding: 16px;
|
|
display: none;
|
|
overflow-y: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.uncloseai-modal-settings.open {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
gap: 20px;
|
|
align-content: start;
|
|
}
|
|
|
|
/* Form inputs in modal */
|
|
.uncloseai-modal-select {
|
|
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);
|
|
}
|
|
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Chat input */
|
|
.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;
|
|
background: var(--uncloseai-button-background, #ffffff);
|
|
color: var(--uncloseai-primary-text, #495057);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Read page container */
|
|
.uncloseai-read-page-container {
|
|
display: inline-flex;
|
|
position: relative;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Translate dropdown */
|
|
.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: var(--uncloseai-button-background, white);
|
|
border: 1px solid var(--uncloseai-button-border, #ddd);
|
|
}
|
|
|
|
.translate-dropdown-current {
|
|
padding: 8px 12px;
|
|
color: var(--uncloseai-primary-text, #333);
|
|
background: var(--uncloseai-button-background, #f5f5f5);
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.translate-dropdown-option {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: var(--uncloseai-primary-text, #333);
|
|
}
|
|
|
|
.translate-dropdown-option:hover {
|
|
background: var(--uncloseai-button-hover, #f5f5f5);
|
|
}
|
|
|
|
.translate-dropdown-option-disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Download button */
|
|
.uncloseai-download-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
padding: 4px 8px;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.uncloseai-download-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Page reader status div - REMOVED (using tooltips now) */
|
|
max-width: 280px;
|
|
backdrop-filter: blur(4px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
animation: tooltip-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
@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;
|
|
padding: 4px 8px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uncloseai-btn-margin-left:hover {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* UI.JS COMPONENT STYLES */
|
|
/* =================================================================== */
|
|
|
|
/* 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 */
|
|
/* =================================================================== */
|
|
|
|
/* 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-feature-container.show {
|
|
display: block;
|
|
}
|
|
|
|
.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: var(--uncloseai-content-background, white);
|
|
border: 1px solid var(--uncloseai-divider-color, #ddd);
|
|
}
|
|
|
|
.widget-translate-dropdown-current {
|
|
padding: 8px 12px;
|
|
color: var(--uncloseai-muted-text, #666);
|
|
border-bottom: 1px solid var(--uncloseai-divider-color, #ddd);
|
|
background: var(--uncloseai-content-background, #f5f5f5);
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.widget-translate-dropdown .option {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
color: var(--uncloseai-primary-text, #333);
|
|
}
|
|
|
|
.widget-translate-dropdown .option:hover {
|
|
background: var(--uncloseai-button-hover, #f5f5f5);
|
|
}
|
|
|
|
.widget-translate-dropdown .option-disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* =================================================================== */
|
|
/* VAULT GATE STYLES */
|
|
/* =================================================================== */
|
|
|
|
/* 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);
|
|
}
|
|
}
|