feat: Updated styling into seperate css files
This commit is contained in:
domrichardson
@@ -0,0 +1,5 @@
|
||||
@import "./AdminModal.shared.css";
|
||||
|
||||
.permissions-textarea {
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.admin-modal {
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.admin-modal-backdrop {
|
||||
z-index: 1990;
|
||||
}
|
||||
|
||||
.admin-modal .modal-dialog {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.admin-modal {
|
||||
padding-top: max(0.75rem, env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.admin-modal .modal-dialog {
|
||||
margin: 0.75rem;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "./AdminModal.shared.css";
|
||||
@@ -0,0 +1,2 @@
|
||||
@import "./AdminModal.shared.css";
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
@import "./AdminModal.shared.css";
|
||||
184
frontend/src/assets/styles/scoped/components/CategoryTree.css
Normal file
184
frontend/src/assets/styles/scoped/components/CategoryTree.css
Normal file
@@ -0,0 +1,184 @@
|
||||
.category-item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.category-header:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-actions {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.menu-button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
min-width: 150px;
|
||||
padding: 0.35rem;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-radius: 0.35rem;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
|
||||
.menu-item.danger {
|
||||
color: #c92a2a;
|
||||
}
|
||||
|
||||
.category-content {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.note-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.note-item span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
color: #408aca;
|
||||
font-size: 0.9em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.featured-icon {
|
||||
color: #f08c00;
|
||||
font-size: 0.9em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-item.is-pinned {
|
||||
background: #dbf5ff;
|
||||
border: 1px solid #a8d1ff;
|
||||
}
|
||||
|
||||
.note-item.is-pinned:hover {
|
||||
background: #c5e9ff;
|
||||
}
|
||||
|
||||
.note-item.is-featured {
|
||||
background: var(--color-surface)9db;
|
||||
border: 1px solid #ffd8a8;
|
||||
}
|
||||
|
||||
.note-item.is-featured:hover {
|
||||
background: var(--color-surface)6c5;
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .category-header:hover {
|
||||
background-color: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-button {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-dropdown {
|
||||
background: var(--color-surface-muted);
|
||||
border-color: #4a5568;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-item {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-item:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item:hover {
|
||||
background-color: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item.is-pinned {
|
||||
background: #1a3a5c;
|
||||
border-color: #2d6a9f;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item.is-pinned:hover {
|
||||
background: #1e4470;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item.is-featured {
|
||||
background: #3a2e0a;
|
||||
border-color: #7a5a0a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item.is-featured:hover {
|
||||
background: #453710;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
.note-flags {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flag-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
.file-explorer {
|
||||
background: var(--color-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-explorer-header {
|
||||
font-size: 0.8rem;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
max-height: 480px;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
color: var(--color-text);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #f0f4ff;
|
||||
}
|
||||
|
||||
.drag-active {
|
||||
outline: 2px dashed var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
.file-item:hover .btn-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .file-explorer {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-explorer-header {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-item {
|
||||
border-bottom-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-item:hover {
|
||||
background-color: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
.modal-backdrop-custom {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: min(920px, 100%);
|
||||
max-height: min(92vh, 980px);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.provider-modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, var(--color-surface) 100%);
|
||||
}
|
||||
|
||||
.provider-modal-title {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.provider-modal-close {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.provider-modal-body {
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.provider-section {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
background: #f8fafc;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.provider-list {
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-backdrop-custom {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.provider-modal-header,
|
||||
.provider-modal-body {
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .modal-panel {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .provider-modal-header {
|
||||
background: linear-gradient(180deg, #2a2f3a 0%, var(--color-surface) 100%);
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .provider-section {
|
||||
background: #2a2f3a;
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
|
||||
300
frontend/src/assets/styles/scoped/components/NoteEditor.css
Normal file
300
frontend/src/assets/styles/scoped/components/NoteEditor.css
Normal file
@@ -0,0 +1,300 @@
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.save-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.save-status.dirty {
|
||||
color: #b26a00;
|
||||
}
|
||||
|
||||
.save-status.saving {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.save-status.saved {
|
||||
color: #2b8a3e;
|
||||
}
|
||||
|
||||
.editor-textarea {
|
||||
font-family: "Courier New", monospace;
|
||||
min-height: 600px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.note-flags {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flag-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flag-check-input {
|
||||
margin: 0;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flag-check-label {
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.preview-pane {
|
||||
background-color: var(--color-bg);
|
||||
overflow-y: auto;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
padding: 1rem;
|
||||
border: 1px solid #f3b5b5;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--color-surface)5f5;
|
||||
}
|
||||
|
||||
.danger-zone-title {
|
||||
color: #9f1c1c;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.danger-zone-copy {
|
||||
color: #7a2727;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.task-mention-panel {
|
||||
margin-top: 0.45rem;
|
||||
border: 1px solid #dbe4f0;
|
||||
border-radius: 10px;
|
||||
background: #fbfdff;
|
||||
padding: 0.5rem;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.task-mention-option {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0.35rem 0.45rem;
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.task-mention-option:hover {
|
||||
background: #eef3ff;
|
||||
}
|
||||
|
||||
.task-picker {
|
||||
background: var(--color-surface);
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-picker-header {
|
||||
background: var(--color-bg);
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.task-picker-search {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.task-picker-list {
|
||||
overflow-y: auto;
|
||||
max-height: 520px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.task-picker-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
padding: 0.35rem 0.45rem;
|
||||
text-align: left;
|
||||
gap: 0.4rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.task-picker-item:hover {
|
||||
background: #eef3ff;
|
||||
}
|
||||
|
||||
.task-picker-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-picker-empty {
|
||||
padding: 0.7rem;
|
||||
}
|
||||
|
||||
.task-picker-item small {
|
||||
font-size: 0.7rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.task-picker .btn-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.task-picker-item {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.18rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #c7d8ff;
|
||||
background: #eef4ff;
|
||||
color: #2c4ea3;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-title) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-status) {
|
||||
line-height: 1;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
border-radius: 999px;
|
||||
padding: 0.16rem 0.42rem;
|
||||
border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, var(--color-surface) 40%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, var(--color-surface) 82%);
|
||||
color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link:hover) {
|
||||
background: #dfeaff;
|
||||
border-color: #aac4ff;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link i) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .editor-toolbar {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .flag-check {
|
||||
background: var(--color-surface-muted);
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .preview-pane {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .danger-zone {
|
||||
background: #2d1a1a;
|
||||
border-color: #7a3030;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .danger-zone-title {
|
||||
color: #fc8181;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .danger-zone-copy {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-mention-panel {
|
||||
border-color: #3a4558;
|
||||
background: #1f2733;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-mention-option:hover {
|
||||
background: #2b3646;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker {
|
||||
border-color: var(--color-border) !important;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-header {
|
||||
background: var(--color-surface);
|
||||
border-bottom-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-search {
|
||||
background: var(--color-surface);
|
||||
border-bottom-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-search .form-control {
|
||||
background: #1f2430;
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-item {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-item:hover {
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-item small {
|
||||
color: #a8b4c7;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
|
||||
border-color: #35508b;
|
||||
background: #1b2a4a;
|
||||
color: #9ec0ff;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
|
||||
background: #22345c;
|
||||
border-color: #4566ad;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
|
||||
border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
|
||||
color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
|
||||
}
|
||||
|
||||
|
||||
207
frontend/src/assets/styles/scoped/components/NoteList.css
Normal file
207
frontend/src/assets/styles/scoped/components/NoteList.css
Normal file
@@ -0,0 +1,207 @@
|
||||
.note-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.empty-notes-state {
|
||||
grid-column: 1 / -1;
|
||||
min-height: 48vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
border: 1px dashed #cfd6e4;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #f8f9fc 0%, #eef3fb 100%);
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.empty-notes-icon {
|
||||
font-size: 5.25rem;
|
||||
line-height: 1;
|
||||
color: #60789a;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.empty-notes-title {
|
||||
margin: 0;
|
||||
color: #23364f;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.empty-notes-message {
|
||||
margin: 0.75rem 0 0;
|
||||
max-width: 460px;
|
||||
color: #4f637d;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.note-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.note-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.note-title {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
color: #408aca;
|
||||
font-size: 0.9em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.featured-icon {
|
||||
color: #f08c00;
|
||||
font-size: 0.95em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-card.is-pinned {
|
||||
background: #dbf5ff;
|
||||
border-color: #a8d1ff;
|
||||
}
|
||||
|
||||
.note-card.is-featured {
|
||||
border-color: #ffd8a8;
|
||||
background: var(--color-surface)9db;
|
||||
}
|
||||
|
||||
.note-preview {
|
||||
color: #666;
|
||||
margin-bottom: 0.5rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* List view overrides */
|
||||
.note-list--list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.note-list--list .note-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.note-list--list .note-card:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background-color: #eef2ff;
|
||||
border-color: var(--color-primary);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.note-list--list .note-title {
|
||||
flex: 0 0 220px;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.note-list--list .note-preview {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.note-list--list .note-card > small {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-list--list .list-footer {
|
||||
grid-column: unset;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.empty-notes-state {
|
||||
min-height: 40vh;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.empty-notes-icon {
|
||||
font-size: 4.3rem;
|
||||
}
|
||||
|
||||
.empty-notes-title {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .empty-notes-state {
|
||||
border-color: var(--color-border);
|
||||
background: linear-gradient(180deg, #1e2430 0%, var(--color-surface) 100%);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-notes-title {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-notes-message {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-card {
|
||||
border-color: var(--color-border);
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-list--list .note-card:hover {
|
||||
background-color: #2a2f3a;
|
||||
border-color: #7aa2f7;
|
||||
border-left-color: #7aa2f7;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-title {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-preview {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-card.is-pinned {
|
||||
background: #1a3a5c;
|
||||
border-color: #2d6a9f;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-card.is-featured {
|
||||
background: #3a2e0a;
|
||||
border-color: #7a5a0a;
|
||||
}
|
||||
|
||||
|
||||
168
frontend/src/assets/styles/scoped/components/NoteViewer.css
Normal file
168
frontend/src/assets/styles/scoped/components/NoteViewer.css
Normal file
@@ -0,0 +1,168 @@
|
||||
.note-viewer {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.note-meta {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: #eef2ff;
|
||||
color: #364fc7;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.state-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pinned-chip {
|
||||
color: #005f8f;
|
||||
background: #dbf5ff;
|
||||
border: 1px solid #a8d1ff;
|
||||
}
|
||||
|
||||
.featured-chip {
|
||||
color: #8d7619;
|
||||
border: 1px solid #ffd8a8;
|
||||
background: #fff9db;
|
||||
}
|
||||
|
||||
.public-chip {
|
||||
color: #0c5460;
|
||||
border: 1px solid #a5d8ff;
|
||||
background: #e7f5ff;
|
||||
}
|
||||
|
||||
.private-chip {
|
||||
color: #5f3dc4;
|
||||
border: 1px solid #d0bfff;
|
||||
background: #f3f0ff;
|
||||
}
|
||||
.protected-chip {
|
||||
color: #7f5539;
|
||||
border: 1px solid #e0c3a6;
|
||||
background: #fff4e6;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.18rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #c7d8ff;
|
||||
background: #eef4ff;
|
||||
color: #2c4ea3;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-title) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-status) {
|
||||
line-height: 1;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
border-radius: 999px;
|
||||
padding: 0.16rem 0.42rem;
|
||||
border: 1px solid color-mix(in srgb, var(--task-status-color, #5c7bd9) 60%, var(--color-surface) 40%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, var(--color-surface) 82%);
|
||||
color: color-mix(in srgb, var(--task-status-color, #5c7bd9) 72%, #0f172a 28%);
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link:hover) {
|
||||
background: #dfeaff;
|
||||
border-color: #aac4ff;
|
||||
}
|
||||
|
||||
.markdown-body :deep(.task-inline-link i) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.markdown-body :deep(h1),
|
||||
.markdown-body :deep(h2),
|
||||
.markdown-body :deep(h3) {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-body :deep(p),
|
||||
.markdown-body :deep(li) {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .note-meta {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .tag-chip {
|
||||
background: #1e2d5f;
|
||||
color: #93b4ff;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .pinned-chip {
|
||||
color: #7dd3fc;
|
||||
background: #1a3a5c;
|
||||
border-color: #2d6a9f;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .featured-chip {
|
||||
color: #fbbf24;
|
||||
background: #3a2e0a;
|
||||
border-color: #7a5a0a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .public-chip {
|
||||
color: #67e8f9;
|
||||
background: #0c2a3a;
|
||||
border-color: #1d6a7a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .private-chip {
|
||||
color: #c4b5fd;
|
||||
background: #2d1f5e;
|
||||
border-color: #5b3f9a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .protected-chip {
|
||||
color: #fdba74;
|
||||
background: #3a1f0a;
|
||||
border-color: #7a4f1a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link) {
|
||||
border-color: #35508b;
|
||||
background: #1b2a4a;
|
||||
color: #9ec0ff;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-link:hover) {
|
||||
background: #22345c;
|
||||
border-color: #4566ad;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .markdown-body :deep(.task-inline-status) {
|
||||
border-color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 65%, #1e293b 35%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #7aa2f7) 26%, #111827 74%);
|
||||
color: color-mix(in srgb, var(--task-status-color, #7aa2f7) 70%, #dbeafe 30%);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
.search-results-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-results-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #223149;
|
||||
}
|
||||
|
||||
.search-meta {
|
||||
margin: 0.35rem 0 0;
|
||||
color: #5b6f8b;
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
margin-top: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.page-indicator {
|
||||
color: #4f637d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 48vh;
|
||||
border: 1px dashed #cfdae9;
|
||||
border-radius: 14px;
|
||||
background: radial-gradient(circle at 20% 20%, #f2f9ff 0%, #edf2ff 70%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 4.2rem;
|
||||
color: #60789a;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin: 0;
|
||||
color: #223149;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0.6rem 0 0;
|
||||
color: #5b6f8b;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pagination-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .search-results-header h2 {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .search-meta {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .page-indicator {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state {
|
||||
border-color: var(--color-border);
|
||||
background: radial-gradient(circle at 20% 20%, #1a2035 0%, #1e2430 70%);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state h3 {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state p {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state-icon {
|
||||
color: #4a6fa5;
|
||||
}
|
||||
|
||||
|
||||
403
frontend/src/assets/styles/scoped/components/TaskBoard.css
Normal file
403
frontend/src/assets/styles/scoped/components/TaskBoard.css
Normal file
@@ -0,0 +1,403 @@
|
||||
.task-board {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.task-board-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.task-filters {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.status-lane {
|
||||
border: 1px solid #d9e2ec;
|
||||
border-radius: 12px;
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(180deg, #fcfdff 0%, #f5f8fc 100%);
|
||||
}
|
||||
|
||||
.lane-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.status-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.4rem 0.45rem;
|
||||
border-radius: 8px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid #e4e9f0;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.status-item.is-drag-over {
|
||||
border-color: #7aa2f7;
|
||||
background: #eef3ff;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
color: #74839a;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-actions {
|
||||
display: inline-flex;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.task-status-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-group {
|
||||
border: 1px solid #dbe4f0;
|
||||
border-radius: 12px;
|
||||
overflow: visible;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.status-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-left: 6px solid transparent;
|
||||
background: #f8fbff;
|
||||
border-bottom: 1px solid #edf2f8;
|
||||
padding: 0.65rem 0.85rem;
|
||||
}
|
||||
|
||||
.status-group-title-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-group-title {
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.status-group-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.status-group-count {
|
||||
color: #5f6f87;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-empty {
|
||||
padding: 0.75rem 0.85rem;
|
||||
color: #7a8799;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.task-tree-row {
|
||||
border-bottom: 1px solid #edf2f8;
|
||||
}
|
||||
|
||||
.task-tree-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.task-tree-row.level-1 .task-row {
|
||||
padding-left: 2.1rem;
|
||||
}
|
||||
|
||||
.task-tree-row.level-2 .task-row {
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr auto;
|
||||
gap: 0.65rem;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
background: var(--color-surface);
|
||||
text-align: left;
|
||||
padding: 0.7rem 0.85rem;
|
||||
}
|
||||
|
||||
.task-row:hover {
|
||||
background: #f4f8ff;
|
||||
}
|
||||
|
||||
.status-group-header {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
}
|
||||
|
||||
.status-group > .task-tree-row:last-child .task-row,
|
||||
.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row,
|
||||
.status-group > .task-tree-row:last-child > div > .task-tree-row:last-child > div > .task-tree-row:last-child .task-row {
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
|
||||
.tree-toggle {
|
||||
width: 1.25rem;
|
||||
color: #5f6f87;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.task-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-main strong,
|
||||
.task-main small {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-status-menu {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.status-trigger {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-trigger:hover {
|
||||
background: #eef3f9;
|
||||
}
|
||||
|
||||
.status-trigger-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid var(--color-surface);
|
||||
box-shadow: 0 0 0 1px rgba(67, 81, 98, 0.25);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.status-popup {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.3rem);
|
||||
min-width: 190px;
|
||||
background: #151a22;
|
||||
border: 1px solid #2a3343;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 12px 28px rgba(5, 9, 15, 0.35);
|
||||
padding: 0.35rem;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.status-option {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #e8edf5;
|
||||
display: grid;
|
||||
grid-template-columns: 14px 1fr auto;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.45rem 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.status-option:hover,
|
||||
.status-option.selected {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.status-option-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.status-option-label {
|
||||
font-size: 0.86rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-option-check {
|
||||
color: #e8edf5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.status-color-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
border: 1px solid #f3b5b5;
|
||||
border-radius: 0.75rem;
|
||||
background: var(--color-surface)5f5;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.danger-zone-title {
|
||||
color: #9f1c1c;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.danger-zone-copy {
|
||||
color: #7a2727;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.task-filters {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.task-row {
|
||||
grid-template-columns: 24px minmax(0, 1fr) auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-popup {
|
||||
right: -0.2rem;
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Dark mode ── */
|
||||
:root[data-bs-theme="dark"] .status-lane {
|
||||
background: linear-gradient(180deg, #1e2330 0%, #1a1d27 100%);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-item {
|
||||
background: #252b38;
|
||||
border-color: var(--color-border);
|
||||
color: #c8d3e6;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-item.is-drag-over {
|
||||
border-color: #7aa2f7;
|
||||
background: #1e2d4a;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .drag-handle {
|
||||
color: #5f6f87;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-group {
|
||||
background: #1e2230;
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-group-header {
|
||||
background: #232840;
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-group-title {
|
||||
color: #c8d3e6;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-group-count {
|
||||
color: #7a8fa8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-empty {
|
||||
color: #5f6f87;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-tree-row {
|
||||
border-bottom-color: #2e3444;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-row {
|
||||
background: #1e2230;
|
||||
color: #c8d3e6;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-row:hover {
|
||||
background: #252d40;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .tree-toggle {
|
||||
color: #7a8fa8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-main small {
|
||||
color: #7a8fa8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-trigger:hover {
|
||||
background: #2e3448;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-trigger-dot {
|
||||
border-color: #1e2230;
|
||||
box-shadow: 0 0 0 1px rgba(180, 195, 220, 0.2);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state {
|
||||
color: #7a8fa8;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
.status-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
color: #627086;
|
||||
}
|
||||
|
||||
.progress-step.current {
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.progress-step.done {
|
||||
color: #1f7a4d;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.subtask-row {
|
||||
width: 100%;
|
||||
margin-top: 0.35rem;
|
||||
border: 1px solid #dbe4f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fbff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Dark mode ── */
|
||||
:root[data-bs-theme="dark"] .progress-step {
|
||||
color: #7a8fa8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .progress-step.current {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .progress-step.done {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .subtask-row {
|
||||
background: #252b38;
|
||||
border-color: var(--color-border);
|
||||
color: #c8d3e6;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user