syntaxhighlight: move everything closer together in highlight table lineno mode #569

This commit is contained in:
Sören Weber 2023-06-16 22:29:35 +02:00
parent 7a92d032e5
commit 74e31cae1a
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 36 additions and 37 deletions

View file

@ -488,6 +488,10 @@
color: rgba( 0, 0, 0, 1 ); /* var(--CODE-BLOCK-color) */ color: rgba( 0, 0, 0, 1 ); /* var(--CODE-BLOCK-color) */
} }
div.highlight > div {
border-color: rgba( 216, 216, 216, 1 ); /* var(--CODE-BLOCK-BORDER-color) */
}
table { table {
background-color: rgba( 255, 255, 255, 1 ); /* var(--INTERNAL-MAIN-BG-color) */ background-color: rgba( 255, 255, 255, 1 ); /* var(--INTERNAL-MAIN-BG-color) */
} }

View file

@ -666,20 +666,37 @@ pre code {
white-space: inherit; white-space: inherit;
} }
/* we may have special treatment if highlight shortcode was used in table lineno mode */
div.highlight > div{
border-style: solid;
border-width: 1px;
}
/* disable selection for lineno cells */
div.highlight > div td:first-child:not(:last-child){
user-select: none;
}
/* increase code column to full width if highlight shortcode was used in table lineno mode */ /* increase code column to full width if highlight shortcode was used in table lineno mode */
div.highlight td:nth-child(2){ div.highlight > div td:not(:first-child):last-child{
width: 100%; width: 100%;
} }
/* remove border from row cells if highlight shortcode was used in table lineno mode */
/* remove border from lineno column if highlight shortcode was used in table lineno mode */ div.highlight > div td > pre {
div.highlight td > pre:not(.pre-code) { border-width: 0;
border-bottom-right-radius: 0;
border-right-width: 0;
border-top-right-radius: 0;
} }
div.highlight td:nth-child(2) pre { /* in case of table lineno mode we want to move each row closer together - besides the edges
border-bottom-left-radius: 0; this usually applies only to wrapfix tables but it doesn't hurt for non-wrapfix tables too */
border-top-left-radius: 0; div.highlight > div tr:not(:first-child) pre{
padding-top: 0;
}
div.highlight > div tr:not(:last-child) pre{
padding-bottom: 0;
}
/* in case of table lineno mode we want to move each columns closer together on the inside */
div.highlight > div td:first-child:not(:last-child) pre{
padding-right: 0;
}
div.highlight > div td:not(:first-child):last-child pre{
padding-left: 0;
} }
hr { hr {
@ -1976,34 +1993,8 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
} }
/* remove border from code block if single in tab */ /* remove border from code block if single in tab */
#body .tab-content-text > div.highlight.wrapfix:only-child tbody, #body .tab-content-text > div.highlight:only-child > div,
#body .tab-content-text > div.highlight:only-child pre, #body .tab-content-text > div.highlight:only-child pre,
#body .tab-content-text > pre.pre-code:only-child{ #body .tab-content-text > pre.pre-code:only-child{
border-width: 0; border-width: 0;
} }
/* re-add border on code column if single in tab and highlight shortcode was used in table lineno mode */
#body .tab-content-text > div.highlight:only-child td:nth-child(2) pre {
border-left-width: 1px;
}
/* we may have special treatment if highlight shortcode was used in table lineno mode and
we want to apply feasible wrapping for long code lines instead of scrolling */
div.highlight.wrapfix tbody{
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border: 1px solid var(--INTERNAL-CODE-BLOCK-BORDER-color);
}
div.highlight.wrapfix tbody tr:not(:first-child) pre{
padding-top: 0;
}
div.highlight.wrapfix tbody tr:not(:last-child) pre{
padding-bottom: 0;
}
div.highlight.wrapfix tbody td:first-child:not(last-child){
user-select: none;
}
div.highlight.wrapfix tbody td:not(:first-child):last-child{
border-left: 1px solid var(--INTERNAL-CODE-BLOCK-BORDER-color);
}
div.highlight.wrapfix tbody td pre{
border: 0;
}

View file

@ -238,6 +238,10 @@ pre {
color: var(--INTERNAL-CODE-BLOCK-color); color: var(--INTERNAL-CODE-BLOCK-color);
} }
div.highlight > div {
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
}
table { table {
background-color: var(--INTERNAL-MAIN-BG-color); background-color: var(--INTERNAL-MAIN-BG-color);
} }