gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-20 12:44:25 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

ui/grid view: refactor CSS

Browse Source
This commit is contained in:
Adorian Doran 2026-02-19 22:46:01 +02:00
parent 4b098e2008
commit 47859d401e
2 changed files with 76 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
apps/client/src/stylesheets/theme-next/base.css
View File

@ -643,106 +643,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
transform: translateY(4%);
}
/*
* NOTE LIST
*/
.note-list .note-book-card {
--note-list-horizontal-padding: 22px;
--note-list-vertical-padding: 15px;
background-color: var(--card-background-color);
border: 1px solid var(--card-border-color) !important;
border-radius: 12px;
user-select: none;
padding: 0;
}
:root .note-list .note-book-card:hover {
background-color: var(--card-background-hover-color);
transition: background-color 200ms ease-out;
}
:root .note-list.grid-view .note-book-card:active {
transform: scale(.98);
}
.note-list.list-view .note-book-card {
box-shadow: 0 0 3px var(--card-shadow-color);
}
.note-list.list-view .note-book-card .note-book-header .note-icon {
vertical-align: middle;
}
.note-list-wrapper .note-book-card a {
color: inherit !important;
}
.note-list-wrapper .note-book-card .note-book-content {
padding: 0 !important;
font-size: 0.8rem;
}
.note-list-wrapper .note-book-card .note-book-content .rendered-content {
padding: 1rem;
}
.note-list-wrapper .note-book-card .note-book-content.type-image .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-pdf .rendered-content {
padding: 0;
}
.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
padding: 1rem !important;
}
.note-list-wrapper .note-book-card .note-book-content h1,
.note-list-wrapper .note-book-card .note-book-content h2,
.note-list-wrapper .note-book-card .note-book-content h3,
.note-list-wrapper .note-book-card .note-book-content h4,
.note-list-wrapper .note-book-card .note-book-content h5,
.note-list-wrapper .note-book-card .note-book-content h6 {
font-size: 1rem;
color: var(--active-item-text-color);
}
.note-list-wrapper .note-book-card .note-book-content p:last-child {
margin-bottom: 0;
}
.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content,
.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content {
padding: 0;
}
.note-list-wrapper .note-book-card .note-book-content.type-code {
height: 100%;
}
.note-list-wrapper .note-book-card .note-book-content.type-code pre {
height: 100%;
padding: 1em;
margin-bottom: 0;
}
.note-list.grid-view .note-book-card:hover {
filter: contrast(105%);
}
.note-list.grid-view .ck-content {
line-height: 1.3;
}
.note-list.grid-view .ck-content p {
margin-bottom: 0.5em;
}
.note-list.grid-view .ck-content figure.image {
width: 25%;
}
/*
* NOTE SEARCH SUGGESTIONS
*/

84
apps/client/src/widgets/collections/legacy/ListOrGridView.css
View File

@ -2,11 +2,11 @@
overflow: visible;
position: relative;
height: 100%;
}
.note-list-wrapper {
height: 100%;
overflow: auto;
.note-list-wrapper {
height: 100%;
overflow: auto;
}
}
/* #region List view / Grid view common styles */
@ -247,14 +247,29 @@
/* #region Grid view */
.note-book-card {
border-radius: 10px;
background-color: var(--accented-background-color);
padding: 10px 15px 15px 8px;
overflow: hidden;
--note-list-horizontal-padding: 22px;
--note-list-vertical-padding: 15px;
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 1;
border: 1px solid var(--card-border-color) !important;
border-radius: 12px;
background-color: var(--card-background-color, var(--accented-background-color));
padding: 0;
overflow: hidden;
user-select: none;
&:hover {
background-color: var(--card-background-hover-color);
filter: contrast(105%);
transition: background-color 200ms ease-out;
}
&:active {
transform: scale(.98);
}
&.archived {
opacity: 0.5;
@ -323,4 +338,57 @@ body.mobile .note-list.grid-view .note-book-card {
opacity: 0.5;
}
.note-book-card .note-book-content {
padding: 0;
font-size: 0.8rem;
.ck-content p {
margin-bottom: 0.5em;
line-height: 1.3;
}
.ck-content figure.image {
width: 25%;
}
.rendered-content {
padding: 1rem;
}
&.type-image .rendered-content,
&.type-pdf .rendered-content {
padding: 0;
}
.rendered-content.text-with-ellipsis {
padding: 1rem !important;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1rem;
color: var(--active-item-text-color);
}
p:last-child {
margin-bottom: 0;
}
&.type-canvas .rendered-content,
&.type-mindMap .rendered-content,
&.type-code .rendered-content,
&.type-video .rendered-content {
padding: 0;
}
&.type-code {
height: 100%;
}
&.type-code pre {
height: 100%;
padding: 1em;
margin-bottom: 0;
}
}
/* #endregion */