From 911ec6fa86bc198bd914008c8acec9f18a9b7b9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Mon, 5 Jun 2023 00:27:51 +0200 Subject: [PATCH] tabs: revamp for color options support #550 --- layouts/partials/shortcodes/tabs.html | 5 +- static/css/format-print.css | 20 ++-- static/css/ie.css | 46 ++++++--- static/css/tabs.css | 76 --------------- static/css/theme.css | 131 +++++++++++++++++++++++++- static/css/variant.css | 56 ++++++++++- 6 files changed, 229 insertions(+), 105 deletions(-) delete mode 100644 static/css/tabs.css diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html index f356ac46f7..770c725742 100644 --- a/layouts/partials/shortcodes/tabs.html +++ b/layouts/partials/shortcodes/tabs.html @@ -2,7 +2,7 @@ {{- $tabs := .content | default slice }} {{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }} {{- with $context }} -
+
{{- range $idx, $tab := $tabs }} +
{{ .name | $context.RenderString }}
+ {{- end }}
diff --git a/static/css/format-print.css b/static/css/format-print.css index 5744a712c0..a5e6a9adf7 100644 --- a/static/css/format-print.css +++ b/static/css/format-print.css @@ -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 { diff --git a/static/css/ie.css b/static/css/ie.css index d6a5a4dcf8..5dd75c8b62 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -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 */ diff --git a/static/css/tabs.css b/static/css/tabs.css deleted file mode 100644 index 0b2e880479..0000000000 --- a/static/css/tabs.css +++ /dev/null @@ -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; -} diff --git a/static/css/theme.css b/static/css/theme.css index 3769509856..5a35d56d33 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -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; +} diff --git a/static/css/variant.css b/static/css/variant.css index adfb26226a..aa440b4d78 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -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); +}