nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

tabs: revamp for color options support #550

Browse source
This commit is contained in:
Sören Weber 2023-06-05 00:27:51 +02:00
parent 5ca1c4c5f0
commit 911ec6fa86
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
6 changed files with 229 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
layouts/partials/shortcodes/tabs.html
View file

@ -2,7 +2,7 @@
{{- $tabs := .content | default slice }}
{{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
{{- with $context }}
<div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-panel cstyle default" data-tab-group="{{ $groupid }}">
<div class="tab-nav">
{{- range $idx, $tab := $tabs }}
<button
@ -10,7 +10,8 @@
class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
onclick="switchTab('{{ $groupid }}','{{ .name | $context.RenderString | plainify}}')"
>
<span>{{ .name | $context.RenderString }}</span></button>
<div><div>{{ .name | $context.RenderString }}</div></div>
</button>
{{- end }}
</div>
<div class="tab-content">

20
static/css/format-print.css
View file

@ -140,9 +140,6 @@ body,
#topbar > div {
background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
}
#body .tab-nav-button:not(.active) {
opacity: .5;
}
.tags {
display: none;
}
@ -159,15 +156,18 @@ div.box > .box-content {
.btn,
#body .tab-nav-button {
color: rgba( 0, 0, 0, 1 ) !important;
}
#body .tab-nav-button.active {
background-color: rgba( 255, 255, 255, 1 ) !important;
border-bottom-color: rgba( 255, 255, 255, 1 ) !important;
color: rgba( 0, 0, 0, 1 );
}
#body .tab-nav-button:not(.active) {
opacity: 1;
#body .tab-nav-button.active {
border-bottom-color: rgba( 255, 255, 255, 1 );
color: rgba( 0, 0, 0, 1 );
}
#body .tab-nav-button.active > * {
background-color: rgba( 255, 255, 255, 1 );
}
#body .tab-content-text {
background-color: rgba( 255, 255, 255, 1 ) ;
color: rgba( 0, 0, 0, 1 );
}
article {

46
static/css/ie.css
View file

@ -178,13 +178,10 @@
}
/* tabs */
#body .tab-nav-button {
margin-left: 4px;
margin-left: .6rem;
}
html[dir="rtl"] #body .tab-nav-button{
float: left;
}
#body .tab-nav-button:first-child {
margin-left: 9px;
#body .tab-content{
margin-top: -1px;
}
/* auto-complete */
.autocomplete-suggestions {
@ -697,11 +694,6 @@
background: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
}
#body .tab-nav-button.active {
background-color: rgba( 255, 255, 255, 1 ) !important; /* var(--MAIN-BG-color) */
border-bottom-color: rgba( 255, 255, 255, 1 ) !important; /* var(--MAIN-BG-color) */
}
.badge > * {
border-color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
}
@ -773,6 +765,38 @@
box-shadow: inset 1em 1em rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-PRIMARY-color) */
}
/* no style support for tabs in IE11; all styled as default */
#body .tab-nav-button {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-MAIN-TEXT-color) */
}
#body .tab-nav-button.active {
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
border-bottom-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
border-left-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
border-right-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
border-top-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
}
#body .tab-nav-button.active > *{
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
}
#body .tab-nav-button > * > *{
border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
}
#body .tab-content{
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
border-color: rgba( 134, 134, 134, .4 ); /* var(--VARIABLE-BOX-color) */
}
#body .tab-content-text{
background-color: rgba( 255, 255, 255, 1 ); /* var(--VARIABLE-BOX-BG-color) */
color: rgba( 16, 16, 16, 1 ); /* var(--VARIABLE-BOX-TEXT-color) */
}
/* ----------------------------------------------- */
/* set further styles to fix broken stuff in IE11 */

76
static/css/tabs.css
View file

@ -1,76 +0,0 @@
#body .tab-panel{
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
#body .tab-nav-button{
background-color: rgba( 134, 134, 134, .166 );
border-color: rgba( 134, 134, 134, .333 );
border-radius: 4px 4px 0 0;
border-style: solid;
border-width: 1px;
bottom: -1px;
-webkit-print-color-adjust: exact;
color-adjust: exact;
display: block;
float: left;
font-size: .9rem;
font-weight: 500;
line-height: 1.42857143;
margin-inline-start: 4px;
padding: 6px 12px;
position: relative;
}
html[dir="rtl"] #body .tab-nav-button{
float: right;
}
#body .tab-nav-button:after {
content: "\200b"
}
#body .tab-nav-button:first-child{
margin-inline-start: 9px;
}
#body .tab-nav-button.active{
cursor: default;
}
#body .tab-nav-button:not(.active){
border-bottom-color: rgba( 134, 134, 134, .1 );
margin-top: 8px;
padding-bottom: 2px !important;
padding-top: 2px !important;
}
#body .tab-nav-button:not(.active) span{
opacity: .8;
}
#body .tab-content{
background-color: transparent;
border-color: rgba( 134, 134, 134, .333 );
border-style: solid;
border-width: 1px;
clear: both;
-webkit-print-color-adjust: exact;
color-adjust: exact;
display: block;
z-index: 10;
}
#body .tab-content-text{
display: none;
margin: 8px;
}
/* remove margin if only a single code block is contained in the tab */
#body .tab-content-text:has(> div.highlight:only-child){
margin: 0;
}
/* remove border from a code block if single */
#body .tab-content-text > div.highlight:only-child > pre{
border: 0;
}
#body .tab-content-text.active{
display: block;
}
#body .tab-content-text pre{
margin-bottom: 0;
margin-top: 0;
}

131
static/css/theme.css
View file

@ -1,7 +1,67 @@
@charset "UTF-8";
@import "tags.css";
@import "tabs.css";
/* until browsers don't let us set length values based on dppx, we
need a way to calculate them ourself */
:root {
--dpr: 1;
}
@media (min-resolution: 105dpi) {
:root {
--dpr: 1.1;
}
}
@media (min-resolution: 115dpi) {
:root {
--dpr: 1.2;
}
}
@media (min-resolution: 120dpi) {
:root {
--dpr: 1.25;
}
}
@media (min-resolution: 128dpi) {
:root {
--dpr: 1.333;
}
}
@media (min-resolution: 144dpi) {
:root {
--dpr: 1.5;
}
}
@media (min-resolution: 160dpi) {
:root {
--dpr: 1.666;
}
}
@media (min-resolution: 168dpi) {
:root {
--dpr: 1.75;
}
}
@media (min-resolution: 192dpi) {
:root {
--dpr: 2;
}
}
@media (min-resolution: 240dpi) {
:root {
--dpr: 2.5;
}
}
@media (min-resolution: 288dpi) {
:root {
--dpr: 3;
}
}
@media (min-resolution: 384dpi) {
:root {
--dpr: 4;
}
}
html {
height: 100%;
@ -1777,3 +1837,72 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
column-count: 3;
}
}
#body .tab-panel{
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
#body .tab-nav{
display: flex;
flex-wrap: wrap;
}
#body .tab-nav-button{
background-color: transparent;
border: 1px solid transparent;
display: block;
font-size: .9rem;
font-weight: 500;
line-height: 1.42857143;
margin-inline-start: .6rem;
}
#body .tab-nav-button.active{
border-radius: 2px 2px 0 0;
cursor: default;
}
#body .tab-nav-button.active > *{
border-radius: 1px 1px 0 0;
}
#body .tab-nav-button > * > *{
border-bottom-style: solid;
border-bottom-width: 2px;
padding: .2rem .6rem;
}
#body .tab-nav-button.active > * > *{
border-bottom-color: transparent;
}
#body .tab-content{
border-style: solid;
border-width: 1px;
display: block;
/* if setting a border to 1px, a browser instead sets it to 1dppx which is not
usable as a unit yet, so we have to calculate it ourself */
margin-top: calc( -1px / var(--dpr) );
z-index: 10;
}
#body .tab-content-text{
display: none;
padding: 1rem;
}
/* remove margin if only a single code block is contained in the tab */
#body .tab-content-text:has(> div.highlight:only-child){
padding: 0;
}
/* remove border from a code block if single */
#body .tab-content-text > div.highlight:only-child > pre{
border: 0;
}
#body .tab-content-text.active{
display: block;
}
#body .tab-content-text pre{
margin-bottom: 0;
margin-top: 0;
}

56
static/css/variant.css
View file

@ -352,11 +352,6 @@ pre .copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-MAIN-BG-color);
}
#body .tab-nav-button.active {
background-color: var(--INTERNAL-MAIN-BG-color) !important;
border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
}
.badge > * {
border-color: var(--VARIABLE-BOX-TEXT-color);
}
@ -369,3 +364,54 @@ pre .copy-to-clipboard-button:hover {
.badge.cstyle.transparent{
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
#body .tab-nav-button {
color: var(--INTERNAL-MAIN-TEXT-color);
}
#body .tab-nav-button.active {
background-color: var(--VARIABLE-BOX-color);
border-bottom-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
#body .tab-nav-button.active > *{
background-color: var(--VARIABLE-BOX-BG-color);
}
#body .tab-nav-button > * > *{
border-color: var(--VARIABLE-BOX-color);
}
#body .tab-content{
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
}
#body .tab-content-text{
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
.tab-panel.cstyle.default {
--VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
--VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
}
.tab-panel.cstyle.transparent {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
--VARIABLE-BOX-BG-color: transparent;
}
#body .tab-panel.cstyle.default > * > .tab-nav-button.active,
#body .tab-panel.cstyle.transparent > * > .tab-nav-button.active{
background-color: var(--VARIABLE-BOX-BG-color);
border-left-color: var(--VARIABLE-BOX-color);
border-right-color: var(--VARIABLE-BOX-color);
border-top-color: var(--VARIABLE-BOX-color);
}
#body .tab-panel.cstyle.default > .tab-content,
#body .tab-panel.cstyle.transparent > .tab-content{
background-color: var(--VARIABLE-BOX-BG-color);
}