outputarea.less
197 lines
| 4.0 KiB
| text/x-less
|
LessCssLexer
|
r13681 | div.output_wrapper { | ||
/* this position must be relative to enable descendents to be absolute within it */ | ||||
position: relative; | ||||
.vbox() | ||||
} | ||||
/* class for the output area when it should be height-limited */ | ||||
div.output_scroll { | ||||
|
r13778 | /* ideally, this would be max-height, but FF barfs all over that */ | ||
height: 24em; | ||||
/* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */ | ||||
width: 100%; | ||||
|
r13681 | |||
|
r13778 | overflow: auto; | ||
.corner-all; | ||||
.box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8)); | ||||
|
r15264 | display: block; | ||
|
r13681 | } | ||
/* output div while it is collapsed */ | ||||
div.output_collapsed { | ||||
|
r13778 | margin: 0px; | ||
padding: 0px; | ||||
.vbox(); | ||||
|
r13681 | } | ||
div.out_prompt_overlay { | ||||
|
r13778 | height: 100%; | ||
padding: 0px @code_padding; | ||||
position: absolute; | ||||
.corner-all; | ||||
|
r13681 | } | ||
div.out_prompt_overlay:hover { | ||||
|
r13778 | /* use inner shadow to get border that is computed the same on WebKit/FF */ | ||
.box-shadow(inset 0 0 1px #000); | ||||
background: rgba(240, 240, 240, 0.5); | ||||
|
r13681 | } | ||
div.output_prompt { | ||||
|
r17292 | color: @output_prompt_color; | ||
|
r13681 | } | ||
|
r10730 | /* This class is the outer container of all output sections. */ | ||
div.output_area { | ||||
padding: 0px; | ||||
page-break-inside: avoid; | ||||
.hbox(); | ||||
|
r12793 | |||
.MathJax_Display { | ||||
// Inside a CodeCell, elements are left justified | ||||
text-align: left !important; | ||||
} | ||||
.rendered_html { | ||||
// Inside a CodeCell, elements are left justified | ||||
table { | ||||
margin-left: 0; | ||||
margin-right: 0; | ||||
} | ||||
img { | ||||
margin-left: 0; | ||||
margin-right: 0; | ||||
} | ||||
} | ||||
|
r10730 | } | ||
/* This is needed to protect the pre formating from global settings such | ||||
as that of bootstrap */ | ||||
|
r13332 | .output { | ||
.vbox(); | ||||
} | ||||
|
r19953 | @media (max-width: @screen-xs-min) { | ||
|
r15966 | // move prompts above output on small screens | ||
div.output_area { | ||||
.vbox(); | ||||
} | ||||
} | ||||
|
r15829 | div.output_area pre { | ||
|
r10730 | margin: 0; | ||
padding: 0; | ||||
border: 0; | ||||
vertical-align: baseline; | ||||
|
r17292 | color: @output_pre_color; | ||
|
r10745 | background-color: transparent; | ||
.border-radius(0); | ||||
|
r10730 | } | ||
/* This class is for the output subarea inside the output_area and after | ||||
the prompt div. */ | ||||
div.output_subarea { | ||||
|
r20170 | padding: @code_padding; | ||
|
r10730 | .box-flex1(); | ||
} | ||||
/* The rest of the output_* classes are for special styling of the different | ||||
output types */ | ||||
/* all text output has this class: */ | ||||
div.output_text { | ||||
text-align: left; | ||||
|
r16912 | color: @text-color; | ||
|
r13778 | /* This has to match that of the the CodeMirror class line-height below */ | ||
|
r10886 | line-height: @code_line_height; | ||
|
r10730 | } | ||
|
r16589 | /* stdout/stderr are 'text' as well as 'stream', but execute_result/error are *not* streams */ | ||
|
r10730 | div.output_stream { | ||
} | ||||
|
r13687 | |||
|
r10730 | div.output_stdout { | ||
} | ||||
|
r13687 | |||
|
r10730 | div.output_stderr { | ||
background: #fdd; /* very light red background for stderr */ | ||||
} | ||||
div.output_latex { | ||||
text-align: left; | ||||
} | ||||
div.output_html { | ||||
} | ||||
div.output_png { | ||||
} | ||||
div.output_jpeg { | ||||
} | ||||
|
r20376 | // Prevent the image outputs from being wider than the page. | ||
div.output_png div.ui-wrapper, | ||||
div.output_svg div.ui-wrapper, | ||||
div.output_jpeg div.ui-wrapper { | ||||
max-width: 100% | ||||
} | ||||
|
r13792 | /* Empty output_javascript divs should have no height */ | ||
div.output_javascript:empty { | ||||
padding: 0; | ||||
} | ||||
|
r10730 | .js-error { | ||
color: darkred; | ||||
} | ||||
/* raw_input styles */ | ||||
|
r15826 | div.raw_input_container { | ||
|
r16912 | font-family: @font-family-monospace; | ||
|
r15803 | // for some reason, em padding doesn't compute the same for raw_input | ||
// that is not the first input, but px does | ||||
padding-top: 5px; | ||||
|
r10730 | } | ||
|
r13778 | |||
|
r15826 | span.raw_input_prompt { | ||
/* nothing needed here */ | ||||
|
r10730 | } | ||
|
r13778 | |||
|
r10730 | input.raw_input { | ||
|
r13778 | font-family: inherit; | ||
font-size: inherit; | ||||
color: inherit; | ||||
width: auto; | ||||
|
r15826 | /* make sure input baseline aligns with prompt */ | ||
vertical-align: baseline; | ||||
/* padding + margin = 0.5em between prompt and cursor */ | ||||
padding: 0em 0.25em; | ||||
margin: 0em 0.25em; | ||||
|
r10730 | } | ||
|
r15803 | input.raw_input:focus { | ||
box-shadow: none; | ||||
|
r10730 | } | ||
p.p-space { | ||||
|
r13778 | margin-bottom: 10px; | ||
|
r13332 | } | ||
|
r18999 | |||
div.output_unrecognized { | ||||
padding: 5px; | ||||
font-weight: bold; | ||||
color: red; | ||||
|
r19107 | // remove decoration from link | ||
a { | ||||
color: inherit; | ||||
text-decoration: none; | ||||
&:hover { | ||||
color: inherit; | ||||
text-decoration: none; | ||||
} | ||||
} | ||||
|
r19953 | } | ||