1
0
mirror of https://gitlab.com/depesz/explain.depesz.com.git synced 2024-11-24 08:42:27 +02:00

Scroll bar for source/query/bquery/text

This commit is contained in:
Alexandre Felipe 2022-07-12 16:38:21 +01:00
parent ff0d6f73ab
commit 32fcaea5b9
2 changed files with 318 additions and 310 deletions

View File

@ -1,303 +1,299 @@
/* /*
* css reset * css reset
*/ */
html,body,div,span,applet,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font, html,body,div,span,applet,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,
img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,form,fieldset,label,legend,table,caption,tbody, img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,form,fieldset,label,legend,table,caption,tbody,
tfoot,thead,tr,th,td,object,article,aside,dialog,figure,footer,header,hgroup,nav,section tfoot,thead,tr,th,td,object,article,aside,dialog,figure,footer,header,hgroup,nav,section
{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline} {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;vertical-align:baseline}
article,aside,dialog,figure,footer,header,hgroup,nav,section {display:block} article,aside,dialog,figure,footer,header,hgroup,nav,section {display:block}
:focus {outline:0} :focus {outline:0}
ol,ul {list-style:none} ol,ul {list-style:none}
table {border-collapse:separate;border-spacing:0} table {border-collapse:separate;border-spacing:0}
caption,th,td {text-align:left;font-weight:normal} caption,th,td {text-align:left;font-weight:normal}
blockquote:before, blockquote:after, q:before, q:after {content:""} blockquote:before, blockquote:after, q:before, q:after {content:""}
blockquote,q {quotes:"" ""} blockquote,q {quotes:"" ""}
* {margin:0;padding:0} * {margin:0;padding:0}
button::-moz-focus-inner {border:0;outline:0;padding:0} button::-moz-focus-inner {border:0;outline:0;padding:0}
button {-moz-box-sizing:content-box;-ms-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box} button {-moz-box-sizing:content-box;-ms-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
button {overflow:visible;width:0} button {overflow:visible;width:0}
button[type] {width:auto} button[type] {width:auto}
/* /*
* typography * typography
*/ */
body {font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:87.5%} body {font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:87.5%}
h1,h2,h3,h4,h5,h6 {font-weight:normal} h1,h2,h3,h4,h5,h6 {font-weight:normal}
h1 {font-size:1.6em;line-height:1;margin-bottom:0.5em} h1 {font-size:1.6em;line-height:1;margin-bottom:0.5em}
h2 {font-size:1.6em;margin-bottom:0.75em} h2 {font-size:1.6em;margin-bottom:0.75em}
h3 {font-size:1.2em;line-height:1;margin-bottom:1em} h3 {font-size:1.2em;line-height:1;margin-bottom:1em}
h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em} h4 {font-size:1.1em;line-height:1.25;margin-bottom:1.25em}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em} h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em}
h6 {font-size:1em;font-weight:bold} h6 {font-size:1em;font-weight:bold}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {margin:0} h1 img,h2 img,h3 img,h4 img,h5 img,h6 img {margin:0}
p {margin:0 0 1.5em;color:#333} p {margin:0 0 1.5em;color:#333}
a {text-decoration:underline} a {text-decoration:underline}
a:focus, a:hover {text-decoration:none} a:focus, a:hover {text-decoration:none}
blockquote {margin:1.5em;font-style:italic} blockquote {margin:1.5em;font-style:italic}
strong {font-weight:bold} strong {font-weight:bold}
em,dfn {font-style:italic} em,dfn {font-style:italic}
dfn {font-weight:bold} dfn {font-weight:bold}
sup,sub {line-height:0} sup,sub {line-height:0}
abbr,acronym {border-bottom:1px dotted #666} abbr,acronym {border-bottom:1px dotted #666}
address {margin:0 0 1.5em;font-style:italic} address {margin:0 0 1.5em;font-style:italic}
del {color:#666} del {color:#666}
pre {margin:1.5em 0;white-space:pre} pre {margin:1.5em 0;white-space:pre}
pre,code,tt {font:1em 'andale mono','lucida console', monospace;line-height:1.5} pre,code,tt {font:1em 'andale mono','lucida console', monospace;line-height:1.5}
li ul, li ol {margin:0 1.5em} li ul, li ol {margin:0 1.5em}
ul, ol {margin:0 1.5em 1.5em 1.5em} ul, ol {margin:0 1.5em 1.5em 1.5em}
ul {list-style-type:disc} ul {list-style-type:disc}
ol {list-style-type:decimal} ol {list-style-type:decimal}
dl {margin: 0 0 1.5em 0} dl {margin: 0 0 1.5em 0}
dl dt {font-weight:bold} dl dt {font-weight:bold}
dd {margin-left:1.5em} dd {margin-left:1.5em}
/* /*
* misc classes * misc classes
*/ */
.hidden {display:none} .hidden {display:none}
.clearfix:after, form div.fe:after {content:".";display:block;height:0;line-height:0;clear:both;visibility:hidden} .clearfix:after, form div.fe:after {content:".";display:block;height:0;line-height:0;clear:both;visibility:hidden}
.clearfix, form div.fe {display:inline-table} .clearfix, form div.fe {display:inline-table}
/*\*/ /*\*/
* html .clearfix, * html form div.fe {height:1%} * html .clearfix, * html form div.fe {height:1%}
.clearfix, form div.fe {display:block} .clearfix, form div.fe {display:block}
/**/ /**/
.clearfix, form div.fe {min-height:1px} .clearfix, form div.fe {min-height:1px}
/* /*
* layout * layout
*/ */
header {height:100px} header {height:100px}
header h1, header h2 {display:block;position:absolute} header h1, header h2 {display:block;position:absolute}
header h1 {top:15px;left:0;font-size:3em} header h1 {top:15px;left:0;font-size:3em}
header h2 {top:60px;left:70px;font-size:1.2em} header h2 {top:60px;left:70px;font-size:1.2em}
header hgroup span, header hgroup span,
header hgroup a {display:block;text-decoration:none;color:#fff;text-shadow:#000 4px 4px 8px} header hgroup a {display:block;text-decoration:none;color:#fff;text-shadow:#000 4px 4px 8px}
header h1 strong {font-weight:normal;color:#e80} header h1 strong {font-weight:normal;color:#e80}
header h1 a:hover {text-decoration:underline} header h1 a:hover {text-decoration:underline}
section h1 {padding-bottom:0.2em;margin-bottom:1.2em;color:#aaa;font-size:1.6em;border-bottom:1px solid #ccc} section h1 {padding-bottom:0.2em;margin-bottom:1.2em;color:#aaa;font-size:1.6em;border-bottom:1px solid #ccc}
body.show section h1 {margin-bottom:0} body.show section h1 {margin-bottom:0}
section h2, section h2,
section h3 {color:#234} section h3 {color:#234}
section p a, section p a,
section p a:visited {padding:2px 4px;color:#234;border:1px dotted #e0e0e0} section p a:visited {padding:2px 4px;color:#234;border:1px dotted #e0e0e0}
section p a:hover {background:#234;color:#fff;border:1px solid #123} section p a:hover {background:#234;color:#fff;border:1px solid #123}
.result>.res-tab {position: relative;}
.result {margin:0;padding:0} .result {margin:0;padding:0;}
.result-source {background:#222 url('../img/code-bg.gif');color:#fff} .result-source pre {margin:0;padding:0;}
.result-source pre {margin:0;padding:1em} .result-query pre {margin:0;padding:0;}
.result-query {background:#222 url('../img/code-bg.gif');color:#fff} .result-bquery pre {margin:0;padding:0;}
.result-query pre {margin:0;padding:1em} .result-text pre {margin:0;padding:0}
.result-bquery {background:#222 url('../img/code-bg.gif');color:#fff}
.result-bquery pre {margin:0;padding:1em} .result .tabs ul {margin:0;padding:0;list-style:none}
.result-text {background:#222 url('../img/code-bg.gif');color:#fff} .result .tabs li {display:block;float:left;margin-right:1px}
.result-text pre {margin:0;padding:1em} .result .tabs a {display:block;padding:4px 12px;background:#ababab;color:#fff;text-decoration:none;font-weight:bold}
.result .tabs a:hover {color:#234}
.result .tabs ul {margin:0;padding:0;list-style:none} .result .tabs a.current,
.result .tabs li {display:block;float:left;margin-right:1px} .result .tabs a.current:hover {background:#234;color:#fff}
.result .tabs a {display:block;padding:4px 12px;background:#ababab;color:#fff;text-decoration:none;font-weight:bold}
.result .tabs a:hover {color:#234} .result .tabs .html a { -moz-border-radius:4px 0px 0px 0px; border-radius:4px 0px 0px 0px; }
.result .tabs a.current,
.result .tabs a.current:hover {background:#234;color:#fff} .result .tabs .stats a { -moz-border-radius:0px 4px 0px 0px; border-radius:0px 4px 0px 0px; }
.result .tabs .html a { -moz-border-radius:4px 0px 0px 0px; border-radius:4px 0px 0px 0px; } .result-html table#explain {border-collapse:collapse}
.result .tabs .stats a { -moz-border-radius:0px 4px 0px 0px; border-radius:0px 4px 0px 0px; } .result-html table#explain th,
.result-html table#explain td {padding:4px 8px;border:1px solid #ccc;background:#fff;text-align:left;vertical-align:top}
.result-html table#explain {margin:5px;border-collapse:collapse}
.result-html table#explain th {background:#234;text-align:center}
.result-html table#explain th, .result-html table#explain th.n {text-align:left}
.result-html table#explain td {padding:4px 8px;border:1px solid #ccc;background:#fff;text-align:left;vertical-align:top}
.result-html table#explain th a,
.result-html table#explain th {background:#234;text-align:center} .result-html table#explain th span {font-size:1.2em;color:#fff;white-space:nowrap}
.result-html table#explain th.n {text-align:left}
.result-html table#explain tbody tr {cursor:pointer}
.result-html table#explain th a,
.result-html table#explain th span {font-size:1.2em;color:#fff;white-space:nowrap} .result-html table#explain td {text-align:right}
.result-html table#explain td.n {text-align:left}
.result-html table#explain tbody tr {cursor:pointer}
.result-html table#explain td.e,
.result-html table#explain td {text-align:right} .result-html table#explain td.i,
.result-html table#explain td.n {text-align:left} .result-html table#explain td.x {white-space:nowrap}
.result-html table#explain td.e, /* currently not used */
.result-html table#explain td.i, .result-html table#explain td.c-1,
.result-html table#explain td.x {white-space:nowrap} .result-html table#explain tr.c-1 td {background:#fff}
/* currently not used */ .result-html table#explain tr.even td {background:#e5ecf9}
.result-html table#explain td.c-1, .result-html table#explain tr.selected td {background:#f98585}
.result-html table#explain tr.c-1 td {background:#fff}
/* !important overrides tr.even */
.result-html table#explain tr.even td {background:#e5ecf9} .result-html table#explain tr.c-2 td,
.result-html table#explain tr.selected td {background:#f98585} .result-html table#explain tr.c-m td.c-2 {background-color:#fe8 !important}
.result-html table#explain tr.c-3 td,
/* !important overrides tr.even */ .result-html table#explain tr.c-m td.c-3 {background-color:#e80 !important;color:#fff}
.result-html table#explain tr.c-2 td, .result-html table#explain tr.c-4 td,
.result-html table#explain tr.c-m td.c-2 {background-color:#fe8 !important} .result-html table#explain tr.c-m td.c-4 {background-color:#800 !important;color:#fff}
.result-html table#explain tr.c-3 td,
.result-html table#explain tr.c-m td.c-3 {background-color:#e80 !important;color:#fff} /* tr hover */
.result-html table#explain tr.c-4 td, .result-html table#explain tr.hover td,
.result-html table#explain tr.c-m td.c-4 {background-color:#800 !important;color:#fff} .result-html table#explain tr.hover.even td {background-color:#d0d8d8 !important}
/* tr hover */ /* !important overrides tr.c-[1..4] */
.result-html table#explain tr.hover td, .result-html table#explain tr.hover.c-2 td,
.result-html table#explain tr.hover.even td {background-color:#d0d8d8 !important} .result-html table#explain tr.hover.c-m td.c-2 {background-color:#ec5 !important}
.result-html table#explain tr.hover.c-3 td,
/* !important overrides tr.c-[1..4] */ .result-html table#explain tr.hover.c-m td.c-3 {background-color:#c60 !important}
.result-html table#explain tr.hover.c-2 td, .result-html table#explain tr.hover.c-4 td,
.result-html table#explain tr.hover.c-m td.c-2 {background-color:#ec5 !important} .result-html table#explain tr.hover.c-m td.c-4 {background-color:#600 !important}
.result-html table#explain tr.hover.c-3 td,
.result-html table#explain tr.hover.c-m td.c-3 {background-color:#c60 !important} /* tr collapsed */
.result-html table#explain tr.hover.c-4 td, .result-html table#explain tr.collapsed td {border-bottom:3px dashed #888}
.result-html table#explain tr.hover.c-m td.c-4 {background-color:#600 !important}
.result-html table#explain tr.collapsed.c-2 td,
/* tr collapsed */ .result-html table#explain tr.collapsed.c-m td.c-2 {border-bottom-color:#ec5}
.result-html table#explain tr.collapsed td {border-bottom:3px dashed #888} .result-html table#explain tr.collapsed.c-3 td,
.result-html table#explain tr.collapsed.c-m td.c-3 {border-bottom-color:#c60}
.result-html table#explain tr.collapsed.c-2 td, .result-html table#explain tr.collapsed.c-4 td,
.result-html table#explain tr.collapsed.c-m td.c-2 {border-bottom-color:#ec5} .result-html table#explain tr.collapsed.c-m td.c-4 {border-bottom-color:#600}
.result-html table#explain tr.collapsed.c-3 td,
.result-html table#explain tr.collapsed.c-m td.c-3 {border-bottom-color:#c60} .result-html table#explain td.n div {position:relative;min-height:22px;height:auto !important;height:22px}
.result-html table#explain tr.collapsed.c-4 td, .result-html table#explain td.n p,
.result-html table#explain tr.collapsed.c-m td.c-4 {border-bottom-color:#600} .result-html table#explain td.n ul {margin:0;padding:0}
.result-html table#explain td.n ul {list-style:none}
.result-html table#explain td.n div {position:relative;min-height:22px;height:auto !important;height:22px} .result-html table#explain td.n li {padding-top:0.5em}
.result-html table#explain td.n p,
.result-html table#explain td.n ul {margin:0;padding:0} .result-html table#explain td.n p span.est,
.result-html table#explain td.n ul {list-style:none} .result-html table#explain td.n p span.act {white-space:nowrap}
.result-html table#explain td.n li {padding-top:0.5em}
/* white arrow */
.result-html table#explain td.n p span.est, .result-html table#explain tr.c-3 td.n div.ico,
.result-html table#explain td.n p span.act {white-space:nowrap} .result-html table#explain tr.c-4 td.n div.ico {background-position:0px -224px}
/* white arrow */ /* for td.r(ows), td.l(oops) */
.result-html table#explain tr.c-3 td.n div.ico, .result-html table#explain .tight span {display:none}
.result-html table#explain tr.c-4 td.n div.ico {background-position:0px -224px} .result-html table#explain .tight,
.result-html table#explain .tight a {padding-left:0 !important;padding-right:0 !important;width:1px !important;overflow:hidden;text-align:left;text-indent:-10000px}
/* for td.r(ows), td.l(oops) */ .result-html table#explain .tight a {margin:0 1px;background:url('../img/sprite.png') top left}
.result-html table#explain .tight span {display:none}
.result-html table#explain .tight, .result-html table#explain p {color:inherit}
.result-html table#explain .tight a {padding-left:0 !important;padding-right:0 !important;width:1px !important;overflow:hidden;text-align:left;text-indent:-10000px}
.result-html table#explain .tight a {margin:0 1px;background:url('../img/sprite.png') top left} * html .result-html table#explain tr.c-3 td p,
* html .result-html table#explain tr.c-m td.c-3 p,
.result-html table#explain p {color:inherit} * html .result-html table#explain tr.c-4 td p,
* html .result-html table#explain tr.c-m td.c-4 p {color:#fff !important}
* html .result-html table#explain tr.c-3 td p,
* html .result-html table#explain tr.c-m td.c-3 p, *:first-child+html .result-html table#explain tr.c-3 td p,
* html .result-html table#explain tr.c-4 td p, *:first-child+html .result-html table#explain tr.c-m td.c-3 p,
* html .result-html table#explain tr.c-m td.c-4 p {color:#fff !important} *:first-child+html .result-html table#explain tr.c-4 td p,
*:first-child+html .result-html table#explain tr.c-m td.c-4 p {color:#fff !important}
*:first-child+html .result-html table#explain tr.c-3 td p,
*:first-child+html .result-html table#explain tr.c-m td.c-3 p, .result-html table#explain tbody tr.sub-n td.n {background-image:url('../img/star.png');background-position:top left;background-repeat:no-repeat}
*:first-child+html .result-html table#explain tr.c-4 td p,
*:first-child+html .result-html table#explain tr.c-m td.c-4 p {color:#fff !important} .result-html table#explain tbody tr.sp td.n,
.result-html table#explain tbody tr.ip td.n {background-image:none}
.result-html table#explain tbody tr.sub-n td.n {background-image:url('../img/star.png');background-position:top left;background-repeat:no-repeat}
#explain tbody tr td.u a {font-size:14px;text-decoration:none;color:#16212B}
.result-html table#explain tbody tr.sp td.n,
.result-html table#explain tbody tr.ip td.n {background-image:none} .result-stats h1 {color:#123}
.result-stats table {margin:5px;border-collapse:collapse}
#explain tbody tr td.u a {font-size:14px;text-decoration:none;color:#16212B}
.result-stats table th,
.result-stats h1 {color:#123} .result-stats table td {padding:4px 8px;border:1px solid #ccc;background:#fff;text-align:left;vertical-align:top}
.result-stats table {margin:5px;border-collapse:collapse}
.result-stats table th {background:#234;text-align:center;color:#fff}
.result-stats table th, .result-stats table td.count,
.result-stats table td {padding:4px 8px;border:1px solid #ccc;background:#fff;text-align:left;vertical-align:top} .result-stats table td.time,
.result-stats table td.percent { text-align: right }
.result-stats table th {background:#234;text-align:center;color:#fff} .result-stats table td.table-name { font-weight: bold; }
.result-stats table td.count, .result-stats table td.scan-type { padding-left: 2em; }
.result-stats table td.time, .result-stats table tr.table-summary td { background: #e5ecf9 }
.result-stats table td.percent { text-align: right }
.result-stats table td.table-name { font-weight: bold; } #total-times {margin: 1em 0px;border:1px solid #ccc; background: #eee;}
.result-stats table td.scan-type { padding-left: 2em; } #total-times th { font-size: 1.2em; font-weight: bold; }
.result-stats table tr.table-summary td { background: #e5ecf9 } #total-times .separator { padding: 0px 1em; }
#total-times td { text-align: right; }
#total-times {margin: 1em 0px;border:1px solid #ccc; background: #eee;} #total-times span.value { font-size: 1.2em; }
#total-times th { font-size: 1.2em; font-weight: bold; } #total-times tr.both.planning td,
#total-times .separator { padding: 0px 1em; } #total-times tr.both.planning th { border-bottom:1px dotted #666}
#total-times td { text-align: right; } #total-times td,
#total-times span.value { font-size: 1.2em; } #total-times th { padding: 0.2em 0.4em;}
#total-times tr.both.planning td,
#total-times tr.both.planning th { border-bottom:1px dotted #666} #trigger-times {margin: 1em 0px;background: #eee;}
#total-times td, #trigger-times,
#total-times th { padding: 0.2em 0.4em;} #trigger-times th,
#trigger-times td {border-collapse: collapse; border:1px solid #ccc;}
#trigger-times {margin: 1em 0px;background: #eee;} #trigger-times th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;}
#trigger-times, #trigger-times thead th {text-align: center}
#trigger-times th, #trigger-times th.top {font-size: 1.5em;}
#trigger-times td {border-collapse: collapse; border:1px solid #ccc;} #trigger-times td {text-align: right; padding: 0.2em 0.5em;}
#trigger-times th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;} #trigger-times span.value { font-size: 1.2em; }
#trigger-times thead th {text-align: center} #trigger-times tr.c-2 {background-color:#fe8 !important}
#trigger-times th.top {font-size: 1.5em;} #trigger-times tr.c-3 {background-color:#e80 !important;color:#fff}
#trigger-times td {text-align: right; padding: 0.2em 0.5em;} #trigger-times tr.c-4 {background-color:#800 !important;color:#fff}
#trigger-times span.value { font-size: 1.2em; }
#trigger-times tr.c-2 {background-color:#fe8 !important} #jit-info {margin: 1em 0px;background: #eee;}
#trigger-times tr.c-3 {background-color:#e80 !important;color:#fff} #jit-info thead a { border: 1px solid black; font-size: 0.5em; float: right; padding: 0.3em; }
#trigger-times tr.c-4 {background-color:#800 !important;color:#fff} #jit-info,
#jit-info th,
#jit-info {margin: 1em 0px;background: #eee;} #jit-info td {border-collapse: collapse; border:1px solid #ccc;}
#jit-info thead a { border: 1px solid black; font-size: 0.5em; float: right; padding: 0.3em; } #jit-info .jit-timing th,
#jit-info, #jit-info .jit-option th {padding-left: 1.5em; padding-right: 1em;}
#jit-info th, #jit-info .jit-option td {text-align: center;}
#jit-info td {border-collapse: collapse; border:1px solid #ccc;} #jit-info .jit-option td span {font-size: 1.2em; font-weight: bold;}
#jit-info .jit-timing th, #jit-info th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;}
#jit-info .jit-option th {padding-left: 1.5em; padding-right: 1em;} #jit-info thead th {text-align: center}
#jit-info .jit-option td {text-align: center;} #jit-info th.top {font-size: 1.5em;}
#jit-info .jit-option td span {font-size: 1.2em; font-weight: bold;} #jit-info td {text-align: right; padding: 0.2em 0.5em;}
#jit-info th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;} #jit-info .jit-fun td {text-align: center;}
#jit-info thead th {text-align: center} #jit-info span.value { font-size: 1.2em; }
#jit-info th.top {font-size: 1.5em;} #jit-info tr.c-2 {background-color:#fe8 !important}
#jit-info td {text-align: right; padding: 0.2em 0.5em;} #jit-info tr.c-3 {background-color:#e80 !important;color:#fff}
#jit-info .jit-fun td {text-align: center;} #jit-info tr.c-4 {background-color:#800 !important;color:#fff}
#jit-info span.value { font-size: 1.2em; }
#jit-info tr.c-2 {background-color:#fe8 !important} #plan-settings {margin: 1em 0px;background: #eee;}
#jit-info tr.c-3 {background-color:#e80 !important;color:#fff} #plan-settings tbody a { border: 1px solid black; font-size: 0.5em; float: right; margin-left: 1em; padding: 0.3em; }
#jit-info tr.c-4 {background-color:#800 !important;color:#fff} #plan-settings,
#plan-settings th,
#plan-settings {margin: 1em 0px;background: #eee;} #plan-settings td {border-collapse: collapse; border:1px solid #ccc;}
#plan-settings tbody a { border: 1px solid black; font-size: 0.5em; float: right; margin-left: 1em; padding: 0.3em; } #plan-settings th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;}
#plan-settings, #plan-settings thead th {text-align: center; font-size: 1.5em;}
#plan-settings th, #plan-settings td {text-align: right; padding: 0.2em 0.5em;}
#plan-settings td {border-collapse: collapse; border:1px solid #ccc;}
#plan-settings th { font-size: 1.2em; font-weight: bold; padding: 0.2em 0.5em;} .result-hints h1 {
#plan-settings thead th {text-align: center; font-size: 1.5em;} border: none;
#plan-settings td {text-align: right; padding: 0.2em 0.5em;} padding: 10px 20px;
color: #444;
.result-hints h1 { }
border: none; .result-hints ol {
padding: 10px 20px; padding-left: 20px;
color: #444; }
} .result-hints ol li {
.result-hints ol { margin-top: 20px;
padding-left: 20px; }
} .result-hints ol li p,
.result-hints ol li { .result-hints ol li pre {
margin-top: 20px; margin: 5px;
} }
.result-hints ol li p,
.result-hints ol li pre {
margin: 5px;
}

View File

@ -94,13 +94,11 @@ div.explain-form a:hover {background:#e5ecf9}
.result-html { .result-html {
max-height: calc(100vh - 250px) max-height: calc(100vh - 250px)
} }
.res-tab>pre>code {
#explain thead, #explain th { width: calc(100% - 15px);
max-height: 100px; top: 0; left: 0;
position: sticky; max-height: calc(100vh - 250px);
top: 0; }
z-index: 1;
}
/* all ico(ns) */ /* all ico(ns) */
.result-html table#explain td.n div.ico {position:absolute;top:-4px;left:-22px;width:22px;height:22px;background:url('../img/sprite.png') no-repeat 0px -180px;text-indent:-1000px;overflow:hidden} .result-html table#explain td.n div.ico {position:absolute;top:-4px;left:-22px;width:22px;height:22px;background:url('../img/sprite.png') no-repeat 0px -180px;text-indent:-1000px;overflow:hidden}
@ -213,6 +211,10 @@ button.copy {
border: 1px solid #d0d8d8; border: 1px solid #d0d8d8;
background: #e5ecf9; background: #e5ecf9;
color: #444; color: #444;
position: absolute;
z-index: 10;
right: 0;
top: 0;
} }
div.tabs span.newblink { div.tabs span.newblink {
@ -223,3 +225,13 @@ div.tabs span.newblink {
0% { color: #ff0000; } 0% { color: #ff0000; }
100% { color: #ffff00; } 100% { color: #ffff00; }
} }
#explain>thead>tr {
max-height: 100px;
position: sticky;
border: 0px;
margin: 0px;
top: 0;
z-index: 1;
}