From 8ced23308e48fdf84d66d71a4067101050bf85cb Mon Sep 17 00:00:00 2001 From: nsonnad Date: Mon, 29 Jun 2015 19:48:01 -0400 Subject: [PATCH] add two themes and configure styles for them --- notebook/static/base/less/page.less | 2 +- notebook/static/notebook/less/ansicolors.less | 16 +++--- notebook/static/notebook/less/cell.less | 6 +- notebook/static/notebook/less/highlight.less | 22 ++++--- notebook/static/notebook/less/variables.less | 8 +-- notebook/static/style/ipython.less | 1 + notebook/static/style/style.less | 3 + notebook/static/themes/default.less | 55 ++++++++++++++++++ notebook/static/themes/eighties.less | 57 +++++++++++++++++++ notebook/static/tree/less/tree.less | 10 ++-- 10 files changed, 150 insertions(+), 30 deletions(-) create mode 100644 notebook/static/themes/default.less create mode 100644 notebook/static/themes/eighties.less diff --git a/notebook/static/base/less/page.less b/notebook/static/base/less/page.less index 754ca6cc3..1e0a9d076 100644 --- a/notebook/static/base/less/page.less +++ b/notebook/static/base/less/page.less @@ -47,7 +47,7 @@ body { #header-spacer { width: 100%; visibility: hidden; - + @media print { display: none; } diff --git a/notebook/static/notebook/less/ansicolors.less b/notebook/static/notebook/less/ansicolors.less index 7f15301b8..f7ae8173f 100644 --- a/notebook/static/notebook/less/ansicolors.less +++ b/notebook/static/notebook/less/ansicolors.less @@ -4,20 +4,20 @@ /* use dark versions for foreground, to improve visibility */ .ansiblack {color: black;} -.ansired {color: darkred;} -.ansigreen {color: darkgreen;} +.ansired {color: @ansired;} +.ansigreen {color: @ansigreen;} .ansiyellow {color: #c4a000;} -.ansiblue {color: darkblue;} +.ansiblue {color: @ansiblue;} .ansipurple {color: darkviolet;} -.ansicyan {color: steelblue;} +.ansicyan {color: @ansicyan;} .ansigray {color: gray;} /* and light for background, for the same reason */ .ansibgblack {background-color: black;} -.ansibgred {background-color: red;} -.ansibggreen {background-color: green;} +.ansibgred {background-color: darken(@ansired, 20%);} +.ansibggreen {background-color: darken(@ansigreen, 20%);} .ansibgyellow {background-color: yellow;} -.ansibgblue {background-color: blue;} +.ansibgblue {background-color: darken(@ansiblue, 20%);} .ansibgpurple {background-color: magenta;} -.ansibgcyan {background-color: cyan;} +.ansibgcyan {background-color: darken(@ansicyan, 20%);;} .ansibggray {background-color: gray;} diff --git a/notebook/static/notebook/less/cell.less b/notebook/static/notebook/less/cell.less index d44d0928e..e124e4571 100644 --- a/notebook/static/notebook/less/cell.less +++ b/notebook/static/notebook/less/cell.less @@ -15,7 +15,7 @@ div.cell { } .edit_mode &.selected { - border-color: green; + border-color: @color-muted-5; /* Don't border the cells when printing */ @media print { border-color: transparent; @@ -37,7 +37,7 @@ div.cell { margin: 0px; font-family: @font-family-monospace; text-align: right; - /* This has to match that of the the CodeMirror class line-height below */ + /* This has to match that of the the CodeMirror class line-height below */ line-height: @code_line_height; } @@ -82,7 +82,7 @@ div.unrecognized_cell { // from text_cell padding: 5px 5px 5px 0px; .hbox(); - + .inner_cell { .border-radius(@border-radius-base); padding: 5px; diff --git a/notebook/static/notebook/less/highlight.less b/notebook/static/notebook/less/highlight.less index d0b2bf2ae..99bdf5d16 100644 --- a/notebook/static/notebook/less/highlight.less +++ b/notebook/static/notebook/less/highlight.less @@ -7,8 +7,6 @@ Adapted from GitHub theme @import (reference) "highlight-refs.less"; -@highlight-base: #000; - .highlight-base{ color: @highlight-base; } @@ -26,16 +24,16 @@ Adapted from GitHub theme } .highlight-string{ - color: #BA2121; + color: @highlight-string; } .highlight-comment{ - color: #408080; + color: @color-muted-5; font-style: italic; } .highlight-number{ - color: #080; + color: @color-accent-3; } .highlight-atom{ @@ -43,7 +41,7 @@ Adapted from GitHub theme } .highlight-keyword{ - color: #008000; + color: @highlight-keyword; font-weight: bold; } @@ -52,11 +50,11 @@ Adapted from GitHub theme } .highlight-error{ - color: #f00; + color: @highlight-error; } .highlight-operator{ - color: #AA22FF; + color: @color-accent-1; font-weight: bold; } @@ -64,8 +62,12 @@ Adapted from GitHub theme color: #AA22FF; } +.highlight-cursor { + border-left: 1px solid @color-muted-6; +} + /* previously not defined, copying from default codemirror */ -.highlight-def{ .cm-s-default.cm-def() } +.highlight-def{ color: @color-accent-2; } .highlight-punctuation{ .cm-s-default.cm-punctuation() } .highlight-property{ .cm-s-default.cm-property() } .highlight-string-2{ .cm-s-default.cm-string-2() } @@ -110,3 +112,5 @@ Adapted from GitHub theme background-repeat: no-repeat; } } + +.cm-s-ipython .CodeMirror div.CodeMirror-cursor { border-left: 1px solid magenta; } diff --git a/notebook/static/notebook/less/variables.less b/notebook/static/notebook/less/variables.less index 76d56398f..c9b5eaf52 100644 --- a/notebook/static/notebook/less/variables.less +++ b/notebook/static/notebook/less/variables.less @@ -10,8 +10,8 @@ @notebook_line_height: 20px; @code_line_height: 1.21429em; // changed from 1.231 to get 17px even @code_padding: 0.4em; // 5.6 px -@rendered_html_border_color: black; -@input_prompt_color: navy; -@output_prompt_color: darkred; -@output_pre_color: black; +@rendered_html_border_color: @color-muted-3; +@input_prompt_color: @color-accent-1; +@output_prompt_color: @color-accent-2; +@output_pre_color: @color-muted-6; @notification_widget_bg: rgba(240, 240, 240, 0.5); diff --git a/notebook/static/style/ipython.less b/notebook/static/style/ipython.less index d09fa90a1..b2fa54e6d 100644 --- a/notebook/static/style/ipython.less +++ b/notebook/static/style/ipython.less @@ -1,6 +1,7 @@ // minimal imports from bootstrap - only variables and mixins @import "../components/bootstrap/less/variables.less"; @import "../components/bootstrap/less/mixins.less"; +@import "../themes/default.less"; // minimal imports from font-awesome @import "../components/font-awesome/less/variables.less"; diff --git a/notebook/static/style/style.less b/notebook/static/style/style.less index 8dbbda896..251be497c 100644 --- a/notebook/static/style/style.less +++ b/notebook/static/style/style.less @@ -31,3 +31,6 @@ // terminal @import "../terminal/less/terminal.less"; + +// theme +@import "../themes/default.less"; diff --git a/notebook/static/themes/default.less b/notebook/static/themes/default.less new file mode 100644 index 000000000..ef2b26ab9 --- /dev/null +++ b/notebook/static/themes/default.less @@ -0,0 +1,55 @@ +// Tomorrow theme, light + +// Muted, gray-ish colors +@color-muted-1: #ffffff; +@color-muted-2: #e0e0e0; +@color-muted-3: #c5c8c6; +@color-muted-4: #b4b7b4; +@color-muted-5: #969896; +@color-muted-6: #373b41; +@color-muted-7: #282a2e; +@color-muted-8: #1d1f21; + +// Bright colors +@color-primary: #81a2be; +@color-error: #cc6666; +@color-success: #b5bd68; +@color-accent-1: #de935f; +@color-accent-2: #f0c674; +@color-accent-3: #8abeb7; +@color-accent-4: #b294bb; +@color-accent-5: #a3685a; + +// Bootstrap overrides +@body-bg: @color-muted-1; +@brand-primary: @color-primary; +@brand-success: @color-success; +@text-color: @color-muted-7; +@font-family-monospace: monospace; // to allow user to customize their fonts +@font-size-base: 13px; +@table-border-color: @color-muted-3; +@table-border-highlight: @color-muted-7; +@page-backdrop-color: @color-muted-2; +@navbar-default-bg: @color-muted-2; + +@gray-base: @color-muted-1; +@gray-darker: @color-muted-2; +@gray-dark: @color-muted-3; +@gray: @color-muted-4; +@gray-light: @color-muted-5; +@gray-lighter: @color-muted-6; + +// IPython colors +@border_color: @color-muted-4; + +// Highlight colors +@highlight-base: @color-muted-6; +@highlight-keyword: @color-accent-4; +@highlight-error: @color-error; +@highlight-string: @color-success; + +// ANSI +@ansired: @color-error; +@ansigreen: @color-success; +@ansicyan: @color-accent-3; +@ansiblue: @color-primary; diff --git a/notebook/static/themes/eighties.less b/notebook/static/themes/eighties.less new file mode 100644 index 000000000..c135fe40a --- /dev/null +++ b/notebook/static/themes/eighties.less @@ -0,0 +1,57 @@ +// Eighties theme, dark + +// Muted, gray-ish colors +@color-muted-1: #2d2d2d; +@color-muted-2: #393939; +@color-muted-3: #515151; +@color-muted-4: #747369; +@color-muted-5: #a09f93; +@color-muted-6: #d3d0c8; +@color-muted-7: #f2f0ec; +@color-muted-8: #e8e6df; + +// Bright colors +@color-primary: #6699cc; +@color-error: #f2777a; +@color-success: #99cc99; +@color-accent-1: #f99157; +@color-accent-2: #ffcc66; +@color-accent-3: #66cccc; +@color-accent-4: #cc99cc; +@color-accent-5: #d27b53; + +// Dark theme + +// Bootstrap overrides +@body-bg: @color-muted-1; +@brand-primary: @color-primary; +@brand-success: @color-success; +@text-color: @color-muted-7; +@font-family-monospace: monospace; // to allow user to customize their fonts +@font-size-base: 13px; +@table-border-color: @color-muted-3; +@table-border-highlight: @color-muted-7; +@page-backdrop-color: @color-muted-2; +@navbar-default-bg: @color-muted-2; + +@gray-base: @color-muted-1; +@gray-darker: @color-muted-2; +@gray-dark: @color-muted-3; +@gray: @color-muted-4; +@gray-light: @color-muted-5; +@gray-lighter: @color-muted-6; + +// IPython colors +@border_color: @color-muted-4; + +// Highlight colors +@highlight-base: @color-muted-6; +@highlight-keyword: @color-accent-4; +@highlight-error: @color-error; +@highlight-string: @color-success; + +// ANSI +@ansired: @color-error; +@ansigreen: @color-success; +@ansicyan: @color-accent-3; +@ansiblue: @color-primary; diff --git a/notebook/static/tree/less/tree.less b/notebook/static/tree/less/tree.less index 19798e3b4..5b1441932 100644 --- a/notebook/static/tree/less/tree.less +++ b/notebook/static/tree/less/tree.less @@ -33,7 +33,7 @@ ul.breadcrumb { font-size: 16px; margin-right: 4px; } - + span { color: @dark_dashboard_color; } @@ -59,7 +59,7 @@ ul.breadcrumb { .list_header { font-weight: bold; - background-color: @page-backdrop-color + background-color: @page-backdrop-color; } .list_placeholder { @@ -94,7 +94,7 @@ ul.breadcrumb { }; a {text-decoration: none;} &:hover { - background-color: darken(white,2%); + background-color: @table-border-highlight; } } @@ -131,7 +131,7 @@ ul.breadcrumb { } .item_icon { - font-size: 14px; + font-size: 14px; color: @dark_dashboard_color; margin-right: @dashboard_lr_pad; margin-left: @dashboard_lr_pad; @@ -271,7 +271,7 @@ ul#new-menu { padding-left: @dashboard_lr_pad; padding-right: @dashboard_lr_pad; line-height: @btn_mini_height; - + a:focus, a:hover { text-decoration: none; }