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/custom_views.css
+189 -109
View File
@@ -19,7 +19,7 @@ body.view-todo .content-container {
}
[data-theme="dark"] body.view-todo .content-container {
background-color: var(--bg-body);
background-color: #20293a;
}
body.view-todo #linklist {
@@ -105,7 +105,7 @@ body.view-todo #linklist {
}
[data-theme="dark"] .todo-main {
background-color: #0f172a;
background-color: #20293a;
}
.todo-main-header {
@@ -212,14 +212,16 @@ body.view-todo #linklist {
/* --- NOTES VIEW --- */
/* Wrapper */
body.view-notes .content-container {
body.view-notes .content-container,
body.view-archive .content-container {
padding: 2rem;
background-color: var(--bg-body);
min-height: 100vh;
}
[data-theme="dark"] body.view-notes .content-container {
background-color: var(--bg-body);
[data-theme="dark"] body.view-notes .content-container,
[data-theme="dark"] body.view-archive .content-container {
background-color: #20293a;
}
/* Tool Bar / Input Area */
@@ -233,7 +235,7 @@ body.view-notes .content-container {
}
.notes-top-bar-inner {
width: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: flex-start;
@@ -241,10 +243,11 @@ body.view-notes .content-container {
}
.note-input-container {
width: 600px;
width: 800px;
max-width: 100%;
background-color: var(--background-secondary, #ffffff);
border-radius: 8px;
border: 1px solid #000;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
transition: box-shadow 0.2s;
overflow: hidden;
@@ -255,9 +258,9 @@ body.view-notes .content-container {
}
[data-theme="dark"] .note-input-container {
background-color: #202124;
border: none;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 2px 6px 2px rgba(0, 0, 0, 0.4);
background-color: #20293a;
border: 1px solid var(--border);
box-shadow: none;
}
.note-input-collapsed {
@@ -268,6 +271,16 @@ body.view-notes .content-container {
color: var(--note-card-fg, var(--text-light, #80868b));
font-weight: 500;
font-size: 1rem;
padding: 12px 16px;
cursor: text;
color: var(--note-card-fg, var(--text-light, #80868b));
font-weight: 500;
font-size: 1rem;
padding: 12px 16px;
cursor: text;
color: var(--note-card-fg, var(--text-light, #80868b));
font-weight: 500;
font-size: 1rem;
}
.note-input-container.is-editing {
@@ -327,6 +340,14 @@ body.view-notes .content-container {
.todo-draft-row .todo-item-text {
padding: 5px 4px;
font-size: 0.95rem;
background-color: transparent;
border: none !important;
outline: none !important;
box-shadow: none !important;
}
[data-theme="dark"] .todo-draft-row .todo-item-text {
background-color: transparent;
}
.todo-draft-add-btn {
@@ -355,26 +376,32 @@ body.view-notes .content-container {
.note-input-title {
width: 100%;
border: 0;
outline: none;
background: transparent;
border: none !important;
outline: none !important;
box-shadow: none !important;
background-color: transparent;
color: inherit;
font-size: 1.05rem;
font-weight: 500;
padding: 0;
}
[data-theme="dark"] .note-input-title {
background-color: transparent;
}
.note-input-description-source {
width: 100%;
border: none;
background: transparent;
border: none !important;
outline: none !important;
box-shadow: none !important;
background-color: transparent;
color: inherit;
padding: 0;
resize: none;
min-height: 120px;
max-height: 44vh;
overflow: auto;
outline: none;
display: block;
font-size: 0.95rem;
line-height: 1.5;
@@ -385,7 +412,8 @@ body.view-notes .content-container {
}
[data-theme="dark"] .note-input-description-source {
border: none;
border: none !important;
background-color: transparent;
}
.note-input-container.is-enhanced .note-input-description-source {
@@ -419,8 +447,15 @@ body.view-notes .content-container {
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.note-format-btn {
@@ -476,7 +511,7 @@ body.view-notes .content-container {
flex-wrap: wrap;
}
.note-input-actions-left > button {
.note-input-actions-left>button {
background: transparent;
border: none;
color: inherit;
@@ -491,17 +526,17 @@ body.view-notes .content-container {
padding: 0;
}
.note-input-actions-left > button:disabled {
.note-input-actions-left>button:disabled {
cursor: default;
opacity: 0.35;
}
.note-input-actions-left > button:hover:not(:disabled) {
.note-input-actions-left>button:hover:not(:disabled) {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .note-input-actions-left > button:hover:not(:disabled) {
[data-theme="dark"] .note-input-actions-left>button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.14);
}
@@ -619,15 +654,63 @@ body.view-notes .content-container {
column-span: none;
border-radius: 12px;
overflow: hidden;
border: 1px solid #000;
}
.note-card {
border-radius: 12px;
overflow: hidden;
border: 1px solid #000;
}
[data-theme="dark"] .note-card {
border-color: #dedfe2;
}
.note-card .note-inner {
position: relative;
padding: 14px 16px 12px;
padding-right: 58px;
}
.note-pin-corner {
position: absolute;
top: 10px;
right: 10px;
width: auto;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--note-card-fg, currentColor);
background: transparent;
border: none;
z-index: 4;
opacity: 0.92;
transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.note-pin-corner i {
font-size: 1.35rem;
}
.note-pin-corner:hover {
transform: scale(1.06);
opacity: 1;
}
.note-pin-corner.active {
color: var(--note-card-fg, currentColor);
}
[data-theme="dark"] .note-pin-corner {
background: transparent;
border: none;
}
[data-theme="dark"] .note-pin-corner.active {
color: var(--note-card-fg, currentColor);
}
@media (max-width: 1200px) {
@@ -683,7 +766,7 @@ body.view-notes .content-container {
overflow: hidden;
border-radius: 8px;
background: var(--background-secondary, #ffffff);
border: 1px solid rgba(0, 0, 0, 0.12);
border: 1px solid #000;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
color: inherit;
display: flex;
@@ -696,8 +779,8 @@ body.note-modal-open {
[data-theme="dark"] .note-modal {
background: #202124;
border-color: transparent;
box-shadow: 0 14px 28px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.4);
border-color: #dedfe2;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.4);
}
.note-modal-header {
@@ -859,9 +942,9 @@ body.note-modal-open {
flex-wrap: wrap;
}
.note-modal-actions-left > button,
.note-modal-actions-left > a,
.note-modal-actions-left > .note-modal-color-picker > button {
.note-modal-actions-left>button,
.note-modal-actions-left>a,
.note-modal-actions-left>.note-modal-color-picker>button {
background: transparent;
border: none;
color: inherit;
@@ -876,16 +959,16 @@ body.note-modal-open {
text-decoration: none;
}
.note-modal-actions-left > button:hover,
.note-modal-actions-left > a:hover,
.note-modal-actions-left > .note-modal-color-picker > button:hover {
.note-modal-actions-left>button:hover,
.note-modal-actions-left>a:hover,
.note-modal-actions-left>.note-modal-color-picker>button:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .note-modal-actions-left > button:hover,
[data-theme="dark"] .note-modal-actions-left > a:hover,
[data-theme="dark"] .note-modal-actions-left > .note-modal-color-picker > button:hover {
[data-theme="dark"] .note-modal-actions-left>button:hover,
[data-theme="dark"] .note-modal-actions-left>a:hover,
[data-theme="dark"] .note-modal-actions-left>.note-modal-color-picker>button:hover {
background: rgba(255, 255, 255, 0.14);
}
@@ -1163,9 +1246,9 @@ body.note-modal-open {
}
}
.note-hover-actions > button,
.note-hover-actions > a,
.note-hover-actions > div > button {
.note-hover-actions>button,
.note-hover-actions>a,
.note-hover-actions>div>button {
background: transparent;
border: none;
width: 32px;
@@ -1182,17 +1265,17 @@ body.note-modal-open {
opacity: 0.7;
}
.note-hover-actions > button:hover,
.note-hover-actions > a:hover,
.note-hover-actions > div > button:hover {
.note-hover-actions>button:hover,
.note-hover-actions>a:hover,
.note-hover-actions>div>button:hover {
background-color: rgba(0, 0, 0, 0.08);
color: inherit;
opacity: 1;
}
[data-theme="dark"] .note-hover-actions > button:hover,
[data-theme="dark"] .note-hover-actions > a:hover,
[data-theme="dark"] .note-hover-actions > div > button:hover {
[data-theme="dark"] .note-hover-actions>button:hover,
[data-theme="dark"] .note-hover-actions>a:hover,
[data-theme="dark"] .note-hover-actions>div>button:hover {
background-color: rgba(255, 255, 255, 0.14);
color: inherit;
}
@@ -1204,7 +1287,7 @@ body.note-modal-open {
color: var(--text-muted);
}
.bookmark-palette > button {
.bookmark-palette>button {
background: none;
border: none;
width: 36px;
@@ -1219,7 +1302,7 @@ body.note-modal-open {
transition: background-color 0.2s, color 0.2s;
}
.bookmark-palette > button:hover {
.bookmark-palette>button:hover {
background: var(--primary-light);
color: var(--primary);
}
@@ -1316,7 +1399,7 @@ body.note-modal-open {
justify-content: start;
}
.palette-row + .palette-row {
.palette-row+.palette-row {
margin-top: 10px;
}
@@ -1499,7 +1582,7 @@ body.note-modal-open {
}
.bg-studio-thumb-solid {
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02));
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02));
}
.bg-studio-tile {
@@ -1740,14 +1823,14 @@ body.note-modal-open {
/* Reference: Keep Colors */
/* Default */
.note-card.note-color-default {
background-color: #20293a;
border-color: transparent;
--note-card-fg: #dbe7ff;
background-color: var(--bg-body);
border-color: #000;
--note-card-fg: var(--text-main, #111827);
}
[data-theme="dark"] .note-card.note-color-default {
background-color: #20293a;
border-color: transparent;
border-color: #dedfe2;
--note-card-fg: #dbe7ff;
}
@@ -1883,25 +1966,25 @@ body.note-modal-open {
/* Grey */
.note-card.note-color-grey {
background-color: #e8eaed;
border-color: transparent;
--note-card-fg: #2a2d31;
background-color: #e8eaed;
border-color: transparent;
--note-card-fg: #2a2d31;
}
.note-card.note-has-bg,
.note-modal.note-has-bg,
.note-input-container.note-has-bg,
.link-outer.note-has-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--note-bg-image);
background-size: cover;
background-position: center bottom;
background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--note-bg-image);
background-size: cover;
background-position: center bottom;
}
.note-card.todo-card.note-has-bg[data-font-color="auto"] {
--note-card-fg: rgba(255, 255, 255, 0.92);
color: var(--note-card-fg);
background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--note-bg-image);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
--note-card-fg: rgba(255, 255, 255, 0.92);
color: var(--note-card-fg);
background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--note-bg-image);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), var(--note-bg-image);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
@@ -1916,6 +1999,11 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
.note-card[class*="note-color-"] {
color: var(--note-card-fg, #202124);
border: 1px solid #000;
}
[data-theme="dark"] .note-card[class*="note-color-"] {
border: 1px solid #dedfe2;
}
.link-outer {
@@ -1994,13 +2082,14 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
/* Responsive: sur petits écrans, ajuster les backgrounds */
@media (max-width: 768px) {
/* En mobile, les cards sont plus étroites, on ajuste */
.notes-masonry .note-card.note-has-bg,
.view-grid .link-outer.note-has-bg {
background-size: cover;
background-position: center bottom;
}
/* Vue liste en mobile: thumbnail passe en haut */
.view-list .link-outer.note-has-bg {
background-size: cover;
@@ -2052,21 +2141,17 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
.note-card.note-filter-lined,
.note-modal.note-filter-lined,
.link-outer.note-filter-lined {
background-image: repeating-linear-gradient(
transparent,
transparent 29px,
rgba(0, 0, 0, 0.1) 30px
) !important;
background-image: repeating-linear-gradient(transparent,
transparent 29px,
rgba(0, 0, 0, 0.1) 30px) !important;
}
[data-theme="dark"] .note-card.note-filter-lined,
[data-theme="dark"] .note-modal.note-filter-lined,
[data-theme="dark"] .link-outer.note-filter-lined {
background-image: repeating-linear-gradient(
transparent,
transparent 29px,
rgba(255, 255, 255, 0.1) 30px
) !important;
background-image: repeating-linear-gradient(transparent,
transparent 29px,
rgba(255, 255, 255, 0.1) 30px) !important;
}
/* 4. Quadrillé - Grid */
@@ -2126,25 +2211,21 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
.note-card.note-filter-stripes,
.note-modal.note-filter-stripes,
.link-outer.note-filter-stripes {
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.05) 10px,
rgba(0, 0, 0, 0.05) 20px
) !important;
background-image: repeating-linear-gradient(45deg,
transparent,
transparent 10px,
rgba(0, 0, 0, 0.05) 10px,
rgba(0, 0, 0, 0.05) 20px) !important;
}
[data-theme="dark"] .note-card.note-filter-stripes,
[data-theme="dark"] .note-modal.note-filter-stripes,
[data-theme="dark"] .link-outer.note-filter-stripes {
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.05) 10px,
rgba(255, 255, 255, 0.05) 20px
) !important;
background-image: repeating-linear-gradient(45deg,
transparent,
transparent 10px,
rgba(255, 255, 255, 0.05) 10px,
rgba(255, 255, 255, 0.05) 20px) !important;
}
/* =========================================
@@ -2284,7 +2365,7 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
height: 16px;
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
transform: translate(-50%, -50%);
pointer-events: none;
}
@@ -2312,7 +2393,7 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
border-radius: 50%;
background: white;
border: 2px solid rgba(15, 23, 42, 0.3);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
@@ -2322,7 +2403,7 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
border-radius: 50%;
background: white;
border: 2px solid rgba(15, 23, 42, 0.3);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
@@ -2478,12 +2559,12 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
.bg-studio-swatch:hover {
transform: scale(1.12);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.bg-studio-swatch.is-active {
border: 2px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.bg-studio-swatch-custom {
@@ -2521,7 +2602,12 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
/* Custom note color style */
.note-card.note-color-custom,
.note-modal.note-color-custom {
border-color: transparent;
border-color: #000;
}
[data-theme="dark"] .note-card.note-color-custom,
[data-theme="dark"] .note-modal.note-color-custom {
border-color: #dedfe2;
}
/* Ensure Font section is properly sized */
@@ -2533,14 +2619,13 @@ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* --- ARCHIVE VIEW --- */
/* Ensure archive view uses same background as notes view */
body.view-archive .content-container {
padding: 2rem;
background-color: var(--bg-body);
min-height: 100vh;
background-color: var(--bg-body) !important;
}
[data-theme="dark"] body.view-archive .content-container {
background-color: var(--bg-body);
background-color: #20293a !important;
}
/* Archive Title */
@@ -2579,25 +2664,20 @@ body.view-archive .content-container {
color: #9aa0a6;
}
/* Archive wrapper */
.archive-wrapper {
max-width: 1200px;
margin: 0 auto;
}
/* Archive top bar adjustments */
.archive-top-bar {
flex-direction: column;
align-items: center;
padding-right: 0;
gap: 1rem;
position: relative;
}
.archive-top-bar .notes-tools {
position: relative;
right: auto;
top: auto;
transform: none;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
body.view-todo .note-card.todo-card .note-body {
@@ -2747,12 +2827,12 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
opacity: 0.75;
}
.todo-item-checkbox:checked + .todo-checklist-box-ui {
.todo-item-checkbox:checked+.todo-checklist-box-ui {
background: currentColor;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .todo-item-checkbox:checked + .todo-checklist-box-ui {
[data-theme="dark"] .todo-item-checkbox:checked+.todo-checklist-box-ui {
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35);
}
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);
}
}
}