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