HTML/CSS only tabs (#678)

* Fix pre tag margin top so it looks good inside containers

* Bind to 0.0.0.0 for docker container support

* Add HTML only tabs shortcode
This commit is contained in:
Codruț Constantin Gușoi
2022-05-29 19:43:09 +01:00
committed by GitHub
parent 9ea82c5c82
commit 5e4e500cdf
19 changed files with 418 additions and 10 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"Target":"css/coder-dark.min.002ee2378e14c7a68f1f0a53d9694ed252090987c4e768023fac694a4fc5f793.css","MediaType":"text/css","Data":{"Integrity":"sha256-AC7iN44Ux6aPHwpT2WlO0lIJCYfE52gCP6xpSk/F95M="}}
{"Target":"css/coder-dark.min.39e41a7f16bdf8cb16e43cae7d714fa1016f1d2d2898a5b3f27f42c9979204e2.css","MediaType":"text/css","Data":{"Integrity":"sha256-OeQafxa9+MsW5DyufXFPoQFvHS0omKWz8n9CyZeSBOI="}}

View File

@@ -233,6 +233,27 @@ body.colorscheme-dark .navigation .menu-button i:hover, body.colorscheme-dark .n
body.colorscheme-auto .navigation .menu-button i:hover, body.colorscheme-auto .navigation .menu-button i:focus {
color: #dadada; } }
body.colorscheme-dark .tabs label.tab-label {
background-color: #424242;
border-color: #4f4f4f; }
body.colorscheme-dark .tabs input.tab-input:checked + label.tab-label {
background-color: #212121; }
body.colorscheme-dark .tabs .tab-content {
background-color: #212121;
border-color: #4f4f4f; }
@media (prefers-color-scheme: dark) {
body.colorscheme-auto .tabs label.tab-label {
background-color: #424242;
border-color: #4f4f4f; }
body.colorscheme-auto .tabs input.tab-input:checked + label.tab-label {
background-color: #212121; }
body.colorscheme-auto .tabs .tab-content {
background-color: #212121;
border-color: #4f4f4f; } }
body.colorscheme-dark .taxonomy-element {
background-color: #424242; }
body.colorscheme-dark .taxonomy-element a {

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
{"Target":"css/coder.min.d9fddbffe6f27e69985dc5fe0471cdb0e57fbf4775714bc3d847accb08f4a1f6.css","MediaType":"text/css","Data":{"Integrity":"sha256-2f3b/+byfmmYXcX+BHHNsOV/v0d1cUvD2Eesywj0ofY="}}
{"Target":"css/coder.min.6b1a4fbc48955b72aea7913e43fabeb45e8bc120da5aa41b598dd33adcac4b59.css","MediaType":"text/css","Data":{"Integrity":"sha256-axpPvEiVW3Kup5E+Q/q+tF6LwSDaWqQbWY3TOtysS1k="}}

View File

@@ -3147,7 +3147,7 @@ strong {
.highlight > div,
.highlight > pre {
margin: 0 0 2rem;
margin: 2rem 0 2rem;
padding: 1rem;
border-radius: 1rem; }
@@ -3576,6 +3576,55 @@ figure {
text-align: center;
width: 3.2rem; }
.tabs {
display: flex;
flex-wrap: wrap;
margin: 2rem 0 2rem 0;
position: relative; }
.tabs.tabs-left {
justify-content: flex-start; }
.tabs.tabs-left label.tab-label {
margin-right: 0.5rem; }
.tabs.tabs-left .tab-content {
border-radius: 0px 4px 4px 4px; }
.tabs.tabs-right {
justify-content: flex-end; }
.tabs.tabs-right label.tab-label {
margin-left: 0.5rem; }
.tabs.tabs-right .tab-content {
border-radius: 4px 0px 4px 4px; }
.tabs input.tab-input {
display: none; }
.tabs label.tab-label {
background-color: #e0e0e0;
border-color: #ccc;
border-radius: 4px 4px 0px 0px;
border-style: solid;
border-bottom-style: hidden;
border-width: 1px;
cursor: pointer;
display: inline-block;
order: 1;
padding: 0.3rem 0.6rem;
position: relative;
top: 1px;
user-select: none; }
.tabs input.tab-input:checked + label.tab-label {
background-color: #fafafa; }
.tabs .tab-content {
background-color: #fafafa;
border-color: #ccc;
border-style: solid;
border-width: 1px;
display: none;
order: 2;
padding: 1rem;
width: 100%; }
.tabs.tabs-code .tab-content {
padding: 0.5rem; }
.tabs.tabs-code .tab-content pre {
margin: 0; }
.taxonomy li {
display: inline-block;
margin: 0.9rem; }