ObsiViewer/src/app/features/note/components/note-header/note-header.component.scss
Bruno Charest 11a58426d0 feat: revamp editor UI and enhance about panel
- Updated markdown editor with modern toolbar design and improved visual hierarchy
- Added auto-save indicator and note color support in editor header
- Redesigned note list cards with hover effects and quick action buttons
- Added version, build date and copyright info to about panel
- Enhanced scrollbar styling and padding in editor container
- Improved responsive layout and dark mode support across components
2025-10-27 10:11:20 -04:00

73 lines
1.4 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);
}