public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-21 13:01:48 +09:00
Code Issues Packages Projects Releases Wiki Activity

Fix markup code block layout (#36578)

Browse Source
This commit is contained in:
wxiaoguang
2026-02-11 11:22:33 +08:00
committed by GitHub
parent 018a88590c
commit fd89ceef79
8 changed files with 84 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_src/css/index.css
View File

@@ -46,7 +46,7 @@
@import "./features/captcha.css";
@import "./markup/content.css";
@import "./markup/codecopy.css";
@import "./markup/codeblock.css";
@import "./markup/codepreview.css";
@import "./markup/asciicast.css";

10
web_src/css/markup/codeblock.css Normal file
View File

@@ -0,0 +1,10 @@
.markup .ui.button.code-copy {
top: 8px;
right: 6px;
margin: 0;
}
.markup .mermaid-block .view-controller {
right: 6px;
bottom: 5px;
}

40
web_src/css/markup/codecopy.css
View File

@@ -1,40 +0,0 @@
.markup .code-copy {
position: absolute;
top: 8px;
right: 6px;
padding: 9px;
visibility: hidden; /* prevent from click events even opacity=0 */
opacity: 0;
transition: var(--transition-hover-fade);
}
/* adjustments for comment content having only 14px font size */
.repository.view.issue .comment-list .comment .markup .code-copy {
right: 5px;
padding: 8px;
}
/* can not use regular transparent button colors for hover and active states because
we need opaque colors here as code can appear behind the button */
.markup .code-copy:hover {
background: var(--color-secondary) !important;
}
.markup .code-copy:active {
background: var(--color-secondary-dark-1) !important;
}
/* all rendered code-block elements are in their container,
the manually written code-block elements on "packages" pages don't have the container */
.markup .code-block-container:hover .code-copy,
.markup .code-block:hover .code-copy {
visibility: visible;
opacity: 1;
}
@media (hover: none) {
.markup .code-copy {
visibility: visible;
opacity: 1;
}
}

37
web_src/css/markup/content.css
View File

@@ -601,3 +601,40 @@ In markup content, we always use bottom margin for all elements */
.file-view.markup.orgmode li.indeterminate > p {
display: inline-block;
}
/* auto-hide-control is a control element or a container for control elements,
it floats over the code-block and only shows when the code-block is hovered. */
.markup .auto-hide-control {
position: absolute;
z-index: 1;
visibility: hidden; /* prevent from click events even opacity=0 */
opacity: 0;
transition: var(--transition-hover-fade);
}
/* all rendered code-block elements are in their container,
the manually written code-block elements on "packages" pages don't have the container */
.markup .code-block-container:hover .auto-hide-control,
.markup .code-block:hover .auto-hide-control {
visibility: visible;
opacity: 1;
}
@media (hover: none) {
.markup .auto-hide-control {
visibility: visible;
opacity: 1;
}
}
/* can not use regular transparent button colors for hover and active states
because we need opaque colors here as code can appear behind the button */
.markup .auto-hide-control.ui.button:hover,
.markup .auto-hide-control .ui.button:hover {
background: var(--color-secondary) !important;
}
.markup .auto-hide-control.ui.button:active,
.markup .auto-hide-control .ui.button:active {
background: var(--color-secondary-dark-1) !important;
}