##// END OF EJS Templates
rework css media-query...
rework css media-query fixes #7355 Also limit the number of query "jump", and use variables. In particular there was a container width discontinuity at 768 pixel where below 768 container width is 100% and "only" 720px on wider screen, making a jump. So now Css media query have 3 breakpoints: - <540 px with (aka -no name-) - colapsed menubar - vbox for prompt - 100% width container - 540 -> 767 (aka -xs- ) - expand menubar - hbox fro prompt - 767 -> 991 (aka -sm-) - show save widget - fix width (768px) - 991+ (aka -md-) - extra save widget info (date time) - fix with of 991 px. - 1200+ (aka -lg-) - widht of 1200px. of course we've set soem variable wrongly so this is still kinda-a-hack as we shoudl have pushed the xs-sm limit lower instead of pushing the nothing-xs limit up but I don't want to "fix it" now.

File last commit:

r19953:21dc9b62
r19953:21dc9b62
Show More
codecell.less
48 lines | 1.2 KiB | text/x-less | LessCssLexer
div.code_cell {
/* avoid page breaking on code cells when printing */
@media print {
page-break-inside: avoid;
}
}
/* any special styling for code cells that are currently running goes here */
div.code_cell.running {
}
div.input {
page-break-inside: avoid;
.hbox();
}
@media (max-width: @screen-xs-min) {
// move prompts above code on small screens
div.input {
.vbox();
}
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_prompt {
color: @input_prompt_color;
border-top: 1px solid transparent;
}
// The styles related to div.highlight are for nbconvert HTML output only. This works
// because the .highlight div isn't present in the live notebook. We could put this into
// nbconvert, but it easily falls out of sync, can't use our less variables and doesn't
// help the basic template when paired with our CSS.
div.input_area > div.highlight {
margin: @code_padding;
border: none;
padding: 0px;
background-color: transparent;
}
div.input_area > div.highlight > pre {
margin: 0px;
border: none;
padding: 0px;
background-color: transparent;
}