hedgedoc/frontend/global-styles/markdown-tweaks.scss
Valentin Geyer e61777612f
Some checks failed
E2E Tests / backend-mariadb (push) Has been cancelled
Docker / build-and-push (backend) (push) Has been cancelled
Docker / build-and-push (frontend) (push) Has been cancelled
E2E Tests / backend-sqlite (push) Has been cancelled
Run tests & build / Test and build with NodeJS 20 (push) Has been cancelled
E2E Tests / backend-postgres (push) Has been cancelled
E2E Tests / Build test build of frontend (push) Has been cancelled
Lint and check format / Lint files and check formatting (push) Has been cancelled
REUSE Compliance Check / reuse (push) Has been cancelled
Scorecard supply-chain security / Scorecard analysis (push) Has been cancelled
Static Analysis / Njsscan code scanning (push) Has been cancelled
Static Analysis / CodeQL analysis (push) Has been cancelled
E2E Tests / frontend-cypress (1) (push) Has been cancelled
E2E Tests / frontend-cypress (2) (push) Has been cancelled
E2E Tests / frontend-cypress (3) (push) Has been cancelled
feat(frontend): Correctly align todo list checkbox
If a task in a markdown todo list has multiple lines, the checkbox
is now correctly placed at the first line and not the last line.
Closes #5907

Signed-off-by: Valentin Geyer <trayshar@t-online.de>
2025-01-10 21:40:25 +01:00

77 lines
1.4 KiB
SCSS

/*!
* SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
.markdown-body {
position: relative;
word-break: break-word;
& {
@import "./variables.module.scss";
font-family: $font-family-base;
}
.svg-container {
overflow-x: auto;
width: 100%;
display: inline-block;
text-align: center;
svg {
max-width: 100%;
}
}
// Fixes checkboxes moving to bottom row if task is multiline
ul.contains-task-list > li.task-list-item:has(input.task-list-item-checkbox) {
display: flex;
align-items: baseline;
}
.alert {
& > p, & > ul {
margin-bottom: 0;
}
}
// This is necessary since we need to set this for all DOM Element that could be children of .markdown-body and since we support all of HTML that would literally be everything
& > * {
width: 100%;
max-width: 900px;
}
h1, h2, h3, h4, h5, h6 {
.heading-anchor {
user-select: none;
font-size: 0.75em;
margin-top: 0.25em;
opacity: 0.3;
transition: opacity 0.1s;
&:hover {
opacity: 1;
}
}
}
blockquote .blockquote-extra {
font-size: 0.85em;
margin-inline-start: 0.5em;
&:first-of-type {
&::before {
content: '\2014 \00A0'
}
}
}
pre {
overflow: visible;
code {
white-space: pre-wrap;
word-break: break-word;
}
}
}