Bruno Charest
2a82ea2f2b
- Replaced fixed positioning with CDK Overlay for "Move to Folder" dialog with improved accessibility and focus management - Added visual accent color support to note header buttons based on note color metadata - Enhanced move dialog with keyboard navigation and Enter key support for quick folder selection - Improved dialog backdrop with themed blur effect and proper z-indexing - Fixed folder icon SVG path in move dialog - Added max height constraint an
91 lines
2.1 KiB
SCSS
91 lines
2.1 KiB
SCSS
.note-header {
|
|
width: 100%;
|
|
min-width: 0;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
/* Full-width top gradient background layer */
|
|
.note-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120px; /* covers the whole top area visually */
|
|
background-image: var(--note-accent-gradient, none);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Ensure content renders above the gradient layer */
|
|
.note-header > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.path-wrap {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.path-prefix {
|
|
color: rgb(148 163 184);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.path-filename {
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Hover pencil visibility */
|
|
.path-filename.editable {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.path-filename.editable .edit-icon { opacity: 0; }
|
|
.path-filename.editable:hover .edit-icon { opacity: 0.7; }
|
|
|
|
/* Inline edit input look */
|
|
.inline-edit {
|
|
padding: 0 2px;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.note-header__action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 0.4rem;
|
|
background: transparent;
|
|
color: inherit;
|
|
transition: background-color 120ms ease, color 120ms ease;
|
|
}
|
|
|
|
.note-header__action:hover {
|
|
background-color: rgba(148, 163, 184, 0.15);
|
|
}
|
|
|
|
/* Accent the small round action buttons when a note color is present */
|
|
:host.has-note-color .accented-action {
|
|
border-color: color-mix(in oklab, var(--note-accent-color) 45%, var(--border));
|
|
background: color-mix(in oklab, var(--note-accent-color) 16%, var(--card));
|
|
color: color-mix(in oklab, var(--note-accent-text-color, #e2e8f0) 90%, var(--text-muted));
|
|
}
|
|
|
|
:host.has-note-color .accented-action:hover,
|
|
:host.has-note-color .accented-action:focus-visible {
|
|
background: color-mix(in oklab, var(--note-accent-color) 22%, var(--card));
|
|
color: var(--note-accent-text-color, #e2e8f0);
|
|
box-shadow: 0 0 0 2px color-mix(in oklab, var(--note-accent-color) 25%, transparent);
|
|
}
|
|
|
|
:host.has-note-color .accented-action svg {
|
|
stroke: currentColor;
|
|
}
|