Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: améliorer styles dark mode avec background unifié #20293a, bordures notes/cards (1px solid #000 light, #dedfe2 dark), width input 600px→800px, ajout bouton pin corner absolu (top-right, hover scale 1.06), suppression backgrounds/borders/outlines inputs (transparent + !important), nettoyage code dupliqué note-input-collapsed, styles todo-draft-row transparent, et corrections mineures formatage CSS (espaces, indentation)

Browse Source
This commit is contained in:
bruno
2026-04-19 21:46:47 -04:00
parent ef6f9cb486
commit f99c1cbecb
11 changed files with 1098 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/css/style.css
+155 -2
View File
@@ -325,6 +325,7 @@ a:focus:not(:focus-visible) {
.sidebar-add-segment span {
display: none;
}
.sidebar-add-segment {
padding: 0.75rem;
}
@@ -3246,6 +3247,7 @@ select:focus {
.page-edit .toastui-editor-mode-switch {
background: var(--bookmark-input-bg);
}
.page-edit .toastui-editor-defaultUI {
border: 0;
}
@@ -3266,6 +3268,10 @@ select:focus {
background-color: rgba(126, 168, 255, 0.16);
}
.page-edit .toastui-editor-toolbar-margin {
margin-bottom: 0.5rem;
}
.page-edit .toastui-editor-toolbar-icons {
opacity: 0.96;
}
@@ -3283,6 +3289,148 @@ select:focus {
border-top: 1px solid var(--bookmark-input-border);
}
[data-theme="dark"] .page-add .toastui-editor-defaultUI,
[data-theme="dark"] .page-add .toastui-editor-md-container,
[data-theme="dark"] .page-add .toastui-editor-ww-container,
[data-theme="dark"] .page-edit .toastui-editor-defaultUI,
[data-theme="dark"] .page-edit .toastui-editor-md-container,
[data-theme="dark"] .page-edit .toastui-editor-ww-container {
background: var(--toastui-panel-surface, #0a1429) !important;
color: var(--bookmark-text-main, var(--text-main)) !important;
border-color: var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar,
[data-theme="dark"] .page-add .toastui-editor-mode-switch,
[data-theme="dark"] .page-edit .toastui-editor-toolbar,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch {
background: var(--toastui-toolbar-bg, linear-gradient(180deg, rgba(28, 49, 86, 0.95) 0%, rgba(14, 26, 47, 0.96) 100%)) !important;
border-color: var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar,
[data-theme="dark"] .page-edit .toastui-editor-toolbar {
border-bottom: 1px solid var(--toastui-border, #1f3560) !important;
box-shadow: inset 0 -1px 0 rgba(9, 12, 23, 0.6) !important;
}
[data-theme="dark"] .page-add .toastui-editor-md-tab-container,
[data-theme="dark"] .page-add .toastui-editor-mode-switch,
[data-theme="dark"] .page-edit .toastui-editor-md-tab-container,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch {
border-top: 1px solid var(--toastui-border, #1f3560) !important;
}
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item {
background: transparent !important;
color: var(--bookmark-text-muted, var(--text-secondary)) !important;
border-radius: 6px;
padding: 0.45rem 0.8rem;
transition: background-color 0.2s ease, color 0.2s ease;
}
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item.active,
[data-theme="dark"] .page-add .toastui-editor-mode-switch .tab-item.selected,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item.active,
[data-theme="dark"] .page-edit .toastui-editor-mode-switch .tab-item.selected {
background: var(--toastui-tab-hover, rgba(112, 160, 255, 0.24)) !important;
color: var(--bookmark-text-main, var(--text-main)) !important;
box-shadow: 0 4px 18px rgba(23, 40, 72, 0.55);
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button {
color: #e2e9ff !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button:hover,
[data-theme="dark"] .page-add .toastui-editor-toolbar button.active,
[data-theme="dark"] .page-add .toastui-editor-toolbar button:focus-visible,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:hover,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.active,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:focus-visible {
background-color: rgba(118, 164, 255, 0.26) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button:hover .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-add .toastui-editor-toolbar button.active .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-add .toastui-editor-toolbar button:focus-visible .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:hover .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.active .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button:focus-visible .toastui-editor-toolbar-icons {
opacity: 1 !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons {
opacity: 0.85 !important;
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons::before,
[data-theme="dark"] .page-add .toastui-editor-toolbar-icons::after,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons::before,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-icons::after {
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button.toastui-editor-toolbar-icons,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button.toastui-editor-toolbar-icons {
filter: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button svg,
[data-theme="dark"] .page-add .toastui-editor-toolbar button svg *,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button svg,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button svg * {
fill: rgba(255, 255, 255, 0.85) !important;
stroke: rgba(255, 255, 255, 0.85) !important;
opacity: 1 !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-divider,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-divider {
background-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar *,
[data-theme="dark"] .page-edit .toastui-editor-toolbar * {
background-color: transparent;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-group,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-group {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-group:not(:last-child),
[data-theme="dark"] .page-edit .toastui-editor-toolbar-group:not(:last-child) {
border-right-color: rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar-item,
[data-theme="dark"] .page-edit .toastui-editor-toolbar-item {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
[data-theme="dark"] .page-add .toastui-editor-toolbar button,
[data-theme="dark"] .page-edit .toastui-editor-toolbar button {
background-color: transparent !important;
border-color: transparent !important;
}
[data-theme="dark"] .page-add .toastui-editor-contents,
[data-theme="dark"] .page-add .toastui-editor-contents *,
[data-theme="dark"] .page-edit .toastui-editor-contents,
[data-theme="dark"] .page-edit .toastui-editor-contents * {
color: var(--bookmark-text-main, var(--text-main)) !important;
}
.page-edit .bookmark-tags-input {
min-height: 48px;
display: flex;
@@ -3534,6 +3682,11 @@ select:focus {
--bookmark-tag-remove-bg: rgba(255, 255, 255, 0.16);
--bookmark-tag-remove-bg-hover: rgba(255, 255, 255, 0.26);
--bookmark-save-bg: linear-gradient(135deg, #6fa8ff 0%, #4d82f0 100%);
--toastui-panel-bg: #101d38;
--toastui-panel-surface: #0a1429;
--toastui-toolbar-bg: linear-gradient(180deg, rgba(28, 49, 86, 0.95) 0%, rgba(14, 26, 47, 0.96) 100%);
--toastui-border: #1f3560;
--toastui-tab-hover: rgba(112, 160, 255, 0.24);
}
.page-edit .bookmark-editor-card {
@@ -4018,7 +4171,7 @@ select:focus {
margin-right: 0;
}
.row > [class*="col-"] {
.row>[class*="col-"] {
width: 100%;
max-width: 100%;
float: none;
@@ -4577,4 +4730,4 @@ table {
.search-results {
max-height: calc(90vh - 200px);
}
}
}