feat: Updated styling into seperate css files
This commit is contained in:
domrichardson
@@ -1,4 +1,4 @@
|
||||
<template>
|
||||
<template>
|
||||
<div id="app" class="app-container">
|
||||
<nav v-if="!isPublicRoute && !isAuthRoute" ref="navbarRef" class="navbar navbar-dark bg-dark sticky-top">
|
||||
<div class="container-fluid app-navbar">
|
||||
@@ -1258,257 +1258,7 @@ const logout = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
<style scoped src="./assets/styles/scoped/App.css"></style>
|
||||
|
||||
.navbar {
|
||||
z-index: 1100;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.app-navbar {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.breadcrumb-title {
|
||||
font-size: 1rem;
|
||||
color: #495057;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: #0d6efd;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
z-index: 1200;
|
||||
max-width: min(92vw, 320px);
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin-route-view {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-navbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas:
|
||||
"left user"
|
||||
"space space"
|
||||
"search search";
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-user-menu {
|
||||
grid-area: user;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.nav-space-selector {
|
||||
grid-area: space;
|
||||
}
|
||||
|
||||
.nav-space-selector > .btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-search {
|
||||
grid-area: search;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-search .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-menu-toggle {
|
||||
padding: 0.35rem 0.55rem;
|
||||
}
|
||||
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
z-index: 1095;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-button .mdi {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.col-auto .action-button {
|
||||
min-width: 2.75rem;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .sidebar-header {
|
||||
border-bottom-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-title {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-link {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-separator {
|
||||
color: #4a5568;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,42 +1,70 @@
|
||||
:root {
|
||||
--primary-color: #667eea;
|
||||
--secondary-color: #764ba2;
|
||||
--text-color: #333;
|
||||
--bg-color: #f8f9fa;
|
||||
--border-color: #dee2e6;
|
||||
--color-primary: #667eea;
|
||||
--color-primary-strong: #4f46a5;
|
||||
--color-text: #333333;
|
||||
--color-text-muted: #6c757d;
|
||||
--color-bg: #f8f9fa;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-muted: #f1f3f5;
|
||||
--color-border: #dee2e6;
|
||||
--color-info: #748ffc;
|
||||
--color-code-bg: #353943;
|
||||
--color-code-text: #f9fafb;
|
||||
--color-scroll-track: #f1f1f1;
|
||||
--color-scroll-thumb: #888888;
|
||||
--color-scroll-thumb-hover: #555555;
|
||||
|
||||
--primary-color: var(--color-primary);
|
||||
--secondary-color: var(--color-primary-strong);
|
||||
--text-color: var(--color-text);
|
||||
--bg-color: var(--color-bg);
|
||||
--border-color: var(--color-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--text-color: #e2e8f0;
|
||||
--bg-color: #1a1d23;
|
||||
--border-color: #3a3f4b;
|
||||
--color-text: #e2e8f0;
|
||||
--color-text-muted: #94a3b8;
|
||||
--color-bg: #1a1d23;
|
||||
--color-surface: #21252e;
|
||||
--color-surface-muted: #2d3748;
|
||||
--color-border: #3a3f4b;
|
||||
--color-info: #7aa2f7;
|
||||
--color-code-bg: #2d3748;
|
||||
--color-code-text: #e2e8f0;
|
||||
--color-scroll-track: #2d3748;
|
||||
--color-scroll-thumb: #4a5568;
|
||||
--color-scroll-thumb-hover: #718096;
|
||||
|
||||
--text-color: var(--color-text);
|
||||
--bg-color: var(--color-bg);
|
||||
--border-color: var(--color-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] body {
|
||||
background-color: #1a1d23;
|
||||
color: #e2e8f0;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .sidebar {
|
||||
background-color: #21252e !important;
|
||||
border-color: #3a3f4b !important;
|
||||
background-color: var(--color-surface) !important;
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .toolbar {
|
||||
background-color: #21252e;
|
||||
border-color: #3a3f4b !important;
|
||||
background-color: var(--color-surface);
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .main-content {
|
||||
background-color: #1a1d23;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body table {
|
||||
background: #21252e;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body th {
|
||||
background: #2a2f3a;
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body tr:nth-child(even) td {
|
||||
@@ -49,8 +77,8 @@
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body :not(pre) > code {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body pre code {
|
||||
@@ -59,20 +87,20 @@
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .markdown-body pre {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
background: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
|
||||
background: #2d3748;
|
||||
background: var(--color-scroll-track);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: #4a5568;
|
||||
background: var(--color-scroll-thumb);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: #718096;
|
||||
background: var(--color-scroll-thumb-hover);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -99,7 +127,7 @@ body,
|
||||
margin: 1rem 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background: #fff;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.markdown-body th,
|
||||
@@ -126,7 +154,7 @@ body,
|
||||
.markdown-body blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 4px solid #748ffc;
|
||||
border-left: 4px solid var(--color-info);
|
||||
background: #f8f9ff;
|
||||
color: #334155;
|
||||
}
|
||||
@@ -139,8 +167,8 @@ body,
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
background: #353943;
|
||||
color: #f9fafb;
|
||||
background: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -155,7 +183,7 @@ body,
|
||||
font-size: 0.95em;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 0.35rem;
|
||||
background: #f1f3f5;
|
||||
background: var(--color-surface-muted);
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@@ -165,14 +193,14 @@ body,
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
background: var(--color-scroll-track);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
background: var(--color-scroll-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
background: var(--color-scroll-thumb-hover);
|
||||
}
|
||||
|
||||
254
frontend/src/assets/styles/scoped/App.css
Normal file
254
frontend/src/assets/styles/scoped/App.css
Normal file
@@ -0,0 +1,254 @@
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
z-index: 1100;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.app-navbar {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.breadcrumb-title {
|
||||
font-size: 1rem;
|
||||
color: #495057;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
z-index: 1200;
|
||||
max-width: min(92vw, 320px);
|
||||
}
|
||||
|
||||
.dropdown-menu-end {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin-route-view {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-navbar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas:
|
||||
"left user"
|
||||
"space space"
|
||||
"search search";
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
grid-area: left;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-user-menu {
|
||||
grid-area: user;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.nav-space-selector {
|
||||
grid-area: space;
|
||||
}
|
||||
|
||||
.nav-space-selector > .btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-search {
|
||||
grid-area: search;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-search .form-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-brand {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-menu-toggle {
|
||||
padding: 0.35rem 0.55rem;
|
||||
}
|
||||
|
||||
.sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
z-index: 1095;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-button .mdi {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.col-auto .action-button {
|
||||
min-width: 2.75rem;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .sidebar-header {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-title {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-link {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .breadcrumb-separator {
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
234
frontend/src/assets/styles/scoped/pages/Admin.css
Normal file
234
frontend/src/assets/styles/scoped/pages/Admin.css
Normal file
@@ -0,0 +1,234 @@
|
||||
.admin-page {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-bg);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.admin-sidebar-inner {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link {
|
||||
border-radius: 0.6rem;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link:hover {
|
||||
background: #eef2f7;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link.active {
|
||||
background: #212529;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.users-list .list-group-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-row-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-row-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-actions-stack {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-name-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.user-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.user-meta-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.user-meta-value {
|
||||
color: #495057;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.user-meta-item-groups {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.user-meta-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.user-meta-item-groups {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.admin-shell {
|
||||
display: block;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1400;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(82vw, 320px);
|
||||
z-index: 1410;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.admin-sidebar-inner {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.user-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.user-row-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-row-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-actions-stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-meta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .admin-topbar {
|
||||
border-bottom-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-sidebar {
|
||||
background: var(--color-surface);
|
||||
border-right-color: var(--color-border);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link:hover {
|
||||
background: var(--color-surface-muted);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link.active {
|
||||
background: var(--color-text);
|
||||
color: #1a1d23;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .user-meta-value {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-section {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
|
||||
116
frontend/src/assets/styles/scoped/pages/Login.css
Normal file
116
frontend/src/assets/styles/scoped/pages/Login.css
Normal file
@@ -0,0 +1,116 @@
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 1.25rem;
|
||||
background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--color-surface);
|
||||
padding: 2rem;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(53, 84, 209, 0.12);
|
||||
color: #2f4ac1;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0;
|
||||
font-size: 2.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.65rem;
|
||||
min-height: 48px;
|
||||
border-color: #d6dbe4;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
min-height: 48px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-provider-btn {
|
||||
min-height: 48px;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
|
||||
.oauth-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.oauth-divider::before,
|
||||
.oauth-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.oauth-divider span {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.auth-switch-link {
|
||||
color: #4b5565;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.login-page {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
border-radius: 14px;
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
71
frontend/src/assets/styles/scoped/pages/PublicSpace.css
Normal file
71
frontend/src/assets/styles/scoped/pages/PublicSpace.css
Normal file
@@ -0,0 +1,71 @@
|
||||
.public-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.public-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.public-sidebar {
|
||||
width: 280px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.note-item:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.note-item.active {
|
||||
background: #dbe4ff;
|
||||
border-color: #748ffc;
|
||||
color: #364fc7;
|
||||
}
|
||||
|
||||
.note-item.is-featured {
|
||||
background: var(--color-surface)4e6;
|
||||
border-color: #ffd8a8;
|
||||
}
|
||||
|
||||
.note-item.is-featured:hover {
|
||||
background: #ffe8cc;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.public-sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.public-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1095;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.public-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
93
frontend/src/assets/styles/scoped/pages/Register.css
Normal file
93
frontend/src/assets/styles/scoped/pages/Register.css
Normal file
@@ -0,0 +1,93 @@
|
||||
.register-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 1.25rem;
|
||||
background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
background: var(--color-surface);
|
||||
padding: 2rem;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(53, 84, 209, 0.12);
|
||||
color: #2f4ac1;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0;
|
||||
font-size: 2.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.65rem;
|
||||
min-height: 48px;
|
||||
border-color: #d6dbe4;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
min-height: 48px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-switch-link {
|
||||
color: #4b5565;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.register-page {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
border-radius: 14px;
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ const hydrateForm = () => {
|
||||
form.value = {
|
||||
name: props.group?.name || "",
|
||||
description: props.group?.description || "",
|
||||
permissionsText: (props.group?.permissions || []).join("\n"),
|
||||
permissionsText: (props.group?.permissions || []).join("/n"),
|
||||
};
|
||||
};
|
||||
|
||||
@@ -93,33 +93,7 @@ const handleSubmit = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-modal {
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/AdminGroupModal.css"></style>
|
||||
|
||||
.admin-modal-backdrop {
|
||||
z-index: 1990;
|
||||
}
|
||||
|
||||
.admin-modal .modal-dialog {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.permissions-textarea {
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -178,28 +178,7 @@ const handleSubmit = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-modal {
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/AdminProviderModal.css"></style>
|
||||
|
||||
.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.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -253,29 +253,7 @@ const deleteSpace = async () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-modal {
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/AdminSpaceModal.css"></style>
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -83,29 +83,7 @@ const handleSubmit = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-modal {
|
||||
z-index: 2000;
|
||||
overflow-y: auto;
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/AdminUserModal.css"></style>
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -141,187 +141,7 @@ const handleDeleteCategory = (category) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.category-item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/CategoryTree.css"></style>
|
||||
|
||||
.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: #fff;
|
||||
border: 1px solid #dee2e6;
|
||||
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: #fff9db;
|
||||
border: 1px solid #ffd8a8;
|
||||
}
|
||||
|
||||
.note-item.is-featured:hover {
|
||||
background: #fff6c5;
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .category-header:hover {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
|
||||
: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: #2d3748;
|
||||
border-color: #4a5568;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-item {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .menu-item:hover {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-item:hover {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -90,4 +90,5 @@ const handleSubmit = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
||||
|
||||
@@ -141,16 +141,7 @@ const handleCreate = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.note-flags {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/CreateNoteModal.css"></style>
|
||||
|
||||
|
||||
|
||||
.flag-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -49,4 +49,5 @@ const handleCreate = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
||||
|
||||
@@ -217,7 +217,7 @@ const createFolder = async () => {
|
||||
|
||||
const deleteItem = async (obj) => {
|
||||
const label = displayName(obj);
|
||||
if (!confirm(`Delete "${label}"?${obj.is_folder ? "\n\nThis will delete all files inside the folder." : ""}`)) return;
|
||||
if (!confirm(`Delete "${label}"?${obj.is_folder ? "./nThis will delete all files inside the folder." : ""}`)) return;
|
||||
error.value = "";
|
||||
try {
|
||||
if (obj.is_folder) {
|
||||
@@ -284,67 +284,4 @@ watch(showNewFolderInput, async (v) => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-explorer {
|
||||
background: #fff;
|
||||
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: #333;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background-color: #f0f4ff;
|
||||
}
|
||||
|
||||
.drag-active {
|
||||
outline: 2px dashed #0d6efd;
|
||||
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: #21252e;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-explorer-header {
|
||||
background: #21252e;
|
||||
border-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-item {
|
||||
border-bottom-color: #3a3f4b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .file-item:hover {
|
||||
background-color: #2d3748;
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../assets/styles/scoped/components/FileExplorer.css"></style>
|
||||
|
||||
@@ -187,95 +187,7 @@ const createProvider = async () => {
|
||||
onMounted(loadProviders);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/ManageAuthProvidersModal.css"></style>
|
||||
|
||||
.modal-panel {
|
||||
width: min(920px, 100%);
|
||||
max-height: min(92vh, 980px);
|
||||
background: #fff;
|
||||
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%, #ffffff 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: #21252e;
|
||||
border-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .provider-modal-header {
|
||||
background: linear-gradient(180deg, #2a2f3a 0%, #21252e 100%);
|
||||
border-bottom-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .provider-section {
|
||||
background: #2a2f3a;
|
||||
border-color: #3a3f4b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -571,303 +571,4 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.save-status.dirty {
|
||||
color: #b26a00;
|
||||
}
|
||||
|
||||
.save-status.saving {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.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 #dee2e6;
|
||||
border-radius: 999px;
|
||||
background: #f8f9fa;
|
||||
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: #f8f9fa;
|
||||
overflow-y: auto;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
padding: 1rem;
|
||||
border: 1px solid #f3b5b5;
|
||||
border-radius: 0.75rem;
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-picker-header {
|
||||
background: #f8f9fa;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.task-picker-search {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.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: #333;
|
||||
}
|
||||
|
||||
.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%, #ffffff 40%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, #ffffff 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: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .flag-check {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .preview-pane {
|
||||
background-color: #21252e;
|
||||
}
|
||||
|
||||
: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: #3a3f4b !important;
|
||||
background: #21252e;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-header {
|
||||
background: #21252e;
|
||||
border-bottom-color: #3a3f4b !important;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-search {
|
||||
background: #21252e;
|
||||
border-bottom-color: #3a3f4b !important;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-search .form-control {
|
||||
background: #1f2430;
|
||||
border-color: #3a3f4b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-item {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .task-picker-item:hover {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
: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%);
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../assets/styles/scoped/components/NoteEditor.css"></style>
|
||||
|
||||
@@ -63,210 +63,7 @@ const getDescription = (note) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.note-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/NoteList.css"></style>
|
||||
|
||||
.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 #dee2e6;
|
||||
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: #333;
|
||||
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: #fff9db;
|
||||
}
|
||||
|
||||
.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: #667eea;
|
||||
border-left: 3px solid #667eea;
|
||||
}
|
||||
|
||||
.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: #3a3f4b;
|
||||
background: linear-gradient(180deg, #1e2430 0%, #21252e 100%);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-notes-title {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-notes-message {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .note-card {
|
||||
border-color: #3a3f4b;
|
||||
background-color: #21252e;
|
||||
}
|
||||
|
||||
: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: #e2e8f0;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -152,196 +152,4 @@ const onMarkdownClick = (event) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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%, #ffffff 40%);
|
||||
background: color-mix(in srgb, var(--task-status-color, #5c7bd9) 18%, #ffffff 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;
|
||||
}
|
||||
|
||||
.markdown-body :deep(pre) {
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markdown-body :deep(code) {
|
||||
font-family: "Courier New", monospace;
|
||||
}
|
||||
|
||||
.markdown-body :deep(blockquote) {
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem 1rem;
|
||||
border-left: 4px solid #748ffc;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .note-meta {
|
||||
border-bottom-color: #3a3f4b;
|
||||
}
|
||||
|
||||
: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(blockquote) {
|
||||
background: #1e2430;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
: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%);
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../assets/styles/scoped/components/NoteViewer.css"></style>
|
||||
|
||||
@@ -82,103 +82,7 @@ const goToPage = (page) => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-results-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/SearchResultsPage.css"></style>
|
||||
|
||||
.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: #e2e8f0;
|
||||
}
|
||||
|
||||
: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: #3a3f4b;
|
||||
background: radial-gradient(circle at 20% 20%, #1a2035 0%, #1e2430 70%);
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state p {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .empty-state-icon {
|
||||
color: #4a6fa5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -488,406 +488,7 @@ const deleteStatusFromModal = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-board {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/TaskBoard.css"></style>
|
||||
|
||||
.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: #ffffff;
|
||||
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: #fff;
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
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 #fff;
|
||||
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: #6c757d;
|
||||
}
|
||||
|
||||
.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: #fff5f5;
|
||||
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: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-item {
|
||||
background: #252b38;
|
||||
border-color: #3a3f4b;
|
||||
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: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .status-group-header {
|
||||
background: #232840;
|
||||
border-bottom-color: #3a3f4b;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -144,64 +144,7 @@ const saveTask = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.status-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/components/TaskDetailModal.css"></style>
|
||||
|
||||
.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: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .progress-step.done {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .subtask-row {
|
||||
background: #252b38;
|
||||
border-color: #3a3f4b;
|
||||
color: #c8d3e6;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -718,237 +718,4 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.admin-shell {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.admin-sidebar-inner {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link {
|
||||
border-radius: 0.6rem;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link:hover {
|
||||
background: #eef2f7;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.admin-nav .nav-link.active {
|
||||
background: #212529;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.admin-section {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.users-list .list-group-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.user-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.user-row-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-row-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-actions-stack {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-name-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.user-meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.75rem 1.25rem;
|
||||
}
|
||||
|
||||
.user-meta-label {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #6c757d;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.user-meta-value {
|
||||
color: #495057;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.user-meta-item-groups {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.user-meta-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.user-meta-item-groups {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.admin-shell {
|
||||
display: block;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.admin-topbar {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 1400;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(82vw, 320px);
|
||||
z-index: 1410;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.25s ease;
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.admin-sidebar-inner {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.user-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.user-row-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-row-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-actions-stack {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.user-meta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
:root[data-bs-theme="dark"] .admin-topbar {
|
||||
border-bottom-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-sidebar {
|
||||
background: #21252e;
|
||||
border-right-color: #3a3f4b;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link:hover {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-nav .nav-link.active {
|
||||
background: #e2e8f0;
|
||||
color: #1a1d23;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .user-meta-value {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:root[data-bs-theme="dark"] .admin-section {
|
||||
background-color: #21252e;
|
||||
}
|
||||
</style>
|
||||
<style scoped src="../assets/styles/scoped/pages/Admin.css"></style>
|
||||
|
||||
@@ -142,119 +142,7 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 1.25rem;
|
||||
background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/pages/Login.css"></style>
|
||||
|
||||
.auth-container {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(53, 84, 209, 0.12);
|
||||
color: #2f4ac1;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0;
|
||||
font-size: 2.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.65rem;
|
||||
min-height: 48px;
|
||||
border-color: #d6dbe4;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
min-height: 48px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-provider-btn {
|
||||
min-height: 48px;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
|
||||
.oauth-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.oauth-divider::before,
|
||||
.oauth-divider::after {
|
||||
content: "";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.oauth-divider span {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.auth-switch-link {
|
||||
color: #4b5565;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.login-page {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
border-radius: 14px;
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -322,74 +322,7 @@ watch(
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.public-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/pages/PublicSpace.css"></style>
|
||||
|
||||
.public-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.public-sidebar {
|
||||
width: 280px;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.note-item:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.note-item.active {
|
||||
background: #dbe4ff;
|
||||
border-color: #748ffc;
|
||||
color: #364fc7;
|
||||
}
|
||||
|
||||
.note-item.is-featured {
|
||||
background: #fff4e6;
|
||||
border-color: #ffd8a8;
|
||||
}
|
||||
|
||||
.note-item.is-featured:hover {
|
||||
background: #ffe8cc;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.public-sidebar-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1090;
|
||||
}
|
||||
|
||||
.public-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1095;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.public-sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -110,96 +110,7 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.register-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 1.25rem;
|
||||
background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.2), transparent 45%), linear-gradient(135deg, #3554d1 0%, #4f46a5 100%);
|
||||
}
|
||||
<style scoped src="../assets/styles/scoped/pages/Register.css"></style>
|
||||
|
||||
.auth-container {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(53, 84, 209, 0.12);
|
||||
color: #2f4ac1;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
margin: 0;
|
||||
font-size: 2.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2f3237;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 0.65rem;
|
||||
min-height: 48px;
|
||||
border-color: #d6dbe4;
|
||||
}
|
||||
|
||||
.auth-submit {
|
||||
min-height: 48px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-switch-link {
|
||||
color: #4b5565;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.register-page {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
border-radius: 14px;
|
||||
padding: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user