40640badad
This commit introduces significant enhancements to the Crawl4AI ecosystem: Chrome Extension - Script Builder (Alpha): - Add recording functionality to capture user interactions (clicks, typing, scrolling) - Implement smart event grouping for cleaner script generation - Support export to both JavaScript and C4A script formats - Add timeline view for visualizing and editing recorded actions - Include wait commands (time-based and element-based) - Add saved flows functionality for reusing automation scripts - Update UI with consistent dark terminal theme (Dank Mono font, green/pink accents) - Release new extension versions: v1.1.0, v1.2.0, v1.2.1 LLM Context Builder Improvements: - Reorganize context files from llmtxt/ to llm.txt/ with better structure - Separate diagram templates from text content (diagrams/ and txt/ subdirectories) - Add comprehensive context files for all major Crawl4AI components - Improve file naming convention for better discoverability Documentation Updates: - Update apps index page to match main documentation theme - Standardize color scheme: "Available" tags use primary color (#50ffff) - Change "Coming Soon" tags to dark gray for better visual hierarchy - Add interactive two-column layout for extension landing page - Include code examples for both Schema Builder and Script Builder features Technical Improvements: - Enhance event capture mechanism with better element selection - Add support for contenteditable elements and complex form interactions - Implement proper scroll event handling for both window and element scrolling - Add meta key support for keyboard shortcuts - Improve selector generation for more reliable element targeting The Script Builder is released as Alpha, acknowledging potential bugs while providing early access to this powerful automation recording feature.
1658 lines
28 KiB
CSS
1658 lines
28 KiB
CSS
/* Crawl4AI Assistant Overlay Styles */
|
|
|
|
/* Font Face Definitions - Note: Fonts will be loaded from extension URL in content script */
|
|
|
|
:root {
|
|
--font-primary: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
--font-code: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
/* Highlight box for hovering */
|
|
.c4ai-highlight-box {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 999999;
|
|
transition: all 0.1s ease;
|
|
display: none;
|
|
}
|
|
|
|
.c4ai-highlight-box.c4ai-container-mode {
|
|
border: 3px dashed #0fbbaa;
|
|
background: rgba(15, 187, 170, 0.1);
|
|
box-shadow: 0 0 0 2px rgba(15, 187, 170, 0.3);
|
|
}
|
|
|
|
.c4ai-highlight-box.c4ai-field-mode {
|
|
border: 2px dashed #f380f5;
|
|
background: rgba(243, 128, 245, 0.1);
|
|
box-shadow: 0 0 0 2px rgba(243, 128, 245, 0.3);
|
|
}
|
|
|
|
/* Selected elements */
|
|
.c4ai-selected-container {
|
|
outline: 3px solid #0fbbaa !important;
|
|
outline-offset: 2px;
|
|
background: rgba(15, 187, 170, 0.05) !important;
|
|
}
|
|
|
|
.c4ai-selected-field {
|
|
outline: 2px solid #f380f5 !important;
|
|
outline-offset: 1px;
|
|
background: rgba(243, 128, 245, 0.1) !important;
|
|
position: relative;
|
|
}
|
|
|
|
.c4ai-selected-field::after {
|
|
content: attr(data-c4ai-field);
|
|
position: absolute;
|
|
top: -24px;
|
|
left: 0;
|
|
background: #f380f5;
|
|
color: #000;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: var(--font-primary);
|
|
z-index: 999999;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Toolbar */
|
|
.c4ai-toolbar {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: #070708;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 8px;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
width: 320px;
|
|
color: #e8e9ed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c4ai-toolbar * {
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* macOS-style titlebar */
|
|
.c4ai-toolbar-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: #1a1a1a;
|
|
border-bottom: 1px solid #3f3f44;
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.c4ai-titlebar-dots {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.c4ai-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.c4ai-dot-close {
|
|
background: #ff5f57;
|
|
}
|
|
|
|
.c4ai-dot-close:hover {
|
|
background: #ff3030;
|
|
}
|
|
|
|
.c4ai-dot-minimize {
|
|
background: #ffbd2e;
|
|
}
|
|
|
|
.c4ai-dot-minimize:hover {
|
|
background: #ffaa00;
|
|
}
|
|
|
|
.c4ai-dot-maximize {
|
|
background: #28ca42;
|
|
}
|
|
|
|
.c4ai-dot-maximize:hover {
|
|
background: #1eb533;
|
|
}
|
|
|
|
.c4ai-titlebar-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.c4ai-titlebar-title {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-toolbar-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.c4ai-toolbar-status {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
padding: 12px;
|
|
background: #3f3f44;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.c4ai-status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.c4ai-status-label {
|
|
font-size: 12px;
|
|
color: #a3abba;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.c4ai-status-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-toolbar-hint {
|
|
margin-top: 16px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: #d5cec0;
|
|
padding: 12px;
|
|
background: #3f3f44;
|
|
border-radius: 8px;
|
|
border-left: 3px solid #0fbbaa;
|
|
}
|
|
|
|
.c4ai-toolbar-hint strong {
|
|
color: #0fbbaa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Fields list */
|
|
.c4ai-fields-list {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background: #3f3f44;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f44;
|
|
}
|
|
|
|
.c4ai-fields-header {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
color: #a3abba;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c4ai-fields-items {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.c4ai-field-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
margin-bottom: 4px;
|
|
background: #070708;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.c4ai-field-name {
|
|
font-weight: 600;
|
|
color: #f380f5;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.c4ai-field-value {
|
|
color: #a3abba;
|
|
font-size: 11px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Field naming dialog */
|
|
.c4ai-field-dialog {
|
|
position: absolute;
|
|
background: #070708;
|
|
border: 2px solid #f380f5;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
z-index: 999999;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
color: #e8e9ed;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.c4ai-field-dialog h4 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 14px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-field-dialog input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 6px;
|
|
color: #e8e9ed;
|
|
font-size: 14px;
|
|
margin-bottom: 12px;
|
|
outline: none;
|
|
}
|
|
|
|
.c4ai-field-dialog input:focus {
|
|
border-color: #f380f5;
|
|
box-shadow: 0 0 0 2px rgba(243, 128, 245, 0.2);
|
|
}
|
|
|
|
.c4ai-field-preview {
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin-bottom: 12px;
|
|
padding: 8px;
|
|
background: #1a1a1a;
|
|
border-radius: 6px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.c4ai-field-preview strong {
|
|
color: #ccc;
|
|
}
|
|
|
|
.c4ai-field-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.c4ai-field-actions button {
|
|
padding: 6px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#c4ai-field-save {
|
|
background: #f380f5;
|
|
color: #070708;
|
|
}
|
|
|
|
#c4ai-field-save:hover {
|
|
background: #e370e5;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
#c4ai-field-cancel {
|
|
background: #3f3f44;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
#c4ai-field-cancel:hover {
|
|
background: #4f4f54;
|
|
}
|
|
|
|
/* Toolbar action buttons */
|
|
.c4ai-toolbar-actions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.c4ai-action-btn {
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 6px;
|
|
color: #e8e9ed;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.c4ai-action-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Primary button styling */
|
|
.c4ai-primary-btn {
|
|
background: #0fbbaa;
|
|
border-color: #0fbbaa;
|
|
color: #070708;
|
|
}
|
|
|
|
.c4ai-primary-btn:hover {
|
|
background: #1fcbba;
|
|
border-color: #1fcbba;
|
|
}
|
|
|
|
/* Secondary button styling */
|
|
.c4ai-secondary-btn {
|
|
background: #2a2a2a;
|
|
border-color: #2a2a2a;
|
|
color: #a3abba;
|
|
}
|
|
|
|
.c4ai-secondary-btn:hover {
|
|
background: #3a3a3a;
|
|
border-color: #3a3a3a;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-pause-btn {
|
|
background: #f380f5;
|
|
border-color: #f380f5;
|
|
color: #070708;
|
|
}
|
|
|
|
.c4ai-pause-btn:hover {
|
|
background: #e370e5;
|
|
}
|
|
|
|
.c4ai-pause-btn.c4ai-paused {
|
|
background: #ff3c74;
|
|
border-color: #ff3c74;
|
|
}
|
|
|
|
.c4ai-generate-btn {
|
|
background: #0fbbaa;
|
|
border-color: #0fbbaa;
|
|
color: #070708;
|
|
}
|
|
|
|
.c4ai-generate-btn:hover {
|
|
background: #1fcbba;
|
|
}
|
|
|
|
/* Code modal */
|
|
.c4ai-code-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.c4ai-code-modal-content {
|
|
background: #070708;
|
|
border: 2px solid #3f3f44;
|
|
border-radius: 16px;
|
|
width: 90%;
|
|
max-width: 900px;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.c4ai-code-modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.c4ai-code-modal-header h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
.c4ai-close-modal {
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.c4ai-close-modal:hover {
|
|
background: #2a2a2a;
|
|
color: #fff;
|
|
}
|
|
|
|
.c4ai-code-modal-body {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.c4ai-code-block {
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
.c4ai-code-block code {
|
|
font-family: var(--font-code);
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: #e8e9ed;
|
|
white-space: pre;
|
|
display: block;
|
|
}
|
|
|
|
/* Syntax highlighting */
|
|
.c4ai-keyword {
|
|
color: #0fbbaa;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.c4ai-string {
|
|
color: #f380f5;
|
|
}
|
|
|
|
.c4ai-comment {
|
|
color: #a3abba;
|
|
font-style: italic;
|
|
}
|
|
|
|
.c4ai-function {
|
|
color: #ff3c74;
|
|
}
|
|
|
|
.c4ai-code-modal-footer {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 20px 24px;
|
|
border-top: 1px solid #2a2a2a;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.c4ai-download-btn {
|
|
background: #0fbbaa;
|
|
color: #070708;
|
|
border: none;
|
|
}
|
|
|
|
.c4ai-download-btn:hover {
|
|
background: #1fcbba;
|
|
}
|
|
|
|
.c4ai-copy-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
}
|
|
|
|
.c4ai-copy-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
.c4ai-cloud-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.c4ai-cloud-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.c4ai-cloud-btn:hover:disabled {
|
|
background: #3f3f44;
|
|
transform: none;
|
|
}
|
|
|
|
/* Script Builder Styles */
|
|
.c4ai-script-toolbar {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: #070708;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 8px;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
width: 360px;
|
|
color: #e8e9ed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Recording Indicator */
|
|
.c4ai-recording-indicator {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #1a1a1a;
|
|
border: 1px solid #ff3c74;
|
|
border-radius: 20px;
|
|
padding: 8px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
color: #ff3c74;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 16px rgba(255, 60, 116, 0.3);
|
|
}
|
|
|
|
.c4ai-recording-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ff3c74;
|
|
border-radius: 50%;
|
|
animation: c4ai-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes c4ai-pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(0.8); }
|
|
}
|
|
|
|
.c4ai-recording-indicator.c4ai-paused .c4ai-recording-dot {
|
|
animation: none;
|
|
background: #666;
|
|
}
|
|
|
|
/* Format Select */
|
|
.c4ai-format-select {
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
color: #e8e9ed;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-family: var(--font-primary);
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c4ai-format-select:focus {
|
|
border-color: #0fbbaa;
|
|
}
|
|
|
|
/* Wait Button */
|
|
.c4ai-wait-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
}
|
|
|
|
.c4ai-wait-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
/* Wait Dialog */
|
|
.c4ai-wait-dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-wait-dialog-content {
|
|
background: #070708;
|
|
border: 2px solid #f380f5;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
color: #e8e9ed;
|
|
min-width: 350px;
|
|
}
|
|
|
|
.c4ai-wait-dialog h4 {
|
|
margin: 0 0 16px 0;
|
|
font-size: 16px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-wait-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.c4ai-wait-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c4ai-wait-option input[type="radio"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c4ai-wait-input {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.c4ai-wait-input input[type="number"] {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 6px;
|
|
color: #e8e9ed;
|
|
font-size: 14px;
|
|
outline: none;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-wait-input input[type="number"]:focus {
|
|
border-color: #f380f5;
|
|
box-shadow: 0 0 0 2px rgba(243, 128, 245, 0.2);
|
|
}
|
|
|
|
.c4ai-wait-input p {
|
|
margin: 0;
|
|
color: #a3abba;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.c4ai-wait-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.c4ai-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.c4ai-primary {
|
|
background: #f380f5 !important;
|
|
color: #070708 !important;
|
|
}
|
|
|
|
.c4ai-primary:hover {
|
|
background: #e370e5 !important;
|
|
}
|
|
|
|
/* Wait Mode Highlight */
|
|
.c4ai-highlight-box.c4ai-wait-mode {
|
|
border: 2px dashed #f380f5 !important;
|
|
background: rgba(243, 128, 245, 0.1) !important;
|
|
box-shadow: 0 0 0 2px rgba(243, 128, 245, 0.3) !important;
|
|
}
|
|
|
|
/* Timeline Modal */
|
|
.c4ai-timeline-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-timeline-content {
|
|
background: #070708;
|
|
border: 2px solid #3f3f44;
|
|
border-radius: 16px;
|
|
width: 90%;
|
|
max-width: 700px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.c4ai-timeline-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.c4ai-timeline-header h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
.c4ai-timeline-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.c4ai-timeline-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.c4ai-timeline-events {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.c4ai-timeline-event {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: #3f3f44;
|
|
border-radius: 8px;
|
|
border: 1px solid #3f3f44;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.c4ai-timeline-event:hover {
|
|
border-color: #0fbbaa;
|
|
}
|
|
|
|
.c4ai-event-checkbox {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c4ai-event-label {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.c4ai-event-time {
|
|
color: #a3abba;
|
|
font-size: 12px;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.c4ai-event-type {
|
|
background: #0fbbaa;
|
|
color: #070708;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.c4ai-event-detail {
|
|
color: #e8e9ed;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 400px; /* Prevent extremely long selectors from breaking layout */
|
|
}
|
|
|
|
.c4ai-timeline-footer {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 20px 24px;
|
|
border-top: 1px solid #2a2a2a;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Pause button state */
|
|
.c4ai-pause-btn.c4ai-paused {
|
|
background: #ff3c74;
|
|
border-color: #ff3c74;
|
|
}
|
|
|
|
/* Summary actions - 2x2 grid layout */
|
|
.c4ai-summary-actions {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px !important;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #2a2a2a;
|
|
}
|
|
|
|
/* Start screen styles */
|
|
.c4ai-start-screen {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.c4ai-welcome-message {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.c4ai-welcome-message h3 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-welcome-message p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #a3abba;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.c4ai-start-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Start screen styles */
|
|
.c4ai-start-screen {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.c4ai-welcome-message {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.c4ai-welcome-message h3 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-welcome-message p {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #a3abba;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.c4ai-start-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Primary and Secondary button styles */
|
|
.c4ai-primary-btn {
|
|
background: #0fbbaa !important;
|
|
border-color: #0fbbaa !important;
|
|
color: #070708 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c4ai-primary-btn:hover {
|
|
background: #1fcbba !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(15, 187, 170, 0.3);
|
|
}
|
|
|
|
.c4ai-secondary-btn {
|
|
background: #2a2a2a !important;
|
|
border-color: #2a2a2a !important;
|
|
color: #a3abba !important;
|
|
}
|
|
|
|
.c4ai-secondary-btn:hover {
|
|
background: #3a3a3a !important;
|
|
border-color: #3a3a3a !important;
|
|
color: #e8e9ed !important;
|
|
}
|
|
|
|
.c4ai-replay-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
color: #a3abba;
|
|
}
|
|
|
|
.c4ai-replay-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
.c4ai-save-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
color: #a3abba;
|
|
}
|
|
|
|
.c4ai-save-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
.c4ai-timeline-btn {
|
|
background: #e370e5 !important;
|
|
border-color: #e370e5 !important;
|
|
color: #070708 !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c4ai-timeline-btn:hover {
|
|
background: #e77ee9 !important;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(173, 15, 187, 0.3);
|
|
}
|
|
|
|
.c4ai-record-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
color: #a3abba;
|
|
}
|
|
|
|
.c4ai-record-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
/* Disabled button state */
|
|
.c4ai-action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.c4ai-action-btn:disabled:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Saved Flows button styling */
|
|
.c4ai-flows-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
color: #a3abba;
|
|
}
|
|
|
|
.c4ai-flows-btn:hover {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
}
|
|
|
|
/* Saved Flows Modal */
|
|
.c4ai-saved-flows-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-saved-flows-content {
|
|
background: #070708;
|
|
border: 2px solid #3f3f44;
|
|
border-radius: 16px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
max-height: 70vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.c4ai-saved-flows-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.c4ai-saved-flows-header h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
.c4ai-saved-flows-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.c4ai-no-flows {
|
|
text-align: center;
|
|
color: #a3abba;
|
|
font-size: 14px;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.c4ai-flows-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.c4ai-flow-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.c4ai-flow-item:hover {
|
|
border-color: #0fbbaa;
|
|
}
|
|
|
|
.c4ai-flow-info h3 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-flow-meta {
|
|
font-size: 12px;
|
|
color: #a3abba;
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.c4ai-flow-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.c4ai-load-flow-btn {
|
|
background: #0fbbaa !important;
|
|
border-color: #0fbbaa !important;
|
|
color: #070708 !important;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.c4ai-load-flow-btn:hover {
|
|
background: #1fcbba !important;
|
|
}
|
|
|
|
.c4ai-delete-flow-btn {
|
|
background: #3f3f44;
|
|
border-color: #3f3f44;
|
|
color: #ff3c74;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.c4ai-delete-flow-btn:hover {
|
|
background: #ff3c74;
|
|
color: #070708;
|
|
border-color: #ff3c74;
|
|
}
|
|
|
|
/* Replay Indicator */
|
|
.c4ai-replay-indicator {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #070708;
|
|
border: 2px solid #0fbbaa;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 8px 32px rgba(15, 187, 170, 0.3);
|
|
min-width: 300px;
|
|
}
|
|
|
|
.c4ai-replay-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.c4ai-replay-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #0fbbaa;
|
|
}
|
|
|
|
.c4ai-replay-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.c4ai-replay-progress {
|
|
height: 6px;
|
|
background: #3f3f44;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c4ai-replay-progress-bar {
|
|
height: 100%;
|
|
background: #0fbbaa;
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.c4ai-replay-status {
|
|
font-size: 13px;
|
|
color: #e8e9ed;
|
|
text-align: center;
|
|
}
|
|
|
|
.c4ai-replay-stop {
|
|
background: #ff3c74;
|
|
border: none;
|
|
color: #070708;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-replay-stop:hover {
|
|
background: #ff5c84;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Replay Highlight */
|
|
.c4ai-replay-highlight {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 999998;
|
|
border: 3px solid #0fbbaa;
|
|
background: rgba(15, 187, 170, 0.2);
|
|
box-shadow: 0 0 0 4px rgba(15, 187, 170, 0.3);
|
|
transition: all 0.3s ease;
|
|
display: none;
|
|
}
|
|
|
|
/* Click Indicator Animation */
|
|
.c4ai-click-indicator {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 999999;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid #0fbbaa;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: c4ai-click-pulse 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes c4ai-click-pulse {
|
|
0% {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 60px;
|
|
height: 60px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Keyboard Overlay */
|
|
.c4ai-keyboard-overlay {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #070708;
|
|
border: 2px solid #f380f5;
|
|
border-radius: 8px;
|
|
padding: 20px 40px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #f380f5;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 8px 32px rgba(243, 128, 245, 0.3);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.c4ai-keyboard-overlay.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Debugger Modal */
|
|
.c4ai-debugger-modal {
|
|
position: fixed;
|
|
top: 50px;
|
|
right: 20px;
|
|
background: #070708;
|
|
border: 2px solid #3f3f44;
|
|
border-radius: 12px;
|
|
z-index: 999999;
|
|
font-family: var(--font-primary);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
width: 500px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c4ai-debugger-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c4ai-debugger-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #3f3f44;
|
|
background: #1a1a1a;
|
|
border-radius: 12px 12px 0 0;
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.c4ai-debugger-header h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-debugger-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.c4ai-debugger-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
background: #1a1a1a;
|
|
border-bottom: 1px solid #3f3f44;
|
|
}
|
|
|
|
.c4ai-debug-btn {
|
|
padding: 8px 12px;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 6px;
|
|
color: #e8e9ed;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-debug-btn:hover:not(:disabled) {
|
|
background: #4f4f54;
|
|
border-color: #5f5f64;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.c4ai-debug-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.c4ai-run-btn:not(:disabled) {
|
|
background: #0fbbaa;
|
|
border-color: #0fbbaa;
|
|
color: #070708;
|
|
}
|
|
|
|
.c4ai-run-btn:hover:not(:disabled) {
|
|
background: #1fcbba;
|
|
}
|
|
|
|
.c4ai-stop-btn {
|
|
background: #ff3c74;
|
|
border-color: #ff3c74;
|
|
color: #070708;
|
|
}
|
|
|
|
.c4ai-stop-btn:hover {
|
|
background: #ff5c84;
|
|
}
|
|
|
|
.c4ai-debugger-status {
|
|
padding: 12px 16px;
|
|
background: #3f3f44;
|
|
border-bottom: 1px solid #3f3f44;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.c4ai-debug-label {
|
|
font-size: 12px;
|
|
color: #a3abba;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.c4ai-debug-value {
|
|
font-size: 14px;
|
|
color: #0fbbaa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c4ai-debugger-actions {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Debug Action Item */
|
|
.c4ai-debug-action {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
margin-bottom: 4px;
|
|
background: #1a1a1a;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.c4ai-debug-action:hover {
|
|
background: #2a2a2a;
|
|
}
|
|
|
|
.c4ai-debug-action.c4ai-current {
|
|
border-color: #0fbbaa;
|
|
background: rgba(15, 187, 170, 0.1);
|
|
}
|
|
|
|
.c4ai-debug-action.has-breakpoint {
|
|
border-left: 4px solid #ff3c74;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.c4ai-debug-action-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
width: 60px;
|
|
}
|
|
|
|
.c4ai-breakpoint-checkbox {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c4ai-action-number {
|
|
font-size: 12px;
|
|
color: #a3abba;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.c4ai-action-indicator {
|
|
color: #0fbbaa;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
width: 12px;
|
|
}
|
|
|
|
.c4ai-debug-action.c4ai-current .c4ai-action-indicator {
|
|
opacity: 1;
|
|
}
|
|
|
|
.c4ai-debug-action-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.c4ai-action-type {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: #0fbbaa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.c4ai-action-detail {
|
|
font-size: 12px;
|
|
color: #e8e9ed;
|
|
padding: 3px 6px;
|
|
background: #070708;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.c4ai-action-detail[contenteditable]:hover {
|
|
border-color: #3f3f44;
|
|
}
|
|
|
|
.c4ai-action-detail[contenteditable]:focus {
|
|
outline: none;
|
|
border-color: #0fbbaa;
|
|
white-space: normal;
|
|
}
|
|
|
|
.c4ai-debug-action-right {
|
|
display: flex;
|
|
gap: 4px;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.c4ai-debug-action:hover .c4ai-debug-action-right {
|
|
opacity: 1;
|
|
}
|
|
|
|
.c4ai-action-edit,
|
|
.c4ai-action-delete,
|
|
.c4ai-action-play {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.c4ai-action-edit:hover {
|
|
background: #3f3f44;
|
|
}
|
|
|
|
.c4ai-action-delete:hover {
|
|
background: #ff3c74;
|
|
}
|
|
|
|
.c4ai-action-play {
|
|
color: #0fbbaa;
|
|
}
|
|
|
|
.c4ai-action-play:hover {
|
|
background: #0fbbaa;
|
|
color: #070708;
|
|
}
|
|
|
|
/* Edit Dialog */
|
|
.c4ai-edit-dialog {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
z-index: 999999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
.c4ai-edit-content {
|
|
background: #070708;
|
|
border: 2px solid #3f3f44;
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
min-width: 400px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.c4ai-edit-content h3 {
|
|
margin: 0 0 20px 0;
|
|
font-size: 18px;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
.c4ai-edit-field {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.c4ai-edit-field label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #a3abba;
|
|
margin-bottom: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.c4ai-edit-field select,
|
|
.c4ai-edit-field input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: #3f3f44;
|
|
border: 1px solid #3f3f44;
|
|
border-radius: 6px;
|
|
color: #e8e9ed;
|
|
font-size: 14px;
|
|
font-family: var(--font-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.c4ai-edit-field select:focus,
|
|
.c4ai-edit-field input:focus {
|
|
border-color: #0fbbaa;
|
|
}
|
|
|
|
.c4ai-edit-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.c4ai-edit-actions button {
|
|
padding: 8px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-family: var(--font-primary);
|
|
}
|
|
|
|
#c4ai-edit-save {
|
|
background: #0fbbaa;
|
|
color: #070708;
|
|
}
|
|
|
|
#c4ai-edit-save:hover {
|
|
background: #1fcbba;
|
|
}
|
|
|
|
#c4ai-edit-cancel {
|
|
background: #3f3f44;
|
|
color: #e8e9ed;
|
|
}
|
|
|
|
#c4ai-edit-cancel:hover {
|
|
background: #4f4f54;
|
|
} |