From 6486a6ae73547b6ad944286c98b9524a4cbd7cb7 Mon Sep 17 00:00:00 2001 From: ialarmedalien Date: Thu, 15 Oct 2020 09:54:32 -0700 Subject: [PATCH] Fixing css errors in kbase-extension/static/kbase/css/ files bootstrapHelper.css, buttons.css, contigBrowserStyles.css, kbaseJobLog.css, kbaseNotify.css, kbaseStylesheet.css, and kbaseTour.css. Also fixed errors in kbase-extension/static/kbase/custom/custom.css. --- kbase-extension/static/kbase/css/appCell.css | 477 ++++++++-------- .../static/kbase/css/batchMode.css | 18 +- .../static/kbase/css/bootstrapHelper.css | 81 ++- kbase-extension/static/kbase/css/buttons.css | 47 +- .../static/kbase/css/contigBrowserStyles.css | 43 +- .../static/kbase/css/kbaseEditor.css | 66 +-- .../static/kbase/css/kbaseIcons.css | 31 +- .../static/kbase/css/kbaseJobLog.css | 87 ++- .../static/kbase/css/kbaseNotify.css | 17 +- .../static/kbase/css/kbaseStylesheet.css | 254 +++++---- .../static/kbase/css/kbaseTour.css | 41 +- .../static/kbase/css/landing-pages.css | 526 ++++++++---------- .../static/kbase/css/methodCell.css | 10 +- kbase-extension/static/kbase/css/widgets.css | 14 +- .../static/kbase/custom/custom.css | 358 +++++------- 15 files changed, 974 insertions(+), 1096 deletions(-) diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css index 92d405d1fb..3567250be9 100644 --- a/kbase-extension/static/kbase/css/appCell.css +++ b/kbase-extension/static/kbase/css/appCell.css @@ -4,154 +4,152 @@ */ .kb-app-cell { - font-family: 'Oxygen', sans-serif; + font-family: 'Oxygen', sans-serif; } .kb-app-cell .kb-app-warning, .kb-editor-cell .kb-app-warning { - font-family: 'Oxygen', sans-serif; - text-align: center; + font-family: 'Oxygen', sans-serif; + text-align: center; } /** new app parameter styling **/ .kb-app-cell .kb-app-parameter-panel, .kb-editor-cell .kb-app-parameter-panel { - border-left: 3px solid #fff; + border-left: 3px solid #fff; } .kb-app-cell .kb-app-parameter-panel-hover, .kb-editor-cell .kb-app-parameter-panel-hover { - border-left: 3px solid #428bca; + border-left: 3px solid #428bca; } .kb-app-cell .kb-app-parameter-row, .kb-editor-cell .kb-app-parameter-row { - margin: 0; + margin: 0; } .kb-app-cell .kb-app-parameter-row { - padding: 5px; - border-radius: 5px; + padding: 5px; + border-radius: 5px; } .kb-app-cell .kb-app-parameter-row:hover { - background-color: rgba(0, 0, 0, 0.03); + background-color: rgba(0, 0, 0, 0.03); } .kb-app-row-close-btn-addon { - background: transparent; - border: 0; + background: transparent; + border: 0; } .kb-app-row-clip-btn-addon { - background: transparent; - border: 0; - padding: 0; - padding-right: 10px; - height: 100%; + background: transparent; + border: 0; + padding: 0; + padding-right: 10px; + height: 100%; } -.kb-app-row-clip-btn-addon:active:after { - background-color: #fff; - border-radius: 3px; - border: 1px solid gray; - content: 'copied!'; - margin-top: -5px; - padding: 7px; - position: absolute; +.kb-app-row-clip-btn-addon:active::after { + background-color: #fff; + border-radius: 3px; + border: 1px solid gray; + content: 'copied!'; + margin-top: -5px; + padding: 7px; + position: absolute; } .kb-input-group-wide { - width: 100%; + width: 100%; } .kb-input-row-flex { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } .cell.selected .btn-default.kb-app-row-close-btn { - color: gray; + color: gray; } -.kb-app-row-clip-btn, .kb-app-row-close-btn { - height: 100%; - margin-left: 1px; - /* border-left: 3px solid transparent; */ - border-right: 0; - border-top: 0; - border-bottom: 0; - border: none; - background-color: transparent; - color: gray; +.kb-app-row-clip-btn, +.kb-app-row-close-btn { + height: 100%; + margin-left: 1px; + + /* border-left: 3px solid transparent; */ + border-right: 0; + border-top: 0; + border-bottom: 0; + border: none; + background-color: transparent; + color: gray; } .kb-app-parameter-right-error-bar { - height: 28px; - /* firefox wants it explicitly wired */ - background: red; + height: 28px; + + /* firefox wants it explicitly wired */ + background: red; } /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */ .kb-app-cell .kb-app-parameter-row-hover, .kb-editor-cell .kb-app-parameter-row-hover { - background: #F9F9F9; + background: #f9f9f9; } .kb-app-cell .kb-app-parameter-row .message.-error, .kb-editor-cell .kb-app-parameter-row .message.-error { - background: #f2dede; + background: #f2dede; + color: #f44336; } .kb-app-cell .kb-app-parameter-row .message, .kb-editor-cell .kb-app-parameter-row .message { - text-align: center; - font-family: 'Oxygen', sans-serif; -} - -.kb-app-cell .kb-app-parameter-row .message.-error, -.kb-editor-cell .kb-app-parameter-row .message.-error { - color: #F44336; + text-align: center; + font-family: 'Oxygen', sans-serif; } /* not sure how to get text in these divs to valign middle... */ .kb-app-cell .kb-app-parameter-name, .kb-editor-cell .kb-app-parameter-name { - font-family: 'Oxygen', sans-serif; - color: #777; - text-align: left; - vertical-align: bottom; - padding-right: 4px; - padding-left: 0; - white-space: normal; + font-family: 'Oxygen', sans-serif; + color: #777; + text-align: left; + vertical-align: bottom; + padding-right: 4px; + padding-left: 0; + white-space: normal; } .kb-app-cell .kb-app-parameter-input, .kb-editor-cell .kb-app-parameter-input { - vertical-align: middle; + vertical-align: middle; } .kb-app-cell .kb-app-parameter-input select.form-control, .kb-editor-cell .kb-app-parameter-input select.form-control { - margin: 0; + margin: 0; } .kb-app-field-feedback { - background: transparent; - border: 0; + background: transparent; + border: 0; } .kb-input-group-addon { - background: transparent; - border: 0; - padding: 0 0 0 10px; + background: transparent; + border: 0; + padding: 0 0 0 10px; } - /* This set of styles is to accommodate the required/satisfied icon which appears between the select input control and the help text to the right of it. The @@ -164,40 +162,36 @@ in the column in which the icon lives, and does this by shrinking the select control with padding, and then scooting the icon back into its column. */ -.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph, -.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph, -.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph, -.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph { - /* This scoots the icon inside */ - font-size: 15px; - margin-left: 0; -} - .kb-app-cell .kb-app-parameter-required-glyph, .kb-editor-cell .kb-app-parameter-required-glyph { - color: #F44336; + color: #f44336; } -.kb-app-cell .kb-app-parameter-hint, -.kb-editor-cell .kb-app-parameter-hint { - padding-left: 7px; +.kb-app-cell .kb-app-parameter-accepted-glyph, +.kb-editor-cell .kb-app-parameter-accepted-glyph { + color: #4bb856; } -.kb-app-cell .kb-parameter-data-selection, -.kb-editor-cell .kb-parameter-data-selection { - font-weight: bold; +.kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph, +.kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph, +.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph, +.kb-editor-cell .kb-app-parameter-input .kb-app-parameter-required-glyph { + /* This scoots the icon inside */ + font-size: 15px; + margin-left: 0; } .kb-app-cell .kb-app-parameter-hint, .kb-editor-cell .kb-app-parameter-hint { - color: #777; - text-align: left; - margin-top: 3px; + padding-left: 7px; + color: #777; + text-align: left; + margin-top: 3px; } -.kb-app-cell .kb-app-parameter-accepted-glyph, -.kb-editor-cell .kb-app-parameter-accepted-glyph { - color: #4BB856; +.kb-app-cell .kb-parameter-data-selection, +.kb-editor-cell .kb-parameter-data-selection { + font-weight: bold; } .kb-app-cell .kb-app-parameter-info, @@ -206,127 +200,127 @@ control with padding, and then scooting the icon back into its column. .kb-editor-cell .kb-parameter-data-row-remove, .kb-app-cell .kb-parameter-data-row-add, .kb-editor-cell .kb-parameter-data-row-add { - color: #777; + color: #777; } .kb-app-cell .kb-app-advanced-options-controller-inactive, .kb-editor-cell .kb-app-advanced-options-controller-inactive, .kb-app-cell .kb-app-advanced-options-controller, .kb-editor-cell .kb-app-advanced-options-controller { - font-family: 'Oxygen', sans-serif; - font-weight: bold; - font-style: italic; - font-size: 10pt; - line-height: 14px; - text-align: center; + font-family: 'Oxygen', sans-serif; + font-weight: bold; + font-style: italic; + font-size: 10pt; + line-height: 14px; + text-align: center; } .kb-app-cell .kb-app-advanced-options-controller-inactive, .kb-editor-cell .kb-app-advanced-options-controller-inactive { - color: #777; + color: #777; } .kb-app-cell .kb-app-advanced-options-controller, .kb-editor-cell .kb-app-advanced-options-controller { - cursor: pointer; - color: #0088cc; + cursor: pointer; + color: #08c; } .kb-app-cell .kb-app-advanced-options-controller:hover, .kb-editor-cell .kb-app-advanced-options-controller:hover { - color: #2a6496; + color: #2a6496; } .kb-app-cell .kb-app-footer, .kb-editor-cell .kb-app-footer { - width: 100%; - background-color: #F5F5F5; - padding: 10px; + width: 100%; + background-color: #f5f5f5; + padding: 10px; } .kb-app-cell .kb-app-subtitle, .kb-editor-cell .kb-app-subtitle { - background-color: #F5F5F5; - padding: 3px 5px; -} - -.report-widget .panel-title>[data-toggle="collapse"]::before, -.kb-app-cell .panel-title>[data-toggle="collapse"]::before, -.kb-editor-cell .panel-title>[data-toggle="collapse"]::before { - display: inline-block; - margin-left: 0; - margin-right: 4px; - font-family: "FontAwesome"; - font-style: normal; - font-weight: normal; - font-size: 90%; - width: 12px; - color: silver; - line-height: 1; - vertical-align: baseline; - content: "\f078 "; -} - -.report-widget .panel-title>[data-toggle="collapse"].collapsed::before, -.kb-app-cell .panel-title>[data-toggle="collapse"].collapsed::before, -.kb-editor-cell .panel-title>[data-toggle="collapse"].collapsed::before { - margin-left: 2px; - margin-right: 2px; - content: "\f054 "; + background-color: #f5f5f5; + padding: 3px 5px; +} + +.report-widget .panel-title > [data-toggle="collapse"]::before, +.kb-app-cell .panel-title > [data-toggle="collapse"]::before, +.kb-editor-cell .panel-title > [data-toggle="collapse"]::before { + display: inline-block; + margin-left: 0; + margin-right: 4px; + font-family: "FontAwesome"; + font-style: normal; + font-weight: normal; + font-size: 90%; + width: 12px; + color: silver; + line-height: 1; + vertical-align: baseline; + content: "\f078 "; +} + +.report-widget .panel-title > [data-toggle="collapse"].collapsed::before, +.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before, +.kb-editor-cell .panel-title > [data-toggle="collapse"].collapsed::before { + margin-left: 2px; + margin-right: 2px; + content: "\f054 "; } /* tweaks to elemnts that should be dimmed when the cell is not selected */ -.unselected .kb-app-cell, .unselected .kb-editor-cell { - opacity: 0.5; +.unselected .kb-app-cell, +.unselected .kb-editor-cell { + opacity: 0.5; } .kb-app-cell .advanced-parameter-showing, .kb-editor-cell .advanced-parameter-showing { - display: block; + display: block; } .kb-app-cell .advanced-parameter-hidden, .kb-editor-cell .advanced-parameter-hidden { - display: none; + display: none; } .kb-elapsed-time { - font-family: monospace; + font-family: monospace; } .kb-elapsed-time.-active { - color: lime; + color: lime; } .kb-app-cell-info-desc, .kb-editor-cell-info-desc { - border: 1px solid #777; - padding: 10px; - margin-right: 10px; - min-height: 100px; + border: 1px solid #777; + padding: 10px; + margin-right: 10px; + min-height: 100px; } .kb-app-cell-info, .kb-editor-cell-info { - color: #777; - font-family: 'Oxygen', sans-serif; - font-size: 12pt; + color: #777; + font-family: 'Oxygen', sans-serif; + font-size: 12pt; } .kb-app-cell-info .header, .kb-editor-cell-info .header { - border-bottom: 1px solid #777; - padding: 5px 0; - margin-bottom: 8px; + border-bottom: 1px solid #777; + padding: 5px 0; + margin-bottom: 8px; } .kb-app-cell-info .value, .kb-editor-cell-info .value { - color: #000; + color: #000; } - /* New button color scheme @@ -356,45 +350,45 @@ warning: orange */ .btn.batch-active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); - background-color: #EEE; - border-color: #adadad; + -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); + background-color: #eee; + border-color: #adadad; } .btn.batch-active:hover { - background-color: #CCC; + background-color: #ccc; } .btn.kb-app-cell-btn, .btn.kb-editor-cell-btn { - color: rgb(33, 150, 243); - background-color: #FFF; - border: 2px rgb(33, 150, 243) solid; - margin-bottom: 4px; + color: rgb(33, 150, 243); + background-color: #fff; + border: 2px rgb(33, 150, 243) solid; + margin-bottom: 4px; } /* Primary Button Style */ .btn.kb-app-cell-btn.btn-primary, .btn.kb-editor-cell-btn.btn-primary { - color: rgb(33, 150, 243); - border: 2px rgb(33, 150, 243) solid; + color: rgb(33, 150, 243); + border: 2px rgb(33, 150, 243) solid; } .btn.kb-app-cell-btn.btn-primary:hover, .btn.kb-editor-cell-btn.btn-primary:hover { - color: #FFF; - background-color: rgb(33, 150, 243); - border-bottom: 6px rgb(33, 150, 243) solid; - margin-bottom: 0; + color: #fff; + background-color: rgb(33, 150, 243); + border-bottom: 6px rgb(33, 150, 243) solid; + margin-bottom: 0; } .btn.kb-app-cell-btn.btn-primary:active, .btn.kb-editor-cell-btn.btn-primary:active { - color: #FFF; - background-color: rgb(33, 150, 243); + color: #fff; + background-color: rgb(33, 150, 243); } /* Hovering over an active cell is different, it tries to make the tab look @@ -403,52 +397,52 @@ warning: orange .btn.kb-app-cell-btn.btn-primary.active, .btn.kb-editor-cell-btn.btn-primary.active { - color: white; - background-color: rgb(33, 150, 243); - border: 2px rgb(33, 150, 243) solid; - border-bottom: 6px rgb(33, 150, 243) solid; - margin-bottom: 0; + color: white; + background-color: rgb(33, 150, 243); + border: 2px rgb(33, 150, 243) solid; + border-bottom: 6px rgb(33, 150, 243) solid; + margin-bottom: 0; } .btn.kb-app-cell-btn.btn-primary.active:hover, .btn.kb-editor-cell-btn.btn-primary.active:hover { - color: rgb(33, 150, 243); - background-color: #DDD; - border-bottom: 2px rgb(33, 150, 243) solid; - margin-bottom: 4px; + color: rgb(33, 150, 243); + background-color: #ddd; + border-bottom: 2px rgb(33, 150, 243) solid; + margin-bottom: 4px; } /* DANGER - for error */ .btn.kb-app-cell-btn.btn-danger, .btn.kb-editor-cell-btn.btn-danger { - color: rgb(209, 82, 65); - border: 2px rgb(209, 82, 65) solid; + color: rgb(209, 82, 65); + border: 2px rgb(209, 82, 65) solid; } .btn.kb-app-cell-btn.btn-danger:hover, .btn.kb-editor-cell-btn.btn-danger:hover { - color: #FFF; - background-color: rgb(209, 82, 65); - border-bottom: 6px rgb(209, 82, 65) solid; - margin-bottom: 0; + color: #fff; + background-color: rgb(209, 82, 65); + border-bottom: 6px rgb(209, 82, 65) solid; + margin-bottom: 0; } .btn.kb-app-cell-btn.btn-danger.active, .btn.kb-editor-cell-btn.btn-danger.active { - color: white; - background-color: rgb(209, 82, 65); - border: 2px rgb(209, 82, 65) solid; - border-bottom: 6px rgb(209, 82, 65) solid; - margin-bottom: 0; + color: white; + background-color: rgb(209, 82, 65); + border: 2px rgb(209, 82, 65) solid; + border-bottom: 6px rgb(209, 82, 65) solid; + margin-bottom: 0; } .btn.kb-app-cell-btn.btn-danger.active:hover, .btn.kb-editor-cell-btn.btn-danger.active:hover { - color: rgb(209, 82, 65); - background-color: #DDD; - border-bottom: 2px rgb(209, 82, 65) solid; - margin-bottom: 4px; + color: rgb(209, 82, 65); + background-color: #ddd; + border-bottom: 2px rgb(209, 82, 65) solid; + margin-bottom: 4px; } /* DISABLED is gray border and text */ @@ -458,127 +452,128 @@ warning: orange .btn.kb-editor-cell-btn.disabled, .btn.kb-editor-cell-btn.disabled:hover, .btn.kb-editor-cell-btn.disabled:active { - color: #888; - background-color: #FFF; - border: 2px #888 solid; - margin-bottom: 4px; + color: #888; + background-color: #fff; + border: 2px #888 solid; + margin-bottom: 4px; } /* buttons from editorCell */ -kb-editor-cell .btn-primary.kb-btn-action.-rerun { - color: rgb(33, 150, 243); +.kb-editor-cell .btn-primary.kb-btn-action.-rerun { + color: rgb(33, 150, 243); } .kb-editor-cell .btn-primary.kb-btn-action.-run { - color: rgb(75, 184, 86); + color: rgb(75, 184, 86); } .kb-editor-cell .btn-danger.kb-btn-action.-cancel, .kb-editor-cell .btn-danger.kb-btn-action.-reset { - color: rgb(209, 82, 65); + color: rgb(209, 82, 65); } -/* end editorCell buttons */ +/* end editorCell buttons */ .kb-app-cell [data-element="run-control-panel"], .kb-editor-cell [data-element="run-control-panel"] { - width: 100%; + width: 100%; } .kb-app-cell [data-element="tab-pane"], .kb-editor-cell [data-element="tab-pane"] { - border-top: 2px rgb(33, 150, 243) solid; -} - -.kb-app-cell [data-element="tab-pane"] > div:empty, -.kb-editor-cell [data-element="tab-pane" ] > div:empty { - padding: 0; + border-top: 2px rgb(33, 150, 243) solid; } .kb-app-cell [data-element="tab-pane"] > div, .kb-editor-cell [data-element="tab-pane"] > div { - padding: 4px; + padding: 4px; +} + +.kb-app-cell [data-element="tab-pane"] > div:empty, +.kb-editor-cell [data-element="tab-pane"] > div:empty { + padding: 0; } .kb-app-status-ok { - color: rgb(75, 184, 86); + color: rgb(75, 184, 86); } .kb-app-status-warning { - color: orange; + color: orange; } .kb-app-status-danger, .kb-app-status-error { - color: rgb(209, 82, 65); + color: rgb(209, 82, 65); } .kb-app-status-default { - color: rgb(33, 150, 243); + color: rgb(33, 150, 243); } - /* app cell panels */ + /* TODO: higher level selector */ .parameter-panel .info-panel { - padding-top: 4px; - background: transparent; + padding-top: 4px; + background: transparent; } .tt-input, .tt-query { - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - width: 100%; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + width: 100%; } .tt-hint { - color: #999; + color: #999; } .tt-menu { - /* used to be tt-dropdown-menu in older versions */ - margin-top: 4px; - padding: 4px 0; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.2); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); - -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); - box-shadow: 0 5px 10px rgba(0, 0, 0, .2); - width: 100%; + /* used to be tt-dropdown-menu in older versions */ + margin-top: 4px; + padding: 4px 0; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + width: 100%; } .tt-suggestion { - padding: 3px 20px; - line-height: 24px; + padding: 3px 20px; + line-height: 24px; } .tt-suggestion.tt-cursor, .tt-suggestion:hover { - color: #fff; - background-color: #0097cf; + color: #fff; + background-color: #0097cf; } .tt-suggestion p { - margin: 0; + margin: 0; } .tt-header { - font-size: 75%; - /* this doesn't work, don't want to just turn it on, though: + font-size: 75%; + + /* this doesn't work, don't want to just turn it on, though: font-color : gray; */ - font-style: italic; - padding-left: 5px; + font-style: italic; + padding-left: 5px; } /* from advancedViewCell */ .kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > .panel-collapse > .panel-body { - padding: 0; + padding: 0; } diff --git a/kbase-extension/static/kbase/css/batchMode.css b/kbase-extension/static/kbase/css/batchMode.css index fa85032208..dddf077eb3 100644 --- a/kbase-extension/static/kbase/css/batchMode.css +++ b/kbase-extension/static/kbase/css/batchMode.css @@ -1,22 +1,22 @@ .batch-mode-col { - padding: 5px 10px; - overflow: auto; + padding: 5px 10px; + overflow: auto; } .job-info { - cursor: pointer; + cursor: pointer; } .job-info.job-selected { - background-color: #eee; + background-color: #eee; } .batch-mode-list { - max-height: 860px; - overflow: auto; + max-height: 860px; + overflow: auto; } .batch-input-panel { - max-height: 300px; - overflow: auto; -} \ No newline at end of file + max-height: 300px; + overflow: auto; +} diff --git a/kbase-extension/static/kbase/css/bootstrapHelper.css b/kbase-extension/static/kbase/css/bootstrapHelper.css index 0a437296e9..847d370611 100644 --- a/kbase-extension/static/kbase/css/bootstrapHelper.css +++ b/kbase-extension/static/kbase/css/bootstrapHelper.css @@ -5,35 +5,32 @@ Customize bootstrap styles */ - /* - Bs recommends h4 for the modal title, but this is overridden by the general + Bs recommends h4 for the modal title, but this is overridden by the general purpose kbase h4 style. Generally, I (Erik) do not like using semantic tags in bootstrap anyway, especially header tags which inherently imply a specific document structure which modal dialogs in no way can represent!) */ .modal .modal-title { - font-family: "Oxygen", Arial, sans-serif; - font-size: 130%; - font-weight: bold; - color: #2e618d; + font-family: "Oxygen", Arial, sans-serif; + font-size: 130%; + font-weight: bold; + color: #2e618d; } - /* - Unset the global modal title color set above for alert modals, which + Unset the global modal title color set above for alert modals, which may set the color style based on the alert type. */ .modal.kb-modal-alert .modal-title { - color: unset; + color: unset; } - /* The BS checkbox appears too low, due to the top margin, when used with a label - in the recommended manner. + in the recommended manner. Note: I don't understand why BS handles checkbox styling as they do, turning the checkbox into relatively posiioned and then pushing the label to checkbox to the left and down (at the same time given the container extra margin to @@ -42,77 +39,73 @@ */ .modal input[type="checkbox"] { - margin-top: 1px; + margin-top: 1px; } .panel.kb-panel-light { - border: none; - margin-bottom: 10px; + border: none; + margin-bottom: 10px; } - /* colors copied shamelessly from peeking at bootstrap http://getbootstrap.com/css/ */ .panel-danger.kb-panel-light .panel-title { - color: #a94442; + color: #a94442; } .panel-success.kb-panel-light .panel-title { - color: #3c763d; + color: #3c763d; } .panel-warning.kb-panel-light .panel-title { - color: #8a6d3b; + color: #8a6d3b; } .panel-info.kb-panel-light .panel-title { - color: blue; + color: blue; } -.panel.kb-panel-light>.panel-heading { - background-color: transparent; - font-weight: bold; - color: #666; - padding-left: 0; - padding-bottom: 2px; - border-bottom: 1px #CCC solid; +.panel.kb-panel-light > .panel-heading { + background-color: transparent; + font-weight: bold; + color: #666; + padding-left: 0; + padding-bottom: 2px; + border-bottom: 1px #ccc solid; } .panel.kb-panel-light .panel-body { - padding-top: 0; - padding: 0; + padding: 0; } .panel.kb-panel-container { - border: none; + border: none; } -.panel.kb-panel-container>.panel-heading { - background-color: transparent; - font-weight: bold; - xcolor: #2e618d; - padding-left: 0; - padding-bottom: 2px; - border-bottom: 2px #CCC solid; - margin-bottom: 10px; +.panel.kb-panel-container > .panel-heading { + background-color: transparent; + font-weight: bold; + padding-left: 0; + padding-bottom: 2px; + border-bottom: 2px #ccc solid; + margin-bottom: 10px; } .panel.kb-panel-container .panel-body { - padding-top: 0; + padding-top: 0; } - /* - The button bar in a cell widgetis located at the bottom of the inputs, but + The button bar in a cell widgetis located at the bottom of the inputs, but above any outputs. These styles attempt to help the button toolbar, which represents the actions the user can take, be visually distinct from the other bits surrounding it. */ .btn-toolbar.kb-btn-toolbar-cell-widget { - margin-bottom: 20px; - background-color: #EEE; - padding: 6px; -} \ No newline at end of file + margin-bottom: 20px; + background-color: #eee; + padding: 6px; +} diff --git a/kbase-extension/static/kbase/css/buttons.css b/kbase-extension/static/kbase/css/buttons.css index 7e6db5bd51..6472560e7e 100644 --- a/kbase-extension/static/kbase/css/buttons.css +++ b/kbase-extension/static/kbase/css/buttons.css @@ -2,49 +2,24 @@ /* A flat button, with no unselected background color, but with hover and click styles */ .btn.kb-flat-btn { - background-color: #FFF; - xpadding: 1px 7px; - xfont-size: 24px; - border: none; - text-shadow: none !important; - margin: 0; - /* box-shadow: 0 0 3px #CECECE; */ - xmargin-right: 5px; + background-color: #fff; + border: none; + text-shadow: none !important; + margin: 0; + color: #666; } + .kb-flat-btn-wrapper { /* don't add shadows here */ box-shadow: none; } -/* Set a plain default color -- should be overridden when building the button. */ -.btn.kb-flat-btn { - color: #666; -} - /* Text spacing */ .btn.kb-flat-btn .kb-nav-btn-txt { - font-size: 10pt; - margin-top: -5px; -} - -/* ?? - color nav icons -.navbar-buttons .fa::before { - color: #2196F3; -} -*/ - -.btn.kb-flat-btn:hover { - background-color: #F5F5F5; + font-size: 10pt; + margin-top: -5px; } -/* ?? - restore rounded corners -#kb-ipy-menu { - border-radius: 4px !important; - margin-right: 0; +.btn.kb-flat-btn:hover, +.btn.kb-flat-btn:active { + background-color: #ccc; } -*/ - -.btn.kb-flat-btn:hover, .btn.kb-flat-btn:active { - background-color: #CCC; -} \ No newline at end of file diff --git a/kbase-extension/static/kbase/css/contigBrowserStyles.css b/kbase-extension/static/kbase/css/contigBrowserStyles.css index 367565e50b..196caa3bac 100644 --- a/kbase-extension/static/kbase/css/contigBrowserStyles.css +++ b/kbase-extension/static/kbase/css/contigBrowserStyles.css @@ -1,15 +1,16 @@ -/*------------ Contig browser rules --------------*/ +/* ------------ Contig browser rules -------------- */ + /* * Styling for the tooltip that pops up when a feature is highlighted. */ .kbcb-tooltip { - position: absolute; - z-index: 9999999; - visibility: hidden; - opacity: 0.8; - background-color: #222; - color: #fff; - padding: 0.5em; + position: absolute; + z-index: 9999999; + visibility: hidden; + opacity: 0.8; + background-color: #222; + color: #fff; + padding: 0.5em; } /** @@ -17,14 +18,14 @@ */ .kbcb-widget .kbcb-axis path, .kbcb-widget .kbcb-axis line { - fill: none; - stroke: black; - shape-rendering: crispEdges; + fill: none; + stroke: black; + shape-rendering: crispEdges; } .kbcb-widget .kbcb-axis text { - font-family: sans-serif; - font-size: 11px; + font-family: sans-serif; + font-size: 11px; } /** @@ -37,27 +38,27 @@ * And highlighted features should be colored last (not currently used). */ .kbcb-feature { - stroke: #000; - fill: #f00; + stroke: #000; + fill: #f00; } .kbcb-operon { - fill: #0f0; + fill: #0f0; } .kbcb-center { - fill: #00f; + fill: #00f; } .kbcb-highlight { - fill: #fff; + fill: #fff; } /** * The below controls styling for the (optional) button panel */ .kbcb-buttons { - margin-left: auto; - margin-right: auto; - width: 70%; + margin-left: auto; + margin-right: auto; + width: 70%; } diff --git a/kbase-extension/static/kbase/css/kbaseEditor.css b/kbase-extension/static/kbase/css/kbaseEditor.css index 77b05b3a0b..42fb775e47 100644 --- a/kbase-extension/static/kbase/css/kbaseEditor.css +++ b/kbase-extension/static/kbase/css/kbaseEditor.css @@ -3,26 +3,26 @@ */ .modal-body .dataTables_processing { - border: 1px solid #aaa; - background: #E8F9FF; - opacity: 0.8; + border: 1px solid #aaa; + background: #e8f9ff; + opacity: 0.8; } .kb-editor { - margin: 0 10px; + margin: 0 10px; } .kb-editor .tab-content { - margin: 5px 0 0 0; + margin: 5px 0 0 0; } .kb-editor .controls { - margin: 5px 0px; -} -.kb-editor .controls .btn{ - margin: 0 10px; + margin: 5px 0; } +.kb-editor .controls .btn { + margin: 0 10px; +} /** * Override KBase stylings that override jupyter styling. @@ -31,63 +31,63 @@ /* override button staylings that were removed */ .kb-editor .btn-primary { - background-color: #337ab7 !important; - border-color: #2e6da4 !important; + background-color: #337ab7 !important; + border-color: #2e6da4 !important; } + .kb-editor .btn-danger { - background-color: #d9534f !important; - border-color: #d43f3a !important; + background-color: #d9534f !important; + border-color: #d43f3a !important; } /* override icon stylings in button that were removed */ .kb-editor .btn i { - color: #fff; + color: #fff; } /* override table border styling */ .kb-editor table { - border: 1px solid #bbb; + border: 1px solid #bbb; } - /** * General editor styling */ .kb-editor-table { - width: 100% !important; /* override datatables hackory */ + width: 100% !important; /* override datatables hackory */ } .kb-editor-table > tbody > tr > td:first-child { - width: 1%; /* checkboxes are expected on editable tables */ + width: 1%; /* checkboxes are expected on editable tables */ } .kb-editor-table > tbody > tr > td:first-child .fa-square-o { - font-size: 1.4em; - color: #666; + font-size: 1.4em; + color: #666; } .kb-editor-table > tbody > tr > td:first-child:hover { - cursor: pointer; + cursor: pointer; } .kb-editor-table > tbody > tr > td:first-child:hover .fa-square-o { - color: #000; + color: #000; } -.kb-editor-table > tbody > tr.row-select .fa-square-o:before { - content: "\f046"; - color: #444; +.kb-editor-table > tbody > tr.row-select .fa-square-o::before { + content: "\f046"; + color: #444; } .kb-editor-table > tbody > tr > td.editable { - position: relative; + position: relative; } -.kb-editor-table > tbody > tr > td.editable:hover:after{ - content: "\f044"; - font-family: FontAwesome; - position: absolute; - bottom: 0; - right: 2px; - color: #888; +.kb-editor-table > tbody > tr > td.editable:hover::after { + content: "\f044"; + font-family: FontAwesome; + position: absolute; + bottom: 0; + right: 2px; + color: #888; } diff --git a/kbase-extension/static/kbase/css/kbaseIcons.css b/kbase-extension/static/kbase/css/kbaseIcons.css index ac888c5181..0eb698e127 100644 --- a/kbase-extension/static/kbase/css/kbaseIcons.css +++ b/kbase-extension/static/kbase/css/kbaseIcons.css @@ -2,55 +2,58 @@ @font-face { font-family: "kbase-icons"; - src:url("../fonts/kbase-icons.eot"); - src:url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"), + src: url("../fonts/kbase-icons.eot"); + src: + url("../fonts/kbase-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/kbase-icons.woff") format("woff"), url("../fonts/kbase-icons.ttf") format("truetype"), url("../fonts/kbase-icons.svg#kbase-icons") format("svg"); font-weight: normal; font-style: normal; - } -[data-icon]:before { +[data-icon]::before { font-family: "kbase-icons" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; - speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -[class^="icon-"]:before, -[class*=" icon-"]:before { +[class^="icon-"]::before, +[class*=" icon-"]::before { font-family: "kbase-icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; - speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.icon-compare:before { +.icon-compare::before { content: "a"; } -.icon-genome:before { + +.icon-genome::before { content: "b"; } -.icon-metabolism:before { + +.icon-metabolism::before { content: "c"; } -.icon-metagenome:before { + +.icon-metagenome::before { content: "d"; } -.icon-reads:before { + +.icon-reads::before { content: "e"; } -.icon-tree:before { + +.icon-tree::before { content: "f"; } diff --git a/kbase-extension/static/kbase/css/kbaseJobLog.css b/kbase-extension/static/kbase/css/kbaseJobLog.css index e217362f96..add087e3a9 100644 --- a/kbase-extension/static/kbase/css/kbaseJobLog.css +++ b/kbase-extension/static/kbase/css/kbaseJobLog.css @@ -1,75 +1,70 @@ #kblog-header { - margin: 5px 0 5px 0; + margin: 5px 0 5px 0; } #kblog-panel { - background-color: #F5F5F5; - border: 1px solid #CECECE; - height: 350px; - padding: 5px; - resize: vertical; - overflow: auto; - color: #000; - vertical-align: top; + background-color: #f5f5f5; + border: 1px solid #cecece; + height: 350px; + padding: 5px; + resize: vertical; + overflow: auto; + color: #000; + vertical-align: top; } .kblog-header { - display: flex; - font-family: monospace; + display: flex; + font-family: monospace; } .kblog-line { - font-family: monospace; + font-family: monospace; } .kblog-line:hover { - background-color: #DDD; + background-color: #ddd; } .kblog-num-wrapper { - font-size: 85%; - display: flex; - flex-direction: row; + font-size: 85%; + display: flex; + flex-direction: row; } .kblog-line-num { - flex-shrink: 0; - width: 3rem; - text-align: right; - color: #999; - white-space: nowrap; + flex-shrink: 0; + width: 3rem; + text-align: right; + color: #999; + white-space: nowrap; - /* makes text unselectabe */ - -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - user-select: none; + /* makes text unselectabe */ + -moz-user-select: -moz-none; + -ms-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + user-select: none; } .kblog-text { - word-wrap: break-word; - overflow-wrap: break-word; - flex: 1; - margin-left: 6px; + word-wrap: break-word; + overflow-wrap: break-word; + flex: 1; + margin-left: 6px; } -.kb-error, .kb-error .kblog-line-num { - color: darkred; - text-decoration: underline; - text-decoration-style: solid; - text-decoration-color: red; - font-weight: bold; - font-size: 12px; - background-color: rgb(255, 245, 245); - -} - -#kblog-msg { - margin-top: 5px; +.kb-error, +.kb-error .kblog-line-num { + color: darkred; + text-decoration: underline; + font-weight: bold; + font-size: 12px; + background-color: rgb(255, 245, 245); } +#kblog-msg, #kblog-err { - margin-top: 5px; - /* color: #660000; */ + margin-top: 5px; } diff --git a/kbase-extension/static/kbase/css/kbaseNotify.css b/kbase-extension/static/kbase/css/kbaseNotify.css index b798fb341c..4c01e03f91 100644 --- a/kbase-extension/static/kbase/css/kbaseNotify.css +++ b/kbase-extension/static/kbase/css/kbaseNotify.css @@ -1,14 +1,13 @@ - .kb-notify { - position: relative; - bottom: 10px; - width: 300px; - padding: 15px; - color: #fff; - background-color: #000; - opacity: 0.8; + position: relative; + bottom: 10px; + width: 300px; + padding: 15px; + color: #fff; + background-color: #000; + opacity: 0.8; } .kb-notify.kb-notify-success { - color: #00CC09; + color: #00cc09; } diff --git a/kbase-extension/static/kbase/css/kbaseStylesheet.css b/kbase-extension/static/kbase/css/kbaseStylesheet.css index a17f0a7210..2809bb2036 100644 --- a/kbase-extension/static/kbase/css/kbaseStylesheet.css +++ b/kbase-extension/static/kbase/css/kbaseStylesheet.css @@ -1,146 +1,168 @@ @font-face { - font-family: 'Oxygen'; - src: url('../fonts/Oxygen-webfont.eot'); - src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-webfont.woff') format('woff'), - url('../fonts/Oxygen-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'Oxygen'; + src: url('../fonts/Oxygen-webfont.eot'); + src: + url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-webfont.woff') format('woff'), + url('../fonts/Oxygen-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'Oxygen'; - src: url('../fonts/Oxygen-Bold-webfont.eot'); - src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-Bold-webfont.woff') format('woff'), - url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg'); - font-weight: bold; - font-style: normal; + font-family: 'Oxygen'; + src: url('../fonts/Oxygen-Bold-webfont.eot'); + src: + url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-Bold-webfont.woff') format('woff'), + url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg'); + font-weight: bold; + font-style: normal; } @font-face { - font-family: 'Oxygen'; - src: url('../fonts/Oxygen-Italic-webfont.eot'); - src: url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-Italic-webfont.woff') format('woff'), - url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg'); - font-weight: normal; - font-style: italic; + font-family: 'Oxygen'; + src: url('../fonts/Oxygen-Italic-webfont.eot'); + src: + url('../fonts/Oxygen-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-Italic-webfont.woff') format('woff'), + url('../fonts/Oxygen-Italic-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-Italic-webfont.svg#OxygenItalic') format('svg'); + font-weight: normal; + font-style: italic; } @font-face { - font-family: 'Oxygen'; - src: url('../fonts/Oxygen-BoldItalic-webfont.eot'); - src: url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'), - url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg'); - font-weight: bold; - font-style: italic; + font-family: 'Oxygen'; + src: url('../fonts/Oxygen-BoldItalic-webfont.eot'); + src: + url('../fonts/Oxygen-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-BoldItalic-webfont.woff') format('woff'), + url('../fonts/Oxygen-BoldItalic-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-BoldItalic-webfont.svg#OxygenBoldItalic') format('svg'); + font-weight: bold; + font-style: italic; } @font-face { - font-family: 'OxygenMono'; - src: url('../fonts/OxygenMono-Regular-webfont.eot'); - src: url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'), - url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'), - url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'OxygenMono'; + src: url('../fonts/OxygenMono-Regular-webfont.eot'); + src: + url('../fonts/OxygenMono-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/OxygenMono-Regular-webfont.woff') format('woff'), + url('../fonts/OxygenMono-Regular-webfont.ttf') format('truetype'), + url('../fonts/OxygenMono-Regular-webfont.svg#OxygenMonoRegular') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'OxygenRegular'; - src: url('../fonts/Oxygen-webfont.eot'); - src: url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-webfont.woff') format('woff'), - url('../fonts/Oxygen-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg'); - font-weight: normal; - font-style: normal; - -} + font-family: 'OxygenRegular'; + src: url('../fonts/Oxygen-webfont.eot'); + src: + url('../fonts/Oxygen-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-webfont.woff') format('woff'), + url('../fonts/Oxygen-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-webfont.svg#OxygenRegular') format('svg'); + font-weight: normal; + font-style: normal; +} @font-face { - font-family: 'OxygenBold'; - src: url('../fonts/Oxygen-Bold-webfont.eot'); - src: url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Oxygen-Bold-webfont.woff') format('woff'), - url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'), - url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg'); - font-weight: normal; - font-style: normal; - + font-family: 'OxygenBold'; + src: url('../fonts/Oxygen-Bold-webfont.eot'); + src: + url('../fonts/Oxygen-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Oxygen-Bold-webfont.woff') format('woff'), + url('../fonts/Oxygen-Bold-webfont.ttf') format('truetype'), + url('../fonts/Oxygen-Bold-webfont.svg#OxygenBold') format('svg'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'RobotoBlack'; - src: url('../fonts/Roboto-Black-webfont.eot'); - src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Roboto-Black-webfont.woff') format('woff'), - url('../fonts/Roboto-Black-webfont.ttf') format('truetype'), - url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg'); - font-weight: normal; - font-style: normal; - + font-family: 'RobotoBlack'; + src: url('../fonts/Roboto-Black-webfont.eot'); + src: + url('../fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/Roboto-Black-webfont.woff') format('woff'), + url('../fonts/Roboto-Black-webfont.ttf') format('truetype'), + url('../fonts/Roboto-Black-webfont.svg#RobotoBlack') format('svg'); + font-weight: normal; + font-style: normal; } h1 { - font: 1.75em/2em 'RobotoBlack', Arial, sans-serif; - letter-spacing: 0; - color: #232323; - font-weight: normal; - } + font: 1.75em/2em 'RobotoBlack', Arial, sans-serif; + letter-spacing: 0; + color: #232323; + font-weight: normal; +} + h2 { - font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #898989; - letter-spacing: 0; - } + font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif; + font-weight: normal; + color: #898989; + letter-spacing: 0; +} + h3 { - font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif; - letter-spacing: 0; - font-weight: normal; - } + font: 1.15em/1.25em 'RobotoBlack', Arial, sans-serif; + letter-spacing: 0; + font-weight: normal; +} + h4 { - font: 1.15em/1.25em 'Oxygen', Arial, sans-serif; - font-style: italic; - letter-spacing: .07em; - } + font: 1.15em/1.25em 'Oxygen', Arial, sans-serif; + font-style: italic; + letter-spacing: 0.07em; +} + body { - font: 1.375em 'Oxygen', Arial, sans-serif; - color: #333333; - background-color: #fff; - } -strong, b { - font-family: 'Oxygen'; - font-weight: bold; - } -em, i { - font-family: 'Oxygen'; - font-style: italic; - } -strong em, em strong, b i, i b{ - font-family: 'Oxygen'; - font-style: italic; - font-weight: bold; - } + font: 1.375em 'Oxygen', Arial, sans-serif; + color: #333; + background-color: #fff; +} + +strong, +b { + font-family: 'Oxygen', Arial, sans-serif; + font-weight: bold; +} + +em, +i { + font-family: 'Oxygen', Arial, sans-serif; + font-style: italic; +} + +strong em, +em strong, +b i, +i b { + font-family: 'Oxygen', Arial, sans-serif; + font-style: italic; + font-weight: bold; +} + a { - color: #0088cc; - text-decoration: none; - } + color: #08c; + text-decoration: none; +} + a:visited { - color: #2a6496; - } -a:hover { - text-decoration: underline; - color: #2a6496; - } -pre, code { - font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace; - font-style: normal; - } + color: #2a6496; +} + +a:hover { + text-decoration: underline; + color: #2a6496; +} + +pre, +code { + font-family: 'OxygenMono', "Lucida Console", "Lucida Sans Typewriter", monospace; + font-style: normal; +} diff --git a/kbase-extension/static/kbase/css/kbaseTour.css b/kbase-extension/static/kbase/css/kbaseTour.css index 33005d48c7..655440faef 100644 --- a/kbase-extension/static/kbase/css/kbaseTour.css +++ b/kbase-extension/static/kbase/css/kbaseTour.css @@ -1,41 +1,40 @@ .kb-tour { - background-color: #2196f3; + background-color: #2196f3; } -.kb-tour.popover.top > .arrow:after { - border-top-color: #2196f3; +.kb-tour.popover.top > .arrow::after { + border-top-color: #2196f3; } -.kb-tour.popover.bottom > .arrow:after { - border-bottom-color: #2196f3; +.kb-tour.popover.bottom > .arrow::after { + border-bottom-color: #2196f3; } -.kb-tour.popover.right > .arrow:after { - border-right-color: #2196f3; +.kb-tour.popover.right > .arrow::after { + border-right-color: #2196f3; } -.kb-tour.popover.left > .arrow:after { - border-left-color: #2196f3; +.kb-tour.popover.left > .arrow::after { + border-left-color: #2196f3; } - -.kb-tour > h3.popover-title { - background-color: #2196f3; - color: #fff; - font-family: Oxygen, Arial, sans-serif; - font-size: 12pt; +.kb-tour > .popover-title { + background-color: #2196f3; + color: #fff; + font-family: Oxygen, Arial, sans-serif; + font-size: 12pt; } .kb-tour > .popover-content { - background-color: #eee; + background-color: #eee; } .kb-tour > .popover-navigation { - background-color: #eee; + background-color: #eee; } .kb-tour > .close-btn { - position: absolute; - top: 7px; - right: 7px -} \ No newline at end of file + position: absolute; + top: 7px; + right: 7px; +} diff --git a/kbase-extension/static/kbase/css/landing-pages.css b/kbase-extension/static/kbase/css/landing-pages.css index 778a5c0007..b2793fcf28 100644 --- a/kbase-extension/static/kbase/css/landing-pages.css +++ b/kbase-extension/static/kbase/css/landing-pages.css @@ -1,519 +1,469 @@ - - - -/* KBase navigation bar */ -.navbar-kbase { - background-color: #fff; - border-bottom: 1px solid #E0E0E0; - -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1); - box-shadow: 0 1px 10px rgba(0,0,0,.1); -} -.nav > li > a:hover, .nav > li > a:focus { - text-decoration: none; - /*background-color: #fff !important;*/ -} - -/* END KBase navigation bar */ - - .app-icon:hover { - opacity: 0.9; - text-decoration: none; + opacity: 0.9; + text-decoration: none; } - #kbase-search-box { - width: 300px; + width: 300px; } - #signin-button { - /*margin: 15px 7px 0 0;*/ - display: inline-block; - padding: 0 15px 0 0; + display: inline-block; + padding: 0 15px 0 0; } -#signin-button a { - +/* bootstrap overrides */ +.wrapper { + width: 95%; + margin-left: auto; + margin-right: auto; } - -/* bootstrap overrides */ -.wrapper { width: 95%; margin-left: auto; margin-right: auto; } /* end bootstrap overrides */ - -#core-model { - overflow-x: auto; +#core-model { + overflow-x: auto; } #logo { - margin: 2px 10px 0 10px; + margin: 2px 10px 0 10px; } - -table { - font-size: 14px !important; +table { + font-size: 14px !important; } .media-info-modal { - width: 800px; + width: 800px; } #selected-workspace { - margin: 17px 14px 15px 0px; + margin: 17px 14px 15px 0; } .tab-view { - margin: 10px 0 0 0; + margin: 10px 0 0 0; } - - /* mv */ .search-query { - width: 100%; - margin: 0 0 5px 0; + width: 100%; + margin: 0 0 5px 0; } .caret-up { - display: inline-block; - width: 0px; - height: 0px; - margin-left: 2px; - vertical-align: middle; - border-top: none; - border-bottom: 4px solid #FFFFFF; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - border-top-width: 0px; - border-top-style: dotted; - content: ""; + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: none; + border-bottom: 4px solid #fff; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + border-top-width: 0; + border-top-style: dotted; + content: ""; } .scroll-pane { - height: 200px; - overflow-y: scroll; - overflow-x: hi; + height: 200px; + overflow-y: scroll; + overflow-x: hi; } - -#select-box tr td{ - padding: 6px; +#select-box tr td { + padding: 6px; } -/*#select-box tr :hover { - background-color: #eee; -}*/ - .selected-ws { - background-color: #428bca; - color: #fff; + background-color: #428bca; + color: #fff; } .selected-ws:hover { /* fixme */ - background-color: #428bca !important; + background-color: #428bca !important; } - .side-bar-switch { - margin: 0 0 10px 0; + margin: 0 0 10px 0; } + .side-bar-switch li { - font-size: 12px; + font-size: 12px; } + .side-bar-switch li a { - padding: 5px 10px; + padding: 5px 10px; } .selected-obj-alert { - margin-bottom: 5px; /* override */ - padding-top: 10px; - padding-bottom: 10px; + margin-bottom: 5px; /* override */ + padding-top: 10px; + padding-bottom: 10px; } .heatmap-view { - overflow-x: scroll; + overflow-x: scroll; } -/*div::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -div::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); - border-radius: 10px; - background: #ddd; -} - -div::-webkit-scrollbar-thumb { - border-radius: 10px; - background: #666; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -}*/ - - /* ws browser */ -.ws-selector{ - margin: 10px 0 0 0; +.ws-selector { + margin: 10px 0 0 0; } .ws-selector.btn-ws-settings { - position: absolute; - right: 30px; + position: absolute; + right: 30px; } .object-view { - margin: 10px 0 0 0; + margin: 10px 0 0 0; } .select-ws .badge { - margin: 0 4px 0 0 ; + margin: 0 4px 0 0; } + .select-ws .btn-ws-settings { - padding: 0px 5px; + padding: 0 5px; } .modal-alert { - margin: 10px 15px 0px 15px; - padding: 8px 15px; - + margin: 10px 15px 0 15px; + padding: 8px 15px; } .modal-cover { - position: absolute; - z-index: 10; + position: absolute; + z-index: 10; } .modal-cover-table { - display: table; - position: static; - width: 100%; - height: 100%; + display: table; + position: static; + width: 100%; + height: 100%; } .modal-cover-cell { - display: table-cell; - vertical-align: middle; - position: static; + display: table-cell; + vertical-align: middle; + position: static; } - .modal-cover-box { - display: inline-block; - padding: 5px 15px; - margin: 10px; - -moz-box-shadow: 7px 7px 5px #888; - -webkit-box-shadow: 7px 7px 5px #888; - box-shadow: 7px 7px 5px #888; - /*background: #95C07C; */ + display: inline-block; + padding: 5px 15px; + margin: 10px; + -moz-box-shadow: 7px 7px 5px #888; + -webkit-box-shadow: 7px 7px 5px #888; + box-shadow: 7px 7px 5px #888; } .modal-cover-content { - padding: 5px; - background: white; - border: 1px solid #666; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + padding: 5px; + background: white; + border: 1px solid #666; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } - .obj-table .dataTables_length label { - margin: 7px 0 0 0; + margin: 7px 0 0 0; } .dataTables_info { - margin: 0 10px 0 0; + margin: 0 10px 0 0; } -.dataTables_length, .dataTables_info { - float: left; + +.dataTables_length, +.dataTables_info { + float: left; } + .ellipsis { - white-space: nowrap; - text-overflow: ellipsis; - max-width: 170px; - display: inline-block; - overflow: hidden + white-space: nowrap; + text-overflow: ellipsis; + max-width: 170px; + display: inline-block; + overflow: hidden; } .ws-descript { - white-space: nowrap; - text-overflow: ellipsis; - max-width: 400px; - overflow: hidden; - display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 400px; + overflow: hidden; + display: inline-block; } - - /* custom checkboxes (prototyped) */ .ncheck { - width: 15px; - height: 15px; - border: 1px solid #ccc ; - margin-left: auto; - margin-right: auto; + width: 15px; + height: 15px; + border: 1px solid #ccc; + margin-left: auto; + margin-right: auto; } + .ncheck:hover { - border: 1px solid #444 ; + border: 1px solid #444; } + .ncheck-btn { - width: 15px; - height: 15px; - border: 1px solid #888 ; - margin: 4px 0px 4px -1px; + width: 15px; + height: 15px; + border: 1px solid #888; + margin: 4px 0 4px -1px; } + .ncheck-btn:hover { - border: 1px solid #444 ; + border: 1px solid #444; } + .ncheck-checked { - background: url(../img/checkmark.png) no-repeat -5px -4px; - background-image: -webkit-image-set(url(../img/checkmark.png) 1x,url(../img/checkmark_2x.png) 2x); + background: url(../img/checkmark.png) no-repeat -5px -4px; + background-image: -webkit-image-set(url(../img/checkmark.png) 1x, url(../img/checkmark_2x.png) 2x); } + .ncheck-minus { - background: url(../img/checkmark-partial.png) no-repeat -5px -5px; - background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x,url(../img/checkmark-partial_2x.png) 2x); + background: url(../img/checkmark-partial.png) no-repeat -5px -5px; + background-image: -webkit-image-set(url(../img/checkmark-partial.png) 1x, url(../img/checkmark-partial_2x.png) 2x); } .btn-select-all { - height: 34px; - margin: 0 20px 0 0; + height: 34px; + margin: 0 20px 0 0; } .type-filter { - margin: 0 20px 0 0; + margin: 0 20px 0 0; } -.btn-trash { - margin: 3px 20px 0 0; +.btn-trash { + margin: 3px 20px 0 0; } - -.btn-show-info .glyphicon{ - padding: 0px 0px 4px 0px; +.btn-show-info .glyphicon { + padding: 0 0 4px 0; } - .open-obj { - margin: 7px 0 0 20px; + margin: 7px 0 0 20px; } - - /****************** narrative ***************/ - #login-form { - margin: 70px 0 0 0; + margin: 70px 0 0 0; } #narrative-nav, .recent-narratives, .recent-projects { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } .group-item-expander { - background: #f2f2f2; /*#d6eaff;*/ + background: #f2f2f2; /* #d6eaff; */ } .group-item-expander:hover { - cursor: hand; - cursor: pointer; + cursor: hand; + cursor: pointer; } - .btn-new-narrative { - margin: 0 20px 0 0; + margin: 0 20px 0 0; } + .btn-delete-narrative { - cursor: hand; - cursor: pointer; + cursor: hand; + cursor: pointer; } + .btn-delete-narrative:hover { - opacity: 0.7; + opacity: 0.7; } + /* changing z index for datatable fixed header */ .navbar-fixed-top { - z-index: 500; + z-index: 500; } -.FixedHeader_Header { - background: #fff; - margin: -6px 0 0px 0; - height: 44px; +.FixedHeader_Header { + background: #fff; + margin: -6px 0 0 0; + height: 44px; } .narrative-sidebar li { - list-style: none; + list-style: none; } @media (min-width: 960px) { - .narrative-sidebar { - position:fixed; - width: 20%; - /*float:left;*/ - } -} + .narrative-sidebar { + position: fixed; + width: 20%; + /* float:left; */ + } +} .sidebar-header { - font-size: 14px; - color: #898989; - font-family: 'RobotoBlack', Arial, sans-serif; - letter-spacing: 0; - font-weight: normal; + font-size: 14px; + color: #898989; + font-family: 'RobotoBlack', Arial, sans-serif; + letter-spacing: 0; + font-weight: normal; } - .view-header { - font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #898989; - letter-spacing: 0; + font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif; + font-weight: normal; + color: #898989; + letter-spacing: 0; } -.view-header { - font: 1.5em/1.75em 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #898989; - letter-spacing: 0; +.btn-narr { + background-color: #f2f2f2; + text-align: left; + padding-left: 20px; + padding-right: 20px; + border: 1px solid #dbdbdb; + color: #6da8cf; + font-family: 'RobotoBlack', Arial, sans-serif; + font-size: 14px; } - .active .btn-narr { - background-color: #BBE8F9; - text-align: left; - padding-left: 20px; - padding-right: 20px; - /*border: 1px solid #A5D4E1;*/ - border: 1px solid #428bca; - font-family: OxygenBold; - font-size: 14px; -} + background-color: #bbe8f9; + border: 1px solid #428bca; -.btn-narr { - background-color: #f2f2f2; - text-align: left; - padding-left: 20px; - padding-right: 20px; - border: 1px solid #DBDBDB; - color: #6DA8CF; - font-family: 'RobotoBlack', Arial, sans-serif; - font-size: 14px; + /* FIXME: why does the font change here?! */ + font-family: OxygenBold; } .nav-sidebar { - top: 70px; + top: 70px; } .nav-sidebar li { - list-style: none; - margin-bottom: 10px; - text-align: left; - font-family: 'RobotoBlack', Arial, sans-serif; + list-style: none; + margin-bottom: 10px; + text-align: left; + font-family: 'RobotoBlack', Arial, sans-serif; } .nav-sidebar > li > a { - padding: 7px 15px; + padding: 7px 15px; } - .navbar-nav { - color: #6DA8CF; - font-family: 'RobotoBlack', Arial, sans-serif; + color: #6da8cf; + font-family: 'RobotoBlack', Arial, sans-serif; } .navbar-nav > li > a:hover { - background-color: #fff; + background-color: #fff; } -.navbar-nav > li.active > a , +.navbar-nav > li.active > a, .navbar-nav > li.active:hover { - color: #2a6496 !important; - box-sizing:border-box; - -moz-box-sizing:border-box; - -webkit-box-sizing:border-box; - height: 50px; - border-bottom: 4px solid #428bca ; + color: #2a6496 !important; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + height: 50px; + border-bottom: 4px solid #428bca; } + .navbar-nav > .active:hover { - color: #2a6496; + color: #2a6496; +} + +/* KBase navigation bar */ +.navbar-kbase { + background-color: #fff; + border-bottom: 1px solid #e0e0e0; + -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); +} + +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; } +/* END KBase navigation bar */ + #wrap { min-height: 100%; height: auto; + /* Negative indent footer by its height */ margin: 0 auto -58px; + /* Pad bottom by footer height */ padding: 0 0 80px; } + /* for the footer */ #footer { - /* margin-top: 60px; - position: relative; - bottom: 0px; */ - height: 58px; + height: 58px; } #footer ul { - text-align: center; + text-align: center; } #footer ul li { - display: inline; - padding: 7px 5px 5px 1px; - + display: inline; + padding: 7px 5px 5px 1px; } -#footer ul li:after { - content: "\2022"; - padding-left: 10px; - color: #bbb; - font-size: 10px; +#footer ul li::after { + content: "\2022"; + padding-left: 10px; + color: #bbb; + font-size: 10px; } -#footer ul li:last-child:after, #footer ul li:nth-last-child(2):after { - content: ""; +#footer ul li:last-child::after, +#footer ul li:nth-last-child(2)::after { + content: ""; } #footer img { - position: relative; - top: -3px; + position: relative; + top: -3px; } #footer .disclaimer { - /*background-color: #f2dede; - border-top: 1px solid #ebccd1; - color: #a94442;*/ - background-color: #a94442; - color: #fff; - display: block; - text-align: center; - font-weight: bold; - position: fixed; - bottom: 0; - width: 100%; + background-color: #a94442; + color: #fff; + display: block; + text-align: center; + font-weight: bold; + position: fixed; + bottom: 0; + width: 100%; } .KBSnode rect { - cursor: pointer; - fill: #fff; - fill-opacity: .5; - stroke: #3182bd; - stroke-width: 1.5px; + cursor: pointer; + fill: #fff; + fill-opacity: 0.5; + stroke: #3182bd; + stroke-width: 1.5px; } .KBSnode text { - font: 80% sans-serif; - pointer-events: none; + font: 80% sans-serif; + pointer-events: none; } - - - diff --git a/kbase-extension/static/kbase/css/methodCell.css b/kbase-extension/static/kbase/css/methodCell.css index 4744a5ed6b..f5bddbd8a8 100644 --- a/kbase-extension/static/kbase/css/methodCell.css +++ b/kbase-extension/static/kbase/css/methodCell.css @@ -1,15 +1,15 @@ .kb-method-cell select.form-control { - margin: 0; + margin: 0; } .twitter-typeahead { - width: 100%; + width: 100%; } .code_cell div.input_area { - display: none; + display: none; } .code_cell div.input_area.-show { - display: block; -} \ No newline at end of file + display: block; +} diff --git a/kbase-extension/static/kbase/css/widgets.css b/kbase-extension/static/kbase/css/widgets.css index 0294412173..2682c29364 100644 --- a/kbase-extension/static/kbase/css/widgets.css +++ b/kbase-extension/static/kbase/css/widgets.css @@ -1,16 +1,16 @@ /* tab.js */ .nav-tabs .glyphicon-remove { - margin: 0 0 0 3px; - color: #aaa; + margin: 0 0 0 3px; + color: #aaa; } .nav-tabs .glyphicon-remove:hover { - color: #666; - cursor: hand; - cursor: pointer; + color: #666; + cursor: hand; + cursor: pointer; } .twitter-typeahead { - width: 100%; -} \ No newline at end of file + width: 100%; +} diff --git a/kbase-extension/static/kbase/custom/custom.css b/kbase-extension/static/kbase/custom/custom.css index 6e1d1362cd..332509350d 100644 --- a/kbase-extension/static/kbase/custom/custom.css +++ b/kbase-extension/static/kbase/custom/custom.css @@ -6,352 +6,297 @@ CSS should go in /kbase-extension/static/kbase/css/kbaseNarrative.css */ @font-face { font-family: 'Glyphicons Halflings'; - src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot'); src: url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../ext_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .select2-container--default .select2-results__option--highlighted[aria-selected] { - background-color: #337ab7; - color: #FFF; + background-color: #337ab7; + color: #fff; } .select2-container--default .select2-results__option--highlighted[aria-selected] span { - color: #FFF !important; + color: #fff !important; } #site { - overflow: visible; + overflow: visible; } - /* disable the standard notebook, bottom spacer */ -#notebook>.end_space { - min-height: 0; - height: 0; +#notebook > .end_space { + min-height: 0; + height: 0; } @media (min-width: 1200px) { - #notebook-container { - width: auto; - } + #notebook-container { + width: auto; + } } @media (min-width: 992px) { - #notebook-container { - width: auto; - } + #notebook-container { + width: auto; + } } @media (min-width: 768px) { - #notebook-container { - width: auto; - } + #notebook-container { + width: auto; + } } .notebook_app { - overflow-y: hidden; - background-color: #FFFFFF; + overflow-y: hidden; + background-color: #fff; } - -/* .btn * { color: black; } */ - .celltoolbar { - height: auto; - background: none; - border: none; - border-left: 1px solid transparent; - padding-top: 0; - padding-bottom: 2px; + height: auto; + background: none; + border: none; + border-left: 1px solid transparent; + padding-top: 0; + padding-bottom: 2px; } -div.input_area { - border: 1px solid #CECECE; - border-radius: 0px; - /* a little padding to match the prompt */ - padding-top: 4px; +.input_area { + border: 1px solid #cecece; + border-radius: 0; + + /* a little padding to match the prompt */ + padding-top: 4px; } -div.output_subarea { - max-width: inherit; +.output_subarea { + max-width: inherit; } -div.text_cell_input { - border: 1px solid #CECECE; - border-radius: 0px; +.text_cell_input { + border: 1px solid #cecece; + border-radius: 0; } div.cell { - margin: 8px 0 8px 0px; - padding: 0; - border: 1px solid #CCC; - border-left: 5px solid #CCC; - border-radius: 0; + margin: 8px 0 8px 0; + padding: 0; + border: 1px solid #ccc; + border-left: 5px solid #ccc; + border-radius: 0; } div.cell.selected { - margin-left: 0; - border: 1px solid #4BB856; - border-left: 5px solid #4BB856; - padding-left: 0px; - background-color: #E8EFFF; - background: none; - transition: box-shadow 0.2s ease-in-out; - -moz-transition: box-shadow 0.2s ease-in-out; - -webkit-transition: box-shadow 0.2s ease-in-out; - box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa; - -moz-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa; - -webkit-box-shadow: 0px 1px 2px #aaa, 0 5px 5px #aaa; + margin-left: 0; + border: 1px solid #4bb856; + border-left: 5px solid #4bb856; + padding-left: 0; + background: none; + -webkit-transition: box-shadow 0.2s ease-in-out; + -moz-transition: box-shadow 0.2s ease-in-out; + -o-transition: box-shadow 0.2s ease-in-out; + transition: box-shadow 0.2s ease-in-out; + -webkit-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa; + -moz-box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa; + box-shadow: 0 1px 2px #aaa, 0 5px 5px #aaa; } -div.cell.selected:before { - background: none; +div.cell.selected::before { + background: none; } div.cell.opened { - padding-top: 0px; + padding-top: 0; } .edit_mode div.cell.selected { - border-left: 5px solid #66BB6A; - background: none; - padding-left: 0px; + border-left: 5px solid #66bb6a; + background: none; + padding-left: 0; } div.cell.selected.kb-error { - border: 1px solid #d9534f; - border-left: 5px solid #d9534f; + border: 1px solid #d9534f; + border-left: 5px solid #d9534f; } -div#notebook { - padding: 0; +#notebook { + padding: 0; } -span#notebook_name { - color: #006698; +#notebook_name { + color: #006698; } -span#notebook_name:hover { - cursor: pointer; - background-color: #e0e0e0; -} - -.prompt { - min-width: 10ex; - padding-top: 10px; +#notebook_name:hover { + cursor: pointer; + background-color: #e0e0e0; } #notebook-container { - box-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - width: auto; - min-width: 460px; - position: fixed; - left: 380px; - top: 70px; - right: 0; - bottom: 0; - overflow: auto; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + width: auto; + min-width: 460px; + position: fixed; + left: 380px; + top: 70px; + right: 0; + bottom: 0; + overflow: auto; } -#notebook-container:after{ - content: ""; - height: 100px; - display:block; + +#notebook-container::after { + content: ""; + height: 100px; + display: block; } +.prompt { + display: none !important; +} /* margin left doesn't really seeem to play well */ .btn-toolbar { - margin-left: 0; - padding-left: -5px; + margin-left: 0; + padding-left: 0; } .kb-narr-side-panel .btn-group .btn { - padding: 3px 4px 3px 4px; - font-size: 16px; + padding: 3px 4px 3px 4px; + font-size: 16px; } .btn-subtle { - color: #888; - margin: 0px + color: #888; + margin: 0; } .btn-subtle .fa { - color: #888; + color: #888; } .btn-subtle .fa::before { - color: #888; + color: #888; } .notebook_app .btn.active { - box-shadow: none; -} - - -/* Fooling around with the narrative cells */ - -.notebook_app .inner_cell { - overflow: visible; -} - -.notebook_app .celltoolbar>.button_container { - flex: 0 auto; -} - -.notebook_app .celltoolbar>.button_container:nth-child(1) { - flex: auto; + box-shadow: none; } -.notebook_app .celltoolbar_container { - border-bottom: 1px silver solid; +.kb-btn-icon { + display: inline-block; + padding: 4px; } -.notebook_app .prompt { - padding-top: 0px; - color: silver; - width: 75px; +.kb-btn-icon .fa { + opacity: 0.5; } -.notebook_app .cell.unselected div.text_cell_render { - border: 1px solid transparent; +.kb-btn-icon:hover .fa { + opacity: 1; } -.notebook_app .cell.selected div.text_cell_render { - border: 1px solid transparent; -} +/* Fooling around with the narrative cells */ -.notebook_app .buttons .dropdown-menu { - height: auto !important; - overflow: visible !important; +.notebook_app .inner_cell { + overflow: visible; } -.notebook_app .btn.disabled .fa { - color: silver; +.notebook_app .celltoolbar > .button_container { + flex: 0 auto; } -.text_cell.kb-cell .rendered_html table { - border: 1px solid #ddd; +.notebook_app .celltoolbar > .button_container:nth-child(1) { + flex: auto; } -.text_cell.kb-cell .rendered_html ul { - margin: 0; +.notebook_app .celltoolbar_container { + border-bottom: 1px silver solid; } -.text_cell.opened.rendered.kb-cell .rendered_html { - padding: 0; - border: 0; +.notebook_app .cell.unselected .text_cell_render { + border: 1px solid transparent; } -.text_cell.opened.rendered.selected.kb-cell .rendered_html { - border-left: 1px solid #4BB856; +.notebook_app .cell.selected .text_cell_render { + border: 1px solid transparent; } -.text_cell.opened.rendered.selected.kb-cell.kb-error .rendered_html { - border-left: 1px solid #d9534f; +.notebook_app .buttons .dropdown-menu { + height: auto !important; + overflow: visible !important; } -.text_cell.opened.rendered.kb-cell { - padding-bottom: 0; +.notebook_app .btn.disabled .fa { + color: silver; } .rendered_html tr, .rendered_html th, .rendered_html td { - text-align: inherit; + text-align: inherit; } .rendered_html table { - table-layout: inherit; -} - -/* narrative cell icons */ - -.cell.selected .prompt .method-icon { - color: rgb(103, 58, 183); -} - -.cell.selected .prompt .app-icon { - color: rgb(0, 150, 136); + table-layout: inherit; } -.cell.selected .prompt .markdown-icon { - color: #000; -} - -.cell.selected .prompt .app-output-icon { - color: #000; +.text_cell.kb-cell .rendered_html table { + border: 1px solid #ddd; } -.cell.selected .prompt .method-output-icon { - color: #000; +.text_cell.kb-cell .rendered_html ul { + margin: 0; } -.cell.selected .prompt .data-viewer-icon { - color: #000; +.text_cell.kb-cell.opened.rendered .rendered_html { + padding: 0; + border: 0; } -.cell.selected .prompt .error-icon { - color: red; +.text_cell.kb-cell.opened.rendered.selected .rendered_html { + border-left: 1px solid #4bb856; } -.cell.selected .prompt.input_prompt { - color: #303F9F; +.text_cell.kb-cell.opened.rendered.selected.kb-error .rendered_html { + border-left: 1px solid #d9534f; } -.cell.selected .prompt.output_prompt { - color: #D84315; +.text_cell.kb-cell.opened.rendered { + padding-bottom: 0; } -.cell>.inner_cell>.ctb_hideshow { - display: block; +.cell > .inner_cell > .ctb_hideshow { + display: block; } .cell.selected .btn-default { - color: #000; + color: #000; } .cell.unselected .btn-default { - color: #CCC; + color: #ccc; } .cell.unselected .kb-cell-toolbar .title-container { - opacity: 0.5; + opacity: 0.5; } .cell.unselected .kb-cell-toolbar .buttons-container { - opacity: 0.2; + opacity: 0.2; } -.kb-btn-icon { - display: inline-block; - padding: 4px; -} - -.kb-btn-icon .fa { - opacity: 0.5 -} - -.kb-btn-icon:hover .fa { - opacity: 1.0 -} - - /* For some reason Jupyter removes the bottom margin. This causes problems with bootstrap, since bootstrap removes the top margin! */ p { - margin-bottom: 9px; -} - -.prompt { - display: none !important; + margin-bottom: 9px; } /* @@ -359,19 +304,20 @@ p { * Cool though this is, it's a problem on app cells. * This hunk of CSS should remove it until we can better work it in to our design. */ -div.code_cell:hover .run_this_cell { - visibility: hidden !important; + +.run_this_cell { + padding: 0 !important; + width: 0 !important; } -div.code_cell:hover div.input_prompt.run_this_cell { - visibility: hidden !important; +.code_cell:hover .run_this_cell { + visibility: hidden !important; } -div.code_cell div.input_prompt { - min-width: 0; +.code_cell:hover .input_prompt.run_this_cell { + visibility: hidden !important; } -.run_this_cell { - padding: 0 !important; - width: 0 !important; +.code_cell .input_prompt { + min-width: 0; }