cell.less
101 lines
| 2.4 KiB
| text/x-less
|
LessCssLexer
|
r12364 | div.cell { | ||
|
r10730 | border: 1px solid transparent; | ||
.vbox(); | ||||
|
r16995 | .corner-all(); | ||
|
r17422 | .border-box-sizing(); | ||
|
r16995 | border-width: thin; | ||
border-style: solid; | ||||
|
r17422 | |||
|
r10730 | &.selected { | ||
|
r16995 | border-color: @border_color; | ||
|
r10730 | } | ||
|
r17422 | |||
|
r14015 | &.edit_mode { | ||
|
r16995 | border-color: green; | ||
|
r14015 | } | ||
|
r10730 | width: 100%; | ||
padding: 5px 5px 5px 0px; | ||||
/* This acts as a spacer between cells, that is outside the border */ | ||||
|
r13681 | margin: 0px; | ||
|
r10730 | outline: none; | ||
} | ||||
|
r19393 | /* Don't border the cells when printing */ | ||
@media print { | ||||
div.cell { | ||||
border-color: transparent !important; | ||||
} | ||||
} | ||||
|
r10730 | div.prompt { | ||
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */ | ||||
|
r16957 | min-width: 15ex; | ||
|
r13687 | /* This padding is tuned to match the padding on the CodeMirror editor. */ | ||
padding: @code_padding; | ||||
|
r10730 | margin: 0px; | ||
|
r16912 | font-family: @font-family-monospace; | ||
|
r10730 | text-align: right; | ||
/* This has to match that of the the CodeMirror class line-height below */ | ||||
|
r10891 | line-height: @code_line_height; | ||
|
r10730 | } | ||
|
r13776 | |||
|
r15966 | @media (max-width: 480px) { | ||
// prompts are in the main column on small screens, | ||||
// so text should be left-aligned | ||||
div.prompt { | ||||
text-align: left; | ||||
} | ||||
} | ||||
|
r13776 | div.inner_cell { | ||
.vbox(); | ||||
.box-flex1(); | ||||
} | ||||
|
r13792 | |||
|
r15552 | /* 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; | ||||
|
r16205 | line-height: @code_line_height; | ||
|
r15552 | } | ||
|
r13792 | /* 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; | ||||
} | ||||
|
r18999 | |||
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%); | ||||
|
r19107 | // remove decoration from link | ||
a { | ||||
color: inherit; | ||||
text-decoration: none; | ||||
&:hover { | ||||
color: inherit; | ||||
text-decoration: none; | ||||
} | ||||
} | ||||
|
r18999 | } | ||
} | ||||
@media (max-width: 480px) { | ||||
// remove prompt indentation on small screens | ||||
div.unrecognized_cell > div.prompt { | ||||
display: none; | ||||
} | ||||
} | ||||