##// 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
cell.less
102 lines | 2.5 KiB | text/x-less | LessCssLexer
div.cell {
border: 1px solid transparent;
.vbox();
.corner-all();
.border-box-sizing();
border-width: thin;
border-style: solid;
&.selected {
border-color: @border_color;
/* Don't border the cells when printing */
@media print {
border-color: transparent;
}
}
.edit_mode &.selected {
border-color: green;
/* Don't border the cells when printing */
@media print {
border-color: transparent;
}
}
width: 100%;
padding: 5px 5px 5px 0px;
/* This acts as a spacer between cells, that is outside the border */
margin: 0px;
outline: none;
}
div.prompt {
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
min-width: 15ex;
/* This padding is tuned to match the padding on the CodeMirror editor. */
padding: @code_padding;
margin: 0px;
font-family: @font-family-monospace;
text-align: right;
/* This has to match that of the the CodeMirror class line-height below */
line-height: @code_line_height;
}
@media (max-width: @screen-xs-min) {
// prompts are in the main column on small screens,
// so text should be left-aligned
div.prompt {
text-align: left;
}
}
div.inner_cell {
.vbox();
.box-flex1();
}
/* input_area and input_prompt must match in top border and margin for alignment */
div.input_area {
border: 1px solid @light_border_color;
.corner-all;
background: @cell_background;
line-height: @code_line_height;
}
/* This is needed so that empty prompt areas can collapse to zero height when there
is no content in the output_subarea and the prompt. The main purpose of this is
to make sure that empty JavaScript output_subareas have no height. */
div.prompt:empty {
padding-top: 0;
padding-bottom: 0;
}
div.unrecognized_cell {
// from text_cell
padding: 5px 5px 5px 0px;
.hbox();
.inner_cell {
.border-radius(@border-radius-base);
padding: 5px;
font-weight: bold;
color: red;
border: 1px solid @light_border_color;
background: darken(@cell_background, 5%);
// remove decoration from link
a {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
}
}
@media (max-width: @screen-xs-min) {
// remove prompt indentation on small screens
div.unrecognized_cell > div.prompt {
display: none;
}
}