forgejo/web_src/css/repo/wiki.css
Giteabot 51789ba12d
Improve wiki sidebar and TOC (#25460) (#25477)
Backport #25460 by @wxiaoguang

Close #20976
Close #20975

1. Fix the bug: the TOC in footer was incorrectly rendered as main
content's TOC
2. Fix the layout: on mobile, the TOC is put above the main content,
while the sidebar is put below the main content
3. Auto collapse the TOC on mobile

ps: many styles of "wiki.css" are moved from old css files, so leave
nits to following PRs.

### for desktop


![image](https://github.com/go-gitea/gitea/assets/2114189/6c84201c-0648-465a-99e6-c53cdaee53c0)

### for mobile


![image](https://github.com/go-gitea/gitea/assets/2114189/9cb4fdfe-b6ab-4e6f-ae82-219ddb8fa27e)

### other changed pages

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/ef077736-2c3e-4e3d-82fe-d9bf1ebcca98)


![image](https://github.com/go-gitea/gitea/assets/2114189/bb528429-ad5f-4258-a5c4-05f997c624ea)

</details>

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-06-24 10:16:15 +08:00

63 lines
1.3 KiB
CSS

.repository.wiki .wiki-pages-list .wiki-git-entry {
margin-left: 10px;
display: none;
}
.repository.wiki .wiki-pages-list td:hover .wiki-git-entry {
display: inline-block;
}
.repository.wiki .markup {
overflow: visible;
}
.repository.wiki .wiki-content-parts .markup {
border: 1px solid var(--color-secondary);
padding: 1em;
margin-top: 1em;
font-size: 1em;
}
.repository.wiki .wiki-content-main.with-sidebar {
float: left;
width: 80%;
max-width: calc(100% - 150px - 1em); /* match the min-width of .wiki-content-sidebar */
}
.repository.wiki .wiki-content-sidebar {
float: right;
width: calc(20% - 1em);
min-width: 150px;
}
.repository.wiki .wiki-content-sidebar .ui.message.unicode-escape-prompt p {
display: none;
}
.repository.wiki .wiki-content-footer {
margin-top: 1em;
}
.repository.wiki .wiki-content-toc ul {
margin: 0;
list-style: none;
padding: 5px 0 5px 1em;
}
.repository.wiki .wiki-content-toc ul ul {
border-left: 1px var(--color-secondary);
border-left-style: dashed;
}
@media (max-width: 767.98px) {
.repository.wiki #clone-panel #repo-clone-url {
width: 160px;
}
.repository.wiki .wiki-content-main.with-sidebar,
.repository.wiki .wiki-content-sidebar {
float: none;
width: 100%;
min-width: unset;
max-width: unset;
}
}