Merge pull request #3325 from ellisonbg/jsreorg
Organize the JS and less files by component, in the `static` directory of the notebook. This PR does the client side re-org that parallels the server side work in #3321. There are now subdirectories in `static/` for each part of the client; roughly speaking there is one subdir for each page, web service or component.pull/37/head
Fernando Perez
13 years ago
commit
695d7af2a5
@ -0,0 +1,8 @@
|
||||
/*This file contains any manual css for this page that needs to override the global styles.
|
||||
This is only required when different pages style the same element differently. This is just
|
||||
a hack to deal with our current css styles and no new styling should be added in this file.*/
|
||||
|
||||
#ipython-main-app {
|
||||
margin: 50px auto;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
// Custom styles for login.html
|
||||
@ -0,0 +1,2 @@
|
||||
// Custom styles for logout.html
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
@import "../auth/less/login.less";
|
||||
@import "../auth/less/logout.less";
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,11 @@
|
||||
// Mixin CSS classes
|
||||
|
||||
.border-box-sizing {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.corner-all {
|
||||
border-radius: @corner_radius;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
@import "../base/less/variables.less";
|
||||
@import "../base/less/mixins.less";
|
||||
@import "../base/less/flexbox.less";
|
||||
@import "../base/less/page.less";
|
||||
@ -0,0 +1,10 @@
|
||||
// Our customizations to bootstrap go here.
|
||||
|
||||
@textColor: @black;
|
||||
@baseFontSize: 13px;
|
||||
@baseLineHeight: 1.231;
|
||||
@monoFontFamily: monospace; // to allow user to customize their fonts
|
||||
|
||||
// Our own global variables for all pages go here
|
||||
|
||||
@corner_radius: 4px;
|
||||
@ -1,6 +0,0 @@
|
||||
|
||||
#ipython-main-app {
|
||||
height: 100px;
|
||||
width: 350px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
|
||||
#ipython-main-app {
|
||||
height: 100px;
|
||||
width: 200px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
Placeholder for custom user CSS
|
||||
|
||||
mainly to be overridden in profile/static/css/custom.css
|
||||
mainly to be overridden in profile/static/custom/custom.css
|
||||
|
||||
This will always be an empty file in IPython
|
||||
*/
|
||||
@ -1,513 +0,0 @@
|
||||
/**
|
||||
* Primary styles
|
||||
*
|
||||
* Author: IPython Development Team
|
||||
*/
|
||||
|
||||
@import "variables.less";
|
||||
@import "highlight.less";
|
||||
|
||||
body {
|
||||
background-color:@notebook_background;
|
||||
}
|
||||
|
||||
body.notebook_app {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #DDD;
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
span#save_widget {
|
||||
padding: 5px;
|
||||
margin: 0px 0px 0px 300px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
span#checkpoint_status span#autosave_status {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/*span#save_widget > span#autosave_status {
|
||||
font-size: x-small;
|
||||
}
|
||||
*/
|
||||
span#notebook_name {
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
padding: 3px;
|
||||
border: none;
|
||||
font-size: 146.5%;
|
||||
}
|
||||
|
||||
|
||||
.ui-menubar-item .ui-button .ui-button-text {
|
||||
padding: 0.4em 1.0em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.ui-menu {
|
||||
.box-shadow(0px 6px 10px -1px #adadad);
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item a {
|
||||
border: 1px solid transparent;
|
||||
padding: 2px 1.6em;
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item a.ui-state-focus {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-menu hr {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
#menubar_container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#notification_area {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 25px;
|
||||
padding: 3px 0px;
|
||||
padding-right: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.notification_widget{
|
||||
float : right;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
height: 25px;
|
||||
padding: 3px 6px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 3px 15px;
|
||||
border-bottom: @borderwidth @border_color solid;
|
||||
|
||||
button {
|
||||
margin-top:2px;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
|
||||
select, label {
|
||||
height : 19px;
|
||||
vertical-align:middle;
|
||||
margin-right:2px;
|
||||
margin-bottom:0;
|
||||
display: inline;
|
||||
font-size: 92%;
|
||||
margin-left:0.3em;
|
||||
margin-right:0.3em;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar select{
|
||||
width:auto;
|
||||
}
|
||||
|
||||
|
||||
#ipython-main-app {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
span#quick_help_area {
|
||||
position: static;
|
||||
padding: 5px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.help_string {
|
||||
float: right;
|
||||
width: 170px;
|
||||
padding: 0px 5px;
|
||||
text-align: left;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.help_string_label {
|
||||
float: right;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
div#notebook_panel {
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div#notebook {
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
/* This spaces the cell away from the edge of the notebook area */
|
||||
padding: 5px 5px 15px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
div#pager_splitter {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#pager_container {
|
||||
position : relative;
|
||||
}
|
||||
|
||||
div#pager {
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.ui-widget-content {
|
||||
border: 1px solid @border_color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cell {
|
||||
border: 1px solid transparent;
|
||||
.vbox();
|
||||
|
||||
&.selected {
|
||||
.corner-all;
|
||||
border : thin @border_color solid;
|
||||
}
|
||||
}
|
||||
|
||||
div.cell {
|
||||
width: 100%;
|
||||
padding: 5px 5px 5px 0px;
|
||||
/* This acts as a spacer between cells, that is outside the border */
|
||||
margin: 2px 0px 2px 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.code_cell {
|
||||
}
|
||||
|
||||
/* any special styling for code cells that are currently running goes here */
|
||||
div.code_cell.running {
|
||||
}
|
||||
|
||||
div.prompt {
|
||||
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
|
||||
width: 11ex;
|
||||
/* This 0.4em is tuned to match the padding on the CodeMirror editor. */
|
||||
padding: 0.4em;
|
||||
margin: 0px;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
/* This has to match that of the the CodeMirror class line-height below */
|
||||
line-height: 1.231;
|
||||
}
|
||||
|
||||
div.input {
|
||||
page-break-inside: avoid;
|
||||
.hbox();
|
||||
}
|
||||
|
||||
/* input_area and input_prompt must match in top border and margin for alignment */
|
||||
div.input_area {
|
||||
/*color: @fontBaseColor;*/
|
||||
border: 1px solid @light_border_color;
|
||||
.corner-all;
|
||||
background: @cell_background;
|
||||
}
|
||||
|
||||
div.input_prompt {
|
||||
color: navy;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
div.output_wrapper {
|
||||
/* This is a spacer between the input and output of each cell */
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
/* FF needs explicit width to stretch */
|
||||
width: 100%;
|
||||
/* this position must be relative to enable descendents to be absolute within it */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* class for the output area when it should be height-limited */
|
||||
div.output_scroll {
|
||||
/* 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%;
|
||||
|
||||
overflow: auto;
|
||||
.corner-all;
|
||||
.box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
|
||||
}
|
||||
|
||||
/* output div while it is collapsed */
|
||||
div.output_collapsed {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div.out_prompt_overlay {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
.corner-all;
|
||||
}
|
||||
|
||||
div.out_prompt_overlay:hover {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
div.output_prompt {
|
||||
color: darkred;
|
||||
/* 5px right shift to account for margin in parent container */
|
||||
margin: 0 5px 0 -5px;
|
||||
}
|
||||
|
||||
/* This class is the outer container of all output sections. */
|
||||
div.output_area {
|
||||
padding: 0px;
|
||||
page-break-inside: avoid;
|
||||
.hbox();
|
||||
}
|
||||
|
||||
|
||||
/* This is needed to protect the pre formating from global settings such
|
||||
as that of bootstrap */
|
||||
div.output_area pre {
|
||||
font-family: monospace;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* This class is for the output subarea inside the output_area and after
|
||||
the prompt div. */
|
||||
div.output_subarea {
|
||||
padding: 0.44em 0.4em 0.4em 1px;
|
||||
.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;
|
||||
color: @fontBaseColor;
|
||||
font-family: monospace;
|
||||
/* This has to match that of the the CodeMirror class line-height below */
|
||||
line-height: 1.231;
|
||||
}
|
||||
|
||||
/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
|
||||
div.output_stream {
|
||||
padding-top: 0.0em;
|
||||
padding-bottom: 0.0em;
|
||||
}
|
||||
div.output_stdout {
|
||||
}
|
||||
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 {
|
||||
}
|
||||
|
||||
div.text_cell {
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
div.text_cell_input {
|
||||
color: @fontBaseColor;
|
||||
border: 1px solid @light_border_color;
|
||||
.corner-all;
|
||||
background: @cell_background;
|
||||
}
|
||||
|
||||
div.text_cell_render {
|
||||
/*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
|
||||
outline: none;
|
||||
resize: none;
|
||||
width: inherit;
|
||||
border-style: none;
|
||||
padding: 5px;
|
||||
color: @fontBaseColor;
|
||||
}
|
||||
|
||||
/* The following gets added to the <head> if it is detected that the user has a
|
||||
* monospace font with inconsistent normal/bold/italic height. See
|
||||
* notebookmain.js. Such fonts will have keywords vertically offset with
|
||||
* respect to the rest of the text. The user should select a better font.
|
||||
* See: https://github.com/ipython/ipython/issues/1503
|
||||
*
|
||||
* .CodeMirror span {
|
||||
* vertical-align: bottom;
|
||||
* }
|
||||
*/
|
||||
|
||||
.CodeMirror {
|
||||
line-height: 1.231; /* Changed from 1em to our global default */
|
||||
height: auto; /* Changed to auto to autogrow */
|
||||
background: none; /* Changed from white to allow our bg to show through */
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
/* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
|
||||
/* We have found that if it is visible, vertical scrollbars appear with font size changes.*/
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto; /* Changed from auto to remove scrollbar */
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
|
||||
/* we have set a different line-height and want this to scale with that. */
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
/* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
|
||||
/* .CodeMirror-lines */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* CSS font colors for translated ANSI colors. */
|
||||
|
||||
|
||||
.ansiblack {color: @fontBaseColor;}
|
||||
.ansired {color: darkred;}
|
||||
.ansigreen {color: darkgreen;}
|
||||
.ansiyellow {color: brown;}
|
||||
.ansiblue {color: darkblue;}
|
||||
.ansipurple {color: darkviolet;}
|
||||
.ansicyan {color: steelblue;}
|
||||
.ansigrey {color: grey;}
|
||||
.ansibold {font-weight: bold;}
|
||||
|
||||
.completions {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
border: 1px solid @border_color;
|
||||
.corner-all;
|
||||
.box-shadow(0px 6px 10px -1px #adadad);
|
||||
}
|
||||
|
||||
.completions select {
|
||||
background: white;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: auto;
|
||||
font-family: monospace;
|
||||
font-size: 110%;
|
||||
color: @fontBaseColor;
|
||||
}
|
||||
|
||||
.completions select option.context {
|
||||
color: @blueDark;
|
||||
}
|
||||
|
||||
pre.dialog {
|
||||
background-color: @cell_background;
|
||||
border: 1px solid #ddd;
|
||||
.corner-all;
|
||||
padding: 0.4em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
p.dialog {
|
||||
padding : 0.2em;
|
||||
}
|
||||
|
||||
.shortcut_key {
|
||||
display: inline-block;
|
||||
width: 15ex;
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.shortcut_descr {
|
||||
}
|
||||
|
||||
/* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems
|
||||
to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do.
|
||||
*/
|
||||
pre, code, kbd, samp { white-space: pre-wrap; }
|
||||
|
||||
#fonttest {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.js-error {
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
margin-bottom:0;
|
||||
|
||||
}
|
||||
|
||||
a.heading-anchor:link, a.heading-anchor:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* raw_input styles */
|
||||
|
||||
div.raw_input {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
font-family: monospace;
|
||||
}
|
||||
span.input_prompt {
|
||||
font-family: inherit;
|
||||
}
|
||||
input.raw_input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
width: auto;
|
||||
margin: -2px 0px 0px 1px;
|
||||
padding-left: 1px;
|
||||
padding-top: 2px;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
p.p-space {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
@import "bootstrap-custom.less";
|
||||
@import "variables.less";
|
||||
@import "flexible-box-model.less";
|
||||
@import "notebook.less";
|
||||
@import "renderedhtml.less";
|
||||
@import "tooltip.less";
|
||||
@ -1,18 +0,0 @@
|
||||
@corner_radius: 4px;
|
||||
@notebook_background : white;
|
||||
@cell_selected_background: darken(@notebook_background, 2%);
|
||||
@cell_background: darken(@notebook_background, 3.2%);
|
||||
@border_color: darken(@cell_selected_background, 31%);
|
||||
@light_border_color: darken(@cell_selected_background, 17%);
|
||||
@borderwidth : 1px;
|
||||
@fontBaseColor : black;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// utilities mixins
|
||||
|
||||
.corner-all {
|
||||
border-radius:@corner_radius;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
/*This file contains any manual css for this page that needs to override the global styles.
|
||||
This is only required when different pages style the same element differently. This is just
|
||||
a hack to deal with our current css styles and no new styling should be added in this file.*/
|
||||
|
||||
#ipython-main-app {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-size: 110%;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/* CSS font colors for translated ANSI colors. */
|
||||
|
||||
|
||||
.ansiblack {color: black;}
|
||||
.ansired {color: darkred;}
|
||||
.ansigreen {color: darkgreen;}
|
||||
.ansiyellow {color: brown;}
|
||||
.ansiblue {color: darkblue;}
|
||||
.ansipurple {color: darkviolet;}
|
||||
.ansicyan {color: steelblue;}
|
||||
.ansigrey {color: grey;}
|
||||
.ansibold {font-weight: bold;}
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
.cell {
|
||||
border: 1px solid transparent;
|
||||
.vbox();
|
||||
|
||||
&.selected {
|
||||
.corner-all;
|
||||
border : thin @border_color solid;
|
||||
}
|
||||
}
|
||||
|
||||
div.cell {
|
||||
width: 100%;
|
||||
padding: 5px 5px 5px 0px;
|
||||
/* This acts as a spacer between cells, that is outside the border */
|
||||
margin: 2px 0px 2px 0px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
div.prompt {
|
||||
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
|
||||
width: 11ex;
|
||||
/* This 0.4em is tuned to match the padding on the CodeMirror editor. */
|
||||
padding: 0.4em;
|
||||
margin: 0px;
|
||||
font-family: @monoFontFamily;
|
||||
text-align: right;
|
||||
/* This has to match that of the the CodeMirror class line-height below */
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
div.code_cell {
|
||||
}
|
||||
|
||||
/* any special styling for code cells that are currently running goes here */
|
||||
div.code_cell.running {
|
||||
}
|
||||
|
||||
div.input {
|
||||
page-break-inside: avoid;
|
||||
.hbox();
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
div.input_prompt {
|
||||
color: navy;
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
|
||||
div.output_wrapper {
|
||||
/* This is a spacer between the input and output of each cell */
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
/* FF needs explicit width to stretch */
|
||||
width: 100%;
|
||||
/* this position must be relative to enable descendents to be absolute within it */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* class for the output area when it should be height-limited */
|
||||
div.output_scroll {
|
||||
/* 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%;
|
||||
|
||||
overflow: auto;
|
||||
.corner-all;
|
||||
.box-shadow(inset 0 2px 8px rgba(0, 0, 0, .8));
|
||||
}
|
||||
|
||||
/* output div while it is collapsed */
|
||||
div.output_collapsed {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div.out_prompt_overlay {
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
position: absolute;
|
||||
.corner-all;
|
||||
}
|
||||
|
||||
div.out_prompt_overlay:hover {
|
||||
/* 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);
|
||||
}
|
||||
|
||||
div.output_prompt {
|
||||
color: darkred;
|
||||
/* 5px right shift to account for margin in parent container */
|
||||
margin: 0 5px 0 -5px;
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
/* The following gets added to the <head> if it is detected that the user has a
|
||||
* monospace font with inconsistent normal/bold/italic height. See
|
||||
* notebookmain.js. Such fonts will have keywords vertically offset with
|
||||
* respect to the rest of the text. The user should select a better font.
|
||||
* See: https://github.com/ipython/ipython/issues/1503
|
||||
*
|
||||
* .CodeMirror span {
|
||||
* vertical-align: bottom;
|
||||
* }
|
||||
*/
|
||||
|
||||
.CodeMirror {
|
||||
line-height: @baseLineHeight; /* Changed from 1em to our global default */
|
||||
height: auto; /* Changed to auto to autogrow */
|
||||
background: none; /* Changed from white to allow our bg to show through */
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
/* The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
|
||||
/* We have found that if it is visible, vertical scrollbars appear with font size changes.*/
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto; /* Changed from auto to remove scrollbar */
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
|
||||
/* we have set a different line-height and want this to scale with that. */
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
// This is needed to fine tune the position of the line numbers because we use the 0.4em
|
||||
// spacing in various places. Fine tuned to look right.
|
||||
padding: 0 8px 0 4px;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
// This is needed because our cell has rounded corners, otherwise the gutter area square
|
||||
// corner cuts into the rounded cell border.
|
||||
border-bottom-left-radius: @corner_radius;
|
||||
border-top-left-radius: @corner_radius;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
/* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
|
||||
/* .CodeMirror-lines */
|
||||
padding: 0;
|
||||
border: 0;
|
||||
.border-radius(0)
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.completions {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
border: 1px solid @border_color;
|
||||
.corner-all;
|
||||
.box-shadow(0px 6px 10px -1px #adadad);
|
||||
}
|
||||
|
||||
.completions select {
|
||||
background: white;
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
overflow: auto;
|
||||
font-family: @monoFontFamily;
|
||||
font-size: 110%;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
.completions select option.context {
|
||||
color: @blueDark;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
.ui-menubar-item .ui-button .ui-button-text {
|
||||
padding: 0.4em 1.0em;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.ui-menu {
|
||||
.box-shadow(0px 6px 10px -1px #adadad);
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item a {
|
||||
border: 1px solid transparent;
|
||||
padding: 2px 1.6em;
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item a.ui-state-focus {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-menu hr {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
|
||||
#menubar_container {
|
||||
position: relative;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
|
||||
body {
|
||||
background-color: @bodyBackground;
|
||||
}
|
||||
|
||||
body.notebook_app {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span#notebook_name {
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
padding: 3px;
|
||||
border: none;
|
||||
font-size: 146.5%;
|
||||
}
|
||||
|
||||
div#notebook_panel {
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div#notebook {
|
||||
overflow-y: scroll;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
/* This spaces the cell away from the edge of the notebook area */
|
||||
padding: 5px 5px 15px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
div.ui-widget-content {
|
||||
border: 1px solid @border_color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
pre.dialog {
|
||||
background-color: @cell_background;
|
||||
border: 1px solid #ddd;
|
||||
.corner-all;
|
||||
padding: 0.4em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
p.dialog {
|
||||
padding : 0.2em;
|
||||
}
|
||||
|
||||
/* Word-wrap output correctly. This is the CSS3 spelling, though Firefox seems
|
||||
to not honor it correctly. Webkit browsers (Chrome, rekonq, Safari) do.
|
||||
*/
|
||||
pre, code, kbd, samp { white-space: pre-wrap; }
|
||||
|
||||
#fonttest {
|
||||
font-family: @monoFontFamily;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
a.heading-anchor:link, a.heading-anchor:visited {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
#notification_area {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 25px;
|
||||
padding: 3px 0px;
|
||||
padding-right: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
.notification_widget{
|
||||
float : right;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
height: 25px;
|
||||
padding: 3px 6px;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
/* This class is the outer container of all output sections. */
|
||||
div.output_area {
|
||||
padding: 0px;
|
||||
page-break-inside: avoid;
|
||||
.hbox();
|
||||
}
|
||||
|
||||
|
||||
/* This is needed to protect the pre formating from global settings such
|
||||
as that of bootstrap */
|
||||
div.output_area pre {
|
||||
font-family: @monoFontFamily;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
.border-radius(0);
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* This class is for the output subarea inside the output_area and after
|
||||
the prompt div. */
|
||||
div.output_subarea {
|
||||
padding: 0.44em 0.4em 0.4em 1px;
|
||||
.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;
|
||||
color: @textColor;
|
||||
font-family: @monoFontFamily;
|
||||
/* This has to match that of the the CodeMirror class line-height below */
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
|
||||
/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
|
||||
div.output_stream {
|
||||
padding-top: 0.0em;
|
||||
padding-bottom: 0.0em;
|
||||
}
|
||||
div.output_stdout {
|
||||
}
|
||||
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 {
|
||||
}
|
||||
|
||||
.js-error {
|
||||
color: darkred;
|
||||
}
|
||||
|
||||
/* raw_input styles */
|
||||
|
||||
div.raw_input {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
font-family: @monoFontFamily;
|
||||
}
|
||||
span.input_prompt {
|
||||
font-family: inherit;
|
||||
}
|
||||
input.raw_input {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
width: auto;
|
||||
margin: -2px 0px 0px 1px;
|
||||
padding-left: 1px;
|
||||
padding-top: 2px;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
p.p-space {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
div#pager_splitter {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#pager_container {
|
||||
position : relative;
|
||||
}
|
||||
|
||||
div#pager {
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
|
||||
pre {
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @textColor;
|
||||
background-color: @cell_background;
|
||||
padding: 0.4em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
.shortcut_key {
|
||||
display: inline-block;
|
||||
width: 15ex;
|
||||
text-align: right;
|
||||
font-family: @monoFontFamily;
|
||||
}
|
||||
|
||||
.shortcut_descr {
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
span#save_widget {
|
||||
padding: 5px;
|
||||
margin: 0px 0px 0px 300px;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
span#checkpoint_status span#autosave_status {
|
||||
font-size: small;
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
@import "variables.less";
|
||||
@import "ansicolors.less";
|
||||
@import "cell.less";
|
||||
@import "celltoolbar.less";
|
||||
@import "codecell.less";
|
||||
@import "codemirror.less";
|
||||
@import "completer.less";
|
||||
@import "highlight.less";
|
||||
@import "menubar.less";
|
||||
@import "notebook.less";
|
||||
@import "notificationarea.less";
|
||||
@import "notificationwidget.less";
|
||||
@import "outputarea.less";
|
||||
@import "pager.less";
|
||||
@import "quickhelp.less";
|
||||
@import "renderedhtml.less";
|
||||
@import "savewidget.less";
|
||||
@import "textcell.less";
|
||||
@import "toolbar.less";
|
||||
@import "tooltip.less";
|
||||
@ -0,0 +1,21 @@
|
||||
div.text_cell {
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
div.text_cell_input {
|
||||
color: @textColor;
|
||||
border: 1px solid @light_border_color;
|
||||
.corner-all;
|
||||
background: @cell_background;
|
||||
}
|
||||
|
||||
div.text_cell_render {
|
||||
/*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
|
||||
outline: none;
|
||||
resize: none;
|
||||
width: inherit;
|
||||
border-style: none;
|
||||
padding: 5px;
|
||||
color: @textColor;
|
||||
}
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
.toolbar {
|
||||
padding: 3px 15px;
|
||||
border-bottom: @border_width @border_color solid;
|
||||
|
||||
button {
|
||||
margin-top:2px;
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
|
||||
select, label {
|
||||
height : 19px;
|
||||
vertical-align:middle;
|
||||
margin-right:2px;
|
||||
margin-bottom:0;
|
||||
display: inline;
|
||||
font-size: 92%;
|
||||
margin-left:0.3em;
|
||||
margin-right:0.3em;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar select{
|
||||
width:auto;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
|
||||
// Our own variables for this page
|
||||
|
||||
@cell_selected_background: darken(@bodyBackground, 2%);
|
||||
@cell_background: darken(@bodyBackground, 3.2%);
|
||||
@border_color: darken(@cell_selected_background, 31%);
|
||||
@light_border_color: darken(@cell_selected_background, 17%);
|
||||
@border_width: 1px;
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
// Bootstrap
|
||||
@import "../components/bootstrap/less/bootstrap.less";
|
||||
|
||||
// base
|
||||
@import "../base/less/style.less";
|
||||
|
||||
// auth
|
||||
@import "../auth/less/style.less";
|
||||
|
||||
// tree
|
||||
@import "../tree/less/style.less";
|
||||
|
||||
// notebook
|
||||
@import "../notebook/less/style.less";
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,8 @@
|
||||
/*This file contains any manual css for this page that needs to override the global styles.
|
||||
This is only required when different pages style the same element differently. This is just
|
||||
a hack to deal with our current css styles and no new styling should be added in this file.*/
|
||||
|
||||
#ipython-main-app {
|
||||
width: 920px;
|
||||
margin: 30px auto 0px auto;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import "../tree/less/altuploadform.less";
|
||||
@import "../tree/less/tree.less";
|
||||
Loading…
Reference in new issue