Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-17 03:51:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: improve code block style for attachments

Browse Source
This commit is contained in:
Elian Doran 2025-01-04 17:29:40 +02:00
parent 3ad67a93c1
commit fa30961c9e
No known key found for this signature in database
2 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/public/app/widgets/attachment_detail.js
View File

@ -14,38 +14,37 @@ const TPL = `
.attachment-detail-widget { .attachment-detail-widget {
height: 100%; height: 100%;
} }
.attachment-detail-wrapper { .attachment-detail-wrapper {
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.attachment-title-line { .attachment-title-line {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 1em; gap: 1em;
} }
.attachment-details { .attachment-details {
margin-left: 10px; margin-left: 10px;
} }
.attachment-content-wrapper { .attachment-content-wrapper {
flex-grow: 1; flex-grow: 1;
} }
.attachment-content-wrapper .rendered-content { .attachment-content-wrapper .rendered-content {
height: 100%; height: 100%;
} }
.attachment-content-wrapper pre { .attachment-content-wrapper pre {
background: var(--accented-background-color);
padding: 10px; padding: 10px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.attachment-detail-wrapper.list-view .attachment-content-wrapper { .attachment-detail-wrapper.list-view .attachment-content-wrapper {
max-height: 300px; max-height: 300px;
} }
@ -57,26 +56,26 @@ const TPL = `
.attachment-detail-wrapper.full-detail .attachment-content-wrapper { .attachment-detail-wrapper.full-detail .attachment-content-wrapper {
height: 100%; height: 100%;
} }
.attachment-detail-wrapper.list-view .attachment-content-wrapper pre { .attachment-detail-wrapper.list-view .attachment-content-wrapper pre {
max-height: 400px; max-height: 400px;
} }
.attachment-content-wrapper img { .attachment-content-wrapper img {
margin: 10px; margin: 10px;
} }
.attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video { .attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video {
max-height: 300px; max-height: 300px;
max-width: 90%; max-width: 90%;
object-fit: contain; object-fit: contain;
} }
.attachment-detail-wrapper.full-detail .attachment-content-wrapper img { .attachment-detail-wrapper.full-detail .attachment-content-wrapper img {
max-width: 90%; max-width: 90%;
object-fit: contain; object-fit: contain;
} }
.attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img { .attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img {
filter: contrast(10%); filter: contrast(10%);
} }
@ -85,13 +84,13 @@ const TPL = `
<div class="attachment-detail-wrapper"> <div class="attachment-detail-wrapper">
<div class="attachment-title-line"> <div class="attachment-title-line">
<div class="attachment-actions-container"></div> <div class="attachment-actions-container"></div>
<h4 class="attachment-title"></h4> <h4 class="attachment-title"></h4>
<div class="attachment-details"></div> <div class="attachment-details"></div>
<div style="flex: 1 1;"></div> <div style="flex: 1 1;"></div>
</div> </div>
<div class="attachment-deletion-warning alert alert-info" style="margin-top: 15px;"></div> <div class="attachment-deletion-warning alert alert-info" style="margin-top: 15px;"></div>
<div class="attachment-content-wrapper"></div> <div class="attachment-content-wrapper"></div>
</div> </div>
</div>`; </div>`;

7
src/public/stylesheets/theme-next/notes/text.css
View File

@ -6,12 +6,16 @@
* Code Blocks * Code Blocks
*/ */
.attachment-content-wrapper pre,
.ck-content pre { .ck-content pre {
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
box-shadow: var(--code-block-box-shadow); box-shadow: var(--code-block-box-shadow);
padding: 0 !important; padding: 0 !important;
margin-top: 2px !important; margin-top: 2px !important;
}
.ck-content pre {
overflow: unset; overflow: unset;
} }
@ -28,6 +32,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
font-weight: bold; font-weight: bold;
} }
.attachment-content-wrapper pre code,
.ck-content pre code { .ck-content pre code {
display: block; display: block;
padding: 1em; padding: 1em;