mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
notice: add expander to box title #901
This commit is contained in:
Sören Weber
parent
7064ca4ef8
commit
67fb8b987f
6 changed files with 176 additions and 202 deletions
|
|
@ -330,16 +330,16 @@ pre:not(.mermaid) .copy-to-clipboard-button:hover {
|
|||
color: var(--INTERNAL-CODE-BLOCK-BG-color);
|
||||
}
|
||||
|
||||
.expand > label {
|
||||
.expand:not(.box) > label {
|
||||
color: var(--INTERNAL-MAIN-LINK-color);
|
||||
}
|
||||
|
||||
.expand > label:hover,
|
||||
.expand > label:active,
|
||||
.expand > label:focus,
|
||||
.expand > input:hover + label,
|
||||
.expand > input:active + label,
|
||||
.expand > input:focus + label{
|
||||
.expand:not(.box) > label:hover,
|
||||
.expand:not(.box) > label:active,
|
||||
.expand:not(.box) > label:focus,
|
||||
.expand:not(.box) > input:hover + label,
|
||||
.expand:not(.box) > input:active + label,
|
||||
.expand:not(.box) > input:focus + label{
|
||||
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,14 @@ This document shows you what's new in the latest release and flags it with one o
|
|||
|
||||
---
|
||||
|
||||
## 6.3.0.beta (XXXX-XX-XX) {#630}
|
||||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} If the content for the [`notice` shortcode](shortcodes/notice) is empty, now only the title bar will be displayed. Previously an empty content box was displayed.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`notice` shortcode](shortcodes/notice) has a new parameter `expanded` to make the content collapsible.
|
||||
|
||||
---
|
||||
|
||||
## 6.2.0 (2024-08-26) {#620}
|
||||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} The heading anchor links are extended in functionality.
|
||||
|
|
|
|||
|
|
@ -59,12 +59,13 @@ It is all about the boxes.
|
|||
|
||||
### Parameter
|
||||
|
||||
| Name | Position | Default | Notes |
|
||||
|-----------|----------|-----------|-------------|
|
||||
| **style** | 1 | `default` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | 3 | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| Name | Position | Default | Notes |
|
||||
|-----------------------|----------|-----------------|-------------|
|
||||
| **style** | 1 | `default` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: _<empty>_<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | 3 | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: _<empty>_<br><br>If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **expanded** | | _<empty>_ | Whether to draw an expander and how the content is displayed.<br><br>- _<empty>_: the content is shown but not collapsible<br>- `true`: the expander is drawn and the content is initially shown<br>- `false`: the expander is drawn and the content is initially hidden |
|
||||
| _**<content>**_ | | _<empty>_ | Arbitrary text to be displayed in box. |
|
||||
|
||||
## Configuration
|
||||
|
|
@ -82,228 +83,130 @@ This example reflects the default configuration also used if you don't set anyth
|
|||
|
||||
## Examples
|
||||
|
||||
### By Severity
|
||||
### By Severity Using Markdown Syntax
|
||||
|
||||
#### Caution with markup
|
||||
````md
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
````go
|
||||
{{%/* notice style="caution" */%}}
|
||||
An **caution** disclaimer
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
You can add standard markdown syntax:
|
||||
> [!INFO]
|
||||
> Information that users <ins>_might_</ins> find interesting.
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even ***bold emphasized*** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{%/* /notice */%}}
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
````
|
||||
|
||||
{{% notice style="caution" %}}
|
||||
An **caution** disclaimer
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
You can add standard markdown syntax:
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
- multiple paragraphs
|
||||
- bullet point lists
|
||||
- _emphasized_, **bold** and even **_bold emphasized_** text
|
||||
- [links](https://example.com)
|
||||
- etc.
|
||||
> [!INFO]
|
||||
> Information that users <ins>_might_</ins> find interesting.
|
||||
|
||||
```plaintext
|
||||
...and even source code
|
||||
```
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> the possibilities are endless (almost - including other shortcodes may or may not work)
|
||||
{{% /notice %}}
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
#### Important
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
````go
|
||||
{{%/* notice style="important" */%}}
|
||||
A **important** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="important" %}}
|
||||
A **important** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Info
|
||||
|
||||
````go
|
||||
{{%/* notice style="info" */%}}
|
||||
A **information** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="info" %}}
|
||||
A **information** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Note
|
||||
|
||||
````go
|
||||
{{%/* notice style="note" */%}}
|
||||
A **notice** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="note" %}}
|
||||
A **notice** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Tip
|
||||
|
||||
````go
|
||||
{{%/* notice style="tip" */%}}
|
||||
A **tip** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="tip" %}}
|
||||
A **tip** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning with Non-Default Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" title="Here are dragons" icon="dragon" */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" title="Here are dragons" icon="dragon" %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Warning without a Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="warning" title=" " icon=" " */%}}
|
||||
A **warning** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="warning" title=" " icon=" " %}}
|
||||
A **warning** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
### By Brand Colors
|
||||
|
||||
#### Primary with Title only
|
||||
### By Brand Colors with Title and Icon Variantion
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="Primary" */%}}
|
||||
A **primary** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="secondary" icon="stopwatch" */%}}
|
||||
A **secondary** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="accent" */%}}
|
||||
An **accent** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="primary" title="Primary" %}}
|
||||
A **primary** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Secondary with Icon only
|
||||
|
||||
````go
|
||||
{{%/* notice style="secondary" icon="stopwatch" */%}}
|
||||
A **secondary** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="secondary" icon="stopwatch" %}}
|
||||
A **secondary** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Accent
|
||||
|
||||
````go
|
||||
{{%/* notice style="accent" */%}}
|
||||
An **accent** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="accent" %}}
|
||||
An **accent** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
### By Color
|
||||
|
||||
#### Blue without a Title and Icon
|
||||
### By Color with Title and Icon Variantion
|
||||
|
||||
````go
|
||||
{{%/* notice style="blue" */%}}
|
||||
A **blue** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="cyan" title="Cyan" */%}}
|
||||
A **cyan** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="green" title="Green" */%}}
|
||||
A **green** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="grey" icon="bug" */%}}
|
||||
A **grey** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="magenta" title="Magenta" */%}}
|
||||
A **magenta** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="orange" title="Orange" icon="bug" */%}}
|
||||
A **orange** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
|
||||
{{%/* notice style="red" */%}}
|
||||
A **red** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="blue" %}}
|
||||
A **blue** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Green with Title only
|
||||
|
||||
````go
|
||||
{{%/* notice style="green" title="Green" */%}}
|
||||
A **green** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% notice style="cyan" title="Cyan" %}}
|
||||
A **cyan** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
{{% notice style="green" title="Green" %}}
|
||||
A **green** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Grey with Icon only
|
||||
|
||||
````go
|
||||
{{%/* notice style="grey" icon="bug" */%}}
|
||||
A **grey** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="grey" icon="bug" %}}
|
||||
A **grey** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Orange with Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="orange" title="Orange" icon="bug" */%}}
|
||||
A **orange** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
{{% notice style="magenta" title="Magenta" %}}
|
||||
A **magenta** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
{{% notice style="orange" title="Orange" icon="bug" %}}
|
||||
A **orange** disclaimer
|
||||
{{% /notice %}}
|
||||
|
||||
#### Red without a Title and Icon
|
||||
|
||||
````go
|
||||
{{%/* notice style="red" */%}}
|
||||
A **red** disclaimer
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="red" %}}
|
||||
A **red** disclaimer
|
||||
{{% /notice %}}
|
||||
|
|
@ -334,14 +237,41 @@ Some serious information.
|
|||
Some serious information.
|
||||
{{% /notice %}}
|
||||
|
||||
### With User-Defined Color, Font Awesome Brand Icon and Markdown Title
|
||||
### Various Features
|
||||
|
||||
#### With User-Defined Color, Font Awesome Brand Icon and Markdown in Title and Content
|
||||
|
||||
````go
|
||||
{{%/* notice color="fuchsia" title="**Hugo**" icon="fa-fw fab fa-hackerrank" */%}}
|
||||
Victor? Is it you?
|
||||
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
|
||||
````
|
||||
|
||||
{{% notice color="fuchsia" title="**Hugo** is _awesome_" icon="fa-fw fab fa-hackerrank" %}}
|
||||
{{% include "shortcodes/include/INCLUDE_ME.md" %}}
|
||||
{{% /notice %}}
|
||||
|
||||
#### Expandable Content Area
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="Expand me..." expanded="true" */%}}
|
||||
No need to press you!
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice color="fuchsia" title="**Hugo**" icon="fa-fw fab fa-hackerrank" %}}
|
||||
Victor? Is it you?
|
||||
{{% notice style="primary" title="Expand me..." expanded="true" %}}
|
||||
No need to press you!
|
||||
{{% /notice %}}
|
||||
|
||||
````go
|
||||
{{%/* notice style="primary" title="Expand me..." expanded="false" */%}}
|
||||
Thank you!
|
||||
{{%/* /notice */%}}
|
||||
````
|
||||
|
||||
{{% notice style="primary" title="Expand me..." expanded="false" %}}
|
||||
Thank you!
|
||||
{{% /notice %}}
|
||||
|
||||
#### No Content
|
||||
|
||||
{{% notice style="accent" title="Just a bar" %}}
|
||||
{{% /notice %}}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
{{- end }}
|
||||
{{- $color := .color | default "" }}
|
||||
{{- $content := .content }}
|
||||
{{- $hasContent := ne (trim $content " " ) "" }}
|
||||
{{- $style := .style | default "default" }}
|
||||
{{- $title := .title }}
|
||||
{{- if not $title }}
|
||||
|
|
@ -29,11 +30,37 @@
|
|||
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
|
||||
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
|
||||
{{- end }}
|
||||
{{- $expander := false }}
|
||||
{{- $expanded := .expanded | default "" }}
|
||||
{{- if $hasContent }}
|
||||
{{- if eq (printf "%T" $expanded) "string" }}
|
||||
{{- if ne (trim $expanded " ") "" }}
|
||||
{{- $expander = true }}
|
||||
{{- $expanded = (eq $expanded "true") }}
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
{{- $expander = true }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
|
||||
{{- with $page }}
|
||||
<div class="box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
|
||||
<div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
|
||||
<div class="box-content">
|
||||
<div class="{{ if $expander }}expand {{ end }}box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
|
||||
{{- if $expander }}
|
||||
<input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
|
||||
<label class="expand-label box-label" for="R-expand-{{ $id }}">
|
||||
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
|
||||
<i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
|
||||
</label>
|
||||
<div class="box-spacer"></div>
|
||||
{{- else }}
|
||||
<div class="box-label">
|
||||
{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- if $hasContent }}
|
||||
<div{{ if $expander }} id="R-expandcontent-{{ $id }}"{{ end }} class="{{ if $expander }}expand-content {{ end }}box-content">
|
||||
{{ if ne "<" (substr (strings.TrimLeft " \n\r\t" $content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
|
||||
{{ $content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
{{- $_hugo_config := `{ "version": 1 }` }}
|
||||
{{- partial "shortcodes/notice.html" (dict
|
||||
"page" .Page
|
||||
"color" (.Get "color")
|
||||
"content" .Inner
|
||||
"icon" (.Get "icon" | default (.Get 2))
|
||||
"style" (.Get "style" | default (.Get 0))
|
||||
"title" (.Get "title" | default (.Get 1))
|
||||
"page" .Page
|
||||
"color" (.Get "color")
|
||||
"content" .Inner
|
||||
"expanded" (.Get "expanded")
|
||||
"icon" (.Get "icon" | default (.Get 2))
|
||||
"style" (.Get "style" | default (.Get 0))
|
||||
"title" (.Get "title" | default (.Get 1))
|
||||
) }}
|
||||
|
|
@ -710,7 +710,9 @@ div.box {
|
|||
|
||||
div.box > .box-label {
|
||||
font-weight: 500;
|
||||
padding: .2rem .6rem;
|
||||
margin-left: .6rem;
|
||||
margin-right: .6rem;
|
||||
padding: .2rem 0;
|
||||
}
|
||||
|
||||
div.box > .box-content {
|
||||
|
|
@ -732,8 +734,8 @@ p:empty {
|
|||
#R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
|
||||
#R-body div.box > .box-content > :nth-child(1 of :not(:empty)),
|
||||
#R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
|
||||
#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
|
||||
#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
|
||||
margin-top: 0;
|
||||
|
|
@ -748,9 +750,9 @@ p:empty {
|
|||
#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.box > .box-content > div:last-child pre:not(.mermaid),
|
||||
#R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content-text > div:last-child pre:not(.mermaid),
|
||||
#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.expand > .expand-content > div:last-child pre:not(.mermaid),
|
||||
#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
|
||||
#R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
|
||||
|
|
@ -1390,8 +1392,6 @@ option {
|
|||
display: inline;
|
||||
font-weight: 300;
|
||||
inset-inline-start: 0;
|
||||
line-height: 1.1;
|
||||
margin-top: .2rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
@ -1401,7 +1401,7 @@ option {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.expand > label > .fas {
|
||||
.expand > label > .expander-icon {
|
||||
font-size: .8rem;
|
||||
width: .6rem;
|
||||
}
|
||||
|
|
@ -1410,8 +1410,16 @@ option {
|
|||
margin-inline-start: 1rem;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.box.expand > .expand-content {
|
||||
margin-inline-start: 0;
|
||||
margin-top: .4rem;
|
||||
}
|
||||
.box.expand > .box-spacer {
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
/* closed expander */
|
||||
.expand > input + label + div {
|
||||
.expand > input + label ~ .expand-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -1423,7 +1431,7 @@ option {
|
|||
}
|
||||
|
||||
/* open expander */
|
||||
.expand > input:checked + label + div {
|
||||
.expand > input:checked + label ~ .expand-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue