Change d'interface plus légére, modification side barre
This commit is contained in:
223
static/theme.css
223
static/theme.css
@ -17,35 +17,33 @@
|
||||
--text-secondary: #b0b0b0;
|
||||
--text-muted: #6e6e6e;
|
||||
|
||||
/* Accent colors - Blue focused */
|
||||
/* Accent color - Single blue accent for consistency */
|
||||
--accent-primary: #42a5f5;
|
||||
--accent-primary-hover: #64b5f6;
|
||||
--accent-secondary: #29b6f6;
|
||||
--accent-secondary-hover: #4fc3f7;
|
||||
--accent-hover: #64b5f6;
|
||||
|
||||
/* Semantic colors */
|
||||
--success: #66bb6a;
|
||||
--warning: #ffa726;
|
||||
--error: #ef5350;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
|
||||
/* Sidebar compact spacing */
|
||||
--sidebar-item-gap: 0.05rem;
|
||||
--sidebar-padding-v: 0.3rem;
|
||||
--sidebar-padding-h: 0.75rem;
|
||||
--sidebar-indent: 1rem;
|
||||
/* Spacing - 8px base unit system */
|
||||
--spacing-xs: 0.5rem; /* 8px - 1 unit */
|
||||
--spacing-sm: 1rem; /* 16px - 2 units */
|
||||
--spacing-md: 1.5rem; /* 24px - 3 units */
|
||||
--spacing-lg: 2rem; /* 32px - 4 units */
|
||||
--spacing-xl: 3rem; /* 48px - 6 units */
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
|
||||
--shadow-glow: 0 0 20px rgba(66, 165, 245, 0.2);
|
||||
/* Sidebar spacing - aligned to 8px grid */
|
||||
--sidebar-item-gap: 0.125rem; /* 2px - minimal spacing between items */
|
||||
--sidebar-padding-v: 0.25rem; /* 4px - compact vertical padding */
|
||||
--sidebar-padding-h: 1rem; /* 16px */
|
||||
--sidebar-indent: 1.5rem; /* 24px */
|
||||
|
||||
/* Shadows - reduced opacity for minimal look */
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
||||
--shadow-glow: 0 0 20px rgba(66, 165, 245, 0.1);
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 4px;
|
||||
@ -55,8 +53,59 @@
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-normal: 250ms ease;
|
||||
|
||||
/* Typography scale - consistent font sizes */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px - default */
|
||||
--text-md: 1.125rem; /* 18px */
|
||||
--text-lg: 1.25rem; /* 20px */
|
||||
--text-xl: 1.5rem; /* 24px */
|
||||
--text-2xl: 2rem; /* 32px */
|
||||
--text-3xl: 3rem; /* 48px */
|
||||
|
||||
/* Touch targets - minimum sizes for accessibility */
|
||||
--touch-sm: 2rem; /* 32px - compact */
|
||||
--touch-md: 2.75rem; /* 44px - standard mobile minimum */
|
||||
--touch-lg: 3rem; /* 48px - comfortable */
|
||||
|
||||
/* Lucide Icons - Professional SVG icons */
|
||||
--icon-xs: 14px;
|
||||
--icon-sm: 16px;
|
||||
--icon-md: 20px;
|
||||
--icon-lg: 24px;
|
||||
--icon-xl: 32px;
|
||||
}
|
||||
|
||||
/* Lucide Icons Styling */
|
||||
.lucide {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* Icon size variants */
|
||||
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); }
|
||||
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
|
||||
.icon-md { width: var(--icon-md); height: var(--icon-md); }
|
||||
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
|
||||
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }
|
||||
|
||||
/* Icon with text alignment */
|
||||
.icon-text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Icon color variants */
|
||||
.icon-primary { color: var(--text-primary); }
|
||||
.icon-secondary { color: var(--text-secondary); }
|
||||
.icon-muted { color: var(--text-muted); }
|
||||
.icon-accent { color: var(--accent-primary); }
|
||||
|
||||
/* Base styles */
|
||||
html {
|
||||
font-size: 16px;
|
||||
@ -90,7 +139,7 @@ header h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
@ -257,25 +306,7 @@ aside hr {
|
||||
margin: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
/* File tree and search results */
|
||||
#file-tree a,
|
||||
#search-results a {
|
||||
display: block;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
#file-tree a:hover,
|
||||
#search-results a:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--accent-primary);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
/* File tree and search results - styles now handled by .file-item class */
|
||||
|
||||
/* Search results header */
|
||||
.search-results-header {
|
||||
@ -411,7 +442,7 @@ aside hr {
|
||||
}
|
||||
|
||||
.search-no-results-text strong {
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.search-no-results-hint {
|
||||
@ -455,7 +486,7 @@ aside hr {
|
||||
|
||||
.search-help-example code {
|
||||
background: var(--bg-primary);
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
@ -720,7 +751,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
.preview h2 {
|
||||
font-size: 1.5em;
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
@ -771,7 +802,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
.preview ol > li::marker {
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -797,7 +828,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
.preview a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-primary-hover);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.preview strong, .preview b {
|
||||
@ -815,7 +846,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85em;
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -853,7 +884,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
.preview table thead {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
}
|
||||
|
||||
.preview table thead th {
|
||||
@ -895,7 +926,7 @@ main::-webkit-scrollbar-thumb:hover {
|
||||
button,
|
||||
[type="submit"],
|
||||
[type="button"] {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
@ -984,7 +1015,7 @@ button.secondary:hover {
|
||||
}
|
||||
|
||||
#slash-commands-palette li[style*="background-color"] {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
|
||||
background: var(--accent-primary) !important;
|
||||
color: white !important;
|
||||
font-weight: 500;
|
||||
transform: translateX(2px);
|
||||
@ -1016,7 +1047,7 @@ progress::-webkit-progress-bar {
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@ -1236,39 +1267,26 @@ body, html {
|
||||
}
|
||||
|
||||
.folder-item.drag-over .folder-header {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-glow);
|
||||
border: 2px solid var(--accent-primary);
|
||||
border-radius: var(--radius-md);
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 30px rgba(88, 166, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.file-item.drag-over {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
/* Style pour la racine en drag-over */
|
||||
.sidebar-section-header.drag-over {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
|
||||
background: var(--accent-primary) !important;
|
||||
color: white !important;
|
||||
box-shadow: var(--shadow-glow);
|
||||
border: 2px solid var(--accent-primary);
|
||||
border-radius: var(--radius-md);
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sidebar-section-header.drag-over .folder-name,
|
||||
@ -1401,11 +1419,10 @@ body, html {
|
||||
|
||||
/* Quand on drag au-dessus de la racine */
|
||||
.root-drop-zone.drag-over .root-folder-header {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.root-drop-zone.drag-over .root-folder-header .folder-name,
|
||||
@ -2053,7 +2070,7 @@ body, html {
|
||||
}
|
||||
|
||||
.search-modal-result-item.selected {
|
||||
background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15));
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
@ -2074,7 +2091,7 @@ body, html {
|
||||
}
|
||||
|
||||
.search-modal-result-title mark {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
@ -2200,11 +2217,6 @@ body, html {
|
||||
border: 3px solid var(--border-primary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.search-modal-loading p {
|
||||
@ -2566,12 +2578,12 @@ body, html {
|
||||
|
||||
/* Today */
|
||||
.calendar-day-today {
|
||||
border-color: var(--accent-secondary);
|
||||
background: linear-gradient(135deg, rgba(130, 170, 255, 0.1), rgba(199, 146, 234, 0.1));
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.calendar-day-today .calendar-day-number {
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@ -2596,7 +2608,7 @@ body, html {
|
||||
width: 100%;
|
||||
margin-top: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
@ -2681,11 +2693,12 @@ body, html {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: var(--sidebar-item-gap) 0;
|
||||
margin: 0; /* No margin on wrapper - use same spacing as folders */
|
||||
}
|
||||
|
||||
.file-item-wrapper .file-item {
|
||||
flex: 1;
|
||||
margin: 0 !important; /* Force remove margin to avoid double spacing */
|
||||
}
|
||||
|
||||
/* Bouton de mode sélection */
|
||||
@ -2715,8 +2728,8 @@ body, html {
|
||||
}
|
||||
|
||||
.icon-button.active:hover {
|
||||
background: var(--accent-primary-hover);
|
||||
border-color: var(--accent-primary-hover);
|
||||
background: var(--accent-hover);
|
||||
border-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Toolbar de sélection flottante */
|
||||
@ -2784,7 +2797,7 @@ body, html {
|
||||
background: #ff5370;
|
||||
border-color: #ff5370;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(240, 113, 120, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(240, 113, 120, 0.15);
|
||||
}
|
||||
|
||||
.danger-button:active {
|
||||
@ -2974,30 +2987,38 @@ body, html {
|
||||
|
||||
/* Bouton d'ajout aux favoris (dans le file tree) */
|
||||
.add-to-favorites {
|
||||
opacity: 0;
|
||||
opacity: 0.4; /* Always slightly visible */
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
padding: 0 0.2rem;
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem;
|
||||
transition: all var(--transition-fast);
|
||||
margin-left: auto;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.folder-header:hover .add-to-favorites,
|
||||
.file-item:hover .add-to-favorites {
|
||||
opacity: 1;
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.add-to-favorites:hover {
|
||||
color: var(--warning);
|
||||
transform: scale(1.2);
|
||||
transform: scale(1.15);
|
||||
background: rgba(255, 193, 7, 0.1); /* Subtle yellow background */
|
||||
}
|
||||
|
||||
.add-to-favorites.is-favorite {
|
||||
opacity: 1;
|
||||
opacity: 1 !important; /* Always fully visible when favorited */
|
||||
color: var(--warning);
|
||||
background: rgba(255, 193, 7, 0.15);
|
||||
}
|
||||
|
||||
.add-to-favorites.is-favorite:hover {
|
||||
background: rgba(255, 193, 7, 0.2);
|
||||
}
|
||||
|
||||
/* Responsive - Hauteurs adaptatives pour #favorites-list */
|
||||
@ -3162,7 +3183,7 @@ body, html {
|
||||
}
|
||||
|
||||
.link-inserter-result-item.selected {
|
||||
background: linear-gradient(135deg, rgba(130, 170, 255, 0.15), rgba(199, 146, 234, 0.15));
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
@ -3184,7 +3205,7 @@ body, html {
|
||||
}
|
||||
|
||||
.link-inserter-result-title mark {
|
||||
background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
@ -3241,7 +3262,6 @@ body, html {
|
||||
border: 3px solid var(--bg-tertiary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
.link-inserter-loading p {
|
||||
@ -3575,7 +3595,7 @@ body, html {
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--accent-secondary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
@ -3624,3 +3644,20 @@ body, html {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Public toggle button */
|
||||
#toggle-public-btn {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#toggle-public-btn.public-active {
|
||||
background: var(--accent-green, #2ecc71);
|
||||
color: white;
|
||||
border-color: var(--accent-green, #2ecc71);
|
||||
}
|
||||
|
||||
#toggle-public-btn.public-active:hover {
|
||||
background: var(--accent-green-dark, #27ae60);
|
||||
border-color: var(--accent-green-dark, #27ae60);
|
||||
}
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
--text-muted: #6e6e6e;
|
||||
|
||||
--accent-primary: #42a5f5;
|
||||
--accent-primary-hover: #5ab3f7;
|
||||
--accent-secondary: #29b6f6;
|
||||
--accent-secondary-hover: #4fc3f7;
|
||||
--accent-hover: #5ab3f7;
|
||||
|
||||
--success: #66bb6a;
|
||||
--warning: #ffa726;
|
||||
@ -47,9 +45,7 @@
|
||||
--text-muted: #75715e;
|
||||
|
||||
--accent-primary: #66d9ef;
|
||||
--accent-primary-hover: #7ee5f7;
|
||||
--accent-secondary: #88c070;
|
||||
--accent-secondary-hover: #9acc84;
|
||||
--accent-hover: #7ee5f7;
|
||||
|
||||
--success: #88c070;
|
||||
--warning: #e6db74;
|
||||
@ -73,9 +69,7 @@
|
||||
--text-muted: #6272a4;
|
||||
|
||||
--accent-primary: #8be9fd;
|
||||
--accent-primary-hover: #9ff3ff;
|
||||
--accent-secondary: #bd93f9;
|
||||
--accent-secondary-hover: #cba6ff;
|
||||
--accent-hover: #9ff3ff;
|
||||
|
||||
--success: #50fa7b;
|
||||
--warning: #f1fa8c;
|
||||
@ -99,9 +93,7 @@
|
||||
--text-muted: #5c6370;
|
||||
|
||||
--accent-primary: #61afef;
|
||||
--accent-primary-hover: #75bdf5;
|
||||
--accent-secondary: #c678dd;
|
||||
--accent-secondary-hover: #d48ae9;
|
||||
--accent-hover: #75bdf5;
|
||||
|
||||
--success: #98c379;
|
||||
--warning: #e5c07b;
|
||||
@ -125,9 +117,7 @@
|
||||
--text-muted: #586e75;
|
||||
|
||||
--accent-primary: #268bd2;
|
||||
--accent-primary-hover: #4098d9;
|
||||
--accent-secondary: #2aa198;
|
||||
--accent-secondary-hover: #3eb3a8;
|
||||
--accent-hover: #4098d9;
|
||||
|
||||
--success: #859900;
|
||||
--warning: #b58900;
|
||||
@ -151,9 +141,7 @@
|
||||
--text-muted: #616e88;
|
||||
|
||||
--accent-primary: #88c0d0;
|
||||
--accent-primary-hover: #9dcadb;
|
||||
--accent-secondary: #81a1c1;
|
||||
--accent-secondary-hover: #94b0cc;
|
||||
--accent-hover: #9dcadb;
|
||||
|
||||
--success: #a3be8c;
|
||||
--warning: #ebcb8b;
|
||||
@ -177,9 +165,7 @@
|
||||
--text-muted: #6c7086;
|
||||
|
||||
--accent-primary: #89b4fa;
|
||||
--accent-primary-hover: #a6c8ff;
|
||||
--accent-secondary: #f5c2e7;
|
||||
--accent-secondary-hover: #f9d5ee;
|
||||
--accent-hover: #a6c8ff;
|
||||
|
||||
--success: #a6e3a1;
|
||||
--warning: #f9e2af;
|
||||
@ -203,9 +189,7 @@
|
||||
--text-muted: #7a8478;
|
||||
|
||||
--accent-primary: #7fbbb3;
|
||||
--accent-primary-hover: #93c9c1;
|
||||
--accent-secondary: #a7c080;
|
||||
--accent-secondary-hover: #b8cc94;
|
||||
--accent-hover: #93c9c1;
|
||||
|
||||
--success: #a7c080;
|
||||
--warning: #dbbc7f;
|
||||
|
||||
Reference in New Issue
Block a user