|
|
div.cell {
|
|
|
border: 1px solid transparent;
|
|
|
.vbox();
|
|
|
.corner-all();
|
|
|
.border-box-sizing();
|
|
|
border-width: thin;
|
|
|
border-style: solid;
|
|
|
|
|
|
&.selected {
|
|
|
border-color: @border_color;
|
|
|
}
|
|
|
|
|
|
&.edit_mode {
|
|
|
border-color: green;
|
|
|
}
|
|
|
|
|
|
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: 480px) {
|
|
|
// 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: 480px) {
|
|
|
// remove prompt indentation on small screens
|
|
|
div.unrecognized_cell > div.prompt {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
