bbaovanc/bobatheme
1
0
Fork 0
mirror of https://github.com/BBaoVanC/bobatheme.git synced 2026-02-03 06:48:30 -06:00
Code Issues Projects Releases Wiki Activity

css: Use structured class names for children of code-block

Browse Source
This commit is contained in:
BBaoVanC
2026-01-31 01:58:42 -06:00
parent ee1ba12df5
commit a2a8e2c205
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/bobastyle.css
View File

@@ -823,7 +823,7 @@ figcaption {
background-color: var(--background-1); background-color: var(--background-1);
border-radius: 8px; border-radius: 8px;
} }
.code-block > .code-header { .code-block-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@@ -833,17 +833,17 @@ figcaption {
border-top-right-radius: 8px; border-top-right-radius: 8px;
height: 2em; height: 2em;
} }
.code-block > .code-header > * { .code-block-header > * {
margin: auto 0; margin: auto 0;
} }
.code-block > .code-header > .code-type { .code-block-type {
border-top-left-radius: 8px; border-top-left-radius: 8px;
} }
/* TODO: make the code copy button prettier */ /* TODO: make the code copy button prettier */
.code-block > .code-header > .code-copy-button { .code-block-copy-button {
color: var(--link-1); color: var(--link-1);
} }
.code-block > .code-header > .code-copy-button:hover { .code-block-copy-button:hover {
cursor: pointer; cursor: pointer;
} }
.code-block > .highlight { .code-block > .highlight {
@@ -877,7 +877,7 @@ figcaption {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.code-block > .code-header > .code-type, .code-block-type,
code { code {
border-radius: 5px; border-radius: 5px;
} }

6
layouts/_markup/render-codeblock.html
View File

@@ -3,9 +3,9 @@
{{ $type = . }} {{ $type = . }}
{{ end }} {{ end }}
<div class="code-block"> <div class="code-block">
<div class="code-header"> <div class="code-block-header">
<pre class="code-type">{{ $type }}</pre> <pre class="code-block-type">{{ $type }}</pre>
<a href="javascript:void(0)" class="code-copy-button"> <a href="javascript:void(0)" class="code-block-copy-button">
{{ i18n "copy_to_clipboard" }} {{ i18n "copy_to_clipboard" }}
</a> </a>
</div> </div>