mirror of
https://github.com/kunalja/VariantEditor.git
synced 2026-07-22 13:00:32 +00:00
486 lines
No EOL
12 KiB
CSS
486 lines
No EOL
12 KiB
CSS
/* Variant Editor Plugin Styles */
|
|
|
|
/* Dimmed lines */
|
|
.markdown-source-view .cm-line.fh-dim,
|
|
.cm-line.fh-dim {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
/* Active line (contains the selected text) */
|
|
.markdown-source-view .cm-line.fh-active {
|
|
opacity: 1 !important;
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: var(--background-primary);
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 0 1px var(--background-modifier-border);
|
|
}
|
|
|
|
/* When in sentence mode, make the active line more subtle */
|
|
.markdown-source-view .cm-line.fh-active:not(.fh-dim) {
|
|
background-color: var(--background-primary);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Highlighted text */
|
|
.fh-highlight {
|
|
background-color: var(--text-highlight-bg);
|
|
color: var(--text-normal) !important;
|
|
/* Use the same styling approach as native selection */
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
z-index: 1;
|
|
position: relative;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Make highlighted text stand out even when selected */
|
|
.cm-line .cm-selectionBackground~.fh-highlight,
|
|
.cm-line .cm-selectionBackground+.fh-highlight,
|
|
.cm-line .fh-highlight.cm-selectionBackground {
|
|
background-color: rgba(255, 207, 64, 0.6) !important;
|
|
/* Lighter yellow that shows through selection */
|
|
mix-blend-mode: normal;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Variant indicator styles */
|
|
.variant-indicator {
|
|
background-color: rgba(121, 184, 255, 0.2);
|
|
border-bottom: 1px dashed #79b8ff;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Hide variant syntax parts */
|
|
.variant-syntax-start,
|
|
.variant-syntax-end,
|
|
.variant-inactive-option {
|
|
display: inline;
|
|
color: transparent;
|
|
font-size: 0;
|
|
position: relative;
|
|
pointer-events: auto;
|
|
cursor: text;
|
|
}
|
|
|
|
/* Show a small indicator for hidden parts when hovered */
|
|
.variant-syntax-start:hover,
|
|
.variant-syntax-end:hover,
|
|
.variant-inactive-option:hover {
|
|
background-color: rgba(121, 184, 255, 0.3);
|
|
}
|
|
|
|
/* Active variant option */
|
|
.variant-active-option {
|
|
display: inline;
|
|
background-color: rgba(121, 184, 255, 0.2);
|
|
border-bottom: 1px dashed #79b8ff;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
pointer-events: auto;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* Style for clickable variants */
|
|
.clickable-variant {
|
|
cursor: pointer;
|
|
border-bottom: 1px dotted var(--interactive-accent);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.clickable-variant:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Modal styles */
|
|
/* Header with title and close button inline */
|
|
/* Using Obsidian's built-in modal header instead of custom header */
|
|
|
|
/* Style the variant input container */
|
|
.variant-editor-variant-container {
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.variant-editor-container {
|
|
margin-bottom: 15px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
padding-right: 5px;
|
|
/* Custom scrollbar styling */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #666 #2a2a2a;
|
|
}
|
|
|
|
/* Webkit scrollbar styling */
|
|
.variant-editor-container::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.variant-editor-container::-webkit-scrollbar-track {
|
|
background: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.variant-editor-container::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb-bg);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.variant-editor-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
margin-bottom: 8px;
|
|
border-radius: 8px;
|
|
background-color: var(--background-secondary);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: all 0.2s;
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.variant-editor-row:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
/* Rainbow border for active variant */
|
|
.variant-editor-row-active {
|
|
background-color: var(--background-secondary);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.variant-editor-row-active::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, #8b5cf6, #ec4899, #f97316);
|
|
border-radius: 10px;
|
|
/* Match the row border-radius + 2px for the inset */
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Drag handle styling */
|
|
.variant-editor-drag-handle {
|
|
font-size: 18px;
|
|
margin-right: 8px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
background: none !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 1;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.variant-editor-drag-handle:hover {
|
|
color: var(--text-normal);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Remove the label element completely */
|
|
.variant-editor-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Style the contenteditable div for floating text */
|
|
.variant-editor-input {
|
|
flex: 1;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 3px;
|
|
color: var(--text-normal);
|
|
font-size: 16px;
|
|
min-height: 20px;
|
|
width: 100%;
|
|
cursor: text;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.variant-editor-input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Empty placeholder styling using data-placeholder attribute */
|
|
.variant-editor-input:empty::before {
|
|
content: attr(data-placeholder);
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Special styling for the last row (add variant placeholder) */
|
|
.variant-editor-row-add-variant .variant-editor-input:empty::before {
|
|
color: var(--text-faint);
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Style the last row differently - we'll add a specific class in the JS code */
|
|
.variant-editor-row-add-variant {
|
|
border: 1px dashed var(--background-modifier-border);
|
|
background-color: var(--background-primary);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Hover effect for the add variant row */
|
|
.variant-editor-row-add-variant:hover {
|
|
border-color: var(--interactive-hover);
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
|
|
/* Active state for the add variant row */
|
|
.variant-editor-row-add-variant.variant-editor-row-active {
|
|
border-color: var(--interactive-accent);
|
|
background-color: rgba(var(--interactive-accent-rgb), 0.1);
|
|
}
|
|
|
|
/* Drag and drop styling */
|
|
.variant-editor-row.dragging {
|
|
opacity: 0.4;
|
|
border: 1px dashed var(--interactive-accent);
|
|
background-color: rgba(var(--interactive-accent-rgb), 0.1);
|
|
}
|
|
|
|
/* Hide the drag ghost image */
|
|
.variant-editor-drag-ghost {
|
|
opacity: 0;
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Drag indicators for drop positions */
|
|
.variant-editor-row.drag-over-top {
|
|
position: relative;
|
|
}
|
|
|
|
.variant-editor-row.drag-over-top::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background-color: var(--interactive-accent);
|
|
border-radius: 2px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.variant-editor-row.drag-over-bottom {
|
|
position: relative;
|
|
}
|
|
|
|
.variant-editor-row.drag-over-bottom::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background-color: var(--interactive-accent);
|
|
border-radius: 2px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Special handling for active rows with drag indicators */
|
|
.variant-editor-row-active.drag-over-top::after,
|
|
.variant-editor-row-active.drag-over-bottom::after {
|
|
z-index: 20;
|
|
/* Higher z-index to appear above the rainbow border */
|
|
}
|
|
|
|
|
|
/* Delete button styling */
|
|
.variant-editor-delete-button {
|
|
background: none !important;
|
|
border: none !important;
|
|
color: var(--text-muted);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
margin-left: 6px;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.7;
|
|
width: 22px;
|
|
height: 22px;
|
|
line-height: 1;
|
|
box-shadow: none !important;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.variant-editor-delete-button:hover {
|
|
color: #ff5555;
|
|
}
|
|
|
|
.variant-editor-add-container {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.variant-editor-add-button {
|
|
background-color: var(--interactive-accent) !important;
|
|
color: var(--text-on-accent) !important;
|
|
padding: 4px 12px !important;
|
|
}
|
|
|
|
.variant-editor-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.variant-editor-button {
|
|
min-width: 144px;
|
|
max-width: 216px;
|
|
padding: 10px 24px !important;
|
|
/* Reduced vertical padding to make buttons thinner */
|
|
border-radius: 8px !important;
|
|
/* Match variant row border-radius */
|
|
font-size: 16px !important;
|
|
font-weight: 600 !important;
|
|
transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
|
|
/* Improved animation curve */
|
|
border: 1px solid var(--background-modifier-border) !important;
|
|
/* Match variant row border */
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
text-align: center !important;
|
|
color: var(--text-normal) !important; /* Use normal text color instead of on-accent */
|
|
background-color: var(--background-modifier-form-field) !important; /* Less contrasty background */
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 10px !important;
|
|
height: 42px !important;
|
|
/* Reduced height by 10px */
|
|
}
|
|
|
|
|
|
|
|
.variant-editor-commit-button {
|
|
background-color: #7E6BDC !important;
|
|
/* Obsidian purple */
|
|
color: var(--text-on-accent) !important; /* Keep white text on purple background */
|
|
}
|
|
|
|
/* Hover effects */
|
|
.variant-editor-button:hover {
|
|
opacity: 0.95 !important;
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
|
|
border-color: var(--interactive-hover) !important;
|
|
}
|
|
|
|
.variant-editor-original-text {
|
|
margin-bottom: 15px;
|
|
font-weight: 500;
|
|
color: var(--text-normal);
|
|
padding: 8px;
|
|
background-color: var(--background-secondary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.variant-editor-hint {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Style the variant editor modal */
|
|
.variant-editor-modal {
|
|
max-width: 90vw !important;
|
|
width: 460px !important;
|
|
/* Reduced from 500px to 460px (40px less) */
|
|
max-height: 80vh !important;
|
|
padding: 0;
|
|
overflow-y: auto !important;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25) !important;
|
|
border: 1px solid var(--background-modifier-border) !important;
|
|
border-radius: 12px !important;
|
|
background-color: var(--background-primary) !important;
|
|
}
|
|
|
|
/* Style the modal title */
|
|
.variant-editor-modal .modal-title {
|
|
padding: 20px 20px 0 20px !important;
|
|
font-size: 24px !important;
|
|
font-weight: 600 !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Style the close button */
|
|
.variant-editor-modal .modal-close-button {
|
|
top: 20px !important;
|
|
right: 20px !important;
|
|
font-size: 24px !important;
|
|
color: var(--text-muted) !important;
|
|
opacity: 0.7 !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.variant-editor-modal .modal-close-button:hover {
|
|
opacity: 1 !important;
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* Make the modal title draggable */
|
|
.variant-editor-draggable-title {
|
|
cursor: move;
|
|
}
|
|
|
|
/* For draggable modal */
|
|
.variant-editor-modal.dragging {
|
|
opacity: 0.9;
|
|
user-select: none;
|
|
}
|
|
|
|
/* When modal is positioned above the highlighted line, we no longer reorder elements */
|
|
.variant-editor-modal-above .variant-editor-flex-container {
|
|
/* Keep normal flow, just position the modal differently */
|
|
display: flex !important;
|
|
}
|
|
|
|
.variant-editor-flex-container {
|
|
padding: 15px 20px 20px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Remove background dimming for variant editor modal */
|
|
.variant-editor-no-dim~.modal-bg,
|
|
.modal-container .variant-editor-modal~.modal-bg,
|
|
div.modal-bg {
|
|
background-color: transparent !important;
|
|
backdrop-filter: none !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.variant-editor-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
|
|
} |