mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-06-22 10:02:15 +00:00
373c876db6
Reviewing https://codeberg.org/forgejo/forgejo/pulls/12928 inspired me to bridge the gap between our highly advanced markup checkboxes and our other inconsistent UI checkboxes. This PR does exactly that: it re-uses most of already developed code from markup in our regular UI checkboxes. This not only makes them look much better but also brings us closer to getting rid of Fomantic checkboxes. In fact, removing `ui checkbox` from such checkboxes keeps them looking well, and only breaks Fomantic scripts related to them. Some notable changes: - Better vertical alignment - More consistent gap distance between the box and the text - Removed obsolete vendor prefixes in properties - In UI, everything is actually styled by Forgejo now instead of being a mismatch with browser's default styling. Dark theme + Firefox looks a lot better now - In UI, checkmarks are now consistent across browsers ## Preview |Before|After| |-|-| |Markup|Slightly increased gap| ||| |UI|Fixed vert. alignment| ||| ||| |UI dark|Properly styled now| ||| ## Testing No bugs found to fix and automated testing for yet. I went manually through many areas and found none. There's one bad margin in Migrate repo - LFS advanced settings, but it's consistent with mainline. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13016 Reviewed-by: Gusted <gusted@noreply.codeberg.org>
538 lines
9.6 KiB
CSS
538 lines
9.6 KiB
CSS
.markup {
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
line-height: 1.5 !important;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.markup > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.markup > *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.markup a:not([href]) {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markup .absent {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.markup .anchor {
|
|
float: inline-start;
|
|
padding-inline-end: 4px;
|
|
margin-inline-start: -20px;
|
|
color: inherit;
|
|
}
|
|
|
|
.markup .anchor .svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.markup .anchor:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.markup h1 .anchor {
|
|
margin-top: -2px; /* re-align to center */
|
|
}
|
|
|
|
.markup h1 .anchor .svg,
|
|
.markup h2 .anchor .svg,
|
|
.markup h3 .anchor .svg,
|
|
.markup h4 .anchor .svg,
|
|
.markup h5 .anchor .svg,
|
|
.markup h6 .anchor .svg {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.markup h1:hover .anchor .svg,
|
|
.markup h2:hover .anchor .svg,
|
|
.markup h3:hover .anchor .svg,
|
|
.markup h4:hover .anchor .svg,
|
|
.markup h5:hover .anchor .svg,
|
|
.markup h6:hover .anchor .svg {
|
|
visibility: visible;
|
|
}
|
|
|
|
.markup h2 .anchor .svg,
|
|
.markup h3 .anchor .svg,
|
|
.markup h4 .anchor .svg {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.markup h1,
|
|
.markup h2,
|
|
.markup h3,
|
|
.markup h4,
|
|
.markup h5,
|
|
.markup h6 {
|
|
margin-top: 24px !important;
|
|
margin-bottom: 16px;
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.markup h1 tt,
|
|
.markup h1 code,
|
|
.markup h2 tt,
|
|
.markup h2 code,
|
|
.markup h3 tt,
|
|
.markup h3 code,
|
|
.markup h4 tt,
|
|
.markup h4 code,
|
|
.markup h5 tt,
|
|
.markup h5 code,
|
|
.markup h6 tt,
|
|
.markup h6 code {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.markup h1 {
|
|
padding-bottom: 0.3em;
|
|
font-size: 2em;
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.markup h2 {
|
|
padding-bottom: 0.3em;
|
|
font-size: 1.5em;
|
|
border-bottom: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.markup h3 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.markup h4 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.markup h5 {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.markup h6 {
|
|
font-size: 0.85em;
|
|
color: var(--color-text-light-2);
|
|
}
|
|
|
|
.markup p,
|
|
.markup blockquote,
|
|
.markup details,
|
|
.markup ul,
|
|
.markup ol,
|
|
.markup dl,
|
|
.markup table,
|
|
.markup pre {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markup hr {
|
|
height: 4px;
|
|
padding: 0;
|
|
margin: 16px 0;
|
|
background-color: var(--color-secondary);
|
|
border: 0;
|
|
}
|
|
|
|
.markup ul,
|
|
.markup ol {
|
|
padding-inline-start: 2em;
|
|
}
|
|
|
|
.markup ul.no-list,
|
|
.markup ol.no-list {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.markup ul .task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.markup .task-list-item p + ul {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.markup .task-list-item input[type="checkbox"] {
|
|
margin-block-end: 0.25rem;
|
|
margin-inline-start: -1.4rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.markup ol .task-list-item input[type="checkbox"] {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.markup .task-list-item input[type="checkbox"] + p {
|
|
margin-inline-start: -0.2em;
|
|
display: inline;
|
|
}
|
|
|
|
.markup .task-list-item > p {
|
|
margin-inline: 16px;
|
|
}
|
|
|
|
.markup .task-list-item + .task-list-item {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.markup ul ul,
|
|
.markup ul ol,
|
|
.markup ol ol,
|
|
.markup ol ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markup ol ol,
|
|
.markup ul ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
.markup li > p {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.markup li + li {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
.markup dl {
|
|
padding: 0;
|
|
}
|
|
|
|
.markup dl dt {
|
|
padding: 0;
|
|
margin-top: 16px;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.markup dl dd {
|
|
padding: 0 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markup blockquote {
|
|
margin-inline-start: 0;
|
|
padding: 0 15px;
|
|
color: var(--color-text-light-2);
|
|
border-inline-start: 0.25em solid var(--color-secondary);
|
|
}
|
|
|
|
.markup blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markup blockquote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markup table {
|
|
display: block;
|
|
width: 100%;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.markup table th {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.markup table th,
|
|
.markup table td {
|
|
padding: 6px 13px !important;
|
|
border: 1px solid var(--color-secondary) !important;
|
|
}
|
|
|
|
.markup table tr {
|
|
border-top: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.markup table tr:nth-child(2n) {
|
|
background-color: var(--color-markup-table-row);
|
|
}
|
|
|
|
.markup img,
|
|
.markup video {
|
|
max-width: 100%;
|
|
box-sizing: initial;
|
|
}
|
|
|
|
/* this background ensures images can break <hr>. We can only do this on
|
|
cases where the background is known and not transparent. */
|
|
.markup.file-view img,
|
|
.markup.file-view video,
|
|
.comment-body .markup img, /* regular comment */
|
|
.comment-body .markup video,
|
|
.comment-content .markup img, /* code comment */
|
|
.comment-content .markup video,
|
|
.wiki .markup img,
|
|
.wiki .markup video {
|
|
background: var(--color-box-body);
|
|
}
|
|
|
|
.markup img[align="right"],
|
|
.markup video[align="right"] {
|
|
padding-inline-start: 20px;
|
|
}
|
|
|
|
.markup img[align="left"],
|
|
.markup video[align="left"] {
|
|
padding-inline-end: 28px;
|
|
}
|
|
|
|
.markup .emoji {
|
|
max-width: none;
|
|
}
|
|
|
|
.markup span.frame {
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markup span.frame > span {
|
|
display: block;
|
|
float: inline-start;
|
|
width: auto;
|
|
padding: 7px;
|
|
margin: 13px 0 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.markup span.frame span img,
|
|
.markup span.frame span video {
|
|
display: block;
|
|
float: inline-start;
|
|
}
|
|
|
|
.markup span.frame span span {
|
|
display: block;
|
|
padding: 5px 0 0;
|
|
clear: both;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.markup span.align-center {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
|
|
.markup span.align-center > span {
|
|
display: block;
|
|
margin: 13px auto 0;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.markup span.align-center span img
|
|
.markup span.align-center span video {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.markup span.align-right {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both;
|
|
}
|
|
|
|
.markup span.align-right > span {
|
|
display: block;
|
|
margin: 13px 0 0;
|
|
overflow: hidden;
|
|
text-align: end;
|
|
}
|
|
|
|
.markup span.align-right span img,
|
|
.markup span.align-right span video {
|
|
margin: 0;
|
|
text-align: end;
|
|
}
|
|
|
|
.markup span.float-left {
|
|
display: block;
|
|
float: inline-start;
|
|
margin-inline-end: 13px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markup span.float-left span {
|
|
margin: 13px 0 0;
|
|
}
|
|
|
|
.markup span.float-right {
|
|
display: block;
|
|
float: inline-end;
|
|
margin-inline-start: 13px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.markup span.float-right > span {
|
|
display: block;
|
|
margin: 13px auto 0;
|
|
overflow: hidden;
|
|
text-align: end;
|
|
}
|
|
|
|
.markup code,
|
|
.markup tt {
|
|
padding: 0.2em 0.4em;
|
|
margin: 0;
|
|
font-size: 85%;
|
|
white-space: break-spaces;
|
|
background-color: var(--color-markup-code-inline);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.markup code br,
|
|
.markup tt br {
|
|
display: none;
|
|
}
|
|
|
|
.markup del code {
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
.markup pre > code,
|
|
.markup .file-preview code {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 100%;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.markup .highlight {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markup .highlight pre,
|
|
.markup pre {
|
|
padding: 16px;
|
|
font-size: 85%;
|
|
line-height: 1.45;
|
|
background-color: var(--color-markup-code-block);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.markup .highlight pre {
|
|
margin-bottom: 0;
|
|
word-break: normal;
|
|
}
|
|
|
|
.markup pre {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.markup pre code,
|
|
.markup pre tt {
|
|
display: inline;
|
|
padding: 0;
|
|
line-height: inherit;
|
|
word-wrap: normal;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.markup pre code::before,
|
|
.markup pre code::after,
|
|
.markup pre tt::before,
|
|
.markup pre tt::after {
|
|
content: normal;
|
|
}
|
|
|
|
.markup kbd {
|
|
padding: 0 0.35em;
|
|
}
|
|
|
|
.markup .ui.list .list,
|
|
.markup ol.ui.list ol,
|
|
.markup ul.ui.list ul {
|
|
padding-inline-start: 2em;
|
|
}
|
|
|
|
.file-revisions-btn {
|
|
display: block;
|
|
float: inline-start;
|
|
margin-bottom: 2px !important;
|
|
padding: 11px !important;
|
|
margin-inline-end: 10px !important;
|
|
}
|
|
|
|
.file-revisions-btn i {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.markup-render {
|
|
display: block;
|
|
border: none;
|
|
width: 100%;
|
|
height: var(--height-loading); /* actual height is set in JS after loading */
|
|
overflow: hidden;
|
|
color-scheme: normal; /* match the value inside the iframe to allow it to become transparent */
|
|
}
|
|
|
|
.markup-block-error {
|
|
display: block !important; /* override fomantic .ui.form .error.message {display: none} */
|
|
border: none !important;
|
|
margin-bottom: 0 !important;
|
|
border-bottom-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
|
|
border-bottom-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
|
|
box-shadow: none !important;
|
|
font-size: 85% !important;
|
|
white-space: pre-wrap !important;
|
|
padding: 0.5rem 1rem !important;
|
|
text-align: start !important;
|
|
}
|
|
|
|
.markup-block-error + pre {
|
|
border-top: none !important;
|
|
margin-top: 0 !important;
|
|
border-top-left-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
|
|
border-top-right-radius: 0 !important; /* stylelint-disable-line logical-css/require-logical-properties */
|
|
}
|
|
|
|
.file-view.markup {
|
|
padding: 2em;
|
|
}
|
|
|
|
.file-view.markup.orgmode li.unchecked::before {
|
|
content: "[ ] ";
|
|
}
|
|
|
|
.file-view.markup.orgmode li.checked::before {
|
|
content: "[x] ";
|
|
}
|
|
|
|
.file-view.markup.orgmode li.indeterminate::before {
|
|
content: "[-] ";
|
|
}
|
|
|
|
/* This is only needed for <p> because they are literally acting as paragraphs,
|
|
* and thus having an ::before on the same line would force the paragraph to
|
|
* move to the next line. This can be avoided by an inline-block display that
|
|
* avoids that property while still having the other properties of the block
|
|
* display. */
|
|
.file-view.markup.orgmode li.unchecked > p,
|
|
.file-view.markup.orgmode li.checked > p,
|
|
.file-view.markup.orgmode li.indeterminate > p {
|
|
display: inline-block;
|
|
}
|