From 14ed9ec5090ca0cd3bcce91c4ae7361574d94d6b Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 22 Jan 2019 22:33:31 -0500 Subject: [PATCH 1/2] added more css vars to themes to support larger fonts --- packages/codemirror/style/index.css | 8 +++++--- .../theme-dark-extension/style/variables.css | 19 +++++++++++++++++-- .../theme-light-extension/style/variables.css | 5 +++++ 3 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/codemirror/style/index.css b/packages/codemirror/style/index.css index b7ebf754eee0..fd95e6090738 100644 --- a/packages/codemirror/style/index.css +++ b/packages/codemirror/style/index.css @@ -60,20 +60,22 @@ } .jp-CodeMirrorEditor[data-type='inline'] .CodeMirror-cursor { - border-left: 1.4px solid var(--jp-editor-cursor-color); + border-left: var(--jp-code-cursor-width0) solid var(--jp-editor-cursor-color); } /* When zoomed out 67% and 33% on a screen of 1440 width x 900 height */ @media screen and (min-width: 2138px) and (max-width: 4319px) { .jp-CodeMirrorEditor[data-type='inline'] .CodeMirror-cursor { - border-left: 2px solid var(--jp-editor-cursor-color); + border-left: var(--jp-code-cursor-width1) solid + var(--jp-editor-cursor-color); } } /* When zoomed out less than 33% */ @media screen and (min-width: 4320px) { .jp-CodeMirrorEditor[data-type='inline'] .CodeMirror-cursor { - border-left: 4px solid var(--jp-editor-cursor-color); + border-left: var(--jp-code-cursor-width2) solid + var(--jp-editor-cursor-color); } } diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css index 4e709f118e39..5e7065b60c85 100644 --- a/packages/theme-dark-extension/style/variables.css +++ b/packages/theme-dark-extension/style/variables.css @@ -188,6 +188,11 @@ all of MD as it is not optimized for dense, information rich UIs. /* This gives a magnification of about 125% in presentation mode over normal. */ --jp-code-presentation-font-size: 16px; + /* may need to tweak cursor width if you change font size */ + --jp-code-cursor-width0: 1.4px; + --jp-code-cursor-width1: 2px; + --jp-code-cursor-width2: 4px; + /* Layout * * The following are the main layout colors use in JupyterLab. In a light @@ -257,7 +262,12 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-cell-editor-background: var(--jp-layout-color1); --jp-cell-editor-border-color: var(--md-grey-700); --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300); - --jp-cell-editor-active-background: var(--jp-layout-color0); + --jp-cell-editor-active-background: rgba( + 33, + 33, + 33, + 1 + ); /*var(--jp-layout-color0);*/ --jp-cell-editor-active-border-color: var(--jp-brand-color1); --jp-cell-prompt-width: 64px; @@ -325,7 +335,12 @@ all of MD as it is not optimized for dense, information rich UIs. /* General editor styles */ - --jp-editor-selected-background: var(--jp-layout-color2); + --jp-editor-selected-background: rgba( + 33, + 66, + 131, + 0.5 + ); /*var(--jp-layout-color2);*/ --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24); --jp-editor-cursor-color: var(--jp-ui-font-color0); diff --git a/packages/theme-light-extension/style/variables.css b/packages/theme-light-extension/style/variables.css index 5cec97e29fc8..9091e073b84e 100644 --- a/packages/theme-light-extension/style/variables.css +++ b/packages/theme-light-extension/style/variables.css @@ -186,6 +186,11 @@ all of MD as it is not optimized for dense, information rich UIs. /* This gives a magnification of about 125% in presentation mode over normal. */ --jp-code-presentation-font-size: 16px; + /* may need to tweak cursor width if you change font size */ + --jp-code-cursor-width0: 1.4px; + --jp-code-cursor-width1: 2px; + --jp-code-cursor-width2: 4px; + /* Layout * * The following are the main layout colors use in JupyterLab. In a light From c371da2c0018cd4c5672749f5d2b7541e330a48b Mon Sep 17 00:00:00 2001 From: telamonian Date: Tue, 22 Jan 2019 23:12:36 -0500 Subject: [PATCH 2/2] removed cruft --- packages/theme-dark-extension/style/variables.css | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css index 5e7065b60c85..51a02b9ac6ee 100644 --- a/packages/theme-dark-extension/style/variables.css +++ b/packages/theme-dark-extension/style/variables.css @@ -262,12 +262,7 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-cell-editor-background: var(--jp-layout-color1); --jp-cell-editor-border-color: var(--md-grey-700); --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300); - --jp-cell-editor-active-background: rgba( - 33, - 33, - 33, - 1 - ); /*var(--jp-layout-color0);*/ + --jp-cell-editor-active-background: var(--jp-layout-color0); --jp-cell-editor-active-border-color: var(--jp-brand-color1); --jp-cell-prompt-width: 64px; @@ -335,12 +330,7 @@ all of MD as it is not optimized for dense, information rich UIs. /* General editor styles */ - --jp-editor-selected-background: rgba( - 33, - 66, - 131, - 0.5 - ); /*var(--jp-layout-color2);*/ + --jp-editor-selected-background: var(--jp-layout-color2); --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24); --jp-editor-cursor-color: var(--jp-ui-font-color0);