diff --git a/qe.ipynb b/qe.ipynb index 6e47fbb4a..058fd4e6e 100644 --- a/qe.ipynb +++ b/qe.ipynb @@ -24,6 +24,17 @@ "load_profile(); # noqa: E402" ] }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "from aiidalab_widgets_base.utils.loaders import load_css_stylesheet\n", + "\n", + "load_css_stylesheet(package=\"aiidalab_qe.app.static.styles.css\")" + ] + }, { "cell_type": "code", "execution_count": null, @@ -50,8 +61,7 @@ "from jinja2 import Environment\n", "\n", "from aiidalab_qe.app import App\n", - "from aiidalab_qe.app.static import templates, styles\n", - "\n", + "from aiidalab_qe.app.static import styles, templates\n", "from aiidalab_qe.version import __version__" ] }, diff --git a/src/aiidalab_qe/app/static/styles/README.md b/src/aiidalab_qe/app/static/styles/README.md new file mode 100644 index 000000000..05eba23ce --- /dev/null +++ b/src/aiidalab_qe/app/static/styles/README.md @@ -0,0 +1,23 @@ +# Stylesheets for the Quantum ESPRESSO app + +This folder contains two folders: + +- `scss` - a folder for SCSS-format stylesheets +- `css` - a folder serving as the compilation target for SCSS files + +It is recommended to add SCSS stylesheets in the SCSS folder for functionality and flexibility (see https://sass-lang.com/). + +Compiling SCSS into CSS (in the CSS folder) can be done using: + +- The [compile-hero](https://marketplace.visualstudio.com/items?itemName=Wscats.eno) extension, if using VS Code +- The `sass` [CLI](https://sass-lang.com/install/) + +Stylesheets may be loaded directly from the CSS folder using + +```python +from aiidalab_widgets_base.utils.loaders import load_css_stylesheet + +load_css_stylesheet(package="aiidalab_qe.app.static.styles.css", filename=".css") +``` + +If `filename` is not provided, all CSS stylesheets will be loaded from the `css` package. diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css new file mode 100644 index 000000000..876d68a98 --- /dev/null +++ b/src/aiidalab_qe/app/static/styles/custom.css @@ -0,0 +1,3 @@ +.output_subarea { + max-width: none !important; +} diff --git a/src/aiidalab_qe/app/static/styles/scss/custom.scss b/src/aiidalab_qe/app/static/styles/scss/custom.scss new file mode 100644 index 000000000..876d68a98 --- /dev/null +++ b/src/aiidalab_qe/app/static/styles/scss/custom.scss @@ -0,0 +1,3 @@ +.output_subarea { + max-width: none !important; +}