diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000000..d8f7756d61 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,58 @@ +# This is a basic workflow to help you get started with Actions + +name: CI-testing + +# Controls when the action will run. Triggers the workflow on push or pull request +# events +on: + push: + branches: [ develop, master ] + pull_request: + branches: [ develop, master ] + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + build-and-test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: goanpeca/setup-miniconda@v1 + with: + miniconda-version: 'latest' + activate-environment: test-environment + python-version: 3.6.10 + auto-activate-base: false + auto-update-conda: true + condarc-file: test/condarc.yml + + - name: Use Node JS 10.x + uses: actions/setup-node@v1 + with: + node-version: 10.x + + - name: Install JS dependencies + run: | + npm ci + npm install bower + ./node_modules/bower/bin/bower install + + - name: Install Narrative Application + shell: bash -l {0} + run: | + bash ./scripts/install_narrative.sh + grunt minify + sed src/config.json "s/{{ .Env.CONFIG_ENV }}/dev/" + sed -i 's/{{ if ne .Env.CONFIG_ENV "prod" }} true {{- else }} false {{- end }}/true/' src/config.json + jupyter notebook --version + + - name: Run Narrative Test Suite + shell: bash -l {0} + run: make test + + - name: Send to Codecov + uses: codecov/codecov-action@v1 + with: + file: | + ./coverage.xml + ./js-coverage/lcov/lcov.info + fail_ci_if_error: true diff --git a/.travis.yml b/.travis.yml index f53af98a04..3e307a303f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -13,6 +13,7 @@ env: - TRAVIS_NODE_VERSION="10.10.0" - secure: "JPdkdywgQbUUixuDuATMXZHWpWImziRoGKd1tCjYd3+0lamLBlldmjhsZ+Bp7ZabKg2ExQZareGDp34cJdOwWBGb2gg0/emjy4UkWkbDH28zyoWNK1SFp6OTY8AeY/icPXKw3MBgKoXG+hemfcxhYc8rUNgUt7V2fA0JSAkCi4w=" - secure: "BrGlbfGLxZYCynh7LeIFyQeiTx4YX6fdMYK2UceVLoAFjOml9mvtJY5i4Oafc2iBDPQ0wAP/eIzZOTcddwc+12o1S0EAq3zZb5z+MOwRKjsiC+BGUXNzAGLaeJqFTC5Sn+vvqsaDGaR3jrdQ8APUL7XapuLUAkof7vqc1SPsn3I=" + - secure: "YH4s6huZYW34XFlKDAg7yC8VGUjIiird3gDKOmHyhlPVoQa75tll3iqVBBxNFcj+5CfzlCU+ZZK/JTvRoLJ7+QBPrRm7eZ6+s44JaJK+eAz12AJKdEfZyp+blMQ26Y8uOz5AZQhnRsoYfbqDK3p/T8FW1MAKdvE+8nHDCdAh26k=" cache: directories: @@ -25,6 +26,7 @@ branches: - develop - master - py3-update + - truss before_install: - gem install coveralls-lcov diff --git a/Makefile b/Makefile index e67d1eaaf9..38a0334f43 100755 --- a/Makefile +++ b/Makefile @@ -35,7 +35,7 @@ build-travis-narrative: sed -i 's/{{ if ne .Env.CONFIG_ENV "prod" }} true {{- else }} false {{- end }}/true/' src/config.json && \ jupyter notebook --version -test: test-backend test-frontend-unit test-frontend-e2e +test: test-backend test-frontend @echo "done running backend and frontend test scripts" # test-backend should use nose, or the like, to test our @@ -49,20 +49,20 @@ test-backend: sh $(BACKEND_TEST_SCRIPT) @echo "done" +test-frontend: + TOKEN="$(token)" python test/unit/run_tests.py -u -i + # test-frontend-unit should use karma and jasmine to test # each of the Javascript components of the Narrative. # This is achieved through the grunt test invocation test-frontend-unit: @echo "running frontend unit tests" - python test/unit/run_tests.py + python test/unit/run_tests.py -u @echo "done" -# test-frontend-e2e should use Selenium to perform an end- -# to-end test of the front end components, with a running -# Narrative system. -test-frontend-e2e: - @echo "running frontend end-to-end tests" - cd $(FRONTEND_TEST_DIR) +test-integration: + @echo "running integration tests" + TOKEN="$(token)" python test/unit/run_tests.py -i @echo "done" build-docs: diff --git a/docs/deploy_narrative.md b/docs/deploy_narrative.md index 872f82db90..6be73dd7fb 100644 --- a/docs/deploy_narrative.md +++ b/docs/deploy_narrative.md @@ -75,7 +75,8 @@ The [next](https://next.kbase.us), [appdev](https://appdev.kbase.us), and [prod] ### Deploying Narrative-Refactor -The [narrative-refactor](https://narrative-refactor.kbase.us) image is built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge +The [narrative-refactor](https://narrative-refactor.kbase.us) image is automatically built against the "truss" branch of the repo and is called narrative-truss:pr### when still in a PR state or narrative-truss:latest after merge. The images can be found here: https://github.com/orgs/kbase/packages + #### Create Release Image diff --git a/docs/testing.md b/docs/testing.md index 0a7d251e13..7ad50602f2 100644 --- a/docs/testing.md +++ b/docs/testing.md @@ -42,6 +42,7 @@ Then, simply run (from the narrative root directory) `make test`. This calls a few subcommands, and those can be run independently for specific uses: - `make test-frontend-unit` will run only the unit tests on the frontend (i.e. those with the Karma runner) +- `make test-integration` will run the frontend integration tests that make use of webdriver.io to simulate the browser on a locally instantiated Narrative, but running against live KBase services. - `make test-frontend-e2e` will run only the frontend tests that make use of Selenium to simulate a browser on the real Narrative site. - `make test-backend` will run only the backend Python tests. @@ -67,7 +68,18 @@ This just needs the path to the token file (with pre-pended slash), such as `"/t ### Testing with Travis-CI and Coveralls -These tests are run (without credentials) automatically on a pull request to the Narrative Github repo. These are currently run through [Travis-CI](https://travis-ci.org/) and the coverage reported with [Coveralls](https://coveralls.io/). There should be nothing you need to do to make this work. +These tests are run automatically on a pull request to the Narrative Github repo. These are currently run through [Travis-CI](https://travis-ci.org/) and the coverage reported with [Coveralls](https://coveralls.io/). + +Unit tests are automatically run without credentials, skipping various tests that are, really, more like integration tests. + +The integration tests that run with webdriver.io do require an authentication token. This is embedded in the `.travis.yml` file as a secure environment variable - the third (and last) one. That token will expire every 90 days and will need to be replaced. A new one can be generated from the KBase CI Account page with a valid developer account. This token can then be encrypted with the following commands. Note that Ruby is required. + +``` +gem install travis # if not already installed +travis encrypt KBASE_TOKEN=my_generated_token +``` +This will emit a string that looks like `secure: "SDFSDFSDFSDF="` Use this string to replace the out of date token. It will become available in the test environment as `KBASE_TOKEN`, which is the variable that the `wdio.conf.js` file looks for. + ### Adding Your Own Tests @@ -81,6 +93,27 @@ There are some service client Mocks available using the `mock` library. Check ou JavaScript tests follow the common Test Spec idiom. Here, we create a new spec file for each JavaScript module. These all live under `test/unit/spec` in roughly the same subdirectory as found under `kbase-extension/static/kbase/js`. There's an example spec in `test/unit/specTemplate.js` - you can just copy this to a new module, and modify to fit your needs. +***Front End Integration*** + +Integration tests are done using [webdriver.io](https://webdriver.io). The test scripts are written in Javascript and all resemble the common Mocha style. These tests are all under `test/integration/spec`. It's helpful for each of these files to include the `wdioUtils.js` module in `test/integration`. For each view that requires authentication (i.e. most of them), be sure to start your test with the async `login` function provided by that module. An example spec file might look like: + +```javascript +const Utils = require('../wdioUtils'); + +describe('Simple test runner', () => { + beforeEach(async () => await Utils.login()); + + it('opens a narrative', async () => { + await browser.url(Utils.makeURL('narrative/31932')); + const loadingBlocker = await $('#kb-loading-blocker'); + const loadingText = await loadingBlocker.getText(); + expect(loadingText).toContain('Connecting to KBase services...'); + }); +}); +``` + +When running these locally, these expect that there's a valid authentication token in + ### Manual Testing and Debugging ***Python*** @@ -94,7 +127,7 @@ log.info("Your Logs Go Here") ***JavaScript*** -It can be useful to immediately see your changes in the narrative. For javascript changes, you will just have to reload the page. You can print messages to the console with `console.log` +It can be useful to immediately see your changes in the narrative. For javascript changes, you will just have to reload the page. You can print messages to the console with `console.log`. To debug using the Karma Debugger complete the following steps: diff --git a/kbase-extension/kbase_templates/403.html b/kbase-extension/kbase_templates/403.html index 5d29d60746..815772f43a 100644 --- a/kbase-extension/kbase_templates/403.html +++ b/kbase-extension/kbase_templates/403.html @@ -5,12 +5,7 @@ {% block stylesheet %} {{super()}} - + {% endblock %} {% block loading_message %} @@ -22,11 +17,11 @@ {% block site %} -
-

You do not have permission to access this Narrative.

-

You can request access from the Narrative owners using the controls below.

+
+

You do not have permission to access this Narrative.

+

You can request access from the Narrative owners using the controls below.

-
+
- {% endblock %} diff --git a/kbase-extension/kbase_templates/error.html b/kbase-extension/kbase_templates/error.html index 2746a0d4c8..aab8086eb3 100644 --- a/kbase-extension/kbase_templates/error.html +++ b/kbase-extension/kbase_templates/error.html @@ -5,12 +5,7 @@ {% block stylesheet %} {{super()}} - + {% endblock %} {% block loading_message %} @@ -18,7 +13,7 @@ {% block site %} -
+
{% block h1_error %}

{{status_code}} : {{status_message}}

{% endblock h1_error %} diff --git a/kbase-extension/kbase_templates/generic_error.html b/kbase-extension/kbase_templates/generic_error.html index 9ef57764d0..8d40b887d2 100644 --- a/kbase-extension/kbase_templates/generic_error.html +++ b/kbase-extension/kbase_templates/generic_error.html @@ -5,12 +5,7 @@ {% block stylesheet %} {{super()}} - + {% endblock %} {% block loading_message %} @@ -22,15 +17,15 @@ {% block site %} -
+
{% block h1_error %} -

+

An error occurred while loading this Narrative

{% endblock h1_error %} {% block error_detail %} {% if message %} -

{{message}}

+

{{message}}

{% endif %} {% endblock %}
diff --git a/kbase-extension/kbase_templates/notebook.html b/kbase-extension/kbase_templates/notebook.html index bcb12ff51a..242dfbdba1 100644 --- a/kbase-extension/kbase_templates/notebook.html +++ b/kbase-extension/kbase_templates/notebook.html @@ -96,17 +96,15 @@
-
+
@@ -140,8 +138,4 @@ - - {% endblock %} diff --git a/kbase-extension/static/errorMain.js b/kbase-extension/static/errorMain.js index c4a87b64c6..b82a67d8a6 100644 --- a/kbase-extension/static/errorMain.js +++ b/kbase-extension/static/errorMain.js @@ -21,7 +21,7 @@ require([ return Login.init($('#signin-button'), true); }) .then(function () { - let statusCode = document.getElementsByClassName('error')[0].getAttribute('data-code'); + const statusCode = document.getElementById('error_container').getAttribute('data-code'); if (statusCode === '403') { buildRequestControl(); } diff --git a/kbase-extension/static/kbase/css/advancedViewCell.css b/kbase-extension/static/kbase/css/advancedViewCell.css new file mode 100644 index 0000000000..b34c84a407 --- /dev/null +++ b/kbase-extension/static/kbase/css/advancedViewCell.css @@ -0,0 +1,3 @@ +.kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body { + padding: 0; +} diff --git a/kbase-extension/static/kbase/css/appCell.css b/kbase-extension/static/kbase/css/appCell.css index a13f6133a0..9f00a7de96 100644 --- a/kbase-extension/static/kbase/css/appCell.css +++ b/kbase-extension/static/kbase/css/appCell.css @@ -4,162 +4,140 @@ */ .kb-app-cell { - font-family: 'Oxygen', sans-serif; + font-family: 'Oxygen', sans-serif; } .kb-app-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 { - border-left: 3px solid #fff; + border-left: 3px solid #fff; } .kb-app-cell .kb-app-parameter-panel-hover { - border-left: 3px solid #428bca; + border-left: 3px solid #428bca; } .kb-app-cell .kb-app-parameter-row { - margin: 0px; - padding: 5px; - border-radius: 5px; + margin: 0; + 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; } - -/* .cell.selected .btn-default.kb-app-row-close-btn:hover { - color: red; -} */ - -.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-right: 0; + border-top: 0; + border-bottom: 0; + border: none; + background-color: transparent; + color: gray; } - /* let's just do this as a normal button hover effect */ -.kb-app-row-close-btn:hover { - /* border-left: 3px solid #337ab7; this is the bootstrap link color to match to close icon */ - /* color: red; */ - /* background-color: rgba(234, 126, 126, 1); */ -} - .kb-app-parameter-right-error-bar { - /* height: 100%; */ - 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 { - background: #F9F9F9; + background: #f9f9f9; } .kb-app-cell .kb-app-parameter-row .message.-error { - background: #f2dede; + background: #f2dede; + color: #f44336; } -.kb-app-cell .kb-app-parameter-row .message.-warning {} - .kb-app-cell .kb-app-parameter-row .message { - text-align: center; - font-family: 'Oxygen', sans-serif; -} - -.kb-app-cell .kb-app-parameter-row .message.-error { - color: #F44336; + text-align: center; + font-family: 'Oxygen', sans-serif; } -.kb-app-cell .kb-app-parameter-row .message.-warning {} - - /* not sure how to get text in these divs to valign middle... */ .kb-app-cell .kb-app-parameter-name { - font-family: 'Oxygen', sans-serif; - color: #777; - text-align: left; - vertical-align: bottom; - padding-right: 4px; - padding-left: 0px; - 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 { - vertical-align: middle; + vertical-align: middle; } .kb-app-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: 0px 0px 0px 10px; + background: transparent; + border: 0; + padding: 0 0 0 10px; } - /* This set of styles is a to accomodate the required/satisfied icon which appears between the select input control and the help text to the right of it. The @@ -172,185 +150,168 @@ 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 > div { - allow space for the required (red arrow), satisfied (green checkbox) icon - padding-right: 20px; -} -*/ - .kb-app-cell .kb-app-parameter-input .kb-app-parameter-accepted-glyph, .kb-app-cell .kb-app-parameter-input .kb-app-parameter-required-glyph { - /* This scoots the icon inside */ - font-size: 15px; - margin-left: 0; + /* This scoots the icon inside */ + font-size: 15px; + margin-left: 0; } .kb-app-cell .kb-app-parameter-required-glyph { - color: #F44336; -} - -.kb-app-cell .kb-app-parameter-hint { - padding-left: 7px; + color: #f44336; } .kb-app-cell .kb-parameter-data-selection { - font-weight: bold; + font-weight: bold; } .kb-app-cell .kb-app-parameter-hint { - color: #777; - text-align: left; - margin-top: 3px; + color: #777; + text-align: left; + margin-top: 3px; + padding-left: 7px; } .kb-app-cell .kb-app-parameter-accepted-glyph { - color: #4BB856; + color: #4bb856; } .kb-app-cell .kb-app-parameter-info { - color: #777; + color: #777; } .kb-app-cell .kb-parameter-data-row-remove { - color: #777; + color: #777; } .kb-app-cell .kb-parameter-data-row-add { - color: #777; + color: #777; } .kb-app-cell .kb-app-advanced-options-controller-inactive { - font-family: 'Oxygen', sans-serif; - font-weight: bold; - font-style: italic; - font-size: 10pt; - line-height: 14px; - color: #777; - text-align: center; + font-family: 'Oxygen', sans-serif; + font-weight: bold; + font-style: italic; + font-size: 10pt; + line-height: 14px; + color: #777; + text-align: center; } .kb-app-cell .kb-app-advanced-options-controller { - font-family: 'Oxygen', sans-serif; - font-weight: bold; - cursor: pointer; - font-style: italic; - font-size: 10pt; - line-height: 14px; - color: #0088cc; - text-align: center; + font-family: 'Oxygen', sans-serif; + font-weight: bold; + cursor: pointer; + font-style: italic; + font-size: 10pt; + line-height: 14px; + color: #08c; + text-align: center; } .kb-app-cell .kb-app-advanced-options-controller:hover { - color: #2a6496; + color: #2a6496; } .kb-app-cell .kb-app-footer { - width: 100%; - overflow: none; - background-color: #F5F5F5; - padding: 10px; + width: 100%; + overflow: none; + background-color: #f5f5f5; + padding: 10px; } .kb-app-cell .kb-app-subtitle { - background-color: #F5F5F5; - padding: 3px 5px; + background-color: #f5f5f5; + padding: 3px 5px; +} + +.report-widget .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 { + margin-left: 2px; + margin-right: 2px; + content: "\f054 "; +} + +.kb-app-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 "; +} + +.kb-app-cell .panel-title > [data-toggle="collapse"].collapsed::before { + margin-left: 2px; + margin-right: 2px; + content: "\f054 "; } -.kb-app-cell .kb-app-subtitle { - background-color: #F5F5F5; - padding: 3px 5px; -} - -.report-widget .panel-title>[data-toggle="collapse"]::before { - display: inline-block; - margin-left: 0px; - 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 { - margin-left: 2px; - margin-right: 2px; - content: "\f054 "; -} - -.kb-app-cell .panel-title>[data-toggle="collapse"]::before { - display: inline-block; - margin-left: 0px; - 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 "; -} - -.kb-app-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 { - opacity: 0.5; + opacity: 0.5; } .kb-app-cell .advanced-parameter-showing { - display: block; + display: block; } .kb-app-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 { - 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 { - 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 { - 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 { - color: #000; + color: #000; } - /* New button color scheme @@ -380,41 +341,40 @@ warning: orange */ .btn.batch-active { - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); - background-color: #EEE; - border-color: #adadad; + box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.125); + -webkit-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 { - 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 { - 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 { - 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 { - 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 @@ -422,171 +382,147 @@ warning: orange tab */ .btn.kb-app-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 { - 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 { - 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 { - 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:hover { - color: rgb(209, 82, 65); - background-color: #DDD; - border-bottom: 2px rgb(209, 82, 65) solid; - margin-bottom: 4px; + 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 { - 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 { - 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 */ - -/* -.btn.kb-app-cell-btn.btn-primary.disabled:hover { - color: #888; - background-color: #FFF; - border-bottom: 2px #888 solid; - margin-bottom: 4px; -} -*/ - .btn.kb-app-cell-btn.disabled, .btn.kb-app-cell-btn.disabled:hover, .btn.kb-app-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; } .kb-app-cell [data-element="run-control-panel"] { - width: 100%; + width: 100%; } .kb-app-cell [data-element="tab-pane"] { - border-top: 2px rgb(33, 150, 243) solid; + border-top: 2px rgb(33, 150, 243) solid; } -.kb-app-cell [data-element="tab-pane"]>div:empty { - padding: 0px; +.kb-app-cell [data-element="tab-pane"] > div:empty { + padding: 0; } -.kb-app-cell [data-element="tab-pane"]>div { - padding: 4px; +.kb-app-cell [data-element="tab-pane"] > div { + padding: 4px; } .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-color : gray; - */ - font-style: italic; - padding-left: 5px; + font-size: 75%; + font-style: italic; + padding-left: 5px; } 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/editorCell.css b/kbase-extension/static/kbase/css/editorCell.css new file mode 100644 index 0000000000..8acfb685c4 --- /dev/null +++ b/kbase-extension/static/kbase/css/editorCell.css @@ -0,0 +1,375 @@ +/* Wrapper class + All classes below may be wrapped in this class to avoid polluting + the Narrative styles. +*/ +.kb-editor-cell .kb-app-warning { + font-family: 'Oxygen', sans-serif; + text-align: center; +} + +/** new app parameter styling **/ +.kb-editor-cell .kb-app-parameter-panel { + border-left: 3px solid #fff; +} + +.kb-editor-cell .kb-app-parameter-panel-hover { + border-left: 3px solid #428bca; +} + +.kb-editor-cell .kb-app-parameter-row { + margin: 0; +} + +/* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */ +.kb-editor-cell .kb-app-parameter-row-hover { + background: #f9f9f9; +} + +.kb-editor-cell .kb-app-parameter-row .message.-error { + background: #f2dede; + color: #f44336; +} + +.kb-editor-cell .kb-app-parameter-row .message { + text-align: center; + font-family: 'Oxygen', sans-serif; +} + +/* not sure how to get text in these divs to valign middle... */ +.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; +} + +.kb-editor-cell .kb-app-parameter-input { + vertical-align: middle; +} + +.kb-editor-cell .kb-app-parameter-input select.form-control { + margin: 0; +} + +/* +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 +problem is that within the columns used for layout the select is set to 100% width +and yet the icon is placed right next to it. The result is that the icon is shoved +to the right of the select control and into the next column, overlapping the +help text. The old app handling this was to scoot the help text far enough over +to accomodate the the icon intruding into its space. This technique makes space +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-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-editor-cell .kb-app-parameter-required-glyph { + color: #f44336; +} + +.kb-editor-cell .kb-parameter-data-selection { + font-weight: bold; +} + +.kb-editor-cell .kb-app-parameter-hint { + padding-left: 7px; + color: #777; + text-align: left; + margin-top: 3px; +} + +.kb-editor-cell .kb-app-parameter-accepted-glyph { + color: #4bb856; +} + +.kb-editor-cell .kb-app-parameter-info { + color: #777; +} + +.kb-editor-cell .kb-parameter-data-row-remove { + color: #777; +} + +.kb-editor-cell .kb-parameter-data-row-add { + color: #777; +} + +.kb-editor-cell .kb-app-advanced-options-controller-inactive { + font-family: 'Oxygen', sans-serif; + font-weight: bold; + font-style: italic; + font-size: 10pt; + line-height: 14px; + color: #777; + text-align: center; +} + +.kb-editor-cell .kb-app-advanced-options-controller { + font-family: 'Oxygen', sans-serif; + font-weight: bold; + cursor: pointer; + font-style: italic; + font-size: 10pt; + line-height: 14px; + color: #08c; + text-align: center; +} + +.kb-editor-cell .kb-app-advanced-options-controller:hover { + color: #2a6496; +} + +.kb-editor-cell .kb-app-footer { + width: 100%; + overflow: none; + background-color: #f5f5f5; + padding: 10px; +} + +.kb-editor-cell .kb-app-subtitle { + background-color: #f5f5f5; + padding: 3px 5px; +} + +.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 "; +} + +.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-editor-cell { + opacity: 0.5; +} + +.kb-editor-cell .advanced-parameter-showing { + display: block; +} + +.kb-editor-cell .advanced-parameter-hidden { + display: none; +} + +.kb-elapsed-time { + font-family: monospace; +} + +.kb-elapsed-time.-active { + color: lime; +} + +.kb-editor-cell-info-desc { + border: 1px solid #777; + padding: 10px; + margin-right: 10px; + min-height: 100px; +} + +.kb-editor-cell-info { + color: #777; + font-family: 'Oxygen', sans-serif; + font-size: 12pt; +} + +.kb-editor-cell-info .header { + border-bottom: 1px solid #777; + padding: 5px 0; + margin-bottom: 8px; +} + +.kb-editor-cell-info .value { + color: #000; +} + +/* +New button color scheme + +blue for border, backgrounds, text: rgb(0, 147, 255)) + +official kbase color: rgb(33,150,243) + +disabled color for border, text + +enabled run color - (green) - rgb(2,140,10) +official kbase green: + +rgb(75,184,86) + +or + + rgb(42,190,159) which is the lighter variant. both used in mocks (but depends where you sample). + +disabled run color - (green) - + +error color - red - rgb(209,82,65) + +disabled (gray) - 205,205,205 + +warning: orange + +*/ + +.btn.kb-editor-cell-btn { + color: rgb(33, 150, 243); + background-color: #fff; + border: 2px rgb(33, 150, 243) solid; + margin-bottom: 4px; +} + +/* Primary Button Style */ +.btn.kb-editor-cell-btn.btn-primary { + color: rgb(33, 150, 243); + border: 2px rgb(33, 150, 243) solid; +} + +.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; +} + +.btn.kb-editor-cell-btn.btn-primary:active { + color: #fff; + background-color: rgb(33, 150, 243); +} + +/* Hovering over an active cell is different, it tries to make the tab look + disassociated but using a gray background so it doesnt look like an inactive + tab */ +.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; +} + +.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; +} + +/* DANGER - for error */ +.btn.kb-editor-cell-btn.btn-danger { + color: rgb(209, 82, 65); + border: 2px rgb(209, 82, 65) solid; +} + +.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; +} + +.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; +} + +.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; +} + +/* DISABLED is gray border and text */ + +.btn.kb-editor-cell-btn.disabled, +.btn.kb-editor-cell-btn.disabled:hover, +.btn.kb-editor-cell-btn.disabled:active { + color: #888; + border: 2px #888 solid; + margin-bottom: 4px; +} + +.kb-editor-cell [data-element="run-control-panel"] { + width: 100%; +} + +.kb-editor-cell [data-element="tab-pane"] { + border-top: 2px rgb(33, 150, 243) solid; +} + +.kb-editor-cell [data-element="tab-pane"] > div:empty { + padding: 0; +} + +.kb-editor-cell [data-element="tab-pane"] > div { + padding: 4px; +} + +.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); +} + +.kb-editor-cell .btn-danger.kb-btn-action.-cancel { + color: rgb(209, 82, 65); +} + +.kb-editor-cell .btn-danger.kb-btn-action.-reset { + color: rgb(209, 82, 65); +} + +.kb-app-status-ok { + color: rgb(75, 184, 86); +} + +.kb-app-status-warning { + color: orange; +} + +.kb-app-status-danger, +.kb-app-status-error { + color: rgb(209, 82, 65); +} + +.kb-app-status-default { + color: rgb(33, 150, 243); +} + +/* app cell panels */ + +/* TODO: higher level selector */ + +.parameter-panel .info-panel { + padding-top: 4px; + background: transparent; +} diff --git a/kbase-extension/static/kbase/css/errorPage.css b/kbase-extension/static/kbase/css/errorPage.css new file mode 100644 index 0000000000..a24475d0fd --- /dev/null +++ b/kbase-extension/static/kbase/css/errorPage.css @@ -0,0 +1,37 @@ +#header, +#site { + display: block; +} + +.access-error__container, +.generic-error__container { + text-align: center; + margin: 2rem; +} + +.access-error__heading, +.generic-error__heading { + font-weight: bold; + font-size: 200%; + line-height: 1.5; +} + +.access-error__text, +.generic-error__text { + font-size: 150%; + line-height: 2; +} + +.access-request-form__container { + margin-top: 2rem; +} + +.access-request-progress__container { + display: none; + margin-top: 1rem; +} + +.access-request-result { + font-size: 125%; + margin-top: 2rem; +} 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..0adf7e13e1 100644 --- a/kbase-extension/static/kbase/css/kbaseIcons.css +++ b/kbase-extension/static/kbase/css/kbaseIcons.css @@ -2,17 +2,17 @@ @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; @@ -24,8 +24,8 @@ -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; @@ -36,21 +36,26 @@ -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..414e6bbb74 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 unselectable */ + -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/kbaseNarrative.css b/kbase-extension/static/kbase/css/kbaseNarrative.css index 7ed67eab8a..e7e120dd70 100644 --- a/kbase-extension/static/kbase/css/kbaseNarrative.css +++ b/kbase-extension/static/kbase/css/kbaseNarrative.css @@ -1,1184 +1,1378 @@ @import url("//fonts.googleapis.com/css?family=Roboto"); -.kb-dropzone div#upload-message { +.kb-dropzone #upload-message { + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; +} + +.kb-dropzone .dz-message { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + text-align: center; + color: #000; + mix-blend-mode: normal; + margin: 2em 4.5em; +} + +.text-button { + background: #FFFFFF; + box-sizing: border-box; + border-radius: 4px; + border: 1px solid #FFFFFF; font-family: Oxygen, Arial, sans-serif; + font-style: normal; font-weight: bold; + font-size: 14px; + line-height: 18px; + outline: none; + + text-transform: uppercase; + text-align: center; + color: #4379B1; + height: 34px; +} + +.text-button:hover { + color: #36618E; + border: 1px solid #ECF2F7; + background-color: #ECF2F7; + cursor: pointer; +} + +.text-button:focus { + color: #36618E; + border: 1px solid #E3EBF3; + background-color: #E3EBF3; +} + +.text-button:active { + color: #36618E; + border: 1px solid #D9E4EF; + background-color: #D9E4EF; +} + +.text-button:disabled { + color: #929292; + border: 1px solid #FAFAFA; + background-color: #FAFAFA; +} + +.clear-all-dropzone { + margin: 6px; +} + +#kb-data-staging-table_wrapper { + margin-top: 44px; +} + +.kb-data-staging-decompress { + border: 1px solid #ccc; + border-radius: 1px; } .kb-data-staging-table-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.kb-data-staging-folder:hover { + cursor: pointer; + text-decoration: underline; +} + +.kb-data-breadcrumb .kb-pointer a { + cursor: pointer; +} + +.kb-data-staging__container { + height: 604px; + padding: 5px; + overflow-y: auto; } .kb-data-staging-footer { - font-family : Oxygen, Arial, sans-serif; - font-weight: bold; - font-size : 105%; - text-align : center; - background-color : #EEEEEE; - height : 32px; - padding : 8px; + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; + font-size: 105%; + text-align: center; + background-color: #eee; + height: 32px; + padding: 8px; } .kb-data-staging-metadata-list { - font-family : Oxygen; + font-family: Oxygen, Arial, sans-serif; font-weight: bold; - width : 115px; - display : inline-block; - font-size : 90%; + width: 115px; + display: inline-block; + font-size: 90%; } .kb-data-staging-metadata-file-lines { - white-space : pre; - overflow : scroll; - font-family : monospace; - font-size : 90%; - background-color : #DDDDDD; - max-height : 200px; + white-space: pre; + overflow: scroll; + font-family: monospace; + font-size: 90%; + background-color: #ddd; + max-height: 200px; +} + +/* https://www.figma.com/file/T30UN3QhWhhV5SpXiqY1ij/KBase-component-library?node-id=1%3A4 */ +.kb-data-staging-button { + background: none; + border: none; + cursor: pointer; + font-family: Oxygen, Arial, sans-serif; + font-style: normal; + font-weight: bold; + font-size: 14px; + line-height: 18px; + text-align: center; + text-transform: uppercase; + color: #4379b1; + height: 35px; + margin: 8px; + padding: 8px; + position: relative; + top: -3px; + letter-spacing: 0.5pt; + border-radius: 4px; +} + +.kb-data-staging-button:hover { + background: rgba(67, 121, 177, 0.1); +} + +.kb-data-staging-button:focus { + background: rgba(67, 121, 177, 0.15); +} + +.kb-data-staging-button:active { + background: rgba(67, 121, 177, 0.2); +} + +.kb-data-staging-button:disabled { + background: rgba(0, 0, 0, 0.02); + color: #929292; +} + +.kb-data-stagingarea { + font-family: Oxygen, Arial, sans-serif; + font-style: normal; + font-weight: bold; + font-size: 24px; + line-height: 30px; +} + +.kb-data-staging-spacer { + margin-top: 10px; } .kb-dropzone { - border: 2px dashed #2196F3 !important; - margin-bottom:5px; - max-height: 150px; - overflow-y: auto; + border: 2px dashed #2196f3 !important; + margin-bottom: 5px; + max-height: 150px; + overflow-y: auto; } .kb-ga-seq { - word-wrap: break-word; - font-family: monospace; - max-width: 300px; - max-height: 100px; - overflow-y: auto; + word-wrap: break-word; + font-family: monospace; + max-width: 300px; + max-height: 100px; + overflow-y: auto; } /** * Shim to make sure jQuery-ui dialogs are always on front of other DOM elements. */ .ui-front { - z-index: 1000; + z-index: 1000; } .whiteout-pane { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - background-color: #fff; - text-align: center; - z-index: 1001; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + background-color: #fff; + text-align: center; + z-index: 1001; } #kb-narr-name { - font-family: Oxygen; - font-weight: bold; - font-size: 130%; - padding-bottom: 7px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-family: Oxygen; + font-weight: bold; + font-size: 130%; + padding-bottom: 7px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #kb-narr-name:hover { - text-overflow: inherit; - white-space: normal; + text-overflow: inherit; + white-space: normal; } #kb-narr-name > #save_widget { - font-family: Oxygen; - font-weight: bold; - padding: 0; + font-family: Oxygen; + font-weight: bold; + padding: 0; } #kb-narr-creator { - font-family: Oxygen; - font-weight: bold; + font-family: Oxygen; + font-weight: bold; } .kb-narr-namestamp { - margin-bottom: 0px; - margin-top: 5px; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - border-left: 2px solid #CECECE; - display: block; - flex: 2; - min-width: 0; + margin-bottom: 0; + margin-top: 5px; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + border-left: 2px solid #cecece; + display: block; + flex: 2; + min-width: 0; } .ui-draggable.kb-data-inflight { - display: block; - border: 2px gray solid; - background-color: #FEFFD6 !important; - border-radius: 4px; - z-index: 1000; + display: block; + border: 2px gray solid; + background-color: #feffd6 !important; + border-radius: 4px; + z-index: 1000; } + .ui-draggable.kb-data-inflight.-over { - border-color: green; - background-color: #EFFCEB !important; + border-color: green; + background-color: #effceb !important; } .kb-data-list-drag-target { - transition: all 0.25s ease; + transition: all 0.25s ease; } .kb-data-list-drag-target.-drag-active { - background-color: #FEFFD6; + background-color: #feffd6; } .kb-data-list-drag-target.-drag-hover { - background-color: #EFFCEB; - border-color: green; - -} -.kb-data-list-drag-target.-drag-hover { - height: 90px; - transition: all 0.25s ease; + background-color: #effceb; + border-color: green; + height: 90px; + transition: all 0.25s ease; } .kb-data-list-drag-target { - display: block; - border: 2px orange dashed; - height: 40px; - text-align: center; - padding: 6px; - border-radius: 4px; + display: block; + border: 2px orange dashed; + height: 40px; + text-align: center; + padding: 6px; + border-radius: 4px; } #kb-notify-area { - display: inline-block; - float: left; - position: relative; + display: inline-block; + float: left; + position: relative; } .kb-navbar-buttons { - display: inline-block; - padding-right: 15px; - margin-right: 15px; - border-right: 2px solid #CECECE; + display: inline-block; + padding-right: 15px; + margin-right: 15px; + border-right: 2px solid #cecece; } header[role="banner"] { - position: absolute; - top: 0; - width: 100%; - background-color: #fff; - border-bottom: 1px solid #CECECE; - z-index: 999; - + position: absolute; + top: 0; + width: 100%; + background-color: #fff; + border-bottom: 1px solid #cecece; + z-index: 999; } nav[role="navigation"] ul { - margin: 1.2em 0 .5em 0; - /*text-align: center;*/ - padding-left: 0; + margin: 1.2em 0 0.5em 0; + + /* text-align: center; */ + padding-left: 0; } nav[role="navigation"] ul li { - display: inline; - margin: 0 .5em; - vertical-align: middle; + display: inline; + margin: 0 0.5em; + vertical-align: middle; } nav[role="navigation"] ul li a { - text-decoration: none; - font-size: 1.2em; - font-family: Oxygen; - font-weight: bold; - padding: 7px 1em; - background-color: #5c9531; - color: #fff; - border-radius: 8px; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - border: 1px solid #5c9531; -} - -li#searchlabel a{ - } - -input#search_terms{ - padding: .4em 1em; - display: inline; - border-color: #5c9531; - position: relative; - left: -.5em; - font-size: 1em; - margin-top: -3px; - background-image: url("../images/search.png"); - background-size: 22px; - background-repeat:no-repeat; - background-position:right center; - border-top-left-radius: 0px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 0px; -} -span#searchspan{ - display: inline-block; + text-decoration: none; + font-size: 1.2em; + font-family: Oxygen; + font-weight: bold; + padding: 7px 1em; + background-color: #5c9531; + color: #fff; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + border: 1px solid #5c9531; +} + +input#search_terms { + padding: 0.4em 1em; + display: inline; + border-color: #5c9531; + position: relative; + left: -0.5em; + font-size: 1em; + margin-top: -3px; + background-image: url("../images/search.png"); + background-size: 22px; + background-repeat: no-repeat; + background-position: right center; + border-top-left-radius: 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 0; +} + +span#searchspan { + display: inline-block; + width: 50%; +} + +@media screen and (max-width: 1170px) { + span#searchspan { width: 50%; + } } -@media screen and (max-width: 1170px){ - span#searchspan{width: 50%;} -} -@media screen and (max-width: 980px){ - span#searchspan{width: 40%;} -} -@media screen and (max-width: 768px){ - span#searchspan{width: 30%;} + +@media screen and (max-width: 980px) { + span#searchspan { + width: 40%; + } } -@media screen and (max-width: 590px){ - span#searchspan{width: 60%;} + +@media screen and (max-width: 768px) { + span#searchspan { + width: 30%; + } } +@media screen and (max-width: 590px) { + span#searchspan { + width: 60%; + } +} .navbar-kbase { - border-bottom: 5px solid #CECECE !important; - padding: 8px; + border-bottom: 5px solid #cecece !important; + padding: 8px; } .navbar-kbase a:hover { - cursor: pointer; + cursor: pointer; } /* Top bar nav buttons -------------------------- */ .kb-nav-btn { - background-color: #FFF; - padding: 1px 7px; - font-size: 24px; - border: none; - text-shadow: none !important; - margin: 0; - box-shadow: 0 0 3px #CECECE; - margin-right: 5px; - min-width: 50px; + background-color: #fff; + padding: 1px 7px; + font-size: 24px; + border: none; + text-shadow: none !important; + margin: 0; + box-shadow: 0 0 3px #cecece; + margin-right: 5px; + min-width: 50px; } -.navbar-right .fa::before { /* color nav icons */ - color: #2196F3; + +.navbar-right .fa::before { + /* color nav icons */ + color: #2196f3; } .kb-navbar-container { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } -#kb-nav-menu { /* don't add shadows here */ - box-shadow: none; +#kb-nav-menu { + /* don't add shadows here */ + box-shadow: none; } + .kb-nav-btn > div { - color: #666 !important; + color: #666 !important; } + .kb-nav-btn .kb-nav-btn-txt { - font-size: 10pt; - margin-top: -5px; + font-size: 10pt; + margin-top: -5px; } + .navbar-right .kb-nav-btn:hover { - background-color: #F5F5F5; + background-color: #f5f5f5; } + .kb-nav-btn-upgrade { - background-color: #4BB856 !important; - display: none; + background-color: #4bb856 !important; + display: none; } + .kb-nav-btn-upgrade .fa::before { - color: #FFF !important; + color: #fff !important; } + .kb-nav-btn-upgrade > div { - color: #FFF !important; + color: #fff !important; } + .kb-nav-btn-upgrade:hover { - background-color: #43A047 !important; + background-color: #43a047 !important; } + .kb-nav-btn-upgrade.warning { - background-color: #F44336 !important; + background-color: #f44336 !important; } + .kb-nav-btn-upgrade.warning:hover { - background-color: #DC3C31 !important; + background-color: #dc3c31 !important; } + .kb-nav-menu-icon { - display: inline-block; - width: 20px; - text-align: center; - vertical-align: middle; - margin-right: 5px; + display: inline-block; + width: 20px; + text-align: center; + vertical-align: middle; + margin-right: 5px; } + .kb-nav-menu-icon .fa { - font-size: 150%; + font-size: 150%; } -#kb-ipy-menu { /* restore rounded corners */ +#kb-ipy-menu { + /* restore rounded corners */ border-radius: 4px !important; margin-right: 0; } -.btn { /* don't use drop-shadow on profile menu */ - box-shadow: none; +.btn { + /* don't use drop-shadow on profile menu */ -webkit-box-shadow: none; - moz-box-shadow: none; - xfont-size: 18px; + -moz-box-shadow: none; + box-shadow: none; } #signin-button .btn { - border: none; + border: none; } -.btn-xs .glyphicon-user { /* also resize user btn */ +.btn-xs .glyphicon-user { + /* also resize user btn */ padding: 14px 5px 14px 5px; } -/* -------------------------- */ +/* -------------------------- */ .narrative-menu-container { - position: fixed; - z-index: 499; - background-color: #ffffff; - width: 100%; - border-bottom: 1px solid #ababab; - padding-bottom: 30px; - padding-top: 10px; - margin-top: -10px; - margin-left: auto -} - -p.clear{ - height: 0px; - clear: both; + position: fixed; + z-index: 499; + background-color: #fff; + width: 100%; + border-bottom: 1px solid #ababab; + padding-bottom: 30px; + padding-top: 10px; + margin-top: -10px; + margin-left: auto; +} + +p.clear { + height: 0; + clear: both; } body > #header { - display: block; - box-sizing: border-box; + display: block; + box-sizing: border-box; } p#site-title { - height: 46px; - width: 46px; - background: url("../images/kbase_logo.png") no-repeat; - background-size: 46px; - margin: 5px; - float: left; - text-indent: -9999px; + height: 46px; + width: 46px; + background: url("../images/kbase_logo.png") no-repeat; + background-size: 46px; + margin: 5px; + float: left; + text-indent: -9999px; } #login-info { - position: absolute; - right: 0px; - top: 7px; - margin: 5px; - font-size: 1.2em; + position: absolute; + right: 0; + top: 7px; + margin: 5px; + font-size: 1.2em; } #login-widget button { - margin-left: 5px; + margin-left: 5px; } .search-box { - position: relative; - display: inline; - border-collapse: separate; - margin: -11px 0; - padding: 10px 1px; - width: 200px; + position: relative; + display: inline; + border-collapse: separate; + margin: -11px 0; + padding: 10px 1px; + width: 200px; } #search-box-name { - padding: 6px 0px; - border: 0; - border-radius: 4px; + padding: 6px 0; + border: 0; + border-radius: 4px; } #search-box-name:first-child { - border-right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } #search-box-name:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - - - - #search-input { - margin: -11px 0; + margin: -11px 0; } #search-select { - margin: -11px 0; - width: 150px; + margin: -11px 0; + width: 150px; } #search-area { - position: relative; - font: 18px 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #686868; - padding: 11px 11px; - margin: 0 5px; + position: relative; + font: 18px 'RobotoBlack', Arial, sans-serif; + font-weight: normal; + color: #686868; + padding: 11px 11px; + margin: 0 5px; } #search-area input { - padding: 11px 11px; + padding: 11px 11px; } - /* center pane */ - -#content-column { - /* height: 100%; - margin-left: 380px; - */ - /* - position: fixed; - left: 380px; - top: 70px; - right: 0; - bottom: 0; - overflow: auto; - */ -} - #workspace { - position: fixed; - width: 878px; - top: 173px; - bottom: 42px; - overflow: auto; + position: fixed; + width: 878px; + top: 173px; + bottom: 42px; + overflow: auto; } - /* footer */ -#bottom-tabs{ - clear: left; - position : fixed; - bottom : 0; - width: 1170px; - margin: 0 auto; - background-color: #fff; - border-top: 1px solid #aaa; +#bottom-tabs { + clear: left; + position: fixed; + bottom: 0; + width: 1170px; + margin: 0 auto; + background-color: #fff; + border-top: 1px solid #aaa; } #bottom-tabs p a { - border: 1px solid #018841; - background-color: #fff; - padding: 14px 20px; - font-size: 14px; + border: 1px solid #018841; + background-color: #fff; + padding: 14px 20px; + font-size: 14px; } /* left pane styling */ #left-column { - width: 380px; - position: fixed; - border-right: 5px solid #CECECE; - top: 70px; - bottom: 0; - /* overflow-y: auto; */ + width: 380px; + position: fixed; + border-right: 5px solid #cecece; + top: 70px; + bottom: 0; } .kb-side-overlay-container { - width: 730px; - border : 1px solid #CECECE; - z-index : 1030; - background : white; - position : fixed; - max-height: calc(100% - 73px); - overflow-y:auto; + width: 730px; + border: 1px solid #cecece; + z-index: 1030; + background: white; + position: fixed; + max-height: calc(100% - 73px); + overflow-y: auto; } .kb-side-overlay-header { - width: 100%; - background-color: #2196F3; - color: #fff; - padding: 6px; - font-size: 12pt; + width: 100%; + background-color: #2196f3; + color: #fff; + padding: 6px; + font-size: 12pt; } .kb-side-overlay-close { - cursor: pointer; - color: #fff; - font-weight: bold; - font-size: 10pt; + cursor: pointer; + color: #fff; + font-weight: bold; + font-size: 10pt; } .kb-side-overlay-close:hover { - color: orange; + color: orange; } .kb-side-panel { - overflow-y: hidden; - height: 100%; + overflow-y: hidden; + height: 100%; } #kb-side-toggle-in { - display: none; - top: 70px; - width: 22px; - border-bottom: 6px solid #CECECE; - border-right: 6px solid #CECECE; - font-size: 12pt; - text-align: center; - background-color: #2196F3; - padding: 12px 6px; - color: #BBDEFB; - font-weight: bold; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - cursor: pointer; - z-index: 1; - position: fixed; + display: none; + top: 70px; + width: 22px; + border-bottom: 6px solid #cecece; + border-right: 6px solid #cecece; + font-size: 12pt; + text-align: center; + background-color: #2196f3; + padding: 12px 6px; + color: #bbdefb; + font-weight: bold; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + cursor: pointer; + z-index: 1; + position: fixed; } #kb-side-toggle-in:hover { - color: #fff; + color: #fff; } .kb-side-toggle { - display: inline-block; - font-size: 12pt; - text-align: center; - border-bottom: 6px solid #2196F3; - border-top: 6px solid #2196F3; - background-color: #2196F3; - padding: 6px; - color: #BBDEFB; - font-weight: bold; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - cursor: pointer; + display: inline-block; + font-size: 12pt; + text-align: center; + border-bottom: 6px solid #2196f3; + border-top: 6px solid #2196f3; + background-color: #2196f3; + padding: 6px; + color: #bbdefb; + font-weight: bold; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + cursor: pointer; } .kb-side-toggle:hover { - color: #fff; + color: #fff; } .kb-side-header { - display: inline-block; - font-size: 12pt; - text-align: center; - border-bottom: 6px solid #2196F3; - border-top: 6px solid #2196F3; - background-color: #2196F3; - padding: 6px; - color: #BBDEFB; - font-weight: bold; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - cursor: pointer; + display: inline-block; + font-size: 12pt; + text-align: center; + border-bottom: 6px solid #2196f3; + border-top: 6px solid #2196f3; + background-color: #2196f3; + padding: 6px; + color: #bbdefb; + font-weight: bold; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + cursor: pointer; } .kb-overlay-active { - background-color: gray; - border-bottom: 6px solid gray; - border-top: 6px solid gray; + background-color: gray; + border-bottom: 6px solid gray; + border-top: 6px solid gray; } .kb-side-header:hover { - border-bottom: 6px solid #10CE34; + border-bottom: 6px solid #10ce34; } .kb-side-header.active { - border-bottom: 6px solid #10CE34; - color: #fff; - cursor: auto; + border-bottom: 6px solid #10ce34; + color: #fff; + cursor: auto; } .kb-side-separator { - border-bottom: 5px solid #CECECE; + border-bottom: 5px solid #cecece; } - - .kb-side-tab.active { - display: inherit; + display: inherit; } + .kb-side-tab { - display: none; - height:100%; + display: none; + height: 100%; } -.kb-narr-side-panel-set{ - height:100%; + +.kb-narr-side-panel-set { + height: 100%; } -.kb-narr-side-panel-set:last-child{ - height:50%; + +.kb-narr-side-panel-set:last-child { + height: 50%; } .kb-overlay-dimmer { - position: fixed; - z-index: 10; - right: 0; - bottom: 0; - opacity: 0.5; - background-color: #000; + position: fixed; + z-index: 10; + right: 0; + bottom: 0; + opacity: 0.5; + background-color: #000; } #data-header { - padding: 10px 0; - color: #fff; - font-weight: bold; - background-color: #099; + padding: 10px 0; + color: #fff; + font-weight: bold; + background-color: #099; } #data-title { - text-align: center; + text-align: center; } #data-add-btn { - padding: 0 0 -10px 0; - position: absolute; - right: 7px; - font-size: 0.8em; + padding: 0 0 -10px 0; + position: absolute; + right: 7px; + font-size: 0.8em; } #data-add-btn:hover { - color:#000; + color: #000; } #data-tab-nav { - border-bottom: 1px solid #aaa; - padding-top: 10px; - background-color: #0bb; - width: 100%; + border-bottom: 1px solid #aaa; + padding-top: 10px; + background-color: #0bb; + width: 100%; } #data-tab-nav ul { - padding-bottom: 0; - bottom: 0px; - top: 50px; + padding-bottom: 0; + bottom: 0; + top: 50px; } #data-tab-nav ul li { - display: inline; - border: 1px solid black; - padding: 4px 10px; - background-color: #ddd; + display: inline; + border: 1px solid black; + padding: 4px 10px; + background-color: #ddd; } #data-tab-nav ul li a:hover { - text-decoration: none; - color: #a00; + text-decoration: none; + color: #a00; } #data-tab-nav ul li a { - color: #000; + color: #000; } #data-tab-nav ul li.selected { - background-color: #fff; + background-color: #fff; } #data-view-panel { - height: 150px; - border: 1px solid #aaa; - padding: 10px; - overflow-y: auto; + height: 150px; + border: 1px solid #aaa; + padding: 10px; + overflow-y: auto; } #data-pane { - height: 69%; - margin-top: 1px; - border-bottom: 1px solid #AAA; - overflow: auto; -} -#data-pane p{ - margin: 0px 0; -} -#data-pane p span{ - display: block; - padding: 2px 10px; - color: #fff; - border: 1px solid #fff; - width: 123px; - margin: 0; - text-align: center; + height: 69%; + margin-top: 1px; + border-bottom: 1px solid #aaa; + overflow: auto; +} + +#data-pane p { + margin: 0; } -#data-pane p span.tab1{ - float: right; - background: -moz-linear-gradient(top, #666, #bbb); - background: -webkit-linear-gradient(top, #666, #bbb); - color: #fff; + +#data-pane p span { + display: block; + padding: 2px 10px; + color: #fff; + border: 1px solid #fff; + width: 123px; + margin: 0; + text-align: center; } -#data-pane p span.tab2{ - background: -moz-linear-gradient(top, #ccc, #999); - background: -webkit-linear-gradient(top, #ccc, #999); + +#data-pane p span.tab1 { + float: right; + background: -moz-linear-gradient(top, #666, #bbb); + background: -webkit-linear-gradient(top, #666, #bbb); + color: #fff; } + +#data-pane p span.tab2 { + background: -moz-linear-gradient(top, #ccc, #999); + background: -webkit-linear-gradient(top, #ccc, #999); +} + #function-pane { - height: 30%; - margin-top: 1px; - overflow: auto; + height: 30%; + margin-top: 1px; + overflow: auto; } .left-pane { - font-size: 14px; - position: relative; + font-size: 14px; + position: relative; } #kb-function-panel .kb-function-body { - height: 100% ; - max-height: 100% ; + height: 100%; + max-height: 100%; } h3.pane-title { - margin: 0; - position: relative; - background-color: rgb(224,224,224); - padding: 3px 5px; - border: 1px solid #C2C2C2; - font-size: 16px; + margin: 0; + position: relative; + background-color: rgb(224, 224, 224); + padding: 3px 5px; + border: 1px solid #c2c2c2; + font-size: 16px; } #add-link { - position: absolute; - top: 4px; - right: 7px; - font-size: 0.8em; + position: absolute; + top: 4px; + right: 7px; + font-size: 0.8em; } ul.pane-list { - margin: 0; - padding : 2px + margin: 0; + padding: 2px; } ul.pane-list li { - list-style: none; - padding: 1px; - margin-left: 5px; + list-style: none; + padding: 1px; + margin-left: 5px; } -/* --- KBase method list styles --*/ +/* --- KBase method list styles -- */ .kb-method-list-logo { - width: 30pt; - height: 30pt; - color: #fff; - background-color: #607D8B; - border-style: solid; - border-width: 0px; - border-color: #555; - text-align: center; - display: inline-block; - padding-top: 6pt; - font-size: 18pt; - font-weight: bold; - text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777; - cursor: pointer; + width: 30pt; + height: 30pt; + color: #fff; + background-color: #607d8b; + border-style: solid; + border-width: 0; + border-color: #555; + text-align: center; + display: inline-block; + padding-top: 6pt; + font-size: 18pt; + font-weight: bold; + text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777; + cursor: pointer; } .kb-method-list-logo:hover { - border-width: 5px; - padding-top: 2.5pt; + border-width: 5px; + padding-top: 2.5pt; } .kb-method-list-more-div { - color:#777; - font-size: 10pt; - margin: 2px; - text-align: justify; + color: #777; + font-size: 10pt; + margin: 2px; + text-align: justify; } .kb-method-list-more-div > div:last-child { - text-align: right; + text-align: right; } .kb-method-search-clear { - cursor: pointer; - border: 1px solid #CECECE; - border-left: none; + cursor: pointer; + border: 1px solid #cecece; + border-left: none; } /* A function in the function pane */ li.function a { - text-decoration: none; - color: rgb(80,130,50); + text-decoration: none; + color: rgb(80, 130, 50); } + li.function a:visited { - /* don't recolor */ - color: rgb(80,130,50); + /* don't recolor */ + color: rgb(80, 130, 50); } + /* dataset in data pane */ li.dataset a { - text-decoration: none; - color: rgb(130,80,50); + text-decoration: none; + color: rgb(130, 80, 50); } + li.dataset a:visited { - /* don't recolor */ - color: rgb(130,80,50); + /* don't recolor */ + color: rgb(130, 80, 50); } - /* dialog box + forms styling */ .dialog-box { - padding: 20px; + padding: 20px; } .dialog-box ul li { - padding: 50px 5px; - border-bottom: 1px solid #AAA; - font-size: 1.2em; + padding: 50px 5px; + border-bottom: 1px solid #aaa; + font-size: 1.2em; } .dialog-box ul li:first-child { - padding-top: 20px; + padding-top: 20px; } .dialog-box ul li:last-child { - border-bottom: none; + border-bottom: none; } fieldset { - margin: 0 0 15px 0; - border: none; + margin: 0 0 15px 0; + border: none; } fieldset label { -/* display: block; -*/ margin: 0 0 3px 0; - font-weight: bold; - font-size: 1em; + /* display: block; +*/ + margin: 0 0 3px 0; + font-weight: bold; + font-size: 1em; } -fieldset input[type="text"], fieldset select { - width: 200px; +fieldset input[type="text"], +fieldset select { + width: 200px; } -fieldset input[type="password"], fieldset select { - width: 200px; + +fieldset input[type="password"], +fieldset select { + width: 200px; } /* styling of cells */ -div.dataset-cell, div.function-cell { - width: 90%; - margin: 3px auto; - padding: 7px 17px; - border: 1px solid #ccc; -} -img.dataset-cell{ - margin: 3px auto; - padding: 0; +div.dataset-cell, +div.function-cell { + width: 90%; + margin: 3px auto; + padding: 7px 17px; + border: 1px solid #ccc; } -.function-cell{ - background-image: url("../images/gears.png"); - background-position: right; - background-repeat: no-repeat; - #background-color: #f2f2f2; + +img.dataset-cell { + margin: 3px auto; + padding: 0; } -.dataset-cell p, .function-cell p { - font-size: .875em; + +.function-cell { + background-image: url("../images/gears.png"); + background-position: right; + background-repeat: no-repeat; } -.dataset-cell h2, .function-cell h2{ - margin-bottom: 0; - font-size: 1.1em; + +.dataset-cell p, +.function-cell p { + font-size: 0.875em; } -.textcell{ - width: 90%; - margin: 3px auto; - padding: 5px 17px; - font-size: 1em; - height: 1em; - border: 2px solid #fff; - color: #111; + +.dataset-cell h2, +.function-cell h2 { + margin-bottom: 0; + font-size: 1.1em; } -.textcell:hover{ - border: 2px dotted #ccc; +.textcell { + width: 90%; + margin: 3px auto; + padding: 5px 17px; + font-size: 1em; + height: 1em; + border: 2px solid #fff; + color: #111; } -p.textcuepara{ - color: #ccc; - padding: 0; - margin: 0; - height: 1em; - display: none; +.textcell:hover { + border: 2px dotted #ccc; } -div.tools p, div.texttools p{ - margin: 0; +p.textcuepara { + color: #ccc; + padding: 0; + margin: 0; + height: 1em; + display: none; } -div.textarea{ - width: 650px; - border: none; - padding: 0; - height: auto; - min-height: 1.2em; - display: none; + +div.tools p, +div.texttools p { + margin: 0; } -.tools, .texttools{ - display: none; + +div.textarea { + width: 650px; + border: none; + padding: 0; + height: auto; + min-height: 1.2em; + display: none; } -.tools{ - height: 1em; - margin-top: .5em; - margin-left: 10px; + +.tools, +.texttools { + display: none; } -.tools a{ - border: 1px solid #018841; - padding: 2px 4px; - font-size: 13px; + +.tools { + height: 1em; + margin-top: 0.5em; + margin-left: 10px; } -#narrative-header .tools{ - display: block; - width: 30em; - position: relative; - top: -2.0em; - left: 350px; +.tools a { + border: 1px solid #018841; + padding: 2px 4px; + font-size: 13px; } -.texttools img{ - vertical-align: middle; + +#narrative-header .tools { + display: block; + width: 30em; + position: relative; + top: -2em; + left: 350px; } -img.remove{ - float: right; + +.texttools img { + vertical-align: middle; } -.ui-state-highlight{ - background-color: fbfaed; + +img.remove { + float: right; } -div.metadata{ - display: block; - width: 200px; - padding: 0 10px; - height: 100px; - float: left; + +.ui-state-highlight { + background-color: fbfaed; } -div.social{ - float: right; - display: block; - width: 80px; - padding: 0 10px; - display: none; + +div.metadata { + display: block; + width: 200px; + padding: 0 10px; + height: 100px; + float: left; } -p span.notification{ - background-color: #ff3333; - color: #fff; - padding: 4px 8px; - border-radius: 1em; + +div.social { + float: right; + width: 80px; + padding: 0 10px; + display: none; } +p span.notification { + background-color: #f33; + color: #fff; + padding: 4px 8px; + border-radius: 1em; +} /** * Bootstrap 3 submenu hack^H^H^H^H fix * http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing */ -.dropdown-submenu{position:relative;} -.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} -.dropdown-submenu:hover>.dropdown-menu{display:block;} -.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} -.dropdown-submenu:hover>a:after{border-left-color:#ffffff;} -.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} +.dropdown-submenu { + position: relative; +} -/** End Bootstrap 3 submenu fix **/ +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropdown-submenu > a::after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #ccc; + margin-top: 5px; + margin-right: -10px; +} + +.dropdown-submenu:hover > a::after { + border-left-color: #fff; +} +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +/** End Bootstrap 3 submenu fix **/ /* Fixes to bring toolbars up to Bootstrap 3 */ #maintoolbar { - position: relative; - top: 5px; - min-height: 0; - border: none !important; - background-image: none !important; - background-color: #f9f9f9 !important; - -webkit-box-shadow: none; - box-shadow: none; + position: relative; + top: 5px; + min-height: 0; + border: none !important; + background-image: none !important; + background-color: #f9f9f9 !important; + -webkit-box-shadow: none; + box-shadow: none; } #maintoolbar-container { - margin-left: 10px; + margin-left: 10px; } #menubar { - position: absolute; - width: 100%; - top: 3px; - background-color: #f9f9f9; - border-bottom: 2px solid #ddd; - padding-bottom: 5px; -} - -#menubar .navbar { - margin-bottom: 5px; + position: absolute; + width: 100%; + top: 3px; + background-color: #f9f9f9; + border-bottom: 2px solid #ddd; + padding-bottom: 5px; } #menubar .navbar .container { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } /* some more bootstrap hacks */ .navbar { - min-height: 0; - background-image: none; - background-color: #f8f8f8; + min-height: 0; + background-image: none; + background-color: #f8f8f8; } -#menubar .navbar-nav>li>a { - padding-top: 10px; - padding-bottom: 7px; +#menubar .navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 7px; } -.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { - background-image: none; +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + background-image: none; } -.panel-default>.panel-heading { - background-image: none; -} - -.btn-default { - /** not sure why this is here, but it makes buttons look fuzzy. - commenting out until answers come around. - WJR **/ - /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);*/ +.panel-default > .panel-heading { + background-image: none; } #menus { - padding-left: 0px; + padding-left: 0; } -#menubar .navbar { - width: 100%; +#menubar .navbar { + margin-bottom: 5px; + width: 100%; } div#notebook_panel { - -webkit-box-shadow: none; /*0 -1px 0px rgba(0, 0, 0, 0.1);*/ - -moz-box-shadow: none; /*0 -1px 0px rgba(0, 0, 0, 0.1); */ - box-shadow: none; /* 0 -1px 0px rgba(0, 0, 0, 0.1); */ + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } -/*#notebook { - padding-top: 1em; -} -*/ .version-stamp a { - padding-right: 320px; - text-align: right; - color: #0088CC !important; + padding-right: 320px; + text-align: right; + color: #08c !important; } .creator-stamp { - padding-right: 320px; - height: 1em; - text-align: right; - color: #006698; - font-size: 120%; - line-height: 1em; - font-family: Oxygen, Arial, sans-serif; - font-weight: bold; + padding-right: 320px; + height: 1em; + text-align: right; + color: #006698; + font-size: 120%; + line-height: 1em; + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; } .panel { - margin-bottom: 0px; + margin-bottom: 0; } #kb-jobs-panel { - margin-bottom: 5px; + margin-bottom: 5px; } .kb-narr-side-panel { - margin-bottom: 5px; - height:100%; + margin-bottom: 5px; + height: 100%; } .kb-narr-side-panel .kb-title { - padding: 10px 5px; - font-size: 14pt; - font-family: Oxygen, Arial, sans-serif; - font-weight: bold; - text-transform: uppercase; - color: #2e618d; - /*border-bottom: 1px solid #CECECE;*/ + padding: 10px 5px; + font-size: 14pt; + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; + text-transform: uppercase; + color: #2e618d; } .kb-narr-side-panel .btn { - border: none; + border: none; } /* From user and job state service */ .kbujs-table-container { - height: auto; + height: auto; } .kbujs-timestamp { - color: #0066b9; - cursor: pointer; + color: #0066b9; + cursor: pointer; } .kbujs-error-cell { - color: #c7254e; - font-weight: bold; + color: #c7254e; + font-weight: bold; } .kbujs-error:hover { - cursor: pointer; + cursor: pointer; } .kbujs-loading-modal { - text-align: center; - font-size: 16px; - font-weight: bold; + text-align: center; + font-size: 16px; + font-weight: bold; } .kbujs-refresh-btn { - position: absolute; - right: 5px; + position: absolute; + right: 5px; } .kbujs-jobs-table { - margin-left: auto !important; - margin-right: auto !important; + margin-left: auto !important; + margin-right: auto !important; } .kbujs-loading { - height: 100% - vertical-align: middle; - text-align: center + height: 100%; + vertical-align: middle; + text-align: center; } .kbujs-delete-job { - cursor: pointer; + cursor: pointer; } .kbujs-error-traceback { - white-space : nowrap; - float : left; - max-width : 516px; - max-height: 250px; - overflow-x : scroll; - overflow-y: scroll; + white-space: nowrap; + float: left; + max-width: 516px; + max-height: 250px; + overflow-x: scroll; + overflow-y: scroll; } /* For connecting lines */ .kb-line { - background-color: lightgrey; - position: absolute; + background-color: lightgrey; + position: absolute; } - - /* 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; } /** @@ -1196,40 +1390,42 @@ div#notebook_panel { * the rest of dataTables might... */ .paging_full_numbers { - height: 22px; - line-height: 22px; + height: 22px; + line-height: 22px; } + .paging_full_numbers a:active { - outline: none + outline: none; } + .paging_full_numbers a:hover { - text-decoration: none; + text-decoration: none; } .paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active { - border: 1px solid #aaa; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding: 2px 5px; - margin: 0 3px; - cursor: pointer; - *cursor: hand; - color: #333 !important; + border: 1px solid #aaa; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding: 2px 5px; + margin: 0 3px; + cursor: pointer; + *cursor: hand; + color: #333 !important; } .paging_full_numbers a.paginate_button { - background-color: #ddd; + background-color: #ddd; } .paging_full_numbers a.paginate_button:hover { - background-color: #ccc; - text-decoration: none !important; + background-color: #ccc; + text-decoration: none !important; } .paging_full_numbers a.paginate_active { - background-color: #99B3FF; + background-color: #99b3ff; } /** End kbaseNarrFuncResults.css **/ @@ -1237,404 +1433,418 @@ div#notebook_panel { /***************************************************************************** ** Formerly in kbaseNarrFunc.css *****************************************************************************/ + /* * Styles for KBase Narrative notebook page, function panel */ - /* Header for panel */ - .kb-function-header { - padding: 10px 0; - color: #0064b6; - font-weight: bold; - background-color: #b6e9f8; - text-align: center; - margin-bottom: 3px; + +/* Header for panel */ +.kb-function-header { + padding: 10px 0; + color: #0064b6; + font-weight: bold; + background-color: #b6e9f8; + text-align: center; + margin-bottom: 3px; } .kb-narr-panel-body { - height: calc(100%); - padding: 3px; + height: calc(100%); + padding: 3px; } -.kb-narr-panel-body > div{ - height: 100%; + +.kb-narr-panel-body > div { + height: 100%; } + .kb-narr-panel-body-wrapper { - overflow-y: auto; - height: 100%; + overflow-y: auto; + height: 100%; } -.kb-narr-panel-body-wrapper > div{ - height: 100%; + +.kb-narr-panel-body-wrapper > div { + height: 100%; } .kb-narr-panel-toggle { - margin-right: 4px; - margin-top: -4px; - cursor: pointer; - color: #888; - -webkit-user-select: none; /* Chrome/Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+ */ + margin-right: 4px; + margin-top: -4px; + cursor: pointer; + color: #888; + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ } /* Container for func list */ .kb-function-body { - height: 100%; - /* overflow-y: auto; */ - width: 100%; + height: 100%; + width: 100%; } .kb-function-body .accordion .panel .panel-body { - padding: 0px; - padding-left: 5px; + padding: 0; + padding-left: 5px; } .kb-function-body ul { - border: 1px solid #dddddd; - list-style-type: none; - margin: 0; - padding: 0; - width: 100%; + border: 1px solid #ddd; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; } + .kb-function-body li { - padding: 5px 5px; - width: 100%; - text-align: left; + padding: 5px 5px; + width: 100%; + text-align: left; } /* alt. rows */ .kb-function-body li:nth-child(odd) { - background-color: #eee; - border-bottom: 1px solid #ddd; + background-color: #eee; + border-bottom: 1px solid #ddd; } + .kb-function-body li:nth-child(even) { - background-color: #fff; - border-bottom: 1px solid #ddd; + background-color: #fff; + border-bottom: 1px solid #ddd; } .kb-function-body li:hover { - text-decoration: underline; - cursor: pointer; - background-color: #F4F5D6; + text-decoration: underline; + cursor: pointer; + background-color: #f4f5d6; } - /* Link to a function */ .kb-function-body a { - text-decoration: none; + text-decoration: none; } + .kb-function-body a:hover { - text-decoration: none; + text-decoration: none; } .kb-function-error { - background-color: #f2dede !important; - color: #b94a48; - border-color: #eed3d7 !important; + background-color: #f2dede !important; + color: #b94a48; + border-color: #eed3d7 !important; } /* Help on a function */ .kb-function-help { - padding: 0 3px; - float: right; - cursor: pointer; - color: #56559e; - font-size: 14pt; + padding: 0 3px; + float: right; + cursor: pointer; + color: #56559e; + font-size: 14pt; } .kb-function-help:hover { - color: black; + color: black; } .kb-function-help-popup { - position: absolute; - top: 0px; - left: 300px; - z-index: 99; - cursor: pointer; - max-width: 300px; + position: absolute; + top: 0; + left: 300px; + z-index: 99; + cursor: pointer; + max-width: 300px; } .kb-function-help-popup h1 { - margin: 0; - margin-top: -10px; - padding: 0; - font-size: 110%; - color: #3076A2; + margin: 0; + margin-top: -10px; + padding: 0; + font-size: 110%; + color: #3076a2; } .kb-function-help-popup h2 { - margin: 10px 0 -10px 0; - padding-top: 5px; - font-size: 80%; - color: #999; - font-style: italic; - text-align: right; - font-weight: 100; + margin: 10px 0 -10px 0; + padding-top: 5px; + font-size: 80%; + color: #999; + font-style: italic; + text-align: right; + font-weight: 100; } .kb-function-help-popup .header { - background-color: #fff; - color: #3076A2; - font-weight: bold; - font-size: 120%; - margin: 0; - padding: 0; + background-color: #fff; + color: #3076a2; + font-weight: bold; + font-size: 120%; + margin: 0; + padding: 0; } .kb-function-help-popup a { - font-weight: bold; - text-decoration: underline; + font-weight: bold; + text-decoration: underline; } .kb-function-help-popup .version { - font-size: 80%; - color: #666; + font-size: 80%; + color: #666; } .kb-function-help-popup .body { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } #kb-function-help { - position: absolute; - top: 400px; - left: 300px; - z-index: 99; - cursor: pointer; - width: 250px; + position: absolute; + top: 400px; + left: 300px; + z-index: 99; + cursor: pointer; + width: 250px; } #kb-function-help h1 { - margin: 0; - margin-top: -10px; - padding: 0; - font-size: 110%; - color: #3076A2; + margin: 0; + margin-top: -10px; + padding: 0; + font-size: 110%; + color: #3076a2; } #kb-function-help h2 { - margin: 10px 0 -10px 0; - padding-top: 5px; - font-size: 80%; - color: #999; - font-style: italic; - text-align: right; - font-weight: 100; + margin: 10px 0 -10px 0; + padding-top: 5px; + font-size: 80%; + color: #999; + font-style: italic; + text-align: right; + font-weight: 100; } #kb-function-error-traceback { - white-space : nowrap; - float : left; - max-width : 250px; - overflow-x : scroll; + white-space: nowrap; + float: left; + max-width: 250px; + overflow-x: scroll; } .kb-function-dim { - background-color: #eee !important; - /* border-color: #ddd !important; */ + background-color: #eee !important; } .kb-function-dim .panel-heading { - background-color: #eee !important; - /*border-color: #000 !important; */ + background-color: #eee !important; } .kb-function-cat-dim { - background-color: #ddd !important; - border-color: #ddd !important; + background-color: #ddd !important; + border-color: #ddd !important; } .kb-function-cat-dim .panel-heading { - background-color: #ddd !important; - border-color: #ddd !important; + background-color: #ddd !important; + border-color: #ddd !important; } .kb-function-toggle { - color: #0088cc; - font-style: italic; - cursor: pointer; + color: #08c; + font-style: italic; + cursor: pointer; } .kb-cell-toolbar .buttons { - font-weight: bold; - color: #CECECE !important; + font-weight: bold; + color: #cecece !important; } .kb-cell-toolbar .btn { - border: none; + border: none; } .kb-cell-toolbar .icon { - display: inline-block; - padding: 0; - margin-right: 4px; - vertical-align: top; - overflow: hidden; + display: inline-block; + padding: 0; + margin-right: 4px; + vertical-align: top; + overflow: hidden; } .kb-cell-toolbar .title { - font-size: 120%; - font-family: Oxygen, Arial, sans-serif; - font-weight: bold; - color: #2e618d; + font-size: 120%; + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; + color: #2e618d; } .kb-cell-toolbar .subtitle { - font-family: "Roboto", Arial, sans-serif; - font-size: 90%; - color: #666; + font-family: "Roboto", Arial, sans-serif; + font-size: 90%; + color: #666; } .kb-cell-toolbar .info-link { - font-family: "Roboto", Arial, sans-serif; - font-size: 90%; - color: #666; + font-family: "Roboto", Arial, sans-serif; + font-size: 90%; + color: #666; } - .kb-toolbar-open { - border-bottom: 1px solid #CCC; - border-radius: 0; + border-bottom: 1px solid #ccc; + border-radius: 0; } .selected .kb-toolbar-open { - border-left: 1px solid #4BB856; - border-bottom: 1px solid #4BB856; - background-color: #dff0d8; + border-left: 1px solid #4bb856; + border-bottom: 1px solid #4bb856; + background-color: #dff0d8; } .unselected .kb-toolbar-open { - background-color: none; + background-color: none; } .selected.kb-error .kb-toolbar-open { - border-color: #D9534F; - background-color: #F2DEDE; + border-color: #d9534f; + background-color: #f2dede; } /* ------------------------------------------------- */ + /* IPython cells */ .kb-cell-run { - z-index: auto; - opacity: 1; + z-index: auto; + opacity: 1; } + .kb-cell-run h1 { - font-family: 'Roboto'; - font-weight: normal; - font-size: 12pt; - line-height: 15px; - color: #2E618D; - margin: 3px 13px 3px 3px; - opacity: inherit; - display: inline; + font-family: 'Roboto'; + font-weight: normal; + font-size: 12pt; + line-height: 15px; + color: #2e618d; + margin: 3px 13px 3px 3px; + opacity: inherit; + display: inline; } + .kb-cell-run div.kb-func-desc { - opacity: inherit; - display: block; + opacity: inherit; + display: block; } .kb-cell-run h2 { - font-family: 'Roboto'; - font-weight: normal; - font-size: 11pt; - line-height: 150%; - color: #666666; - margin: 3px; - opacity: inherit; + font-family: 'Roboto'; + font-weight: normal; + font-size: 11pt; + line-height: 150%; + color: #666; + margin: 3px; + opacity: inherit; } + .kb-cell-run form input[type="submit"] { - float: right; - opacity: inherit; - margin-top: 5px; + float: right; + opacity: inherit; + margin-top: 5px; } + .kb-cell-run form .buttons { - float: right; - margin-top: 5px; + float: right; + margin-top: 5px; } + .kb-cell-params table { - border: none; - margin-bottom: 10px; - opacity: inherit; - margin-left: auto; - margin-right: auto; + border: none; + margin-bottom: 10px; + opacity: inherit; + margin-left: auto; + margin-right: auto; } -.kb-cell-params table > tr,td { - border: none; - vertical-align: middle; + +.kb-cell-params table > tr, +td { + border: none; + vertical-align: middle; } -.kb-cell-params thead>tr>th, -.kb-cell-params tbody>tr>th, -.kb-cell-params tfoot>tr>th, -.kb-cell-params thead>tr>td, -.kb-cell-params tbody>tr>td, -.kb-cell-params tfoot>tr>td { - padding: 2px 4px; +.kb-cell-params thead > tr > th, +.kb-cell-params tbody > tr > th, +.kb-cell-params tfoot > tr > th, +.kb-cell-params thead > tr > td, +.kb-cell-params tbody > tr > td, +.kb-cell-params tfoot > tr > td { + padding: 2px 4px; } -.kb-cell-params tr:hover td, .kb-cell-params tr:hover th { - background:#eee; +.kb-cell-params tr:hover td, +.kb-cell-params tr:hover th { + background: #eee; } /* grey out the form while running */ .kb-cell-run.running form { - opacity: 0.6; + opacity: 0.6; } + /* progress "meter" */ .kb-cell-progress { - display: none; + display: none; } + .kb-cell-progress.running { - display: block; + display: block; } .kb-cell-progressbar { - width: 400px; - height: 20px; + width: 400px; + height: 20px; } .kb-out-desc { - font-family: 'Roboto'; - font-weight: normal; - font-size: 12pt; - line-height: 15px; - color: #2E618D; - margin: 3px; - opacity: inherit; - display: inline; + font-family: 'Roboto'; + font-weight: normal; + font-size: 12pt; + line-height: 15px; + color: #2e618d; + margin: 3px; + opacity: inherit; + display: inline; } .kb-err-desc { - font-family: 'Roboto'; - font-weight: normal; - font-size: 12pt; - line-height: 15px; - color: #A94442; - margin: 3px; - opacity: inherit; - display: inline; + font-family: 'Roboto'; + font-weight: normal; + font-size: 12pt; + line-height: 15px; + color: #a94442; + margin: 3px; + opacity: inherit; + display: inline; } .kb-err-msg { - font-size: 80% !important; + font-size: 80% !important; } .kb-out-header { - background-color: #ddd; - padding: 10px; + background-color: #ddd; + padding: 10px; } .kb-func-timestamp { - color: #555; - font-size: 10pt; - font-family: 'Roboto'; - margin-top: -3px; - padding-right: 1em; + color: #555; + font-size: 10pt; + font-family: 'Roboto'; + margin-top: -3px; + padding-right: 1em; } .unselected .kb-func-timestamp { - color: silver; + color: silver; } .kb-func-panel { @@ -1650,11 +1860,9 @@ div#notebook_panel { padding: 5px 10px; } - - .kb-func-panel .panel-body { - padding: 0px 10px; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + padding: 0 10px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .kb-func-panel > .panel-heading + .panel-collapse .panel-body { @@ -1667,20 +1875,20 @@ div#notebook_panel { /** output cell styling */ .kb-cell-output .panel { - border-radius: 0px; + border-radius: 0; } .kb-cell-output-content { - overflow-x: auto; - padding: 5px; + overflow-x: auto; + padding: 5px; } .kb-cell-output .panel .panel-heading { - padding: 5px 10px; + padding: 5px 10px; } .rendered_html .kb-cell-output ul { - margin: 0 0 10px 0; + margin: 0 0 10px 0; } /* override from some jupyter style? */ @@ -1688,116 +1896,123 @@ div#notebook_panel { text-decoration: none; } -.kb-cell-output .nav>li>a { - padding: 5px 10px; +.kb-cell-output .nav > li > a { + padding: 5px 10px; } .kb-cell-error .panel-heading { - background-image: none; - padding: 5px 10px; + background-image: none; + padding: 5px 10px; } + /*** styling for the jobs manager */ .kb-jobs-title { - font-family: Oxygen, Arial, sans-serif; - font-weight: bold; - color: #185A85; - font-size: 1.2em; + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; + color: #185a85; + font-size: 1.2em; } .kb-jobs-title .glyphicon-info-sign { - font-size: 0.9em; + font-size: 0.9em; } .kb-jobs-info-table { - margin: 0 2px; - width: 95%; + margin: 0 2px; + width: 95%; } .kb-jobs-info-table th { - font-family: Oxygen, Arial, sans-serif; - font-weight: bold; - color: #777; - vertical-align:top; - padding-right: 5px; - width: 30%; - max-width: 30%; - min-width: 30%; - + font-family: Oxygen, Arial, sans-serif; + font-weight: bold; + color: #777; + vertical-align: top; + padding-right: 5px; + width: 30%; + max-width: 30%; + min-width: 30%; } .kb-jobs-item { - border-bottom: 2px solid #dddddd; - margin-bottom: 5px; - padding-bottom: 3px; + border-bottom: 2px solid #ddd; + margin-bottom: 5px; + padding-bottom: 3px; } .kb-jobs-error { - background-color: #f2dede; + background-color: #f2dede; } + .kb-jobs-error-btn { - font-size: 10pt; + font-size: 10pt; } + .kb-jobs-item:last-child { - border-bottom: none; + border-bottom: none; } .kb-jobs-error-modal { - width: 485px; - word-wrap: break-word; - max-height: 220px; - overflow-y: auto; - overflow-x: hidden; + width: 485px; + word-wrap: break-word; + max-height: 220px; + overflow-y: auto; + overflow-x: hidden; } /** new method parameter styling **/ .kb-method-parameter-panel { - border-left: 3px solid #fff; + border-left: 3px solid #fff; } + .kb-method-parameter-panel-hover { - border-left: 3px solid #428bca; + border-left: 3px solid #428bca; } + .kb-method-parameter-row { - margin:0px; - padding:5px; - border-radius:5px; + margin: 0; + padding: 5px; + border-radius: 5px; } + /* for some reason, the css :hover doesn't work right on this div, so we use jquery to toggle this class */ .kb-method-parameter-row-hover { - background:#F9F9F9; + background: #f9f9f9; } .kb-method-parameter-row-error { - background: #f2dede; + background: #f2dede; } + .kb-method-parameter-error-mssg { - padding:5px; - text-align:center; - font-family: Oxygen, sans-serif; - font-weight: bold; - font-size: 9pt; - color:#F44336; + padding: 5px; + text-align: center; + font-family: Oxygen, sans-serif; + font-weight: bold; + font-size: 9pt; + color: #f44336; } - /* not sure how to get text in these divs to valign middle... */ .kb-method-parameter-name { - font-family: Oxygen, sans-serif; - font-weight: bold; - color:#777; - text-align:right; - vertical-align:middle; - margin-top:3px; - padding-right:0px; - padding-left:0px; - white-space: normal; + font-family: Oxygen, sans-serif; + font-weight: bold; + color: #777; + text-align: right; + vertical-align: middle; + margin-top: 3px; + padding-right: 0; + padding-left: 0; + white-space: normal; } + .kb-method-parameter-input { - vertical-align:middle; - white-space: nowrap; - padding-left:10px; + vertical-align: middle; + white-space: nowrap; + padding-left: 10px; } + .kb-method-parameter-input input { - font-weight: bold; + font-weight: bold; } /* @@ -1812,162 +2027,162 @@ 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-method-parameter-input > div { - /* allow space for the required (red arrow), satisfied (green checkbox) icon */ - padding-right: 20px; + /* allow space for the required (red arrow), satisfied (green checkbox) icon */ + padding-right: 20px; } + .kb-method-parameter-input .kb-method-parameter-accepted-glyph, .kb-method-parameter-input .kb-method-parameter-required-glyph { - /* This scoots the icon inside */ - margin-left: -15px; - font-size: 15px; -} -.kb-method-parameter-hint { - padding-left: 7px; + /* This scoots the icon inside */ + margin-left: -15px; + font-size: 15px; } .kb-parameter-data-selection { - font-weight: bold; + font-weight: bold; } .kb-method-parameter-hint { - color: #777; - text-align:left; - margin-top:3px; + padding-left: 7px; + color: #777; + text-align: left; + margin-top: 3px; } .kb-method-parameter-required-glyph { - color: #F44336; - margin-left:7px; + color: #f44336; + margin-left: 7px; } + .kb-method-parameter-accepted-glyph { - color: #4BB856; - margin-left:7px; + color: #4bb856; + margin-left: 7px; } .kb-method-parameter-info { - color: #777; - margin-left:7px; + color: #777; + margin-left: 7px; } .kb-parameter-data-row-remove { - color: #777; + color: #777; } + .kb-parameter-data-row-add { - color: #777; + color: #777; } - .kb-method-advanced-options-controller-inactive { - font-family: Oxygen, sans-serif; - font-weight: bold; - font-style: italic; - font-size: 10pt; - line-height: 14px; - color: #777; - text-align: center; + font-family: Oxygen, sans-serif; + font-weight: bold; + font-style: italic; + font-size: 10pt; + line-height: 14px; + color: #777; + text-align: center; } + .kb-method-advanced-options-controller { - font-family: Oxygen, sans-serif; - font-weight: bold; - font-style: italic; - cursor:pointer; - font-size: 10pt; - line-height: 14px; - color: #0088cc; - text-align: center; + font-family: Oxygen, sans-serif; + font-weight: bold; + font-style: italic; + cursor: pointer; + font-size: 10pt; + line-height: 14px; + color: #08c; + text-align: center; } + .kb-method-advanced-options-controller:hover { - color: #2a6496; + color: #2a6496; } .kb-method-footer { - width: 100%; - overflow: none; - background-color: #F5F5F5; - padding: 10px; + width: 100%; + overflow: none; + background-color: #f5f5f5; + padding: 10px; } .kb-method-subtitle { - background-color: #F5F5F5; - padding: 3px 5px; + background-color: #f5f5f5; + padding: 3px 5px; } -/* -- App/method panel styling --*/ +/* -- App/method panel styling -- */ .kb-app-panel { - border-radius: 0px; + border-radius: 0; } .kb-app-error { - background-color: #F2DEDE; + background-color: #f2dede; } .kb-app-step-container { - margin-top: 6px; -} -.kb-app-panel > .panel-footer { - border: 0; - border-radius: 0px; + margin-top: 6px; } -.kb-app-func-panel { +.kb-app-panel > .panel-footer { + border: 0; + border-radius: 0; } .kb-app-panel-description { - font-family: 'Roboto'; - font-weight: normal; - font-size: 12pt; - line-height: 15px; - color: #2E618D; + font-family: 'Roboto'; + font-weight: normal; + font-size: 12pt; + line-height: 15px; + color: #2e618d; } + .kb-app-step-error-mssg { - font-family: sans-serif; - font-size: 11pt; - line-height: 14px; - color: #A63232; - text-align: left; - /* pading-left:30px; */ - margin:10px; + font-family: sans-serif; + font-size: 11pt; + line-height: 14px; + color: #a63232; + text-align: left; + margin: 10px; } + .kb-app-step-error-heading { - font-family: Oxygen, sans-serif; - font-weight: bold; - font-size: 13pt; - line-height: 14px; - color: #555; - text-align: left; - padding-left:5px; - margin-top:20px; + font-family: Oxygen, sans-serif; + font-weight: bold; + font-size: 13pt; + line-height: 14px; + color: #555; + text-align: left; + padding-left: 5px; + margin-top: 20px; } + .kb-app-step-error-main-heading { - font-family: Oxygen, sans-serif; - cursor:pointer; - font-size: 16pt; - line-height: 18px; - color:#555; - /*background:#f2dede;*/ - text-align: left; - padding-left:20px; - margin-top:20px; + font-family: Oxygen, sans-serif; + cursor: pointer; + font-size: 16pt; + line-height: 18px; + color: #555; + text-align: left; + padding-left: 20px; + margin-top: 20px; } .kb-app-step-error { - border: 3px solid #D14836; - z-index: auto; + border: 3px solid #d14836; + z-index: auto; } .kb-app-step-running { - border: 3px solid #2196F3; - z-index: auto; - /*animation: pulse 1s ease infinite; - -webkit-animation: pulse 1s ease infinite; */ - /*opacity: 0.7;*/ + border: 3px solid #2196f3; + z-index: auto; } /* -- "next steps" text and links -- */ + .kb-app-next { - border-top: 2px solid #CECECE; + border-top: 2px solid #cecece; } + .kb-app-next h3 { font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.9em; @@ -1979,207 +2194,237 @@ control with padding, and then scooting the icon back into its column. -webkit-margin-before: 0; -webkit-margin-after: 0.25em; } + .kb-app-next-hide { float: right; - color: #2196F3; + color: #2196f3; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.9em; margin-top: 0.25em; margin-right: 0.5em; } + .kb-app-next-unhide { - color: #2196F3; + color: #2196f3; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.9em; margin-top: 0.25em; } -.kb-app-next div { /* container for links */ + +.kb-app-next div { + /* container for links */ clear: both; } -/* -- END method/app styling --*/ +/* -- END method/app styling -- */ @-webkit-keyframes pulse { - 0% { opacity: 1.0; } - 50% { opacity: 0.7; } - 100% { opacity: 1.0; } + 0% { + opacity: 1; + } + + 50% { + opacity: 0.7; + } + + 100% { + opacity: 1; + } } @keyframes pulse { - 0% { opacity: 1.0; } - 50% { opacity: 0.7; } - 100% { opacity: 1.0; } + 0% { + opacity: 1; + } + + 50% { + opacity: 0.7; + } + + 100% { + opacity: 1; + } } button.kb-app-run { - background-color: #2196F3; - border-radius: 1px; - color: #fff; - border: none; - padding: 10px 20px; - font-size: 13px; - box-shadow: 1px 1px 1px #ccc; - -webkit-box-shadow: 1px 1px 1px #ccc; - moz-box-shadow: 1px 1px 1px #ccc; + background-color: #2196f3; + border-radius: 1px; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 13px; + -webkit-box-shadow: 1px 1px 1px #ccc; + -moz-box-shadow: 1px 1px 1px #ccc; + box-shadow: 1px 1px 1px #ccc; } + button.kb-app-run:hover { - background-color: #1E88E5; + background-color: #1e88e5; } + button.kb-app-run.kb-app-cancel { - background-color: #F44336; + background-color: #f44336; } + button.kb-app-run.kb-app-cancel:hover { - background-color: #E53935; + background-color: #e53935; } - button.kb-method-run { - background-color: #2196F3; - border-radius: 1px; - color: #fff; - border: none; - padding: 10px 20px; - font-size: 13px; - box-shadow: 1px 1px 1px #ccc; - -webkit-box-shadow: 1px 1px 1px #ccc; - moz-box-shadow: 1px 1px 1px #ccc; + background-color: #2196f3; + border-radius: 1px; + color: #fff; + border: none; + padding: 10px 20px; + font-size: 13px; + -webkit-box-shadow: 1px 1px 1px #ccc; + -moz-box-shadow: 1px 1px 1px #ccc; + box-shadow: 1px 1px 1px #ccc; } + button.kb-method-run:hover { - background-color: #1E88E5; + background-color: #1e88e5; } - /*********** * END of kbaseNarrFunc.css ***********/ - /********* * From kbaseData.css *********/ + /* For data in KBase workspace */ .modal-body { - max-height: 100%; + max-height: 100%; } /* === Tooltips === */ + /* see bootstrap styles, e.g. bootstrap.css, for the original definitions */ div[class="tooltip-inner"] { - max-width: 400px; - white-space: pre-wrap; - text-align: left; + max-width: 400px; + white-space: pre-wrap; + text-align: left; } + .notebook_app .tooltip { - z-index: 2000 !important; + z-index: 2000 !important; } + .notebook_app .tooltip-inner { - background-color: #1B69B6; + background-color: #1b69b6; } + .notebook_app .tooltip.top .tooltip-arrow { - border-top-color: #1B69B6; + border-top-color: #1b69b6; } + .notebook_app .tooltip.top-left .tooltip-arrow { - border-top-color: #1B69B6; + border-top-color: #1b69b6; } + .notebook_app .tooltip.top-right .tooltip-arrow { - border-top-color: #1B69B6; + border-top-color: #1b69b6; } + .notebook_app .tooltip.right .tooltip-arrow { - border-right-color: #1B69B6; + border-right-color: #1b69b6; } + .notebook_app .tooltip.left .tooltip-arrow { - border-left-color: #1B69B6; + border-left-color: #1b69b6; } + .notebook_app .tooltip.bottom .tooltip-arrow { - border-bottom-color: #1B69B6; + border-bottom-color: #1b69b6; } + .notebook_app .tooltip.bottom-left .tooltip-arrow { - border-bottom-color: #1B69B6; + border-bottom-color: #1b69b6; } + .notebook_app .tooltip.bottom-right .tooltip-arrow { - border-bottom-color: #1B69B6; + border-bottom-color: #1b69b6; } .kb-data-main-panel { - height: 100%; - margin-bottom: 5px; - max-height: 425px; + height: 100%; + margin-bottom: 5px; + max-height: 425px; } -#kb-ws { -/* background-color: #fff; - width: 100%; - padding-bottom: 5px; - height: 425px !important; -*/} - #data-tabs { - height: 375px !important; + height: 375px !important; } .kb-ws-refresh-btn { - position: absolute; - right: 5px; - + position: absolute; + right: 5px; } #kb-ws .form-control { - width: 85%; - margin: 3px; + width: 85%; + margin: 3px; } .kb-data-control { - width: 95%; + width: 95%; } /* Data table */ -.kb-data-table thead{ - max-width: 100%; - width: 281px; +.kb-data-table thead { + max-width: 100%; + width: 281px; } + .kb-data-table { - max-height: 265px; - width: 100% !important; + max-height: 265px; + width: 100% !important; } + .kb-data-table tbody tr { - border-bottom: 1px solid gainsboro; + border-bottom: 1px solid gainsboro; } .kb-data-table tbody tr td { - max-height: 16px; - padding: 5px; - font-size: 1em; - max-width: 100px; + max-height: 16px; + padding: 5px; + font-size: 1em; + max-width: 100px; } -.kb-data-table tbody tr:hover, .kb-data-table tbody tr td.highlighted { - background-color: #F4F5D6; - cursor: pointer; +.kb-data-table tbody tr:hover, +.kb-data-table tbody tr td.highlighted { + background-color: #f4f5d6; + cursor: pointer; } .kb-data-obj-name { - text-overflow: ellipsis; - overflow:hidden; - white-space: nowrap; - display: inline-block; - max-width: 88%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: inline-block; + max-width: 88%; } .kb-data-loading { - height: 100%; - vertical-align: middle; - text-align: center + height: 100%; + vertical-align: middle; + text-align: center; } .kb-data-loading img { - vertical-align: middle; + vertical-align: middle; } -#kb-ws .dataTables_filter { display: none; } +#kb-ws .dataTables_filter { + display: none; +} -/*------------------------------------------ +/* ------------------------------------------ * View details on KBase objects * * Namespace: kb-data-obj @@ -2187,71 +2432,82 @@ div[class="tooltip-inner"] { /* Button to activate the object pane */ button.kb-data-obj { - float: right; + float: right; } + /* Panel */ .kb-data-obj-panel { - background: linear-gradient(to bottom, #00d2ff, #B2ADCB); - padding: 0; - margin: 10px; + background: linear-gradient(to bottom, #00d2ff, #b2adcb); + padding: 0; + margin: 10px; } + .kb-data-obj-panel button.close { - margin: 5px; - font-size: 125%; + margin: 5px; + font-size: 125%; } + .kb-data-obj-panel-info { - background: rgba(255,255,255,0.5); - height: 100%; - padding: 10px; + background: rgba(255, 255, 255, 0.5); + height: 100%; + padding: 10px; } + .kb-data-obj-panel-graph { - background: transparent; - height: 100%; - padding: 10px; + background: transparent; + height: 100%; + padding: 10px; } + .kb-data-obj-panel-info dl { - margin: 0; + margin: 0; } + .kb-data-obj-panel-info dl dt { - float: left; - clear: left; - width: 90px; - text-align: right; - color: rgba(0, 0, 0, 0.5); - /*padding: 0 0 5px 0;*/ + float: left; + clear: left; + width: 90px; + text-align: right; + color: rgba(0, 0, 0, 0.5); } -.kb-data-obj-panel-info dl dt:after { - content: ":"; + +.kb-data-obj-panel-info dl dt::after { + content: ":"; } + .kb-data-obj-panel-info dl dd { - margin: 0 0 0 100px; - /*padding: 0 0 5px 0;*/ + margin: 0 0 0 100px; } + .kb-data-obj-panel-verlist span { - padding: 0px 5px; - margin-left: 3px; - border-radius: 2px; - background-color: rgba(255,255,255,0.5); - color: rgba(0,0,0,0.5); - cursor: pointer; + padding: 0 5px; + margin-left: 3px; + border-radius: 2px; + background-color: rgba(255, 255, 255, 0.5); + color: rgba(0, 0, 0, 0.5); + cursor: pointer; } + .kb-data-obj-panel-verlist span.selected { - background-color: #2196F3; - color: white; - cursor: default; + background-color: #2196f3; + color: white; + cursor: default; } + .kb-data-obj-panel-graph table { - background-color: rgba(255, 255, 255, 0.9); - width: 100%; - border: none; - color: rgba(0, 0, 0, 0.8); + background-color: rgba(255, 255, 255, 0.9); + width: 100%; + border: none; + color: rgba(0, 0, 0, 0.8); } + .kb-data-obj-panel-graph thead tr { - background-color: rgb(230, 230, 230); - color: rgba(0, 0, 0, 1); + background-color: rgb(230, 230, 230); + color: rgba(0, 0, 0, 1); } + .kb-data-obj-graph-ref-to { - margin-top: 8px; + margin-top: 8px; } /* @@ -2261,895 +2517,944 @@ button.kb-data-obj { /* default blue button in the new style */ .kb-primary-btn { - background-color: #2196F3; - border-radius: 1px; - color: #fff; - border: none; - padding: 10px 20px; - margin: 3px; - font-size: 14px; - font-family: "Roboto",Helvetica,Arial,sans-serif; - font-weight: 400; - box-shadow: 1px 1px 3px #aaa; + background-color: #2196f3; + border-radius: 1px; + color: #fff; + border: none; + padding: 10px 20px; + margin: 3px; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + font-weight: 400; + box-shadow: 1px 1px 3px #aaa; } + .kb-primary-btn:hover { - background-color: #1E88E5; + background-color: #1e88e5; } + .kb-primary-btn[disabled] { - box-shadow: none; - background-color: #BBDEFB; - color: #fff; + box-shadow: none; + background-color: #bbdefb; + color: #fff; } + /* gray button in the new style */ .kb-default-btn { - background-color: #F5F5F5; - border-radius: 1px; - color: #555; - border: none; - padding: 10px 20px; - margin: 3px; - font-size: 14px; - font-family: "Roboto",Helvetica,Arial,sans-serif; - font-weight: 400; - box-shadow: 1px 1px 3px #aaa; + background-color: #f5f5f5; + border-radius: 1px; + color: #555; + border: none; + padding: 10px 20px; + margin: 3px; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + font-weight: 400; + box-shadow: 1px 1px 3px #aaa; } + .kb-default-btn:hover { - background-color: #CECECE; + background-color: #cecece; } + .kb-default-btn[disabled] { - box-shadow: none; - color: #aaa; + box-shadow: none; + color: #aaa; } .kb-btn-sm { - padding: 5px 10px; - font-size: 13px; + padding: 5px 10px; + font-size: 13px; } /* card layout */ -.narrative-card-logo{ - display: flex; - width: 50px; - margin-right: 2px; +.narrative-card-logo { + display: flex; + width: 50px; + margin-right: 2px; } -.narrative-card-row-main{ - display: flex; - align-items: center; - width:98%; - margin:0px 2px; - padding:0px 4px; +.narrative-card-row-main { + display: flex; + align-items: center; + width: 98%; + margin: 0 2px; + padding: 0 4px; } -.narrative-data-list-subcontent{ - padding-left :10px; +.narrative-data-list-subcontent { + padding-left: 10px; } -.narrative-card-ellipsis{ - display:flex; - align-items: center; - justify-content: center; - width:20px; +.narrative-card-ellipsis { + display: flex; + align-items: center; + justify-content: center; + width: 20px; } - -.narrative-card-palette-icon{ - position: relative; - color: '#888'; - left: 15px; - top: -50px; +.narrative-card-palette-icon { + position: relative; + color: #888; + left: 15px; + top: -50px; } - -.narrative-card-action-button-wrapper{ - width: 80px; - height: 50px; - margin: 0px 10px; +.narrative-card-action-button-wrapper { + width: 80px; + height: 50px; + margin: 0 10px; } - -.narrative-card-action-button{ - width: calc(100% - 6px); - height: 80%; - display: flex; - padding: 0px; - justify-content: center; +.narrative-card-action-button { + width: calc(100% - 6px); + height: 80%; + display: flex; + padding: 0; + justify-content: center; } -.narrative-card-action-button > span{ - margin-right: 5px; +.narrative-card-action-button > span { + margin-right: 5px; } -.narrative-card-action-button-name{ - display: inline-block; + +.narrative-card-action-button-name { + display: inline-block; } -.narrative-data-panel-btnToolbar > span{ - color: #888; + +.narrative-data-panel-btnToolbar > span { + color: #888; } -.narrative-data-panel-btnToolbar{ - display: flex; - justify-content: center; + +.narrative-data-panel-btnToolbar { + display: flex; + justify-content: center; } /* data list */ -.kb-data-list-obj-row, .narrative-card-row{ - transition: all 0.1s ease; - - border-left-style: solid; - border-left-width: 5px; - border-left-color: #fff; - color:#333; - - box-shadow: 1px 1px 1px 1px #fff; - --webkit-box-shadow: 1px 1px 1px 1px #fff; - --moz-box-shadow: 1px 1px 1px 1px #fff; - +.kb-data-list-obj-row, +.narrative-card-row { + transition: all 0.1s ease; + border-left-style: solid; + border-left-width: 5px; + border-left-color: #fff; + color: #333; + -webkit-box-shadow: 1px 1px 1px 1px #fff; + -moz-box-shadow: 1px 1px 1px 1px #fff; + box-shadow: 1px 1px 1px 1px #fff; } - .kb-function-dim .kb-data-list-obj-row { - border-left-color: #eee; - + border-left-color: #eee; } -.kb-data-list-obj-row:hover, .narrative-card-row:hover { - border-left-style: solid; - border-left-width: 5px; - border-left-color: #4BB856; - - box-shadow: 1px 1px 1px 1px #aaa; - -webkit-box-shadow: 1px 1px 1px 1px #aaa; - moz-box-shadow: 1px 1px 1px 1px #aaa; +.kb-data-list-obj-row:hover, +.narrative-card-row:hover { + border-left-style: solid; + border-left-width: 5px; + border-left-color: #4bb856; + -webkit-box-shadow: 1px 1px 1px 1px #aaa; + -moz-box-shadow: 1px 1px 1px 1px #aaa; + box-shadow: 1px 1px 1px 1px #aaa; } .palette { - background: #F5F5F5 !important; + background: #f5f5f5 !important; } .kb-data-list-obj-row-selected { - border-left-style: solid; - border-left-width: 5px; - border-left-color: #4BB856; - box-shadow: 1px 1px 1px 1px #aaa; - -webkit-box-shadow: 1px 1px 1px 1px #aaa; - moz-box-shadow: 1px 1px 1px 1px #aaa; + border-left-style: solid; + border-left-width: 5px; + border-left-color: #4bb856; + -webkit-box-shadow: 1px 1px 1px 1px #aaa; + -moz-box-shadow: 1px 1px 1px 1px #aaa; + box-shadow: 1px 1px 1px 1px #aaa; } - .kb-data-list-obj-row-main { - width:100%; - margin:0px; - padding:0px; + width: 100%; + margin: 0; + padding: 0; } /* again the css hover over div inherits strangly, so we use js */ .kb-data-list-nav-buttons { - padding: 5px 8px; - font-size: 18px; - border: none; - text-shadow: none !important; - box-shadow: none; - -webkit-box-shadow: none; - moz-box-shadow: none; - margin: 0; + padding: 5px 8px; + font-size: 18px; + border: none; + text-shadow: none !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + margin: 0; } .kb-data-list-add-data-button { - - cursor:pointer; - background-color: #F44336; - color: #fff; - border: none; - box-shadow: 1px 1px 3px #aaa; - -webkit-box-shadow: 1px 1px 3px #aaa; - moz-box-shadow: 1px 1px 3px #aaa; - text-align: center; - - width: 30pt; - height: 30pt; - border-radius: 50%; - padding-top: 5pt; -} -/* specialize buttons that hover over narrative */ -#kb-add-code-cell, #kb-add-md-cell { - box-shadow: #CECECE 2px 2px 1px; - height: 40px; - width: 40px; - background-color: #2196F3; - opacity: 0.5; + cursor: pointer; + background-color: #4379b1; + color: #fff; + border: none; + -webkit-box-shadow: 1px 1px 3px #aaa; + -moz-box-shadow: 1px 1px 3px #aaa; + box-shadow: 1px 1px 3px #aaa; + text-align: center; + width: 30pt; + height: 30pt; + border-radius: 50%; } -#kb-add-code-cell { right: 100px; } -#kb-add-md-cell { margin-right: 20px; } +/* specialize buttons that hover over narrative */ +#kb-add-code-cell, +#kb-add-md-cell { + background-color: #2196f3; + border-radius: 50%; + bottom: 15px; + box-shadow: #cecece 2px 2px 1px; + cursor: pointer; + color: #fff; + height: 40px; + opacity: 0.5; + padding-top: 5px; + position: fixed; + width: 40px; + z-index: 5; +} + +#kb-add-code-cell { + right: 75px; + padding-left: 7px; +} + +#kb-add-md-cell { + margin-right: 20px; + right: 10px; + padding-left: 8px; +} + +#kb-add-code-cell:hover, +#kb-add-md-cell:hover, .kb-data-list-add-data-button:hover { - cursor:pointer; - background-color: #DC3C31; + opacity: 1; + cursor: pointer; + background-color: #36618e; } .kb-data-list-add-data-text-button { - background-color: #F44336; - border-radius: 1px; - color: #fff; - border: none; - padding: 10px 20px; - margin: 3px; - font-size: 14px; - font-family: "Roboto",Helvetica,Arial,sans-serif; - font-weight: 400; - box-shadow: 1px 1px 3px #aaa; - -webkit-box-shadow: 1px 1px 3px #aaa; - moz-box-shadow: 1px 1px 3px #aaa; + background-color: #4379b1; + border-radius: 1px; + color: #fff; + border: none; + padding: 10px 20px; + margin: 3px; + font-size: 14px; + font-family: "Roboto", Helvetica, Arial, sans-serif; + font-weight: 400; + -webkit-box-shadow: 1px 1px 3px #aaa; + -moz-box-shadow: 1px 1px 3px #aaa; + box-shadow: 1px 1px 3px #aaa; } + .kb-data-list-add-data-text-button:hover { - background-color: #DC3C31; + background-color: #36618e; } - /* buttons */ .kb-data-list-btn { - background-color: #2196F3; - border-radius: 1px; - color: #fff; - border: none; - padding: 5px 10px; - font-size: 13px; - box-shadow: 1px 1px 3px #aaa; - -webkit-box-shadow: 1px 1px 3px #aaa; - moz-box-shadow: 1px 1px 3px #aaa; - margin: 5px; + background-color: #2196f3; + border-radius: 1px; + color: #fff; + border: none; + padding: 5px 10px; + font-size: 13px; + -webkit-box-shadow: 1px 1px 3px #aaa; + -moz-box-shadow: 1px 1px 3px #aaa; + box-shadow: 1px 1px 3px #aaa; + margin: 5px; } + .kb-data-list-btn:hover { - background-color: #1E88E5; + background-color: #1e88e5; } + .kb-data-list-btn[disabled] { - box-shadow: none; - background-color: #BBDEFB; - color: #fff; + box-shadow: none; + background-color: #bbdefb; + color: #fff; } .kb-data-list-cancel-btn { - background-color: #F5F5F5; - border-radius: 1px; - color: #888; - border: none; - padding: 5px 10px; - font-size: 13px; - box-shadow: 1px 1px 3px #aaa; - -webkit-box-shadow: 1px 1px 3px #aaa; - moz-box-shadow: 1px 1px 3px #aaa; - margin: 5px; + background-color: #f5f5f5; + border-radius: 1px; + color: #888; + border: none; + padding: 5px 10px; + font-size: 13px; + -webkit-box-shadow: 1px 1px 3px #aaa; + -moz-box-shadow: 1px 1px 3px #aaa; + box-shadow: 1px 1px 3px #aaa; + margin: 5px; } + .kb-data-list-cancel-btn:hover { - background-color: #CECECE; + background-color: #cecece; } .kb-data-list-row-hr { - width:70%; - margin: 2px auto; - + width: 70%; + margin: 2px auto; } - - - - .kb-data-list-logo { - width: 30pt; - height: 30pt; - color: #fff; - background-color: #607D8B; - border-radius: 50%; - border-style: solid; - border-width: 0px; - border-color: #555; - text-align: center; - display: inline-block; - padding-top: 6pt; - font-size: 18pt; - font-weight: bold; - text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777; + width: 30pt; + height: 30pt; + color: #fff; + background-color: #607d8b; + border-radius: 50%; + border-style: solid; + border-width: 0; + border-color: #555; + text-align: center; + display: inline-block; + padding-top: 6pt; + font-size: 18pt; + font-weight: bold; + text-shadow: -1px 0 #777, 0 1px #777, 1px 0 #777, 0 -1px #777; } + /* For shifting over logos that are stacked on * top of eachother */ .kb-data-list-logo-shifted1 { - margin-left: 1px; - margin-top: 1px; + margin-left: 1px; + margin-top: 1px; } + .kb-data-list-logo-shiftedx1 { - margin-left: 8px; - margin-top: 6px; + margin-left: 8px; + margin-top: 6px; } + .kb-data-list-logo-shifted2 { - margin-left: 9px; - margin-top: 7px; + margin-left: 9px; + margin-top: 7px; } + .kb-data-list-logo-shiftedx2 { - margin-left: 16px; - margin-top: 12px; + margin-left: 16px; + margin-top: 12px; } .kb-data-list-logo-font1 { - font-size: 1.7em !important; + font-size: 1.7em !important; } .kb-data-list-logo-font2 { - font-size: 1.5em !important; + font-size: 1.5em !important; } /* Nested item indent (crude!!) */ .kb-data-list-level1 { - margin-left: 25px; + margin-left: 25px; } + .kb-data-list-level2 { - margin-left: 50px; + margin-left: 50px; } .kb-data-list-info { - width: 80%; - padding: 6px 0px; - min-height: 60px; - border-bottom: 1px solid #E0E0E0; + width: 80%; + padding: 6px 0; + min-height: 60px; + border-bottom: 1px solid #e0e0e0; } - .kb-data-list-name { - color:#2e618d; - font-size: 11pt; - font-family: 'Oyxgen', Arial, sans-serif; - font-weight: bold; - margin: 2px; - cursor: pointer; + color: #2e618d; + font-size: 11pt; + font-family: 'Oyxgen', Arial, sans-serif; + font-weight: bold; + margin: 2px; + cursor: pointer; } + .kb-data-list-name:hover { - text-decoration: underline; + text-decoration: underline; } + .kb-data-list-version { - color:#777; - font-size: 9pt; - font-style: italic; - white-space: nowrap; - cursor:default; + color: #777; + font-size: 9pt; + font-style: italic; + white-space: nowrap; + cursor: default; } + .kb-data-list-type { - color:#777; - font-size: 10pt; - margin: 2px; - cursor:default; + color: #777; + font-size: 10pt; + margin: 2px; + cursor: default; } + .kb-data-list-date { - color:#777; - font-size: 10pt; - margin: 2px; - white-space: nowrap; - cursor:default; + color: #777; + font-size: 10pt; + margin: 2px; + white-space: nowrap; + cursor: default; } + .kb-data-list-edit-by { - color:#777; - font-size: 10pt; - margin: 2px; - margin-left: 0px; - white-space: nowrap; - cursor: pointer; + color: #777; + font-size: 10pt; + margin: 2px; + margin-left: 0; + white-space: nowrap; + cursor: pointer; } + .kb-data-list-edit-by:hover { - color:#444; + color: #444; } .kb-data-list-narinfo { - color:#777; - font-size: 10pt; - margin: 2px; - margin-left: 10px; - /* Not a link anymore, so we disable for now - cursor: pointer;*/ -} -.kb-data-list-narinfo:hover { - /*color:#444;*/ + color: #777; + font-size: 10pt; + margin: 2px; + margin-left: 10px; } .kb-data-list-narrative-error { - color:#F44336; - font-size: 10pt; - margin: 2px; + color: #f44336; + font-size: 10pt; + margin: 2px; } .kb-data-list-narrative { - color:#777; - font-size: 10pt; - margin: 2px; - margin-left: 10px; - /* cursor:pointer; */ -} -.kb-data-list-narrative:hover { - /* narrative btn isn't a link yet, so don't highlight - *color:#444;*/ + color: #777; + font-size: 10pt; + margin: 2px; + margin-left: 10px; } .kb-data-list-more { - color:#777; - font-size: 8pt; - margin: 0px; - padding: 0px; - margin-left: 15px; - white-space: nowrap; + color: #777; + font-size: 8pt; + margin: 0; + padding: 0; + margin-left: 15px; + white-space: nowrap; } + .kb-data-list-more-btn { - padding: 2px 4px; - font-size: 12px; - border: none; - text-shadow: none !important; - box-shadow: none; - -webkit-box-shadow: none; - moz-box-shadow: none; - margin: 0; + padding: 2px 4px; + font-size: 12px; + border: none; + text-shadow: none !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + margin: 0; } + .kb-data-list-more-div { - color:#777; - font-size: 10pt; - margin: 2px; - display: flex; - flex-direction: column; - align-items: center; + color: #777; + font-size: 10pt; + margin: 2px; + display: flex; + flex-direction: column; + align-items: center; } + .kb-data-list-more-div tr { - color:#777; - font-size: 10pt; - margin: 2px; + color: #777; + font-size: 10pt; + margin: 2px; } + .kb-data-list-more-div tr:hover { - background-color: #eee; + background-color: #eee; } + .kb-data-list-more-div tr:nth-child(odd) { - background-color: #F5F5F5; + background-color: #f5f5f5; } + .kb-data-list-more-div tr:hover:nth-child(odd) { - background-color: #eee; + background-color: #eee; } + .kb-data-list-more-div th { - color:#777; - font-size: 10pt; - font-weight: bold; - text-align: right; - margin: 2px; + color: #777; + font-size: 10pt; + font-weight: bold; + text-align: right; + margin: 2px; } + .kb-data-list-more-div td { - color:#777; - font-size: 10pt; - text-align: left; - margin: 2px; - padding-left: 8px; - word-break: break-all; + color: #777; + font-size: 10pt; + text-align: left; + margin: 2px; + padding-left: 8px; + word-break: break-all; } + .kb-data-list-job-name:hover { - text-decoration: none; + text-decoration: none; } - /* Indent nested box */ .kb-data-list-box > .kb-data-list-box { - margin-left: 40px; + margin-left: 40px; } /* Control buttons */ .kb-data-list-ctl span.inviso { - /* like mayo on wonderbread */ - color: #FFF; - background-color: #FFF; - text-shadow: none; + /* like mayo on wonderbread */ + color: #fff; + background-color: #fff; + text-shadow: none; } + .kb-data-list-ctl[enabled] { - background-color: lightgrey; + background-color: lightgrey; } -/* end data list*/ - - +/* end data list */ /* APP CATALOG SLIDEOUT BROWSER STYLES */ .kbcb-browser-container { - margin: 0 auto; - /*background: #eeeded;*/ + margin: 0 auto; + + /* background: #eeeded; */ } .kbcb-back-link { - padding: 0.4em; + padding: 0.4em; } - .kbcb-ctr-toolbar { - margin: 0.4em; + margin: 0.4em; } .kbcb-main-panel-div { - margin: 0em; + margin: 0; } - .kbcb-loading-panel-div { - margin: 0.1em; - text-align:center; - vertical-align:middle; + margin: 0.1em; + text-align: center; + vertical-align: middle; } - .unselected .prompt .method-icon { - color: silver; + color: silver; } + .method-icon { - color: rgb(103, 58, 183); + color: rgb(103, 58, 183); } .unselected .prompt .app-icon { - color: silver; + color: silver; } + .app-icon { - color: rgb(0, 150, 136); + color: rgb(0, 150, 136); } /* when the entire app card is a link, use this style */ .kbcb-app-card-link { - text-decoration: none; + text-decoration: none; } .kbcb-app-card-list-container { - overflow: auto; - padding: 0em 0.2em 1em 0.2em; + overflow: auto; + padding: 0 0.2em 1em 0.2em; } .kbcb-app-card-container { - margin: 0.4em; - width: 300px; - height:110px; - display: block; - position: relative; - float: left; + margin: 0.4em; + width: 300px; + height: 110px; + display: block; + position: relative; + float: left; } .kbcb-app-card { - background: #f1f1f5; - border-radius: 2px; - width: 100%; - height:100%; - overflow:hidden; - text-align:center; - vertical-align:middle; - color:#666; + background: #f1f1f5; + border-radius: 2px; + width: 100%; + height: 100%; + overflow: hidden; + text-align: center; + vertical-align: middle; + color: #666; } + .kbcb-app-card-header { - max-height:90px; - overflow:hidden; - text-align: left; + max-height: 90px; + overflow: hidden; + text-align: left; } + .kbcb-app-card-title-panel { - padding: 10px 5px 5px 5px; + padding: 10px 5px 5px 5px; } - .kbcb-app-card-title { - font-size:1.1em; - /*max-height: 2.6em; - overflow:hidden;*/ + font-size: 1.1em; } .kbcb-app-card-module { - font-size:0.8em; + font-size: 0.8em; } + .kbcb-app-card-authors { - font-size:0.8em; + font-size: 0.8em; } + .kbcb-app-card-subtitle { - padding: 10px 10px 10px 10px; - font-size:0.9em; - overflow:hidden; + padding: 10px 10px 10px 10px; + font-size: 0.9em; + overflow: hidden; } .kbcb-app-card-footer { - font-size:0.9em; - position:absolute; - bottom:0; - left:0; - margin:0px 5px 5px 5px; - width:100%; - color:#888; + font-size: 0.9em; + position: absolute; + bottom: 0; + left: 0; + margin: 0 5px 5px 5px; + width: 100%; + color: #888; } .kbcb-app-card-logo { - padding: 0px; - margin: 0px; - font-size: 0.9em; + padding: 0; + margin: 0; + font-size: 0.9em; } - -.kbcb-star-default{ - color:#888; +.kbcb-star-default { + color: #888; } .kbcb-star-favorite { - color:orange; + color: orange; } -.kbcb-star-nonfavorite, .kbcb-star-favorite, .kbcb-star-default{ - cursor:pointer; + +.kbcb-star-nonfavorite, +.kbcb-star-favorite, +.kbcb-star-default { + cursor: pointer; } -.kbcb-star-nonfavorite:hover, .kbcb-star-default:hover { - color:red; + +.kbcb-star-nonfavorite:hover, +.kbcb-star-default:hover { + color: red; } .kbcb-star-favorite:hover { - color:orange; + color: orange; } .kbcb-star-count { - margin-left: 0.3em; - display: inline-block; + margin-left: 0.3em; + display: inline-block; } + .kbcb-run-count { - margin-left: 0.3em; - display: inline-block; + margin-left: 0.3em; + display: inline-block; } -.kbcb-info { -} .kbcb-info:hover { - color:orange; + color: orange; } .kbcb-hover { - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.2s ease-in-out; } .kbcb-hover:hover { - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); - cursor:pointer; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + cursor: pointer; } - /* styles for App page */ .kbcb-app-page { - background: #f1f1f5; - border-radius: 2px; - text-align:center; - color:#666; + background: #f1f1f5; + border-radius: 2px; + text-align: center; + color: #666; } + .kbcb-app-page-header { - text-align: left; + text-align: left; } + .kbcb-app-page-title-panel { - padding: 10px 5px 5px 0px; + padding: 10px 5px 5px 0; } .kbcb-app-page-title { - font-size:2em; - /*max-height: 2.6em; - overflow:hidden;*/ + font-size: 2em; } .kbcb-app-page-module { - font-size:1.2em; + font-size: 1.2em; } + .kbcb-app-page-authors { - font-size:1em; - margin:0.3em 0 0 0; + font-size: 1em; + margin: 0.3em 0 0 0; } + .kbcb-app-page-subtitle { - padding: 1.5em 2em 0em 2em; - font-size:1.2em; + padding: 1.5em 2em 0 2em; + font-size: 1.2em; } .kbcb-app-page-stats-bar { - font-size:1.2em; - padding:0em 2em 0.8em 3em; - width:100%; + font-size: 1.2em; + padding: 0 2em 0.8em 3em; + width: 100%; } .kbcb-app-page-logo { - padding: 0em; - margin: 1em; - text-align: center; + padding: 0; + margin: 1em; + text-align: center; } - /* END CATALOG SLIDEOUT BROWSER STYLES */ - - - - - - - - - /* share panel styles */ .kb-share-user-permissions-dropdown { - border-style:none; - text-shadow: none !important; - box-shadow: none; - -webkit-box-shadow: none; - moz-box-shadow: none; - padding:2px; - width:auto; - height:auto; + border-style: none; + text-shadow: none !important; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + padding: 2px; + width: auto; + height: auto; } .kb-share-select { - width: 200px; + width: 200px; } /* hack to make the selection fill the width */ .kb-share-select .select2-selection__choice { - width: 100% !important; - background-color: #F5F5F5 !important; + width: 100% !important; + background-color: #f5f5f5 !important; } - .kb-nar-manager-titles { - font-family: 'Oxygen'; - font-weight: bold; - color: #777; - margin: 10px; - margin-top: 20px; - font-size: 14pt; - font-weight: bold; + font-family: 'Oxygen'; + color: #777; + margin: 10px; + margin-top: 20px; + font-size: 14pt; + font-weight: bold; } - /* End kbaseData.css */ - - /* styling for data import overlay */ .kb-import-content { - position:relative; - margin: 0 0 0 0px; - /*overflow-x: hidden; - overflow-y: auto;*/ - /*height: 830px;*/ - display: block; + position: relative; + margin: 0 0 0 0; + display: block; } .kb-import-content .btn-xs { - border: none; + border: none; +} + +.ftp-file-header { + margin-bottom: 5px; + margin-top: 8px; +} + +.globus-link:hover { + text-decoration: none; +} + +.kb-import-content .upload-options button { + background: #fff; + border: 1px solid #c4c4c4; + box-sizing: border-box; + border-radius: 6px; + font-family: Oxygen; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 18px; + + /* identical to box height */ + text-align: center; + color: #000; + width: 140px; + height: 42px; + margin: 0 6px; +} + +.kb-import-content .upload-options button:hover { + border: 1px solid #cfcfcf; + background-color: #fafafa; +} + +.kb-import-content .upload-options button:focus { + background-color: #f2f2f2; +} + +.kb-import-content .upload-options button:active { + background-color: #e6e6e6; +} + +.kb-import-content .upload-options button:disabled { + background-color: #fafafa; + color: #929292; } .kb-overlay-footer { - position: absolute; - width: 100%; - bottom: 0px; - height: 50px; + position: absolute; + width: 100%; + bottom: 0; + height: 50px; } .kb-overlay-footer .btn-primary, .kb-overlay-footer .btn-default { - margin: 15px 15px 0 0; + margin: 15px 15px 0 0; } - .kb-import-search { - margin: 10px 40px 10px 10px; + margin: 10px 40px 10px 10px; } .kb-import-filter { - margin: 10px 40px 10px 10px; + margin: 10px 40px 10px 10px; } - .kb-import-item { - margin: 0 20px 0px 5px; - padding: 20px 0 0 0; + margin: 0 20px 0 5px; + padding: 20px 0 0 0; } .kb-import-item:hover { - background-color: #f8f8f8; - -moz-box-shadow: 0 0 2px #aaa; - -webkit-box-shadow: 0 0 2px #aaa; - box-shadow: 0 0 2px #aaa; + background-color: #f8f8f8; + -moz-box-shadow: 0 0 2px #aaa; + -webkit-box-shadow: 0 0 2px #aaa; + box-shadow: 0 0 2px #aaa; } .kb-import-item hr { - width: 85%; - border: 2px solid #eaeaea; - margin-top: 15px; /*override*/ - margin-bottom: 0; + width: 85%; + border: 2px solid #eaeaea; + margin-top: 15px; /* override */ + margin-bottom: 0; } -/* -.kb-import-item input[type="checkbox"] { - margin: 15px 30px 15px 0px; -}*/ .kb-import-item .kb-import-checkbox { - font-size: 1.5em; - padding: 15px 20px 15px 20px; - opacity: .4; + font-size: 1.5em; + padding: 15px 20px 15px 20px; + opacity: 0.4; } .kb-import-item .fa-check-square-o { - opacity: 1.0 !important; + opacity: 1 !important; } - .kb-import-info { - display: inline-block; - margin: 10px 20px 0 0; + display: inline-block; + margin: 10px 20px 0 0; + font-weight: normal; } .kb-import-info span { - font-size: .9em; - font-weight: 700; - color: #999; -} - -.kb-import-info { - font-weight: normal; + font-size: 0.9em; + font-weight: 700; + color: #999; } .kb-import-status { - margin: 20px; + margin: 20px; } /* Error dialog */ .kb-error-dialog strong { - color: darkgreen; /* Douglas Adams forever */ + color: darkgreen; /* Douglas Adams forever */ } + .kb-err-text { - color: black; - font-family: Consolas, "Courier New", monospace; + color: black; + font-family: Consolas, "Courier New", monospace; } + .kb-err-warn { - color: firebrick; - font-style: italic; - margin-top: 0.5em; + color: firebrick; + font-style: italic; + margin-top: 0.5em; } /* View-only (read-only) */ #kb-ro-btn { - margin-right: 20px; + margin-right: 20px; } + #kb-view-mode { - display: inline-block; - font-size: 13pt; - margin: -15px 0 0 1em; - padding: 0; - cursor: pointer; + display: inline-block; + font-size: 13pt; + margin: -15px 0 0 1em; + padding: 0; + cursor: pointer; } + #kb-view-mode-narr div { - display: inline-block; - /*background-color: #2196F3; - color: #BBDEFB;*/ - color: #2196F3; - font-family: 'Oxygen', Arial, sans-serif; - font-weight: bold; - font-size: 16px; - /* font-weight: bold; */ - padding: 3px; - margin-top: -3px; - width: 147px; - text-align: left; - position: fixed; + display: inline-block; + color: #2196f3; + font-family: 'Oxygen', Arial, sans-serif; + font-weight: bold; + font-size: 16px; + padding: 3px; + margin-top: -3px; + width: 147px; + text-align: left; + position: fixed; } /* little space for control-close icon */ #kb-view-mode-narr-hide { - display: block; - height: 41px; - width: 15px; - float: left; - font-size: 16px; - cursor: pointer; - color: #BBDEFB; - background-color: #2196F3; - padding-left: 5px; + display: block; + height: 41px; + width: 15px; + float: left; + font-size: 16px; + cursor: pointer; + color: #bbdefb; + background-color: #2196f3; + padding-left: 5px; } + /* move icon down a bit */ #kb-view-mode-narr-hide span { - margin-top: 10px; + margin-top: 10px; } + /* this is the banner for readonly mode */ .navbar-right div.label-warning { - font-family: 'Oxygen', Arial, sans-serif; - font-size: 16px; - font-weight: bold; + font-family: "Oxygen", Arial, sans-serif; + font-size: 16px; + font-weight: bold; } /* Show this over the whole narrative UI until the @@ -3164,53 +3469,49 @@ button.kb-data-obj { -Dan Gunter, Feb 10, 2015 */ #kb-loading-blocker { - position: absolute; - top: 0; - left: 0; - background-color: white; - width: 100%; - height: 100%; - z-index: 9999; + position: absolute; + top: 0; + left: 0; + background-color: white; + width: 100%; + height: 100%; + z-index: 9999; } #kb-loading-blocker p { - text-align: center; - font-size: 24px; - font-weight: bold; + text-align: center; + font-size: 24px; + font-weight: bold; } #kb-loading-blocker .kb-loading-text { - width: 40%; - margin-left: 30%; - font-size: 16px; - text-align: left; - line-height: 1.5em; + width: 40%; + margin-left: 30%; + font-size: 16px; + text-align: left; + line-height: 1.5em; } .loading-warning { - position:absolute; - display: none; + position: absolute; + display: none; } /* Override the default max-width of the narrative box */ -/*.container {*/ - /*max-width: 2000px !important;*/ -/*}*/ /* Styles for KNHX trees to remove its document.write nonsense that breaks asynchronous loading */ #popdiv { - position: absolute; - background-color: #fcfcfc; - border: 1px solid #CCC; - z-index: 10000; - visibility: hidden; - font-size: 12px; + position: absolute; + background-color: #fcfcfc; + border: 1px solid #ccc; + z-index: 10000; + visibility: hidden; + font-size: 12px; } + #popdiv a.alt { - padding-left: 9px; - font: 12px monospace; - border: none; - display: inline; + padding-left: 9px; + font: 12px monospace; + border: none; + display: inline; } - -/* bootstrap sillines */ 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..69e41033ea 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; + 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..facbe2c01b 100644 --- a/kbase-extension/static/kbase/css/landing-pages.css +++ b/kbase-extension/static/kbase/css/landing-pages.css @@ -1,519 +1,474 @@ - - - /* 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); + 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; - /*background-color: #fff !important;*/ + +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; } /* 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; -} - -/*div::-webkit-scrollbar { - width: 10px; - height: 10px; + overflow-x: scroll; } -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%; + } } - .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; -} +.active .btn-narr { + background-color: #bbe8f9; + text-align: left; + padding-left: 20px; + padding-right: 20px; + border: 1px solid #428bca; + /* FIXME: why does the font change here?! */ -.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; + font-family: OxygenBold; + font-size: 14px; } .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; + 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; } .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; } #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/narrative.css b/kbase-extension/static/kbase/css/narrative.css index dac3da9222..e36da085b5 100644 --- a/kbase-extension/static/kbase/css/narrative.css +++ b/kbase-extension/static/kbase/css/narrative.css @@ -4,837 +4,844 @@ * Shim to make sure jQuery-ui dialogs are always on front of other DOM elements. */ .ui-front { - z-index: 1000; + z-index: 1000; } -body { - overflow: hidden; +.whiteout-pane { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + background-color: #fff; + text-align: center; + z-index: 1001; } -.whiteout-pane { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - background-color: #fff; - text-align: center; - z-index: 1001; -} - -html { - background-color: #a2a2a2; - /*border: 1px solid #000;*/ - padding: 0; - margin: 0; - background-color: white; -} -body{ - margin: 0 auto; - padding:0; - line-height: 1.5em; - font: 1.375em 'OxygenRegular', Arial, sans-serif; - color: #333333; - background-color: #fff; - /*width: 1170px;*/ +body { + overflow: hidden; + margin: 0 auto; + padding: 0; + line-height: 1.5em; + font: 1.375em 'OxygenRegular', Arial, sans-serif; + color: #333; + background-color: #fff; } /* header styling */ .notebook_app .navbar-kbase { - webkit-box-shadow: none; - box-shadow: none; - moz-box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } header[role="banner"] { -/* overflow: auto; - padding: 7px 0 2px 0; - border-bottom: 1px solid #C0C0C0; - -moz-box-shadow: inset 0 0 2px #c2c2c2; - -webkit-box-shadow: inset 0 0 2px #c2c2c2; - box-shadow: inset 0 0 2px #c2c2c2; */ - position: absolute; - top: 0; - width: 100%; - 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);*/ - z-index: 999; - -} - -nav[role="navigation"] ul{ - margin: 1.2em 0 .5em 0; - /*text-align: center;*/ - padding-left: 0; + position: absolute; + top: 0; + width: 100%; + background-color: #fff; + border-bottom: 1px solid #e0e0e0; + z-index: 999; +} + +nav[role="navigation"] ul { + margin: 1.2em 0 0.5em 0; + padding-left: 0; } nav[role="navigation"] ul li { - display: inline; - margin: 0 .5em; - vertical-align: middle; + display: inline; + margin: 0 0.5em; + vertical-align: middle; } nav[role="navigation"] ul li a { - text-decoration: none; - font-size: 1.2em; - font-family: 'OxygenBold'; - padding: 7px 1em; - background-color: #5c9531; - color: #fff; - border-radius: 8px; - -moz-border-radius: 8px; - -webkit-border-radius: 8px; - -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); - border: 1px solid #5c9531; -} - -li#searchlabel a{ - } - -input#search_terms{ - padding: .4em 1em; - display: inline; - border-color: #5c9531; - position: relative; - left: -.5em; - font-size: 1em; - margin-top: -3px; - background-image: url("../images/search.png"); - background-size: 22px; - background-repeat:no-repeat; - background-position:right center; - border-top-left-radius: 0px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 0px; -} -span#searchspan{ - display: inline-block; + text-decoration: none; + font-size: 1.2em; + font-family: 'OxygenBold'; + padding: 7px 1em; + background-color: #5c9531; + color: #fff; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + border: 1px solid #5c9531; +} + +input#search_terms { + padding: 0.4em 1em; + display: inline; + border-color: #5c9531; + position: relative; + left: -0.5em; + font-size: 1em; + margin-top: -3px; + background-image: url("../images/search.png"); + background-size: 22px; + background-repeat: no-repeat; + background-position: right center; + border-top-left-radius: 0; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 0; +} + +span#searchspan { + display: inline-block; + width: 50%; +} + +@media screen and (max-width: 1170px) { + span#searchspan { width: 50%; + } } -@media screen and (max-width: 1170px){ - span#searchspan{width: 50%;} -} -@media screen and (max-width: 980px){ - span#searchspan{width: 40%;} + +@media screen and (max-width: 980px) { + span#searchspan { + width: 40%; + } } -@media screen and (max-width: 768px){ - span#searchspan{width: 30%;} + +@media screen and (max-width: 768px) { + span#searchspan { + width: 30%; + } } -@media screen and (max-width: 590px){ - span#searchspan{width: 60%;} + +@media screen and (max-width: 590px) { + span#searchspan { + width: 60%; + } } div#notebook { - border-top: none; + border-top: none; } #narrative-name { - font-weight: bold; - font-size: 1.4em; - line-height: 1.2em; - margin-bottom: 0; + font-weight: bold; + font-size: 1.4em; + line-height: 1.2em; + margin-bottom: 0; } -#narrative-creator{ - font-size: 1.2em; - line-height: 1.2em; - padding-top: 0; - padding-bottom: 0; - margin-bottom: 0; + +#narrative-creator { + font-size: 1.2em; + line-height: 1.2em; + padding-top: 0; + padding-bottom: 0; + margin-bottom: 0; } #narrative-title { - position: relative; - padding-left: 3px; - padding-bottom: 10px; - margin: 0 0 10px 0; + position: relative; + padding-left: 3px; + padding-bottom: 10px; + margin: 0 0 10px 0; } .narrative-menu-container { - position: fixed; - z-index: 499; - background-color: #ffffff; - width: 100%; - border-bottom: 1px solid #ababab; - padding-bottom: 30px; - padding-top: 10px; - margin-top: -10px; - margin-left: auto + position: fixed; + z-index: 499; + background-color: #fff; + width: 100%; + border-bottom: 1px solid #ababab; + padding-bottom: 30px; + padding-top: 10px; + margin-top: -10px; + margin-left: auto; } -p.clear{ - height: 0px; - clear: both; +p.clear { + height: 0; + clear: both; } div#header { - border-bottom: 1px solid #AAA; - position: relative; - padding: 0 0 0 20px; - height: 56px; + border-bottom: 1px solid #aaa; + position: relative; + padding: 0 0 0 20px; + height: 56px; } p#site-title { - height: 46px; - width: 46px; - background: url("../images/kbase_logo.png") no-repeat; - background-size: 46px; - margin: 5px; - float: left; - text-indent: -9999px; + height: 46px; + width: 46px; + background: url("../images/kbase_logo.png") no-repeat; + background-size: 46px; + margin: 5px; + float: left; + text-indent: -9999px; } #login-info { - position: absolute; - right: 0px; - top: 7px; - margin: 5px; - font-size: 1.2em; + position: absolute; + right: 0; + top: 7px; + margin: 5px; + font-size: 1.2em; } #login-widget button { - margin-left: 5px; -} -/* -nav { - padding: 26px 0 0 0; -} - -nav ul { - margin: 0 0 0 100px; -} - -nav ul li { - display: inline; - font: 18px 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #686868; - padding: 11px 7px; - margin: 0 15px; -} - -nav ul li.selected { - background-color: #F78F1E; - color: #fff; + margin-left: 5px; } -*/ - .search-box { - position: relative; - display: inline; - border-collapse: separate; - margin: -11px 0; - padding: 10px 1px; - width: 200px; + position: relative; + display: inline; + border-collapse: separate; + margin: -11px 0; + padding: 10px 1px; + width: 200px; } #search-box-name { - padding: 6px 0px; - border: 0; - border-radius: 4px; + padding: 6px 0; + border: 0; + border-radius: 4px; } #search-box-name:first-child { - border-right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + border-right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } #search-box-name:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - - - - #search-input { - margin: -11px 0; + margin: -11px 0; } #search-select { - margin: -11px 0; - width: 150px; + margin: -11px 0; + width: 150px; } #search-area { - position: relative; - font: 18px 'RobotoBlack', Arial, sans-serif; - font-weight: normal; - color: #686868; - padding: 11px 11px; - margin: 0 5px; + position: relative; + font: 18px 'RobotoBlack', Arial, sans-serif; + font-weight: normal; + color: #686868; + padding: 11px 11px; + margin: 0 5px; } #search-area input { - padding: 11px 11px; + padding: 11px 11px; } /* container for the left and center panes */ + #main-container { - /*width: 1170px; */ - width: 100%; - position: absolute; - top: 55px; - bottom: 5; + width: 100%; + position: absolute; + top: 55px; + bottom: 5; } - /* center pane */ - #notebook_name { - color: #006698; - font-family: "OxygenBold", Arial, sans-serif; + color: #006698; + font-family: "OxygenBold", Arial, sans-serif; } #content-column { - /*float: left; */ -/* max-width: 1170px; -*/ height: 100%; - margin-left: 300px; + height: 100%; + margin-left: 300px; } #workspace { - position: fixed; - width: 878px; - top: 173px; - bottom: 42px; - overflow: auto; + position: fixed; + width: 878px; + top: 173px; + bottom: 42px; + overflow: auto; } - /* footer */ -#bottom-tabs{ - clear: left; - position : fixed; - bottom : 0; - width: 1170px; - margin: 0 auto; - background-color: #fff; - border-top: 1px solid #aaa; +#bottom-tabs { + clear: left; + position: fixed; + bottom: 0; + width: 1170px; + margin: 0 auto; + background-color: #fff; + border-top: 1px solid #aaa; } -#bottom-tabs p a{ - border: 1px solid #018841; - background-color: #fff; - padding: 14px 20px; - font-size: 14px; +#bottom-tabs p a { + border: 1px solid #018841; + background-color: #fff; + padding: 14px 20px; + font-size: 14px; } /* left pane styling */ -/* #left-column { - width: 289px; - position: fixed; - left: 10px; - bottom: 0; - top: 53px; -} */ #data-header { - padding: 10px 0; - color: #fff; - font-weight: bold; - background-color: #099; + padding: 10px 0; + color: #fff; + font-weight: bold; + background-color: #099; } #data-title { - text-align: center; + text-align: center; } #data-add-btn { - padding: 0 0 -10px 0; - position: absolute; - right: 7px; - font-size: 0.8em; + padding: 0 0 -10px 0; + position: absolute; + right: 7px; + font-size: 0.8em; } #data-add-btn:hover { - color:#000; + color: #000; } #data-tab-nav { - border-bottom: 1px solid #aaa; - padding-top: 10px; - background-color: #0bb; - width: 100%; + border-bottom: 1px solid #aaa; + padding-top: 10px; + background-color: #0bb; + width: 100%; } #data-tab-nav ul { - padding-bottom: 0; - bottom: 0px; - top: 50px; + padding-bottom: 0; + bottom: 0; + top: 50px; } #data-tab-nav ul li { - display: inline; - border: 1px solid black; - padding: 4px 10px; - background-color: #ddd; + display: inline; + border: 1px solid black; + padding: 4px 10px; + background-color: #ddd; } #data-tab-nav ul li a:hover { - text-decoration: none; - color: #a00; + text-decoration: none; + color: #a00; } #data-tab-nav ul li a { - color: #000; + color: #000; } #data-tab-nav ul li.selected { - background-color: #fff; + background-color: #fff; } #data-view-panel { - height: 150px; - border: 1px solid #aaa; - padding: 10px; - overflow-y: auto; + height: 150px; + border: 1px solid #aaa; + padding: 10px; + overflow-y: auto; } #data-pane { - height: 69%; - margin-top: 1px; - border-bottom: 1px solid #AAA; - overflow: auto; -} -#data-pane p{ - margin: 0px 0; -} -#data-pane p span{ - display: block; - padding: 2px 10px; - color: #fff; - border: 1px solid #fff; - width: 123px; - margin: 0; - text-align: center; -} -#data-pane p span.tab1{ - float: right; - background: -moz-linear-gradient(top, #666, #bbb); - background: -webkit-linear-gradient(top, #666, #bbb); - color: #fff; -} -#data-pane p span.tab2{ - background: -moz-linear-gradient(top, #ccc, #999); - background: -webkit-linear-gradient(top, #ccc, #999); + height: 69%; + margin-top: 1px; + border-bottom: 1px solid #aaa; + overflow: auto; } -#function-pane { - height: 30%; - margin-top: 1px; - overflow: auto; + +#data-pane p { + margin: 0 0; } -/*.left-pane { - font-size: 14px; - position: relative; +#data-pane p span { + display: block; + padding: 2px 10px; + color: #fff; + border: 1px solid #fff; + width: 123px; + margin: 0; + text-align: center; } -*/ -.left-pane { - font-size: 14px; - position: relative; -/* width: 289px; - top: 428px; - bottom: 20px; - overflow: auto; -*/} +#data-pane p span.tab1 { + float: right; + background: -moz-linear-gradient(top, #666, #bbb); + background: -webkit-linear-gradient(top, #666, #bbb); + color: #fff; +} + +#data-pane p span.tab2 { + background: -moz-linear-gradient(top, #ccc, #999); + background: -webkit-linear-gradient(top, #ccc, #999); +} + +#function-pane { + height: 30%; + margin-top: 1px; + overflow: auto; +} + +.left-pane { + font-size: 14px; + position: relative; +} #kb-function-panel .kb-function-body { - height: 100% ; - max-height: 100% ; + height: 100%; + max-height: 100%; } h3.pane-title { - margin: 0; - position: relative; - background-color: rgb(224,224,224); - padding: 3px 5px; - border: 1px solid #C2C2C2; - font-size: 16px; + margin: 0; + position: relative; + background-color: rgb(224, 224, 224); + padding: 3px 5px; + border: 1px solid #c2c2c2; + font-size: 16px; } #add-link { - position: absolute; - top: 4px; - right: 7px; - font-size: 0.8em; + position: absolute; + top: 4px; + right: 7px; + font-size: 0.8em; } ul.pane-list { - margin: 0; - padding : 2px + margin: 0; + padding: 2px; } ul.pane-list li { - list-style: none; - padding: 1px; - margin-left: 5px; + list-style: none; + padding: 1px; + margin-left: 5px; } /* A function in the function pane */ li.function a { - text-decoration: none; - color: rgb(80,130,50); + text-decoration: none; + color: rgb(80, 130, 50); } + li.function a:visited { - /* don't recolor */ - color: rgb(80,130,50); + /* don't recolor */ + color: rgb(80, 130, 50); } + /* dataset in data pane */ li.dataset a { - text-decoration: none; - color: rgb(130,80,50); + text-decoration: none; + color: rgb(130, 80, 50); } + li.dataset a:visited { - /* don't recolor */ - color: rgb(130,80,50); + /* don't recolor */ + color: rgb(130, 80, 50); } - /* dialog box + forms styling */ .dialog-box { - padding: 20px; + padding: 20px; } .dialog-box ul li { - padding: 50px 5px; - border-bottom: 1px solid #AAA; - font-size: 1.2em; + padding: 50px 5px; + border-bottom: 1px solid #aaa; + font-size: 1.2em; } .dialog-box ul li:first-child { - padding-top: 20px; + padding-top: 20px; } .dialog-box ul li:last-child { - border-bottom: none; + border-bottom: none; } fieldset { - margin: 0 0 15px 0; - border: none; + margin: 0 0 15px 0; + border: none; } fieldset label { -/* display: block; -*/ margin: 0 0 3px 0; - font-weight: bold; - font-size: 1em; - + margin: 0 0 3px 0; + font-weight: bold; + font-size: 1em; } -fieldset input[type="text"], fieldset select { - width: 200px; +fieldset input[type="text"], +fieldset select { + width: 200px; } -fieldset input[type="password"], fieldset select { - width: 200px; + +fieldset input[type="password"], +fieldset select { + width: 200px; } /* styling of cells */ -div.dataset-cell, div.function-cell { - width: 90%; - margin: 3px auto; - padding: 7px 17px; - border: 1px solid #ccc; -} -img.dataset-cell{ - margin: 3px auto; - padding: 0; +div.dataset-cell, +div.function-cell { + width: 90%; + margin: 3px auto; + padding: 7px 17px; + border: 1px solid #ccc; } -.function-cell{ - background-image: url("../images/gears.png"); - background-position: right; - background-repeat: no-repeat; - #background-color: #f2f2f2; + +img.dataset-cell { + margin: 3px auto; + padding: 0; } -.dataset-cell p, .function-cell p { - font-size: .875em; + +.function-cell { + background-image: url("../images/gears.png"); + background-position: right; + background-repeat: no-repeat; } -.dataset-cell h2, .function-cell h2{ - margin-bottom: 0; - font-size: 1.1em; + +.dataset-cell p, +.function-cell p { + font-size: 0.875em; } -.textcell{ - width: 90%; - margin: 3px auto; - padding: 5px 17px; - font-size: 1em; - height: 1em; - border: 2px solid #fff; - color: #111; + +.dataset-cell h2, +.function-cell h2 { + margin-bottom: 0; + font-size: 1.1em; } -.textcell:hover{ - border: 2px dotted #ccc; +.textcell { + width: 90%; + margin: 3px auto; + padding: 5px 17px; + font-size: 1em; + height: 1em; + border: 2px solid #fff; + color: #111; } -p.textcuepara{ - color: #ccc; - padding: 0; - margin: 0; - height: 1em; - display: none; +.textcell:hover { + border: 2px dotted #ccc; } -div.tools p, div.texttools p{ - margin: 0; +p.textcuepara { + color: #ccc; + padding: 0; + margin: 0; + height: 1em; + display: none; } -div.textarea{ - width: 650px; - border: none; - padding: 0; - height: auto; - min-height: 1.2em; - display: none; + +div.tools p, +div.texttools p { + margin: 0; } -.tools, .texttools{ - display: none; + +div.textarea { + width: 650px; + border: none; + padding: 0; + height: auto; + min-height: 1.2em; + display: none; } -.tools{ - height: 1em; - margin-top: .5em; - margin-left: 10px; + +.tools, +.texttools { + display: none; } -.tools a{ - border: 1px solid #018841; - padding: 2px 4px; - font-size: 13px; + +.tools { + height: 1em; + margin-top: 0.5em; + margin-left: 10px; } -#narrative-header .tools{ - display: block; - width: 30em; - position: relative; - top: -2.0em; - left: 350px; +.tools a { + border: 1px solid #018841; + padding: 2px 4px; + font-size: 13px; } -.texttools img{ - vertical-align: middle; + +#narrative-header .tools { + display: block; + width: 30em; + position: relative; + top: -2em; + left: 350px; } -img.remove{ - float: right; + +.texttools img { + vertical-align: middle; } -.ui-state-highlight{ - background-color: fbfaed; + +img.remove { + float: right; } -div.metadata{ - display: block; - width: 200px; - padding: 0 10px; - height: 100px; - float: left; + +.ui-state-highlight { + background-color: fbfaed; } -div.social{ - float: right; - display: block; - width: 80px; - padding: 0 10px; - display: none; + +div.metadata { + display: block; + width: 200px; + padding: 0 10px; + height: 100px; + float: left; } -p span.notification{ - background-color: #ff3333; - color: #fff; - padding: 4px 8px; - border-radius: 1em; + +div.social { + float: right; + width: 80px; + padding: 0 10px; + display: none; } +p span.notification { + background-color: #f33; + color: #fff; + padding: 4px 8px; + border-radius: 1em; +} /** - * Bootstrap 3 submenu hack^H^H^H^H fix + * Bootstrap 3 submenu hack fix * http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing */ -.dropdown-submenu{position:relative;} -.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} -.dropdown-submenu:hover>.dropdown-menu{display:block;} -.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} -.dropdown-submenu:hover>a:after{border-left-color:#ffffff;} -.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} +.dropdown-submenu { + position: relative; +} -/** End Bootstrap 3 submenu fix **/ +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} +.dropdown-submenu > a::after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #ccc; + margin-top: 5px; + margin-right: -10px; +} + +.dropdown-submenu:hover > a::after { + border-left-color: #fff; +} + +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +/** End Bootstrap 3 submenu fix **/ /* Fixes to bring toolbars up to Bootstrap 3 */ #maintoolbar { - position: relative; - top: 5px; - min-height: 0; - border: none !important; - background-image: none !important; - background-color: #f9f9f9 !important; - -webkit-box-shadow: none; - box-shadow: none; + position: relative; + top: 5px; + min-height: 0; + border: none !important; + background-image: none !important; + background-color: #f9f9f9 !important; + -webkit-box-shadow: none; + box-shadow: none; } #maintoolbar-container { - margin-left: 10px; + margin-left: 10px; } #menubar { - position: absolute; - width: 100%; - top: 3px; - background-color: #f9f9f9; - border-bottom: 2px solid #ddd; - padding-bottom: 5px; -} - -#menubar .navbar { - margin-bottom: 5px; + position: absolute; + width: 100%; + top: 3px; + background-color: #f9f9f9; + border-bottom: 2px solid #ddd; + padding-bottom: 5px; } #menubar .navbar .container { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } /* some more bootstrap hacks */ .navbar { - min-height: 0; - background-image: none; - background-color: #f8f8f8; + min-height: 0; + background-image: none; + background-color: #f8f8f8; } -#menubar .navbar-nav>li>a { - padding-top: 10px; - padding-bottom: 7px; +#menubar .navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 7px; } -.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { - background-image: none; +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + background-image: none; } -.panel-default>.panel-heading { - background-image: none; +.panel-default > .panel-heading { + background-image: none; } .btn-default { - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); } .btn-group { - margin-right: 5px; + margin-right: 5px; } #menus { - padding-left: 0px; + padding-left: 0; } #ipython-main-app { - position: absolute; - bottom: 5; - top: 90px; - right: 10px; - left: 310px; - overflow: auto; + position: absolute; + bottom: 5; + top: 90px; + right: 10px; + left: 310px; + overflow: auto; } -#menubar .navbar { - width: 100%; +#menubar .navbar { + margin-bottom: 5px; + width: 100%; } div#notebook_panel { --webkit-box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1); --moz-box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1); -box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.1); -border-left: 1px solid #f2f2f2; + -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); + border-left: 1px solid #f2f2f2; } -.version-stamp a{ - padding-right: 320px; - text-align: right; - color: #0088CC !important; +.version-stamp a { + padding-right: 320px; + text-align: right; + color: #08c !important; } .creator-stamp { - padding-right: 320px; - height: 1em; - text-align: right; - color: #006698; - font-size: 120%; - line-height: 1em; - font-family: "OxygenBold", Arial, sans-serif; + padding-right: 320px; + height: 1em; + text-align: right; + color: #006698; + font-size: 120%; + line-height: 1em; + font-family: "OxygenBold", Arial, sans-serif; } .panel { - margin-bottom: 0px; + margin-bottom: 0; } #kb-jobs-panel { - margin-bottom: 5px; + margin-bottom: 5px; } .kb-narr-side-panel { - margin-bottom: 5px; + margin-bottom: 5px; } .kbujs-table-container { - height: auto; + height: auto; } .kbujs-timestamp { - color: #0066b9; - cursor: pointer; + color: #0066b9; + cursor: pointer; } .kbujs-error-cell { - color: #c7254e; - font-weight: bold; + color: #c7254e; + font-weight: bold; } .kbujs-error:hover { - cursor: pointer; + cursor: pointer; } .kbujs-loading-modal { - text-align: center; - font-size: 16px; - font-weight: bold; + text-align: center; + font-size: 16px; + font-weight: bold; } .kbujs-refresh-btn { - position: absolute; - right: 5px; + position: absolute; + right: 5px; } .kbujs-jobs-table { - margin-left: auto !important; - margin-right: auto !important; + margin-left: auto !important; + margin-right: auto !important; } .kbujs-loading { - height: 100% - vertical-align: middle; - text-align: center + height: 100%; + vertical-align: middle; + text-align: center; } .kbujs-delete-job { - cursor: pointer; + cursor: pointer; } .kbujs-error-traceback { - white-space : nowrap; - float : left; - max-width : 516px; - max-height: 250px; - overflow-x : scroll; - overflow-y: scroll; + white-space: nowrap; + float: left; + max-width: 516px; + max-height: 250px; + overflow-x: scroll; + overflow-y: scroll; } + /* For connecting lines */ .kb-line { - background-color: lightgrey; - position: absolute; + background-color: lightgrey; + position: absolute; } 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..33a946f084 100644 --- a/kbase-extension/static/kbase/custom/custom.css +++ b/kbase-extension/static/kbase/custom/custom.css @@ -6,352 +6,347 @@ 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; + border: 1px solid #cecece; + border-radius: 0; + + /* a little padding to match the prompt */ + padding-top: 4px; } div.output_subarea { - max-width: inherit; + max-width: inherit; } div.text_cell_input { - border: 1px solid #CECECE; - border-radius: 0px; + 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-color: #e8efff; + 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; + padding: 0; } -span#notebook_name { - color: #006698; +#notebook_name { + color: #006698; } -span#notebook_name:hover { - cursor: pointer; - background-color: #e0e0e0; +#notebook_name:hover { + cursor: pointer; + background-color: #e0e0e0; } .prompt { - min-width: 10ex; - padding-top: 10px; + min-width: 10ex; + padding-top: 10px; } #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; -} -#notebook-container:after{ - content: ""; - height: 100px; - display:block; + -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; +} /* 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; + box-shadow: none; } - /* Fooling around with the narrative cells */ .notebook_app .inner_cell { - overflow: visible; + overflow: visible; } -.notebook_app .celltoolbar>.button_container { - flex: 0 auto; +.notebook_app .celltoolbar > .button_container { + flex: 0 auto; } -.notebook_app .celltoolbar>.button_container:nth-child(1) { - flex: auto; +.notebook_app .celltoolbar > .button_container:nth-child(1) { + flex: auto; } .notebook_app .celltoolbar_container { - border-bottom: 1px silver solid; + border-bottom: 1px silver solid; } .notebook_app .prompt { - padding-top: 0px; - color: silver; - width: 75px; + padding-top: 0; + color: silver; + width: 75px; } .notebook_app .cell.unselected div.text_cell_render { - border: 1px solid transparent; + border: 1px solid transparent; } .notebook_app .cell.selected div.text_cell_render { - border: 1px solid transparent; + border: 1px solid transparent; } .notebook_app .buttons .dropdown-menu { - height: auto !important; - overflow: visible !important; + height: auto !important; + overflow: visible !important; } .notebook_app .btn.disabled .fa { - color: silver; + color: silver; } .text_cell.kb-cell .rendered_html table { - border: 1px solid #ddd; + border: 1px solid #ddd; } .text_cell.kb-cell .rendered_html ul { - margin: 0; + margin: 0; } .text_cell.opened.rendered.kb-cell .rendered_html { - padding: 0; - border: 0; + padding: 0; + border: 0; } .text_cell.opened.rendered.selected.kb-cell .rendered_html { - border-left: 1px solid #4BB856; + border-left: 1px solid #4bb856; } .text_cell.opened.rendered.selected.kb-cell.kb-error .rendered_html { - border-left: 1px solid #d9534f; + border-left: 1px solid #d9534f; } .text_cell.opened.rendered.kb-cell { - padding-bottom: 0; + padding-bottom: 0; } .rendered_html tr, .rendered_html th, .rendered_html td { - text-align: inherit; + text-align: inherit; } .rendered_html table { - table-layout: inherit; + table-layout: inherit; } /* narrative cell icons */ .cell.selected .prompt .method-icon { - color: rgb(103, 58, 183); + color: rgb(103, 58, 183); } .cell.selected .prompt .app-icon { - color: rgb(0, 150, 136); + color: rgb(0, 150, 136); } .cell.selected .prompt .markdown-icon { - color: #000; + color: #000; } .cell.selected .prompt .app-output-icon { - color: #000; + color: #000; } .cell.selected .prompt .method-output-icon { - color: #000; + color: #000; } .cell.selected .prompt .data-viewer-icon { - color: #000; + color: #000; } .cell.selected .prompt .error-icon { - color: red; + color: red; } .cell.selected .prompt.input_prompt { - color: #303F9F; + color: #303f9f; } .cell.selected .prompt.output_prompt { - color: #D84315; + color: #d84315; } -.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; + display: inline-block; + padding: 4px; } .kb-btn-icon .fa { - opacity: 0.5 + opacity: 0.5; } .kb-btn-icon:hover .fa { - opacity: 1.0 + opacity: 1; } - /* For some reason Jupyter removes the bottom margin. This causes problems with bootstrap, since bootstrap removes the top margin! */ p { - margin-bottom: 9px; + margin-bottom: 9px; } .prompt { - display: none !important; + display: none !important; } /* @@ -360,18 +355,18 @@ p { * 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; + visibility: hidden !important; } div.code_cell:hover div.input_prompt.run_this_cell { - visibility: hidden !important; + visibility: hidden !important; } div.code_cell div.input_prompt { - min-width: 0; + min-width: 0; } .run_this_cell { - padding: 0 !important; - width: 0 !important; + padding: 0 !important; + width: 0 !important; } diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js index 7523f6391c..97d559805c 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js @@ -10,7 +10,7 @@ define([ 'kbase/js/widgets/appInfoPanel', 'narrativeConfig', 'custom/custom' -], function( +], function ( $, html, Events, @@ -88,14 +88,14 @@ define([ if (url) { return a({ - href: url, - target: '_blank', - id: events.addEvent({ - type: 'click', - handler: doShowInfoModal - }) - }, - label || 'ref'); + href: url, + target: '_blank', + id: events.addEvent({ + type: 'click', + handler: doShowInfoModal + }) + }, + label || 'ref'); } return ''; } @@ -134,7 +134,7 @@ define([ body: $('
'), buttons: [ $('View on App Store'), - $('').click(function() { + $('').click(function () { dialog.hide(); }) ], @@ -149,9 +149,9 @@ define([ appModule: module, tag: tag }); - infoPanel.start({ node: dialog.getBody() }); + infoPanel.start({node: dialog.getBody()}); - dialog.getElement().on('hidden.bs.modal', function() { + dialog.getElement().on('hidden.bs.modal', function () { dialog.destroy(); }); dialog.show(); @@ -174,16 +174,16 @@ define([ dataPlacement: 'left', title: true, dataOriginalTitle: 'Cell Settings', - id: events.addEvent({ type: 'click', handler: doToggleCellSettings }) + id: events.addEvent({type: 'click', handler: doToggleCellSettings}) }, [ - span({ class: 'fa fa-cog', style: 'font-size: 14pt' }) + span({class: 'fa fa-cog', style: 'font-size: 14pt'}) ]); } function renderIcon(icon) { return span({ class: 'fa fa-' + icon.type + ' fa-sm', - style: { color: icon.color || '#000' } + style: {color: icon.color || '#000'} }); } @@ -202,8 +202,7 @@ define([ var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'), toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'), dropdownId = html.genId(), - menuItems = [ - ]; + menuItems = []; if (cell.cell_type === 'code') { menuItems.push({ @@ -213,7 +212,7 @@ define([ type: 'terminal', color: 'black' }, - id: events.addEvent({ type: 'click', handler: doToggleCodeView }) + id: events.addEvent({type: 'click', handler: doToggleCodeView}) }); } @@ -227,7 +226,7 @@ define([ }, id: events.addEvent({ type: 'click', - handler: function() { + handler: function () { cell.showInfo(); } }) @@ -264,7 +263,7 @@ define([ type: 'times', color: 'red' }, - id: events.addEvent({ type: 'click', handler: doDeleteCell }) + id: events.addEvent({type: 'click', handler: doDeleteCell}) }); } @@ -272,20 +271,22 @@ define([ return ''; } - return span({ class: 'dropdown' }, [ + return span({class: 'dropdown'}, [ button({ class: 'btn btn-xs btn-default dropdown-toggle', type: 'button', id: dropdownId, dataToggle: 'dropdown', ariaHaspopup: 'true', - ariaExpanded: 'true' - }, [span({ class: 'fa fa-ellipsis-h fa-lg' })]), + ariaExpanded: 'true', + 'aria-label': 'cell options', + 'data-test': 'cell-dropdown' + }, [span({class: 'fa fa-ellipsis-h fa-lg'})]), ul({ class: 'dropdown-menu dropdown-menu-right', ariaLabelledby: dropdownId }, [ - menuItems.map(function(item) { + menuItems.map(function (item) { switch (item.type) { case 'separator': return li({ @@ -330,19 +331,19 @@ define([ } function minimizedStatus(mode, stage) { - if(mode === 'error' || mode === 'internal-error') { + if (mode === 'error' || mode === 'internal-error') { return 'Error'; } - if(mode === 'canceled' || mode === 'canceling') { + if (mode === 'canceled' || mode === 'canceling') { return 'Canceled'; } - if(mode ==='processing' && stage === 'running') { + if (mode === 'processing' && stage === 'running') { return 'Running'; } - if(mode ==='processing' && stage === 'queued') { + if (mode === 'processing' && stage === 'queued') { return 'Queued'; } - if(mode === 'success') { + if (mode === 'success') { return 'Success'; } return ''; @@ -365,12 +366,15 @@ define([ const appStatePretty = minimizedStatus(fsmMode, fsmStage); const collapsedCellStatus = cellCollapsed ? appStatePretty : ''; - var events = Events.make({ node: container }), + var events = Events.make({node: container}), buttons = [ - div({ class: 'buttons pull-right' }, [ - span({ class: 'kb-func-timestamp' }), - span({ class: 'fa fa-circle-o-notch fa-spin', style: { color: 'rgb(42, 121, 191)', display: 'none' } }), - span({ class: 'fa fa-exclamation-triangle', style: { color: 'rgb(255, 0, 0)', display: 'none' } }), + div({class: 'buttons pull-right'}, [ + renderOptions(cell, events), + span({ + class: 'fa fa-circle-o-notch fa-spin', + style: {color: 'rgb(42, 121, 191)', display: 'none'} + }), + span({class: 'fa fa-exclamation-triangle', style: {color: 'rgb(255, 0, 0)', display: 'none'}}), (readOnly ? null : button({ type: 'button', class: 'btn btn-default btn-xs', @@ -378,9 +382,11 @@ define([ dataPlacement: 'left', title: true, dataOriginalTitle: 'Move Cell Up', - id: events.addEvent({ type: 'click', handler: doMoveCellUp }) + 'data-test': 'cell-move-up', + 'aria-label': 'Move cell up', + id: events.addEvent({type: 'click', handler: doMoveCellUp}) }, [ - span({ class: 'fa fa-arrow-up fa-lg' }) + span({class: 'fa fa-arrow-up fa-lg'}) ])), (readOnly ? null : button({ type: 'button', @@ -389,12 +395,14 @@ define([ dataPlacement: 'left', title: true, dataOriginalTitle: 'Move Cell Down', - id: events.addEvent({ type: 'click', handler: doMoveCellDown }) + 'data-test': 'cell-move-down', + 'aria-label': 'Move cell down', + id: events.addEvent({type: 'click', handler: doMoveCellDown}) }, [ - span({ class: 'fa fa-arrow-down fa-lg' }) + span({class: 'fa fa-arrow-down fa-lg'}) ])), - renderOptions(cell, events), - (function() { + + (function () { var toggleMinMax = utils.getCellMeta(cell, 'kbase.cellState.toggleMinMax', 'maximized'), toggleIcon = (toggleMinMax === 'maximized' ? 'minus' : 'plus'), color = (toggleMinMax === 'maximized' ? '#000' : 'rgba(255,137,0,1)'); @@ -404,8 +412,10 @@ define([ dataToggle: 'tooltip', dataPlacement: 'left', title: true, + 'data-test': 'cell-toggle-expansion', + 'aria-label': 'Expand or Collapse Cell', dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell', - id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell }) + id: events.addEvent({type: 'click', handler: doToggleMinMaxCell}) }, [ span({ class: 'fa fa-' + toggleIcon + '-square-o fa-lg', @@ -427,20 +437,24 @@ define([ utils.getCellMeta(cell, 'kbase.cellState.message') ]) ]), - content = div({ class: 'kb-cell-toolbar' }, [ - div({ class: '', style: { - display: 'flex', - flexDirection: 'row', - height: '56px', - justifyContent: 'space-between', - } }, [ + content = div({class: 'kb-cell-toolbar'}, [ + div({ + class: '', style: { + display: 'flex', + flexDirection: 'row', + height: '56px', + justifyContent: 'space-between', + } + }, [ div({ class: 'title-container', style: {flexGrow: '1'} }, [ - div({ class: 'title', style: { - display: 'flex', height: '56px' - } }, [ + div({ + class: 'title', style: { + display: 'flex', height: '56px' + } + }, [ div({ dataElement: 'icon', class: 'icon', @@ -453,7 +467,7 @@ define([ }, [ buildIcon(cell) ]), - div({ style: { flexGrow: '1' } }, [ + div({style: {flexGrow: '1'}}, [ div({ dataElement: 'title', class: 'title', @@ -478,17 +492,19 @@ define([ }, [getCellSubtitle(cell)]) ]), div( - { style: { - margin: '0px 0px 0px auto', - minWidth: '65px' - }}, + { + style: { + margin: '0px 0px 0px auto', + minWidth: '65px' + } + }, [collapsedCellStatus] ) ]) ]), div({ class: 'buttons-container', - style: { minWidth: '110px' } + style: {minWidth: '110px'} }, [ buttons, message @@ -515,13 +531,13 @@ define([ role: 'button', title: 'New version available', dataContent: 'This app has a newer version available! ' + - 'There\'s probably nothing wrong with this version, ' + - 'but the new one may include new features. Add a new "' + - utils.getCellMeta(cell, 'kbase.appCell.newAppName') + - '" app cell for the update.', - style: { color: '#f79b22' } + 'There\'s probably nothing wrong with this version, ' + + 'but the new one may include new features. Add a new "' + + utils.getCellMeta(cell, 'kbase.appCell.newAppName') + + '" app cell for the update.', + style: {color: '#f79b22'} }, [ - span({ class: 'fa fa-exclamation-triangle fa-lg' }) + span({class: 'fa fa-exclamation-triangle fa-lg'}) ]); } else { return ''; @@ -539,7 +555,7 @@ define([ rendered.events.attachEvents(); // try this... - container.addEventListener('dblclick', function(e) { + container.addEventListener('dblclick', function (e) { doToggleMinMaxCell(e); }); } catch (ex) { @@ -553,7 +569,7 @@ define([ } return { - make: function(config) { + make: function (config) { return factory(config); } }; diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js index f1e277f6d6..08bd29e97a 100644 --- a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js +++ b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseNarrativeDataList.js @@ -282,7 +282,8 @@ define([ } }); - this.$addDataButton = $('').addClass('kb-data-list-add-data-button fa fa-plus fa-2x') + this.$addDataButton = $(''; } else { - disp = " " + disp; + disp = ' ' + disp; } return disp; } else { @@ -284,11 +285,14 @@ define([ sClass: 'staging-name', mRender: function (data, type, full) { if (type === 'display') { - - var decompressButton = ''; + let decompressButton = ''; if (data.match(/\.(zip|tar\.gz|tgz|tar\.bz|tar\.bz2|tar|gz|bz2)$/)) { - decompressButton = " "; + decompressButton = ''; + } + + if (full[0] === 'true') { + data = '' + data + ''; } return '
' + decompressButton + @@ -333,6 +337,10 @@ define([ hide: Config.get('tooltip').hideDelay } }); + $('td:eq(1)', nRow).find('span.kb-data-staging-folder').off('click').on('click', e => { + $(e.currentTarget).off('click'); + this.updatePathFn(this.path += '/' + $(e.currentTarget).data().name); + }); $('td:eq(4)', nRow).find('select').select2({ placeholder: 'Select format' }); @@ -367,6 +375,7 @@ define([ $('td:eq(0)', nRow).find('button[data-name]').off('click').on('click', e => { + $(e.currentTarget).off('click'); this.updatePathFn(this.path += '/' + $(e.currentTarget).data().name); }); @@ -405,14 +414,12 @@ define([ if ($(e.currentTarget).hasClass('fa-caret-down')) { $('.kb-dropzone').css('min-height', '75px'); - $('.dz-message').css('margin', '0em 0'); this.openFileInfo[fileName] = myFile; $tr.after( this.renderMoreFileInfo(myFile) ); } else { $('.kb-dropzone').css('min-height', '200px'); - $('.dz-message').css('margin', '3em 0'); $tr.next().detach(); delete this.openFileInfo[fileName]; } diff --git a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html index e5d14958a0..57bb6fb302 100644 --- a/kbase-extension/static/kbase/templates/data_staging/dropped_file.html +++ b/kbase-extension/static/kbase/templates/data_staging/dropped_file.html @@ -3,7 +3,7 @@
-
+
@@ -19,4 +19,4 @@
-
+
\ No newline at end of file diff --git a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html index 9c7778411e..057bca6298 100644 --- a/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html +++ b/kbase-extension/static/kbase/templates/data_staging/dropzone_area.html @@ -10,24 +10,5 @@
-
-

Three ways to add data to the staging area:

-
    -
  • Click in this box.
  • -
  • Drag and drop data files.
  • -
  • {{#if userInfo.globusLinked}}For large files (over 20GB) or a large number of files use - - Globus. - - {{else}} - For large files (over 20GB), use Globus. Click - - here - - for directions. - {{/if}} -
  • -
-

Click the below for help. -

- +
Drag and drop files and folders in this box, or select from your computer.
+ \ No newline at end of file diff --git a/kbase-extension/static/kbase/templates/data_staging/file_path.html b/kbase-extension/static/kbase/templates/data_staging/file_path.html index f3926ca5a6..0cb3344561 100644 --- a/kbase-extension/static/kbase/templates/data_staging/file_path.html +++ b/kbase-extension/static/kbase/templates/data_staging/file_path.html @@ -1,4 +1,11 @@ - -{{#each path}}/ {{#if @last}}{{term}}{{else}}{{term}}{{/if}} {{/each}} + +
+ {{#each path}}/ {{#if @last}}{{ term }}{{ else }}{{ term }}{{/if}} {{/each}} +
+ +
\ No newline at end of file diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html index 6c44d60c60..ed44b87ddb 100644 --- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html +++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_header.html @@ -1,16 +1,17 @@ -
+
- {{#if userInfo.globusLinked}} -
- Or upload to this staging area by using - - Globus Online - -
- {{/if}} -
- Or click here to use an App to upload from a public URL. +
+ Other ways to upload: + {{#if userInfo.globusLinked}} + + + + {{else}} + + + + {{/if}} +
@@ -18,4 +19,4 @@
-
+
\ No newline at end of file diff --git a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html index c86e3c70b5..4038ed0819 100644 --- a/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html +++ b/kbase-extension/static/kbase/templates/data_staging/ftp_file_table.html @@ -17,7 +17,7 @@ {{mtime}} {{#if imported }} -
+