Sharing my CSS tweaks: Polishing the UI for better readability and elegance #9553

ricolandia · 2026-04-23T16:09:19Z

ricolandia
Apr 23, 2026

Hello everyone!

I want to share some CSS adjustments I’ve been using to tweak the default theme (which is already great!). I run Trilium on Debian 13, and my main goal with these snippets was to make the interface more aesthetically pleasing and less fatiguing for long reading sessions.

The core idea across all these tweaks is to add more "breathing room" to the interface, improving line spacing, margins, and font weights, to make daily usage much more comfortable and visually polished.

Just a quick note: I am not a programmer! I tweaked these by trial and error. If anyone has suggestions on how to improve or clean up this CSS, I would love to hear them. A few ideas didn't work out exactly as I wanted, so feel free to take a look and improve them. Rest assured, everything is stable and nothing breaks!

Feel free to test them out and let me know what you think. Happy note-taking!

I've divided the changes into 6 specific areas so you can pick and choose the ones you like:

1. General Editor (Line Spacing & Headings)

Inspired by Obsidian’s readability, this increases the line-height between paragraphs and lists. It also gives headings (H1, H2, H3) a bolder weight and more margin space so they stand out clearly from the text blocks.

/* Text editor spacing adjustment (Obsidian style) */

.ck-content p {
    line-height: 1.9 !important;       /* Increases space BETWEEN LINES in a paragraph */
    margin-bottom: 1.5em !important;   /* Increases space BETWEEN PARAGRAPHS */
}

.ck-content li {
    line-height: 1.9 !important;       /* Line spacing inside list items */
    margin-bottom: 0.9em !important;   /* Extra space between list items */
}

/* --- HEADINGS (H1, H2, H3) - BOLD AND FINE TUNING --- */
.ck-content h1, 
.ck-content h2, 
.ck-content h3 {
    font-weight: bold !important;      /* Makes headings bold */
    margin-top: 1.9em !important;      /* Increases space BEFORE the heading */
    margin-bottom: 1.7em !important;   /* Adjusts space AFTER the heading */
}

2. Collection Cards (Grid View)

Adds more padding and breathing room to note cards. It widens the grid, increases the font size for titles/links, and makes scanning cards much easier on the eyes.

/* === COLLECTION VIEW CARDS === */

/* 1. Wider grid (larger cards) */
.note-book-content {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
}

/* Fallback for alternative selector */
.children-overview .note-book-content,
.note-book-render .note-book-content {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
}

/* 2. Card titles */
.note-book-card .note-book-title,
.note-book-card h5,
.note-book-card .card-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* 3. Body/links inside cards */
.note-book-card .note-book-card-content,
.note-book-card a,
.note-book-card .tree-link {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

/* 4. Internal padding (more breathing room) */
.note-book-card {
    padding: 16px 18px !important;
}

3. General UI Polish

Small refinements across the entire interface. This includes a thinner, more discrete scrollbar, subtle card borders without heavy shadows, hiding the editor toolbar when it's not focused, and cleaner link hovers.

/* GENERAL POLISH - broad selectors */

/* Discrete scrollbar */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-thumb { background: var(--main-border-color) !important; border-radius: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }

/* Cards - subtle borders */
[class*="note-book"] [class*="card"] {
    border: 1px solid var(--main-border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* Hide toolbar when not in use */
.ck-toolbar {
    opacity: 0.5;
    transition: opacity 0.2s !important;
}
.ck-toolbar:hover, .ck-editor__editable:focus ~ * .ck-toolbar {
    opacity: 1;
}

/* Clean links */
[class*="note-book"] a {
    text-decoration: none !important;
    opacity: 0.85;
}
[class*="note-book"] a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

4. Sidebar & Note Tree

Cleans up the left panel. It removes heavy background colors from active items in favor of a subtle left border indicator. It also reduces the size of the launcher icons and adjusts the spacing between tree elements.

/* === SIDEBAR & TREE === */

/* Remove heavy background from active item */
.fancytree-active > .fancytree-node,
.fancytree-active .fancytree-title {
    background: transparent !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}

/* Active item with subtle left indicator */
.fancytree-active > .fancytree-node {
    border-left: 2px solid var(--main-text-color) !important;
    padding-left: 4px !important;
    background: var(--accented-background-color) !important;
}

/* Smooth hover */
.fancytree-node:hover {
    background: var(--accented-background-color) !important;
    border-radius: 6px !important;
}

/* Spacing between items */
.fancytree-node {
    padding: 2px 4px !important;
    border-radius: 6px !important;
}

/* Item titles - lighter weight */
.fancytree-title {
    font-weight: 400 !important;
    opacity: 0.9;
}

/* Left vertical launcher icons */
.launcher-pane .launcher-button .bx,
.launcher-pane .launcher-button svg,
.launcher-pane button .bx,
.launcher-pane button svg {
    font-size: 0.8rem !important;
    width: 14px !important;
    height: 14px !important;
}

/* Launcher buttons - reduced area */
.launcher-pane .launcher-button,
.launcher-pane button {
    padding: 15px !important;
    width: 26px !important;
    height: 26px !important;
}

/* Note type icons in the tree */
.fancytree-node .fancytree-icon,
.fancytree-node .bx,
.fancytree-node svg {
    font-size: 1rem !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8;
}

5. Table View

Transforms the collection table view to look much cleaner. Adds more cell padding, elegant uppercase headers, very subtle vertical/horizontal borders, and automatic distinct colors based on the column position for easier scanning.

/* === ELEGANT TABLE VIEW === */

/* Increased spacing */
.table-view-container {
  --cell-vert-padding-size: 24px;
  --cell-horiz-padding-size: 14px;
}

/* Header: discrete uppercase */
.tabulator-header .tabulator-col-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Discrete borders */
.tabulator-row .tabulator-cell {
  border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 30%, transparent) !important;
  font-size: 14px;
}
.tabulator-header .tabulator-col {
  border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 30%, transparent) !important;
}
.tabulator-row {
  border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #555) 35%, transparent) !important;
  background: transparent !important;
}
.tabulator-row.tabulator-row-odd,
.tabulator-row.tabulator-row-even {
  background: transparent !important;
}

/* Smooth row hover */
.tabulator-row:hover,
.tabulator-row.tabulator-row-odd:hover,
.tabulator-row.tabulator-row-even:hover {
  background: color-mix(in srgb, var(--accented-background-color, #8b5cf6) 7%, transparent) !important;
}

/* Note links */
.tabulator-cell .reference-link,
.tabulator-cell a {
  color: var(--link-color, #8b5cf6) !important;
  text-decoration: none !important;
  font-weight: 500;
}
.tabulator-cell .reference-link:hover,
.tabulator-cell a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Number column */
.tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  font-size: 15px;
  opacity: 0.4;
  border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 50%, transparent) !important;
}

/* Invisible resize handle until hover */
.tabulator-col-resize-handle {
  opacity: 0;
  transition: opacity 0.15s;
}
.tabulator-col:hover .tabulator-col-resize-handle {
  opacity: 1;
}

/* Auto colors by column position */
.tabulator-row .tabulator-cell:nth-child(1) { color: #94a3b8 !important; }
.tabulator-row .tabulator-cell:nth-child(2), .tabulator-row .tabulator-cell:nth-child(2) * { color: #a78bfa !important; }
.tabulator-row .tabulator-cell:nth-child(3) { color: #e2e8f0 !important; } 
.tabulator-row .tabulator-cell:nth-child(4), .tabulator-row .tabulator-cell:nth-child(4) * { color: #60a5fa !important; }
.tabulator-row .tabulator-cell:nth-child(5), .tabulator-row .tabulator-cell:nth-child(5) * { color: #fbbf24 !important; }
.tabulator-row .tabulator-cell:nth-child(6), .tabulator-row .tabulator-cell:nth-child(6) * { color: #f472b6 !important; }
.tabulator-row .tabulator-cell:nth-child(7), .tabulator-row .tabulator-cell:nth-child(7) * { color: #34d399 !important; }
.tabulator-row .tabulator-cell:nth-child(8), .tabulator-row .tabulator-cell:nth-child(8) * { color: #fb923c !important; }

6. Board View (Kanban)

Increases card widths, scales up font sizes, adds a nice hover elevation effect, and creates a cleaner separation for columns to make project tracking visually smoother.

/* === ELEGANT BOARD VIEW === */

.board-view-container {
  padding: 20px 16px;
  gap: 18px;
  align-items: flex-start;
}

.board-column {
  background: color-mix(in srgb, var(--main-background-color, #1a1a1a) 50%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--main-border-color, #444) 50%, transparent) !important;
  border-radius: 10px;
  min-width: 280px;
  max-width: 300px;
  padding: 0;
  overflow: hidden;
}

.board-column > h3,
.board-column h3[draggable] {
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  padding: 18px 18px 16px;
  margin: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #444) 25%, transparent);
  cursor: grab;
}

.board-column-content {
  padding: 16px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-note {
  background: var(--main-background-color, #1e1e1e) !important;
  border: 1px solid color-mix(in srgb, var(--main-border-color, #444) 40%, transparent) !important;
  border-radius: 7px !important;
  padding: 18px 20px !important;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.board-note:hover {
  border-color: color-mix(in srgb, var(--main-border-color, #444) 80%, transparent) !important;
  transform: translateY(-1px);
}

.board-note a,
.board-note .reference-link {
  color: var(--link-color, #8b5cf6) !important;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none !important;
  line-height: 4;
  display: block;
  margin-bottom: 15px;
}

.board-note .ck-content,
.board-note [class*="attribute"],
.board-note .note-attributes {
  font-size: 17px;
  line-height: 4;
  color: color-mix(in srgb, var(--muted-text-color, #888) 80%, transparent);
}

.board-note strong,
.board-note b {
  font-weight: 500;
  font-size: 15px;
  color: color-mix(in srgb, var(--muted-text-color, #888) 70%, transparent);
  letter-spacing: 0.01em;
}

.board-new-item,
.board-column .board-new-item {
  font-size: 15px;
  opacity: 0.3;
  padding: 10px 10px;
  border-radius: 5px;
  margin: 2px 0 2px;
  transition: opacity 0.15s, background 0.15s;
  cursor: pointer;
}
.board-new-item:hover {
  opacity: 0.75;
  background: color-mix(in srgb, var(--accented-background-color, #8b5cf6) 8%, transparent);
}

.board-add-column {
  font-size: 13px;
  opacity: 0.3;
  padding: 12px 18px;
  border: 1px dashed color-mix(in srgb, var(--main-border-color, #444) 35%, transparent);
  border-radius: 10px;
  min-width: 150px;
  transition: opacity 0.15s;
  cursor: pointer;
  align-self: flex-start;
}
.board-add-column:hover {
  opacity: 0.7;
}

Feel free to test them out and let me know if you have any suggestions or improvements. Happy note-taking!

ricolandia · 2026-05-02T00:49:26Z

ricolandia
May 2, 2026
Author

P.S. Mobile UI Polish (CSS Update)
I also made a small update to the CSS code to polish the visual appearance on the mobile version.

Here is the Full code:

/* ==========================================================================
   TRILIUM NEXT - TEMA PERSONALIZADO UNIFICADO
   ========================================================================== */

/* ==========================================================================
   1. POLIMENTO GERAL E SCROLLBAR
   ========================================================================== */

/* Scrollbar discreta */
::-webkit-scrollbar { 
    width: 6px !important; 
    height: 6px !important; 
}
::-webkit-scrollbar-thumb { 
    background: var(--main-border-color) !important; 
    border-radius: 3px !important; 
}
::-webkit-scrollbar-track { 
    background: transparent !important; 
}

/* Links sem sublinhado em cadernos/coleções */
[class*="note-book"] a {
    text-decoration: none !important;
    opacity: 0.85;
}
[class*="note-book"] a:hover {
    opacity: 1;
    text-decoration: underline !important;
}


/* ==========================================================================
   2. BARRA LATERAL (LAUNCHER & FANCYTREE)
   ========================================================================== */

/* Ícones do launcher (barra vertical esquerda) */
.launcher-pane .launcher-button .bx,
.launcher-pane .launcher-button svg,
.launcher-pane button .bx,
.launcher-pane button svg {
    font-size: 0.8rem !important;
    width: 14px !important;
    height: 14px !important;
}

/*
 * FIX: Removido o conflito entre padding:15px e width/height:26px.
 * O padding inflava o botão para ~56px, ignorando as dimensões declaradas.
 * Solução: usar width/height fixos e centralizar o conteúdo com flex.
 */
.launcher-pane .launcher-button,
.launcher-pane button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
}

/* Ícones de tipo de nota na árvore (text, code, collection, etc.) */
.fancytree-node .fancytree-icon,
.fancytree-node .bx,
.fancytree-node svg {
    font-size: 1rem !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8;
}

/*
 * FIX: Regra duplicada removida. Antes havia dois blocos para
 * .fancytree-active > .fancytree-node com valores contraditórios
 * (background: transparent vs background: var(--accented-background-color)).
 * O segundo sobrescrevia o primeiro — mantido apenas o estado final intencional.
 */
.fancytree-active > .fancytree-node {
    border-left: 2px solid var(--main-text-color) !important;
    padding-left: 4px !important;
    background: var(--accented-background-color) !important;
    border-radius: 6px !important;
}

.fancytree-active .fancytree-title {
    font-weight: 500 !important;
}

/* Hover suave na árvore */
.fancytree-node:hover {
    background: var(--accented-background-color) !important;
    border-radius: 6px !important;
}

/* Espaçamento entre itens da árvore */
.fancytree-node {
    padding: 5px 5px !important;
    border-radius: 6px !important;
}

/* Título dos itens - peso mais leve */
.fancytree-title {
    font-weight: 400 !important;
    opacity: 0.9;
}


/* ==========================================================================
   3. EDITOR DE TEXTO (ESTILO OBSIDIAN)
   ========================================================================== */

/* Ajuste de espaçamento para parágrafos e listas */
.ck-content p {
    line-height: 1.9 !important;
    margin-bottom: 1.5em !important;
}

.ck-content li {
    line-height: 1.9 !important;
    margin-bottom: 0.9em !important;
}

/* Títulos (H1, H2, H3) - Negrito e Respiro */
.ck-content h1, 
.ck-content h2, 
.ck-content h3 {
    font-weight: bold !important;
    margin-top: 1.9em !important;
    margin-bottom: 1.7em !important;
}

/*
 * FIX: O seletor original `.ck-editor__editable:focus ~ * .ck-toolbar`
 * não funciona porque a toolbar não é irmã do editor no DOM do CKEditor 5.
 * Substituído por :focus-within no wrapper pai, que é o approach correto.
 */
.ck-toolbar {
    opacity: 0.5;
    transition: opacity 0.2s !important;
}
.ck-toolbar:hover,
.ck.ck-editor:focus-within .ck-toolbar {
    opacity: 1;
}


/* ==========================================================================
   4. VISUALIZAÇÃO EM CARTÕES (CARDS)
   ========================================================================== */

/*
 * FIX: Removidos os dois seletores redundantes abaixo (.children-overview
 * e .note-book-render) — este já os cobre completamente.
 */
.note-book-content {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
}

/* Título dos cards */
.note-book-card .note-book-title,
.note-book-card h5,
.note-book-card .card-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* Corpo/links dentro dos cards */
.note-book-card .note-book-card-content,
.note-book-card a,
.note-book-card .tree-link {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}

/* Padding interno dos cards (dá mais "respiro") */
.note-book-card {
    padding: 16px 18px !important;
}

/* Cards - bordas sutis e sem sombra */
[class*="note-book"] [class*="card"] {
    border: 1px solid var(--main-border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}


/* ==========================================================================
   5. VISUALIZAÇÃO KANBAN (BOARD VIEW ELEGANTE V3)
   ========================================================================== */

.board-view-container {
    padding: 20px 16px;
    gap: 18px;
    align-items: flex-start;
}

.board-column {
    background: color-mix(in srgb, var(--main-background-color, #1a1a1a) 50%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--main-border-color, #444) 50%, transparent) !important;
    border-radius: 10px;
    min-width: 280px;
    max-width: 300px;
    padding: 0;
    overflow: hidden;
}

.board-column > h3,
.board-column h3[draggable] {
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.5;
    padding: 18px 18px 16px;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #444) 25%, transparent);
    cursor: grab;
}

.board-column-content {
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.board-note {
    background: var(--main-background-color, #1e1e1e) !important;
    border: 1px solid color-mix(in srgb, var(--main-border-color, #444) 40%, transparent) !important;
    border-radius: 7px !important;
    padding: 18px 20px !important;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.board-note:hover {
    border-color: color-mix(in srgb, var(--main-border-color, #444) 80%, transparent) !important;
    transform: translateY(-1px);
}

/*
 * FIX: line-height: 4 era um bug — tornava cada linha ~68px de altura.
 * Corrigido para 1.4 (valor padrão razoável para cards).
 */
.board-note a,
.board-note .reference-link {
    color: var(--link-color, #8b5cf6) !important;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none !important;
    line-height: 1.4;
    display: block;
    margin-bottom: 8px;
}

.board-note .ck-content,
.board-note [class*="attribute"],
.board-note .note-attributes {
    font-size: 14px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--muted-text-color, #888) 80%, transparent);
}

.board-note strong,
.board-note b {
    font-weight: 500;
    font-size: 15px;
    color: color-mix(in srgb, var(--muted-text-color, #888) 70%, transparent);
    letter-spacing: 0.01em;
}

.board-new-item,
.board-column .board-new-item {
    font-size: 15px;
    opacity: 0.3;
    padding: 10px 10px;
    border-radius: 5px;
    margin: 2px 0 2px;
    transition: opacity 0.15s, background 0.15s;
    cursor: pointer;
}

.board-new-item:hover {
    opacity: 0.75;
    background: color-mix(in srgb, var(--accented-background-color, #8b5cf6) 8%, transparent);
}

.board-add-column {
    font-size: 13px;
    opacity: 0.3;
    padding: 12px 18px;
    border: 1px dashed color-mix(in srgb, var(--main-border-color, #444) 35%, transparent);
    border-radius: 10px;
    min-width: 150px;
    transition: opacity 0.15s;
    cursor: pointer;
    align-self: flex-start;
}

/* Cores por coluna - Kanban */
.board-column:nth-child(1) { background: color-mix(in srgb, #cbd5e1 6%, var(--main-background-color)) !important; }
.board-column:nth-child(2) { background: color-mix(in srgb, #d6d3d1 6%, var(--main-background-color)) !important; }
.board-column:nth-child(3) { background: color-mix(in srgb, #a1a1aa 7%, var(--main-background-color)) !important; }
.board-column:nth-child(4) { background: color-mix(in srgb, #e5e7eb 5%, var(--main-background-color)) !important; }
.board-column:nth-child(5) { background: color-mix(in srgb, #9ca3af 8%, var(--main-background-color)) !important; }

.board-column::before {
    content: "";
    display: block;
    height: 1px;
    background: transparent;
    opacity: 0.8;
}

.board-column:nth-child(1)::before { background: #3a6ea5; }
.board-column:nth-child(2)::before { background: #f59e0b; }
.board-column:nth-child(3)::before { background: #2dd4bf; }
.board-column:nth-child(4)::before { background: #ef4444; }
.board-column:nth-child(5)::before { background: #8b5cf6; }


/* ==========================================================================
   6. VISUALIZAÇÃO EM TABELA (COLLECTION VIEW ELEGANTE V3)
   ========================================================================== */

.table-view-container {
    --cell-vert-padding-size: 30px;
    --cell-horiz-padding-size: 14px;
}

.tabulator-header .tabulator-col-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    opacity: 0.6;
}

.tabulator-row .tabulator-cell {
    border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 30%, transparent) !important;
    font-size: 15px;
}

.tabulator-header .tabulator-col {
    border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 30%, transparent) !important;
}

.tabulator-row {
    border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #555) 35%, transparent) !important;
    background: transparent !important;
}

.tabulator-row.tabulator-row-odd,
.tabulator-row.tabulator-row-even {
    background: transparent !important;
}

.tabulator-row:hover,
.tabulator-row.tabulator-row-odd:hover,
.tabulator-row.tabulator-row-even:hover {
    background: color-mix(in srgb, var(--accented-background-color, #8b5cf6) 7%, transparent) !important;
}

.tabulator-cell .reference-link,
.tabulator-cell a {
    color: var(--link-color, #8b5cf6) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.tabulator-cell .reference-link:hover,
.tabulator-cell a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    font-size: 15px;
    opacity: 0.4;
    border-right: 1px solid color-mix(in srgb, var(--main-border-color, #555) 50%, transparent) !important;
}

.tabulator-col-resize-handle {
    opacity: 0;
    transition: opacity 0.15s;
}
.tabulator-col:hover .tabulator-col-resize-handle {
    opacity: 1;
}

/* Cores automáticas por posição de coluna */
.tabulator-row .tabulator-cell:nth-child(1)  { color: #94a3b8 !important; }
.tabulator-row .tabulator-cell:nth-child(2),
.tabulator-row .tabulator-cell:nth-child(2) * { color: #a78bfa !important; }
.tabulator-row .tabulator-cell:nth-child(3)  { color: #e2e8f0 !important; }
.tabulator-row .tabulator-cell:nth-child(4),
.tabulator-row .tabulator-cell:nth-child(4) * { color: #60a5fa !important; }
.tabulator-row .tabulator-cell:nth-child(5),
.tabulator-row .tabulator-cell:nth-child(5) * { color: #fbbf24 !important; }
.tabulator-row .tabulator-cell:nth-child(6),
.tabulator-row .tabulator-cell:nth-child(6) * { color: #f472b6 !important; }
.tabulator-row .tabulator-cell:nth-child(7),
.tabulator-row .tabulator-cell:nth-child(7) * { color: #34d399 !important; }
.tabulator-row .tabulator-cell:nth-child(8),
.tabulator-row .tabulator-cell:nth-child(8) * { color: #fb923c !important; }
/*
 * NOTA: colunas 9 e 10 tinham cor idêntica (#f472b6, igual à col. 6).
 * Corrigido para dar continuidade à paleta cromática.
 */
.tabulator-row .tabulator-cell:nth-child(9),
.tabulator-row .tabulator-cell:nth-child(9) * { color: #a3e635 !important; }
.tabulator-row .tabulator-cell:nth-child(10),
.tabulator-row .tabulator-cell:nth-child(10) * { color: #38bdf8 !important; }
.tabulator-row .tabulator-cell:nth-child(11),
.tabulator-row .tabulator-cell:nth-child(11) * { color: #60a5fa !important; }
.tabulator-row .tabulator-cell:nth-child(12),
.tabulator-row .tabulator-cell:nth-child(12) * { color: #fbbf24 !important; }
.tabulator-row .tabulator-cell:nth-child(13),
.tabulator-row .tabulator-cell:nth-child(13) * { color: #fb923c !important; }
.tabulator-row .tabulator-cell:nth-child(14),
.tabulator-row .tabulator-cell:nth-child(14) * { color: #34d399 !important; }
.tabulator-row .tabulator-cell:nth-child(15),
.tabulator-row .tabulator-cell:nth-child(15) * { color: #fcbf24 !important; }


/* ==========================================================================
   7. AJUSTES PARA DISPOSITIVOS MÓVEIS (MOBILE)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Título principal da nota --- */
    .title-row .note-title,
    input.note-title {
        font-size: 1.2rem !important;
    }

    /* --- Títulos dentro do editor (escala proporcional) --- */
    .ck-content h1 { font-size: 1.4rem !important; }
    .ck-content h2 { font-size: 1.2rem !important; }
    .ck-content h3 { font-size: 1.05rem !important; }

    /* --- Corpo do editor --- */
    .ck-content p,
    .ck-content li {
        font-size: 0.92rem !important;
        line-height: 1.65 !important;
        margin-bottom: 0.9em !important;
    }

    .ck-content h1,
    .ck-content h2,
    .ck-content h3 {
        margin-top: 1.3em !important;
        margin-bottom: 1em !important;
    }

    /* --- Cards (Book/Collection view) --- */
    .note-book-card .note-book-title,
    .note-book-card h5,
    .note-book-card .card-title {
        font-size: 1rem !important;
    }

    .note-book-card .note-book-card-content,
    .note-book-card a,
    .note-book-card .tree-link {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
    }

    .note-book-card {
        padding: 12px 14px !important;
    }

    .note-book-content {
        grid-template-columns: 1fr !important;
    }

    /* --- Tabela --- */
    .tabulator-header .tabulator-col-title {
        font-size: 0.75rem !important;
    }

    .tabulator-row .tabulator-cell {
        font-size: 0.82rem !important;
    }

    /* --- Kanban --- */
    .board-note a,
    .board-note .reference-link {
        font-size: 0.92rem !important;
        line-height: 1.4 !important;
    }

    .board-column > h3,
    .board-column h3[draggable] {
        font-size: 0.75rem !important;
    }

    /* --- Barra lateral (launcher) --- */
    .launcher-pane .launcher-button .bx,
    .launcher-pane .launcher-button svg,
    .launcher-pane button .bx,
    .launcher-pane button svg {
        font-size: 0.7rem !important;
        width: 12px !important;
        height: 12px !important;
    }

    /* --- Árvore de notas --- */
    .fancytree-title {
        font-size: 0.85rem !important;
    }
}

1 reply

ricolandia May 3, 2026
Author

Trilium Next - Unified Custom Theme: Review and Bug Fixes

This commit fixes actual bugs found during the theme review, removes redundancies, and improves the robustness of two selectors that weren't working as expected.

Bug Fixes

1. line-height: 4 in Kanban (section 5)
The line-height: 4 value in the .board-note a and .board-note .ck-content selectors is a typo. In CSS, a unitless line-height acts as a multiplier relative to the font size — with font-size: 17px, this resulted in ~68px of height per line, making the Kanban cards extremely spaced out and visually broken.
Fixed to 1.4 (an appropriate standard for cards).

/* Before */
.board-note a { line-height: 4; }
.board-note .ck-content { line-height: 4; }

/* After */
.board-note a { line-height: 1.4; }
.board-note .ck-content { line-height: 1.5; }

2. Sizing conflict in the launcher (section 2)
The style block for the launcher buttons defined padding: 15px and width: 26px; height: 26px at the same time. On button elements, padding is added to the dimensions, inflating the button to approximately 56px — completely ignoring the declared width and height values.
Fixed with display: flex, centering the content, and padding: 0.

/* Before */
.launcher-pane .launcher-button {
    padding: 15px !important;
    width: 26px !important;
    height: 26px !important;
}

/* After */
.launcher-pane .launcher-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
}

3. Duplicated and contradictory rule in the tree (section 2)
The .fancytree-active > .fancytree-node selector appeared twice with conflicting background values: the first declaration defined background: transparent, and the second (right below it) defined background: var(--accented-background-color). The first one was completely ignored by the cascade, rendering it dead code.
Fixed by merging the two blocks into a single, coherent block.

/* Before — two separate blocks, the first one is never applied */
.fancytree-active > .fancytree-node,
.fancytree-active .fancytree-title {
    background: transparent !important; /* ← never seen */
}

.fancytree-active > .fancytree-node {
    border-left: 2px solid var(--main-text-color) !important;
    background: var(--accented-background-color) !important; /* ← overrides */
}

/* After — a single block with the intended final state */
.fancytree-active > .fancytree-node {
    border-left: 2px solid var(--main-text-color) !important;
    padding-left: 4px !important;
    background: var(--accented-background-color) !important;
    border-radius: 6px !important;
}
.fancytree-active .fancytree-title {
    font-weight: 500 !important;
}

4. Ineffective CKEditor toolbar focus selector (section 3)
The .ck-editor__editable:focus ~ * .ck-toolbar selector uses the ~ (general sibling) combinator, which requires the toolbar to be a sibling element of the editor in the DOM. In CKEditor 5, the toolbar is a parent or preceding element to the editable editor — never a succeeding sibling — rendering this selector completely ineffective.
Fixed with :focus-within on the .ck.ck-editor wrapper, which captures focus on any descendant.

/* Before — ~ selector that never triggers in the actual CKEditor 5 DOM */
.ck-editor__editable:focus ~ * .ck-toolbar { opacity: 1; }

/* After — :focus-within on the wrapper works correctly */
.ck.ck-editor:focus-within .ck-toolbar { opacity: 1; }

Redundancies Removed

Duplicated selectors in .note-book-content (section 4)
The two selectors below were completely redundant — the general .note-book-content selector already covered them and had equivalent or higher priority.

/* Removed */
.children-overview .note-book-content { ... }
.note-book-render .note-book-content { ... }

Minor Improvements

Duplicated colors in the table (section 6)
Columns 9 and 10 had an identical color (#f472b6), also repeating the color from column 6. Fixed to maintain the palette's continuity and ensure visual distinction between adjacent columns.

/* Before */
.tabulator-cell:nth-child(9) * { color: #f472b6 !important; } /* same as col 6 */
.tabulator-cell:nth-child(10) * { color: #f472b6 !important; } /* same as cols 6 and 9 */

/* After */
.tabulator-cell:nth-child(9) * { color: #a3e635 !important; } /* lime */
.tabulator-cell:nth-child(10) * { color: #38bdf8 !important; } /* sky */

ricolandia · 2026-05-09T19:41:56Z

ricolandia
May 9, 2026
Author

New enhancement!

💊 Styling list view attributes as pills (JS frontend + CSS)

Context: When a note uses the collection type with List view, attributes shown on the right side of each item are rendered as a single raw text string inside .rendered-note-attributes — something like:

~renderNote=AI Code #color="#4de64d" #subtreeHidden

There's no per-attribute markup, so CSS alone can't target individual labels or relations. This snippet uses a small frontend script to re-parse and re-render those strings as styled pills, then CSS to style them.

How it works

The .rendered-note-attributes span contains a mix of raw text nodes and <a> anchor elements (for relation targets). The script walks those child nodes, identifies labels (#) and relations (~) by their prefix, and rebuilds the element as a sequence of individual <span class="attr-pill ..."> elements. A MutationObserver watches for new list items so it works dynamically as you navigate.

A configurable HIDDEN set lets you suppress noisy system attributes (like #color, #subtreeHidden, #iconClass) that are already expressed visually elsewhere in the UI.

Screenshot

Setup

1. Frontend Script

Create a new note of type JS Frontend and add the attribute #run=frontendStartup.

Paste the following code:

const HIDDEN = new Set(['subtreeHidden', 'color', 'iconClass', 'viewType']);

function parsePills(el) {
  if (el.dataset.pillified === '1') return;
  el.dataset.pillified = '1';

  const pills = [];
  let pending = null;

  for (const node of el.childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      for (const part of node.textContent.split(/\s+/).filter(Boolean)) {
        if (pending) { pills.push(pending); pending = null; }

        if (part.endsWith('=')) {
          pending = { type: 'relation', prefix: part, link: null };
        } else {
          pills.push({
            type: part.startsWith('~') ? 'relation' : 'label',
            prefix: part,
            link: null
          });
        }
      }
    } else if (node.tagName === 'A') {
      if (pending) {
        pending.link = node.cloneNode(true);
        pills.push(pending);
        pending = null;
      } else {
        pills.push({ type: 'relation', prefix: '~', link: node.cloneNode(true) });
      }
    }
  }
  if (pending) pills.push(pending);

  el.innerHTML = '';

  for (const pill of pills) {
    const name = (pill.prefix || '').replace(/^[~#]/, '').replace(/=$/, '');
    if (HIDDEN.has(name)) continue;

    const span = document.createElement('span');
    span.className = `attr-pill attr-pill-${pill.type}`;

    if (pill.link) {
      span.appendChild(document.createTextNode(pill.prefix));
      span.appendChild(pill.link);
    } else {
      span.textContent = pill.prefix;
    }
    el.appendChild(span);
  }
}

function processAll() {
  document.querySelectorAll('.rendered-note-attributes:not([data-pillified])').forEach(parsePills);
}

processAll();

new MutationObserver(mutations => {
  for (const m of mutations) {
    m.addedNodes.forEach(node => {
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      if (node.matches?.('.rendered-note-attributes')) parsePills(node);
      node.querySelectorAll?.('.rendered-note-attributes:not([data-pillified])').forEach(parsePills);
    });
  }
}).observe(document.body, { childList: true, subtree: true });

2. Custom CSS

Add the following to your custom CSS note

/* List view: attribute pills */

.note-list-attributes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-right: 6px;
}

.rendered-note-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.attr-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75em;
  font-family: var(--font-monospace, monospace);
  line-height: 1.7;
  white-space: nowrap;
}

/* Labels (#) */
.attr-pill-label {
  background: rgba(77, 210, 140, 0.10);
  color: #7ed9a0;
  border: 1px solid rgba(77, 210, 140, 0.22);
}

/* Relations (~) */
.attr-pill-relation {
  background: rgba(110, 130, 230, 0.12);
  color: #a8b8f5;
  border: 1px solid rgba(110, 130, 230, 0.25);
}

/* Link inside a relation pill */
.attr-pill-relation a.reference-link {
  color: inherit !important;
  text-decoration: none;
}
.attr-pill-relation a.reference-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

Customization

Pill size: adjust font-size in .attr-pill (e.g. 0.8em) and padding as needed.
Hidden attributes: edit the HIDDEN set in the script to add or remove attribute names you want suppressed.
Colors: the green/teal tones are for labels, blue/purple for relations — change rgba() values freely to match your theme.

Notes

Tested on TriliumNext with List view on collection-type notes.
The MutationObserver handles dynamic navigation without needing to reload.
This does not affect other note views (Book, Grid, etc.) — only .rendered-note-attributes elements are targeted.

Hope this is useful to others! Happy to refine if anyone spots edge cases.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trilium Next

Sharing my CSS tweaks: Polishing the UI for better readability and elegance #9553

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Trilium Next

Sharing my CSS tweaks: Polishing the UI for better readability and elegance #9553

Uh oh!

Uh oh!

ricolandia Apr 23, 2026

1. General Editor (Line Spacing & Headings)

2. Collection Cards (Grid View)

3. General UI Polish

4. Sidebar & Note Tree

5. Table View

6. Board View (Kanban)

Replies: 2 comments · 1 reply

Uh oh!

Uh oh!

ricolandia May 2, 2026 Author

Uh oh!

ricolandia May 3, 2026 Author

Bug Fixes

Redundancies Removed

Minor Improvements

Uh oh!

Uh oh!

ricolandia May 9, 2026 Author

💊 Styling list view attributes as pills (JS frontend + CSS)

How it works

Screenshot

Setup

1. Frontend Script

2. Custom CSS

Customization

Notes

ricolandia
Apr 23, 2026

Replies: 2 comments 1 reply

ricolandia
May 2, 2026
Author

ricolandia May 3, 2026
Author

ricolandia
May 9, 2026
Author