diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index c64590045f..68a50b5fc8 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -3,41 +3,46 @@ default_stages: [commit] repos: -- repo: https://github.com/pre-commit/pre-commit-hooks + - repo: https://github.com/pre-commit/pre-commit-hooks rev: v4.4.0 hooks: - - id: check-builtin-literals - - id: check-case-conflict - - id: check-docstring-first - - id: check-executables-have-shebangs - - id: check-toml - - id: check-json - - id: detect-private-key - - id: end-of-file-fixer + - id: check-builtin-literals + - id: check-case-conflict + - id: check-docstring-first + - id: check-executables-have-shebangs + - id: check-toml + - id: check-json + - id: detect-private-key + - id: end-of-file-fixer exclude: \.min\.js$ - - id: trailing-whitespace -- repo: https://github.com/charliermarsh/ruff-pre-commit + - id: trailing-whitespace + - repo: https://github.com/charliermarsh/ruff-pre-commit rev: 'v0.0.261' hooks: - - id: ruff # See 'setup.cfg' for args + - id: ruff # See 'setup.cfg' for args args: [panel] files: panel/ -- repo: https://github.com/pycqa/isort + - repo: https://github.com/pycqa/isort rev: 5.12.0 hooks: - id: isort name: isort (python) -- repo: https://github.com/hoxbro/clean_notebook + - repo: https://github.com/hoxbro/clean_notebook rev: v0.1.9 hooks: - id: clean-notebook args: [-i, tags] -- repo: https://github.com/codespell-project/codespell - rev: v2.2.4 - hooks: - - id: codespell - additional_dependencies: - - tomli + - repo: https://github.com/codespell-project/codespell + rev: v2.2.4 + hooks: + - id: codespell + additional_dependencies: + - tomli + - repo: https://github.com/pre-commit/mirrors-prettier + rev: v2.7.1 + hooks: + - id: prettier + types_or: [css] ci: autofix_prs: false autoupdate_schedule: quarterly diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..f8dec5b189 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "semi": false, + "singleQuote": true +} diff --git a/doc/_static/css/custom.css b/doc/_static/css/custom.css index 1bac662283..c73c3a6a00 100644 --- a/doc/_static/css/custom.css +++ b/doc/_static/css/custom.css @@ -1,178 +1,179 @@ -:root[data-theme="light"], :root[data-theme="dark"] { - --pst-color-primary: #0072B5; - --pst-color-link: #0072B5; - --pst-color-inline-code: #0072B5; - --sd-color-card-border-hover: #0072B5; +:root[data-theme='light'], +:root[data-theme='dark'] { + --pst-color-primary: #0072b5; + --pst-color-link: #0072b5; + --pst-color-inline-code: #0072b5; + --sd-color-card-border-hover: #0072b5; } -html[data-theme=dark] .bd-content div.cell_output .text_html { - background-color: var(--pst-color-background); - color: var(--pst-color-text-base); +html[data-theme='dark'] .bd-content div.cell_output .text_html { + background-color: var(--pst-color-background); + color: var(--pst-color-text-base); } /* Align navbar item in center */ .navbar-header-items__center { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } /* Ensure content fills full space */ .bd-main .bd-content .bd-article-container { - max-width: unset; + max-width: unset; } /* Hide primary sidenav bottom section to avoid extra scroll */ .sidebar-primary-items__end.sidebar-primary__section { - display: none; + display: none; } .nav-link { - white-space: nowrap; + white-space: nowrap; } .showcase-table { - border-spacing: 15px + border-spacing: 15px; } .showcase-table td { - border: 0px; - vertical-align: top; + border: 0px; + vertical-align: top; } .cell_output { - padding-left: 0; + padding-left: 0; } -html[data-theme=dark] .bd-content div.cell_output .text_html, -html[data-theme=light] .bd-content div.cell_output .text_html { - padding: 0; +html[data-theme='dark'] .bd-content div.cell_output .text_html, +html[data-theme='light'] .bd-content div.cell_output .text_html { + padding: 0; } @media (max-width: 960px) { - .homepage-logo { - display: none; - } + .homepage-logo { + display: none; + } } @media (min-width: 1400px) { - .bd-sidebar { - max-width: 300px; - } + .bd-sidebar { + max-width: 300px; + } - .bd-main .bd-content .bd-article-container .bd-article { - padding-left: 0.5rem; - padding-top: 0.5rem; - } + .bd-main .bd-content .bd-article-container .bd-article { + padding-left: 0.5rem; + padding-top: 0.5rem; + } - .bd-page-width { - max-width: 100%; - } + .bd-page-width { + max-width: 100%; + } } @media (min-width: 1600px) { - .bd-page-width { - max-width: 85%; - } + .bd-page-width { + max-width: 85%; + } } @media (min-width: 1800px) { - .bd-page-width { - max-width: 80%; - } + .bd-page-width { + max-width: 80%; + } } #scroller-right { - max-width: 14%; + max-width: 14%; } @media (max-width: 1400px) { - #scroller-right { - position: relative; - right: unset; - top: unset; - max-width: 100%; - transform: unset; - } + #scroller-right { + position: relative; + right: unset; + top: unset; + max-width: 100%; + transform: unset; + } } .theme-switch-button { - font-size: unset; + font-size: unset; } .sd-card-body.sponsor-logo { - flex-grow: unset; - margin: auto; + flex-grow: unset; + margin: auto; } .sponsor-logo img { - min-height: 80px; - object-fit: contain; + min-height: 80px; + object-fit: contain; } button.toggle-button { - display: none; + display: none; } .toggle-hidden:not(.admonition) { - height: 0; + height: 0; } .tag_hide-input { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } details.hide.above-input { - display: none; + display: none; } .toggle-hidden + .cell_output { - margin-top: 0 !important; + margin-top: 0 !important; } dl.field-list { - display: none + display: none; } /* Improve styling */ div.cell div.cell_input { - border: none; + border: none; } .highlight { - border-radius: 4px; + border-radius: 4px; } -html[data-theme="light"] .highlight { - background-color: #263238; - color: #f8f8f2; +html[data-theme='light'] .highlight { + background-color: #263238; + color: #f8f8f2; } pre[id^='codecell'] { - background-color: unset; - border: none; - border-radius: 0.5em; - color: #f8f8f2; - box-shadow: none; - padding: 1.5em; + background-color: unset; + border: none; + border-radius: 0.5em; + color: #f8f8f2; + box-shadow: none; + padding: 1.5em; } button.copybtn { - background-color: #263238; + background-color: #263238; } button.copybtn:hover { - background-color: #263238; - color: #f8f8f2; + background-color: #263238; + color: #f8f8f2; } .highlight button.copybtn:hover { - background: none + background: none; } .o-tooltip--left:after { - background: none; + background: none; } ul.current.nav.bd-sidenav { - padding: 0; + padding: 0; } diff --git a/doc/_static/css/dataframe.css b/doc/_static/css/dataframe.css index d1bb173498..8076a48d48 100644 --- a/doc/_static/css/dataframe.css +++ b/doc/_static/css/dataframe.css @@ -1,47 +1,49 @@ table.dataframe { - margin-left: auto; - margin-right: auto; - border: none; - border-collapse: collapse; - border-spacing: 0; - font-size: 12px; - table-layout: auto; - width: 100%; + margin-left: auto; + margin-right: auto; + border: none; + border-collapse: collapse; + border-spacing: 0; + font-size: 12px; + table-layout: auto; + width: 100%; } -.dataframe tr, .dataframe th, .dataframe td { - text-align: right; - vertical-align: middle; - padding: 0.5em 0.5em; - line-height: normal; - white-space: normal; - max-width: none; - border: none; +.dataframe tr, +.dataframe th, +.dataframe td { + text-align: right; + vertical-align: middle; + padding: 0.5em 0.5em; + line-height: normal; + white-space: normal; + max-width: none; + border: none; } .dataframe tbody { - display: table-row-group; - vertical-align: middle; - border-color: inherit; + display: table-row-group; + vertical-align: middle; + border-color: inherit; } .dataframe tbody tr:nth-child(odd) { - background-color: var(--pst-color-surface, #f5f5f5); - color: var(--pst-color-text-base); + background-color: var(--pst-color-surface, #f5f5f5); + color: var(--pst-color-text-base); } .dataframe thead { - border-bottom: 1px solid var(--pst-color-border); - vertical-align: bottom; + border-bottom: 1px solid var(--pst-color-border); + vertical-align: bottom; } .dataframe tbody tr:hover { - background-color: #e1f5fe; - color: #000000; - cursor: pointer; + background-color: #e1f5fe; + color: #000000; + cursor: pointer; } :host { - overflow: auto; - padding-right: 1px; + overflow: auto; + padding-right: 1px; } diff --git a/doc/conf.py b/doc/conf.py index 4b575de536..3bab9a3d11 100644 --- a/doc/conf.py +++ b/doc/conf.py @@ -61,7 +61,7 @@ }, { "name": "Discord", - "url": "https://discord.gg/muhupDZM", + "url": "https://discord.gg/AXRHnJU6sP", "icon": "fa-brands fa-discord", }, ], diff --git a/doc/how_to/styling/design.md b/doc/how_to/styling/design.md index b74c6ec36d..8377908297 100644 --- a/doc/how_to/styling/design.md +++ b/doc/how_to/styling/design.md @@ -46,4 +46,5 @@ pn.Tabs( ## Related Resources +- Discover [how to customize a design](design_variables.md) next. - Discover [how to toggle between themes](themes.md) next. diff --git a/doc/how_to/styling/design_variables.md b/doc/how_to/styling/design_variables.md new file mode 100644 index 0000000000..8cfe4380ad --- /dev/null +++ b/doc/how_to/styling/design_variables.md @@ -0,0 +1,69 @@ +# Customize a Design + +This guide addresses how to customize a design system with CSS variables. + +:::{versionadded} 1.0.0 +The design feature was added in 1.0.0 and is actively being developed and improved. Currently there are a limited number of design variables but in future the goal is to expose a large variety of styling options via CSS variables. +::: + +```{admonition} Prerequisites +1. The [How-to > Apply a Design](./design.md) guides describe how to select a design system to apply to the components to achieve a consistent design language. +2. The [How-to > Apply CSS](./apply_css.md) guide describes how to apply CSS definitions in Panel. +``` + +--- + +The Design systems in Panel are set up to be overridden by CSS variables. The usual order of fallbacks for CSS variables is the following: + +1. User defined design variables (e.g. `--design-primary-color`) +2. Editor/notebook dependent variables (e.g. `--jp-brand-color0`, for JupyterLab) +3. The theme CSS variable definitions (e.g. `--panel-primary-color`) + +To override a particular style we therefore simply have to override one of the user defined design variables: + +| Variable | Description | +|----------------------------------|--------------------------------------------------------| +| `--design-primary-color` | Primary color of the design. | +| `--design-primary-text-color` | Color of text rendered on top of primary color. | +| `--design-secondary-color` | Secondary color of the design. | +| `--design-secondary-text-color` | Color of text rendered on top of secondary color. | +| `--design-background-color` | Color of the background layer. | +| `--design-background-text-color` | Color of text rendered on top of the background layer. | +| `--design-surface-color` | Color of the surface layer. | +| `--design-surface-text-color` | Color of text rendered on top of the surface layer. | + +```{note} +Background and surface colors generally are only set at the template level. +``` + +When and how to set these variables depends on the precise use case, e.g. if you consistently want to override the colors in a template, use the `Template.config.raw_css` or `Template.config.css_files` parameters to define an inline or imported stylesheet that will apply across the entire template. + +For global overrides that apply in all scenarios you can use the `pn.config.global_css` parameter, e.g. here we initialize it via the `pn.extension`: + +```{pyodide} +import panel as pn + +pn.extension(design='material', global_css=[':root { --design-primary-color: purple; }']) +``` + +When defining design variable overrides globally use the `:root` CSS selector, which applies the variable from the root on down. + +```{pyodide} +pn.Tabs( + ('Slider', pn.widgets.FloatSlider(start=0, end=7, value=3)), + ('Button', pn.widgets.Button(name='Click me!', button_type='primary')) +) +``` + +Alternatively you can also define it directly on a component by adding it to the `stylesheets` and prefixing it with the `:host` selector: + +```{pyodide} +pn.Tabs( + ('Slider', pn.widgets.FloatSlider( + start=0, end=7, value=3, stylesheets=[':host { --design-primary-color: red; }'] + )), + ('Button', pn.widgets.Button(name='Click me!', button_type='primary')) +) +``` + +## Related Resources diff --git a/doc/how_to/styling/index.md b/doc/how_to/styling/index.md index 1f17d7746f..f0c698660b 100644 --- a/doc/how_to/styling/index.md +++ b/doc/how_to/styling/index.md @@ -12,7 +12,7 @@ Panel provides a comprehensive system for applying designs, themes and custom st How to switch between different design systems. ::: -:::{grid-item-card} {octicon}`paintbrush;2.5em;sd-mr-1 sd-animate-grow50` Toggle themes +:::{grid-item-card} {octicon}`sun;2.5em;sd-mr-1 sd-animate-grow50` Toggle themes :link: themes :link-type: doc @@ -26,6 +26,13 @@ How to toggle between themes (e.g. 'light' and 'dark'). How to apply custom CSS styling. ::: +:::{grid-item-card} {octicon}`paintbrush;2.5em;sd-mr-1 sd-animate-grow50` Customize a Design +:link: design_variables +:link-type: doc + +How to customize designs and themes with CSS variables. +::: + :::{grid-item-card} {octicon}`hourglass;2.5em;sd-mr-1 sd-animate-grow50` Customize Loading Icon :link: load_icon :link-type: doc diff --git a/doc/index.md b/doc/index.md index 70277f5eb5..120b1cbdbf 100644 --- a/doc/index.md +++ b/doc/index.md @@ -16,7 +16,7 @@ sd_hide_title: true

The powerful data exploration & web app framework for Python

-::::{card-carousel} 3 +::::{card-carousel} 4 :::{card} Portfolio Optimizer :img-top: https://assets.holoviz.org/panel/gallery/portfolio_optimizer.png @@ -58,9 +58,8 @@ sd_hide_title: true Panel is an [open-source](https://github.com/holoviz/panel/blob/main/LICENSE.txt) Python library that lets you **easily build powerful tools, dashboards and complex applications entirely in Python**. It has a batteries-included philosophy, putting the PyData ecosystem, powerful data tables and much more at your fingertips. High-level reactive APIs and lower-level callback based APIs ensure you can quickly build exploratory applications, but you aren't limited if you build complex, multi-page apps with rich interactivity. Panel is a member of the [HoloViz](https://holoviz.org/) ecosystem, your gateway into a connected ecosystem of data exploration tools. -```{eval-rst} -.. notebook:: panel ../examples/homepage.ipynb - :disable_interactivity_warning: True +```{eval-rst} panel ../examples/homepage.ipynb +:disable_interactivity_warning: True ``` Panel makes it simple to: diff --git a/panel/_templates/jupyter.css b/panel/_templates/jupyter.css index c2d5ad2765..f73620e75c 100644 --- a/panel/_templates/jupyter.css +++ b/panel/_templates/jupyter.css @@ -1,6 +1,7 @@ -*[data-root-id], *[data-root-id] > * { - box-sizing: border-box; - font-family: var(--jp-ui-font-family); - font-size: var(--jp-ui-font-size1); - color: var(--jp-ui-font-color1); +*[data-root-id], +*[data-root-id] > * { + box-sizing: border-box; + font-family: var(--jp-ui-font-family); + font-size: var(--jp-ui-font-size1); + color: var(--jp-ui-font-color1); } diff --git a/panel/config.py b/panel/config.py index bf1bdf38b8..70ed8340b9 100644 --- a/panel/config.py +++ b/panel/config.py @@ -133,6 +133,9 @@ class _config(_base_config): exception_handler = param.Callable(default=None, doc=""" General exception handler for events.""") + global_css = param.List(default=[], doc=""" + List of raw CSS to be added to the header.""") + global_loading_spinner = param.Boolean(default=False, doc=""" Whether to add a global loading spinner for the whole application.""") @@ -394,7 +397,7 @@ def __getattribute__(self, attr): curdoc = state.curdoc if curdoc and curdoc not in session_config: session_config[curdoc] = {} - if (attr in ('raw_css', 'css_files', 'js_files', 'js_modules') and + if (attr in ('raw_css', 'global_css', 'css_files', 'js_files', 'js_modules') and curdoc and attr not in session_config[curdoc]): new_obj = copy.copy(super().__getattribute__(attr)) setattr(self, attr, new_obj) @@ -670,7 +673,7 @@ def __call__(self, *args, **params): f'systems include: {list(designs)}.' ) setattr(config, k, designs[v]) - elif k in ('css_files', 'raw_css'): + elif k in ('css_files', 'raw_css', 'global_css'): if not isinstance(v, list): raise ValueError('%s should be supplied as a list, ' 'not as a %s type.' % diff --git a/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css b/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css index edd895bbc0..73872606ae 100644 --- a/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css +++ b/panel/dist/bundled/datatabulator/tabulator-tables@5.4.4/dist/css/tabulator_fast.min.css @@ -9,555 +9,846 @@ -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); - transform: translateZ(0); } - .tabulator[tabulator-layout="fitDataFill"] .tabulator-tableholder .tabulator-table { - min-width: 100%; } - .tabulator[tabulator-layout="fitDataTable"] { - display: inline-block; } - .tabulator.tabulator-block-select { - user-select: none; } - .tabulator .tabulator-header { - position: relative; - box-sizing: border-box; - width: 100%; - border-bottom: 2px solid var(--accent-fill-rest); - background-color: var(--fill-color); - color: var(--neutral-foreground-rest); - font-weight: bold; - white-space: nowrap; - overflow: hidden; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; } - .tabulator .tabulator-header.tabulator-header-hidden { - display: none; } - .tabulator .tabulator-header .tabulator-header-contents { - position: relative; - overflow: hidden; } - .tabulator .tabulator-header .tabulator-header-contents .tabulator-headers { - display: inline-block; } - .tabulator .tabulator-header .tabulator-col { - display: inline-flex; - position: relative; - box-sizing: border-box; - flex-direction: column; - justify-content: flex-start; - border-right: 1px solid var(--neutral-stroke-divider-rest); - background: var(--fill-color); - text-align: left; - vertical-align: bottom; - overflow: hidden; } - .tabulator .tabulator-header .tabulator-col.tabulator-moving { - position: absolute; - border: 1px solid var(--neutral-divider-rest); - background: var(--fill-color); - pointer-events: none; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content { - box-sizing: border-box; - position: relative; - padding: 4px; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button { - padding: 0 8px; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover { - cursor: pointer; - opacity: .6; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder { - position: relative; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { - box-sizing: border-box; - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap { - white-space: normal; - text-overflow: initial; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor { - box-sizing: border-box; - width: 100%; - border: 1px solid #999; - padding: 1px; - background: #fff; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button + .tabulator-title-editor { - width: calc(100% - 22px); } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter { - display: flex; - align-items: center; - position: absolute; - top: 0; - bottom: 0; - right: 4px; } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid #bbb; } - .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { - position: relative; - display: flex; - border-top: 1px solid var(--accent-fill-rest); - overflow: hidden; - margin-right: -1px; } - .tabulator .tabulator-header .tabulator-col .tabulator-header-filter { - position: relative; - box-sizing: border-box; - margin-top: 2px; - width: 100%; - text-align: center; } - .tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea { - height: auto !important; } - .tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg { - margin-top: 3px; } - .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear { - width: 0; - height: 0; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { - padding-right: 25px; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { - cursor: pointer; - background-color: var(--fill-color); } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter { - color: #bbb; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { - cursor: pointer; - border-bottom: 6px solid #555; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { - border-top: none; - border-bottom: 6px solid #bbb; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter { - color: #666; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { - cursor: pointer; - border-bottom: 6px solid #555; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { - border-top: none; - border-bottom: 6px solid #666; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter { - color: #666; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover { - cursor: pointer; - border-top: 6px solid #555; } - .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { - border-bottom: none; - border-top: 6px solid #666; - color: #666; } - .tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title { - writing-mode: vertical-rl; - text-orientation: mixed; - display: flex; - align-items: center; - justify-content: center; } - .tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title { - transform: rotate(180deg); } - .tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title { - padding-right: 0; - padding-top: 20px; } - .tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title { - padding-right: 0; - padding-bottom: 20px; } - .tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter { - justify-content: center; - left: 0; - right: 0; - top: 4px; - bottom: auto; } - .tabulator .tabulator-header .tabulator-frozen { - position: sticky; - left: 0; - z-index: 10; } - .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { - border-right: 2px solid var(--neutral-divider-rest); } - .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right { - border-left: 2px solid var(--neutral-divider-rest); } - .tabulator .tabulator-header .tabulator-calcs-holder { - box-sizing: border-box; - background: var(--fill-color) !important; - border-top: 1px solid var(--neutral-divider-rest); - border-bottom: 1px solid var(--accent-fill-rest); } - .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { - background: var(--fill-color) !important; } - .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { - display: none; } - .tabulator .tabulator-header .tabulator-frozen-rows-holder:empty { - display: none; } - .tabulator .tabulator-tableholder { - position: relative; - width: 100%; - white-space: nowrap; - overflow: auto; - -webkit-overflow-scrolling: touch; } - .tabulator .tabulator-tableholder:focus { - outline: none; } - .tabulator .tabulator-tableholder .tabulator-placeholder { - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - width: 100%; } - .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode="virtual"] { - min-height: 100%; - min-width: 100%; } - .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { - display: inline-block; - text-align: center; - padding: 10px; - color: #ccc; - font-weight: bold; - font-size: 20px; - white-space: normal; } - .tabulator .tabulator-tableholder .tabulator-table { - position: relative; - display: inline-block; - background-color: var(--fill-color); - white-space: nowrap; - overflow: visible; - color: var(--neutral-foreground-rest); } - .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs { - font-weight: bold; - background: var(--neutral-fill-rest) !important; } - .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top { - border-bottom: 2px solid var(--neutral-divider-rest); } - .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom { - border-top: 2px solid var(--neutral-divider-rest); } - .tabulator .tabulator-footer { - border-top: 1px solid var(--neutral-divider-rest); - background-color: var(--fill-color); - color: var(--neutral-foreground-rest); - font-weight: bold; - white-space: nowrap; - user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; } - .tabulator .tabulator-footer .tabulator-footer-contents { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 5px 10px; } - .tabulator .tabulator-footer .tabulator-footer-contents:empty { - display: none; } - .tabulator .tabulator-footer .tabulator-calcs-holder { - box-sizing: border-box; - width: 100%; - text-align: left; - background: var(--fill-color) !important; - border-bottom: 1px solid var(--neutral-divider-rest); - border-top: 1px solid var(--neutral-divider-rest); - overflow: hidden; } - .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { - display: inline-block; - background: var(--fill-color) !important; } - .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { - display: none; } - .tabulator .tabulator-footer .tabulator-calcs-holder:only-child { - margin-bottom: -5px; - border-bottom: none; } - .tabulator .tabulator-footer > * + .tabulator-page-counter { - margin-left: 10px; } - .tabulator .tabulator-footer .tabulator-page-counter { - font-weight: normal; } - .tabulator .tabulator-footer .tabulator-paginator { - flex: 1; - text-align: right; - color: var(--neutral-foreground-rest); - font-family: inherit; - font-weight: inherit; - font-size: inherit; } - .tabulator .tabulator-footer .tabulator-page-size { - display: inline-block; - margin: 0 5px; - padding: 2px 5px; - border: 1px solid var(--accent-fill-rest); - border-radius: 3px; } - .tabulator .tabulator-footer .tabulator-pages { - margin: 0 7px; } - .tabulator .tabulator-footer .tabulator-page { - display: inline-block; - margin: 0 2px; - padding: 2px 5px; - border: 1px solid var(--accent-fill-rest); - border-radius: 3px; - background: rgba(255, 255, 255, 0.2); } - .tabulator .tabulator-footer .tabulator-page.active { - color: var(--neutral-foreground-active); } - .tabulator .tabulator-footer .tabulator-page:disabled { - opacity: .5; } - .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.2); - color: #fff; } - .tabulator .tabulator-col-resize-handle { - position: relative; - display: inline-block; - width: 6px; - margin-left: -3px; - margin-right: -3px; - z-index: 10; - vertical-align: middle; } - .tabulator .tabulator-col-resize-handle:hover { - cursor: ew-resize; } - .tabulator .tabulator-col-resize-handle:last-of-type { - width: 3px; - margin-right: 0; } - .tabulator .tabulator-alert { - position: absolute; - display: flex; - align-items: center; - top: 0; - left: 0; - z-index: 100; - height: 100%; - width: 100%; - background: rgba(0, 0, 0, 0.4); - text-align: center; } - .tabulator .tabulator-alert .tabulator-alert-msg { - display: inline-block; - margin: 0 auto; - padding: 10px 20px; - border-radius: 10px; - background: #fff; - font-weight: bold; - font-size: 16px; } - .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg { - border: 4px solid #333; - color: #000; } - .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error { - border: 4px solid #D00; - color: #590000; } + transform: translateZ(0); +} +.tabulator[tabulator-layout='fitDataFill'] + .tabulator-tableholder + .tabulator-table { + min-width: 100%; +} +.tabulator[tabulator-layout='fitDataTable'] { + display: inline-block; +} +.tabulator.tabulator-block-select { + user-select: none; +} +.tabulator .tabulator-header { + position: relative; + box-sizing: border-box; + width: 100%; + border-bottom: 2px solid var(--accent-fill-rest); + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + font-weight: bold; + white-space: nowrap; + overflow: hidden; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.tabulator .tabulator-header.tabulator-header-hidden { + display: none; +} +.tabulator .tabulator-header .tabulator-header-contents { + position: relative; + overflow: hidden; +} +.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers { + display: inline-block; +} +.tabulator .tabulator-header .tabulator-col { + display: inline-flex; + position: relative; + box-sizing: border-box; + flex-direction: column; + justify-content: flex-start; + border-right: 1px solid var(--neutral-stroke-divider-rest); + background: var(--fill-color); + text-align: left; + vertical-align: bottom; + overflow: hidden; +} +.tabulator .tabulator-header .tabulator-col.tabulator-moving { + position: absolute; + border: 1px solid var(--neutral-divider-rest); + background: var(--fill-color); + pointer-events: none; +} +.tabulator .tabulator-header .tabulator-col .tabulator-col-content { + box-sizing: border-box; + position: relative; + padding: 4px; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-header-popup-button { + padding: 0 8px; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-header-popup-button:hover { + cursor: pointer; + opacity: 0.6; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title-holder { + position: relative; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title { + box-sizing: border-box; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title.tabulator-col-title-wrap { + white-space: normal; + text-overflow: initial; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title + .tabulator-title-editor { + box-sizing: border-box; + width: 100%; + border: 1px solid #999; + padding: 1px; + background: #fff; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title + .tabulator-header-popup-button + + .tabulator-title-editor { + width: calc(100% - 22px); +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-sorter { + display: flex; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + right: 4px; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-sorter + .tabulator-arrow { + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #bbb; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-group + .tabulator-col-group-cols { + position: relative; + display: flex; + border-top: 1px solid var(--accent-fill-rest); + overflow: hidden; + margin-right: -1px; +} +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter { + position: relative; + box-sizing: border-box; + margin-top: 2px; + width: 100%; + text-align: center; +} +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea { + height: auto !important; +} +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg { + margin-top: 3px; +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-header-filter + input::-ms-clear { + width: 0; + height: 0; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable + .tabulator-col-title { + padding-right: 25px; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { + cursor: pointer; + background-color: var(--fill-color); +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='none'] + .tabulator-col-content + .tabulator-col-sorter { + color: #bbb; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='none'] + .tabulator-col-content + .tabulator-col-sorter.tabulator-col-sorter-element + .tabulator-arrow:hover { + cursor: pointer; + border-bottom: 6px solid #555; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='none'] + .tabulator-col-content + .tabulator-col-sorter + .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #bbb; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='ascending'] + .tabulator-col-content + .tabulator-col-sorter { + color: #666; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='ascending'] + .tabulator-col-content + .tabulator-col-sorter.tabulator-col-sorter-element + .tabulator-arrow:hover { + cursor: pointer; + border-bottom: 6px solid #555; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='ascending'] + .tabulator-col-content + .tabulator-col-sorter + .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #666; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='descending'] + .tabulator-col-content + .tabulator-col-sorter { + color: #666; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='descending'] + .tabulator-col-content + .tabulator-col-sorter.tabulator-col-sorter-element + .tabulator-arrow:hover { + cursor: pointer; + border-top: 6px solid #555; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-sortable[aria-sort='descending'] + .tabulator-col-content + .tabulator-col-sorter + .tabulator-arrow { + border-bottom: none; + border-top: 6px solid #666; + color: #666; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-vertical + .tabulator-col-content + .tabulator-col-title { + writing-mode: vertical-rl; + text-orientation: mixed; + display: flex; + align-items: center; + justify-content: center; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip + .tabulator-col-title { + transform: rotate(180deg); +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-vertical.tabulator-sortable + .tabulator-col-title { + padding-right: 0; + padding-top: 20px; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip + .tabulator-col-title { + padding-right: 0; + padding-bottom: 20px; +} +.tabulator + .tabulator-header + .tabulator-col.tabulator-col-vertical.tabulator-sortable + .tabulator-col-sorter { + justify-content: center; + left: 0; + right: 0; + top: 4px; + bottom: auto; +} +.tabulator .tabulator-header .tabulator-frozen { + position: sticky; + left: 0; + z-index: 10; +} +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid var(--neutral-divider-rest); +} +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid var(--neutral-divider-rest); +} +.tabulator .tabulator-header .tabulator-calcs-holder { + box-sizing: border-box; + background: var(--fill-color) !important; + border-top: 1px solid var(--neutral-divider-rest); + border-bottom: 1px solid var(--accent-fill-rest); +} +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { + background: var(--fill-color) !important; +} +.tabulator + .tabulator-header + .tabulator-calcs-holder + .tabulator-row + .tabulator-col-resize-handle { + display: none; +} +.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty { + display: none; +} +.tabulator .tabulator-tableholder { + position: relative; + width: 100%; + white-space: nowrap; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.tabulator .tabulator-tableholder:focus { + outline: none; +} +.tabulator .tabulator-tableholder .tabulator-placeholder { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} +.tabulator + .tabulator-tableholder + .tabulator-placeholder[tabulator-render-mode='virtual'] { + min-height: 100%; + min-width: 100%; +} +.tabulator + .tabulator-tableholder + .tabulator-placeholder + .tabulator-placeholder-contents { + display: inline-block; + text-align: center; + padding: 10px; + color: #ccc; + font-weight: bold; + font-size: 20px; + white-space: normal; +} +.tabulator .tabulator-tableholder .tabulator-table { + position: relative; + display: inline-block; + background-color: var(--fill-color); + white-space: nowrap; + overflow: visible; + color: var(--neutral-foreground-rest); +} +.tabulator + .tabulator-tableholder + .tabulator-table + .tabulator-row.tabulator-calcs { + font-weight: bold; + background: var(--neutral-fill-rest) !important; +} +.tabulator + .tabulator-tableholder + .tabulator-table + .tabulator-row.tabulator-calcs.tabulator-calcs-top { + border-bottom: 2px solid var(--neutral-divider-rest); +} +.tabulator + .tabulator-tableholder + .tabulator-table + .tabulator-row.tabulator-calcs.tabulator-calcs-bottom { + border-top: 2px solid var(--neutral-divider-rest); +} +.tabulator .tabulator-footer { + border-top: 1px solid var(--neutral-divider-rest); + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + font-weight: bold; + white-space: nowrap; + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.tabulator .tabulator-footer .tabulator-footer-contents { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 5px 10px; +} +.tabulator .tabulator-footer .tabulator-footer-contents:empty { + display: none; +} +.tabulator .tabulator-footer .tabulator-calcs-holder { + box-sizing: border-box; + width: 100%; + text-align: left; + background: var(--fill-color) !important; + border-bottom: 1px solid var(--neutral-divider-rest); + border-top: 1px solid var(--neutral-divider-rest); + overflow: hidden; +} +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { + display: inline-block; + background: var(--fill-color) !important; +} +.tabulator + .tabulator-footer + .tabulator-calcs-holder + .tabulator-row + .tabulator-col-resize-handle { + display: none; +} +.tabulator .tabulator-footer .tabulator-calcs-holder:only-child { + margin-bottom: -5px; + border-bottom: none; +} +.tabulator .tabulator-footer > * + .tabulator-page-counter { + margin-left: 10px; +} +.tabulator .tabulator-footer .tabulator-page-counter { + font-weight: normal; +} +.tabulator .tabulator-footer .tabulator-paginator { + flex: 1; + text-align: right; + color: var(--neutral-foreground-rest); + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} +.tabulator .tabulator-footer .tabulator-page-size { + display: inline-block; + margin: 0 5px; + padding: 2px 5px; + border: 1px solid var(--accent-fill-rest); + border-radius: 3px; +} +.tabulator .tabulator-footer .tabulator-pages { + margin: 0 7px; +} +.tabulator .tabulator-footer .tabulator-page { + display: inline-block; + margin: 0 2px; + padding: 2px 5px; + border: 1px solid var(--accent-fill-rest); + border-radius: 3px; + background: rgba(255, 255, 255, 0.2); +} +.tabulator .tabulator-footer .tabulator-page.active { + color: var(--neutral-foreground-active); +} +.tabulator .tabulator-footer .tabulator-page:disabled { + opacity: 0.5; +} +.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); + color: #fff; +} +.tabulator .tabulator-col-resize-handle { + position: relative; + display: inline-block; + width: 6px; + margin-left: -3px; + margin-right: -3px; + z-index: 10; + vertical-align: middle; +} +.tabulator .tabulator-col-resize-handle:hover { + cursor: ew-resize; +} +.tabulator .tabulator-col-resize-handle:last-of-type { + width: 3px; + margin-right: 0; +} +.tabulator .tabulator-alert { + position: absolute; + display: flex; + align-items: center; + top: 0; + left: 0; + z-index: 100; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.4); + text-align: center; +} +.tabulator .tabulator-alert .tabulator-alert-msg { + display: inline-block; + margin: 0 auto; + padding: 10px 20px; + border-radius: 10px; + background: #fff; + font-weight: bold; + font-size: 16px; +} +.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg { + border: 4px solid #333; + color: #000; +} +.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error { + border: 4px solid #d00; + color: #590000; +} .tabulator-row { position: relative; box-sizing: border-box; min-height: 22px; - background-color: var(--fill-color); } - .tabulator-row.tabulator-row-even { - background-color: var(--neutral-fill-rest); } - .tabulator-row.tabulator-selectable:hover { - background-color: var(--accent-fill-hover); - color: var(--foreground-on-accent-hover); - cursor: pointer; } - .tabulator-row.tabulator-selected { - background-color: var(--accent-fill-active); - color: var(--foreground-on-accent-rest); } - .tabulator-row.tabulator-selected:hover { - background-color: var(--accent-fill-hover); - cursor: pointer; } - .tabulator-row.tabulator-row-moving { - border: 1px solid #000; - background: #fff; } - .tabulator-row.tabulator-moving { - position: absolute; - border-top: 1px solid var(--neutral-divider-rest); - border-bottom: 1px solid var(--neutral-divider-rest); - pointer-events: none; - z-index: 15; } - .tabulator-row .tabulator-row-resize-handle { - position: absolute; - right: 0; - bottom: 0; - left: 0; - height: 5px; } - .tabulator-row .tabulator-row-resize-handle.prev { - top: 0; - bottom: auto; } - .tabulator-row .tabulator-row-resize-handle:hover { - cursor: ns-resize; } - .tabulator-row .tabulator-responsive-collapse { - box-sizing: border-box; - padding: 5px; - border-top: 1px solid var(--neutral-divider-rest); - border-bottom: 1px solid var(--neutral-divider-rest); } - .tabulator-row .tabulator-responsive-collapse:empty { - display: none; } - .tabulator-row .tabulator-responsive-collapse table { - font-size: 14px; } - .tabulator-row .tabulator-responsive-collapse table tr td { - position: relative; } - .tabulator-row .tabulator-responsive-collapse table tr td:first-of-type { - padding-right: 10px; } - .tabulator-row .tabulator-cell { - display: inline-block; - position: relative; - box-sizing: border-box; - padding: 4px; - border-right: 1px solid var(--neutral-divider-rest); - vertical-align: middle; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - .tabulator-row .tabulator-cell.tabulator-frozen { - display: inline-block; - position: sticky; - left: 0; - background-color: inherit; - z-index: 10; } - .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { - border-right: 2px solid var(--neutral-divider-rest); } - .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right { - border-left: 2px solid var(--neutral-divider-rest); } - .tabulator-row .tabulator-cell.tabulator-editing { - border: 1px solid #999; - outline: none; - padding: 0; } - .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { - border: 1px; - background: transparent; - color: var(--neutral-foreground-rest); - outline: none; } - .tabulator-row .tabulator-cell.tabulator-validation-fail { - border: 1px solid #dd0000; } - .tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator-row .tabulator-cell.tabulator-validation-fail select { - border: 1px; - background: transparent; - color: #dd0000; } - .tabulator-row .tabulator-cell.tabulator-row-handle { - display: inline-flex; - align-items: center; - justify-content: center; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; } - .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box { - width: 80%; } - .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar { - width: 100%; - height: 3px; - margin-top: 2px; - background: #666; } - .tabulator-row .tabulator-cell .tabulator-data-tree-branch { - display: inline-block; - vertical-align: middle; - height: 9px; - width: 7px; - margin-top: -9px; - margin-right: 5px; - border-bottom-left-radius: 1px; - border-left: 2px solid var(--neutral-divider-rest); - border-bottom: 2px solid var(--neutral-divider-rest); } - .tabulator-row .tabulator-cell .tabulator-data-tree-control { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - height: 11px; - width: 11px; - margin-right: 5px; - border: 1px solid var(--neutral-foreground-rest); - border-radius: 2px; - background: rgba(0, 0, 0, 0.1); - overflow: hidden; } - .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.2); } - .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse { - display: inline-block; - position: relative; - height: 7px; - width: 1px; - background: transparent; } - .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after { - position: absolute; - content: ""; - left: -3px; - top: 3px; - height: 1px; - width: 7px; - background: var(--neutral-foreground-rest); } - .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand { - display: inline-block; - position: relative; - height: 7px; - width: 1px; - background: var(--neutral-foreground-rest); } - .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after { - position: absolute; - content: ""; - left: -3px; - top: 3px; - height: 1px; - width: 7px; - background: var(--neutral-foreground-rest); } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -o-user-select: none; - height: 15px; - width: 15px; - border-radius: 20px; - background: #666; - color: var(--fill-color); - font-weight: bold; - font-size: 1.1em; } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover { - opacity: .7; - cursor: pointer; } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close { - display: initial; } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open { - display: none; } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg { - stroke: var(--fill-color); } - .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close { - display: none; } - .tabulator-row .tabulator-cell .tabulator-traffic-light { - display: inline-block; - height: 14px; - width: 14px; - border-radius: 14px; } - .tabulator-row.tabulator-group { - box-sizing: border-box; - border-bottom: 1px solid #999; - border-right: 1px solid var(--neutral-divider-rest); - border-top: 1px solid #999; - padding: 5px; - padding-left: 10px; - background: #ccc; - font-weight: bold; - min-width: 100%; } - .tabulator-row.tabulator-group:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.1); } - .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { - margin-right: 10px; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid #666; - border-bottom: 0; } - .tabulator-row.tabulator-group.tabulator-group-level-1 { - padding-left: 30px; } - .tabulator-row.tabulator-group.tabulator-group-level-2 { - padding-left: 50px; } - .tabulator-row.tabulator-group.tabulator-group-level-3 { - padding-left: 70px; } - .tabulator-row.tabulator-group.tabulator-group-level-4 { - padding-left: 90px; } - .tabulator-row.tabulator-group.tabulator-group-level-5 { - padding-left: 110px; } - .tabulator-row.tabulator-group .tabulator-group-toggle { - display: inline-block; } - .tabulator-row.tabulator-group .tabulator-arrow { - display: inline-block; - width: 0; - height: 0; - margin-right: 16px; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-right: 0; - border-left: 6px solid #666; - vertical-align: middle; } - .tabulator-row.tabulator-group span { - margin-left: 10px; - color: #d00; } + background-color: var(--fill-color); +} +.tabulator-row.tabulator-row-even { + background-color: var(--neutral-fill-rest); +} +.tabulator-row.tabulator-selectable:hover { + background-color: var(--accent-fill-hover); + color: var(--foreground-on-accent-hover); + cursor: pointer; +} +.tabulator-row.tabulator-selected { + background-color: var(--accent-fill-active); + color: var(--foreground-on-accent-rest); +} +.tabulator-row.tabulator-selected:hover { + background-color: var(--accent-fill-hover); + cursor: pointer; +} +.tabulator-row.tabulator-row-moving { + border: 1px solid #000; + background: #fff; +} +.tabulator-row.tabulator-moving { + position: absolute; + border-top: 1px solid var(--neutral-divider-rest); + border-bottom: 1px solid var(--neutral-divider-rest); + pointer-events: none; + z-index: 15; +} +.tabulator-row .tabulator-row-resize-handle { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; +} +.tabulator-row .tabulator-row-resize-handle.prev { + top: 0; + bottom: auto; +} +.tabulator-row .tabulator-row-resize-handle:hover { + cursor: ns-resize; +} +.tabulator-row .tabulator-responsive-collapse { + box-sizing: border-box; + padding: 5px; + border-top: 1px solid var(--neutral-divider-rest); + border-bottom: 1px solid var(--neutral-divider-rest); +} +.tabulator-row .tabulator-responsive-collapse:empty { + display: none; +} +.tabulator-row .tabulator-responsive-collapse table { + font-size: 14px; +} +.tabulator-row .tabulator-responsive-collapse table tr td { + position: relative; +} +.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type { + padding-right: 10px; +} +.tabulator-row .tabulator-cell { + display: inline-block; + position: relative; + box-sizing: border-box; + padding: 4px; + border-right: 1px solid var(--neutral-divider-rest); + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tabulator-row .tabulator-cell.tabulator-frozen { + display: inline-block; + position: sticky; + left: 0; + background-color: inherit; + z-index: 10; +} +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid var(--neutral-divider-rest); +} +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid var(--neutral-divider-rest); +} +.tabulator-row .tabulator-cell.tabulator-editing { + border: 1px solid #999; + outline: none; + padding: 0; +} +.tabulator-row .tabulator-cell.tabulator-editing input, +.tabulator-row .tabulator-cell.tabulator-editing select { + border: 1px; + background: transparent; + color: var(--neutral-foreground-rest); + outline: none; +} +.tabulator-row .tabulator-cell.tabulator-validation-fail { + border: 1px solid #dd0000; +} +.tabulator-row .tabulator-cell.tabulator-validation-fail input, +.tabulator-row .tabulator-cell.tabulator-validation-fail select { + border: 1px; + background: transparent; + color: #dd0000; +} +.tabulator-row .tabulator-cell.tabulator-row-handle { + display: inline-flex; + align-items: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box { + width: 80%; +} +.tabulator-row + .tabulator-cell.tabulator-row-handle + .tabulator-row-handle-box + .tabulator-row-handle-bar { + width: 100%; + height: 3px; + margin-top: 2px; + background: #666; +} +.tabulator-row .tabulator-cell .tabulator-data-tree-branch { + display: inline-block; + vertical-align: middle; + height: 9px; + width: 7px; + margin-top: -9px; + margin-right: 5px; + border-bottom-left-radius: 1px; + border-left: 2px solid var(--neutral-divider-rest); + border-bottom: 2px solid var(--neutral-divider-rest); +} +.tabulator-row .tabulator-cell .tabulator-data-tree-control { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: middle; + height: 11px; + width: 11px; + margin-right: 5px; + border: 1px solid var(--neutral-foreground-rest); + border-radius: 2px; + background: rgba(0, 0, 0, 0.1); + overflow: hidden; +} +.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); +} +.tabulator-row + .tabulator-cell + .tabulator-data-tree-control + .tabulator-data-tree-control-collapse { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: transparent; +} +.tabulator-row + .tabulator-cell + .tabulator-data-tree-control + .tabulator-data-tree-control-collapse:after { + position: absolute; + content: ''; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: var(--neutral-foreground-rest); +} +.tabulator-row + .tabulator-cell + .tabulator-data-tree-control + .tabulator-data-tree-control-expand { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: var(--neutral-foreground-rest); +} +.tabulator-row + .tabulator-cell + .tabulator-data-tree-control + .tabulator-data-tree-control-expand:after { + position: absolute; + content: ''; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: var(--neutral-foreground-rest); +} +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + height: 15px; + width: 15px; + border-radius: 20px; + background: #666; + color: var(--fill-color); + font-weight: bold; + font-size: 1.1em; +} +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover { + opacity: 0.7; + cursor: pointer; +} +.tabulator-row + .tabulator-cell + .tabulator-responsive-collapse-toggle.open + .tabulator-responsive-collapse-toggle-close { + display: initial; +} +.tabulator-row + .tabulator-cell + .tabulator-responsive-collapse-toggle.open + .tabulator-responsive-collapse-toggle-open { + display: none; +} +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg { + stroke: var(--fill-color); +} +.tabulator-row + .tabulator-cell + .tabulator-responsive-collapse-toggle + .tabulator-responsive-collapse-toggle-close { + display: none; +} +.tabulator-row .tabulator-cell .tabulator-traffic-light { + display: inline-block; + height: 14px; + width: 14px; + border-radius: 14px; +} +.tabulator-row.tabulator-group { + box-sizing: border-box; + border-bottom: 1px solid #999; + border-right: 1px solid var(--neutral-divider-rest); + border-top: 1px solid #999; + padding: 5px; + padding-left: 10px; + background: #ccc; + font-weight: bold; + min-width: 100%; +} +.tabulator-row.tabulator-group:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.1); +} +.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { + margin-right: 10px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #666; + border-bottom: 0; +} +.tabulator-row.tabulator-group.tabulator-group-level-1 { + padding-left: 30px; +} +.tabulator-row.tabulator-group.tabulator-group-level-2 { + padding-left: 50px; +} +.tabulator-row.tabulator-group.tabulator-group-level-3 { + padding-left: 70px; +} +.tabulator-row.tabulator-group.tabulator-group-level-4 { + padding-left: 90px; +} +.tabulator-row.tabulator-group.tabulator-group-level-5 { + padding-left: 110px; +} +.tabulator-row.tabulator-group .tabulator-group-toggle { + display: inline-block; +} +.tabulator-row.tabulator-group .tabulator-arrow { + display: inline-block; + width: 0; + height: 0; + margin-right: 16px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 0; + border-left: 6px solid #666; + vertical-align: middle; +} +.tabulator-row.tabulator-group span { + margin-left: 10px; + color: #d00; +} .tabulator-popup-container { position: absolute; @@ -569,11 +860,13 @@ font-size: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; - z-index: 10000; } + z-index: 10000; +} .tabulator-popup { padding: 5px; - border-radius: 3px; } + border-radius: 3px; +} .tabulator-tooltip { max-width: Min(500px, 100%); @@ -581,121 +874,191 @@ border-radius: 2px; box-shadow: none; font-size: 12px; - pointer-events: none; } + pointer-events: none; +} .tabulator-menu .tabulator-menu-item { position: relative; box-sizing: border-box; padding: 5px 10px; - user-select: none; } - .tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled { - opacity: .5; } - .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { - cursor: pointer; - background: var(--neutral-fill-rest); } - .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu { - padding-right: 25px; } - .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after { - display: inline-block; - position: absolute; - top: calc(5px + .4em); - right: 10px; - height: 7px; - width: 7px; - content: ''; - border-width: 1px 1px 0 0; - border-style: solid; - border-color: var(--neutral-divider-rest); - vertical-align: top; - transform: rotate(45deg); } + user-select: none; +} +.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled { + opacity: 0.5; +} +.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { + cursor: pointer; + background: var(--neutral-fill-rest); +} +.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu { + padding-right: 25px; +} +.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after { + display: inline-block; + position: absolute; + top: calc(5px + 0.4em); + right: 10px; + height: 7px; + width: 7px; + content: ''; + border-width: 1px 1px 0 0; + border-style: solid; + border-color: var(--neutral-divider-rest); + vertical-align: top; + transform: rotate(45deg); +} .tabulator-menu .tabulator-menu-separator { - border-top: 1px solid var(--neutral-divider-rest); } + border-top: 1px solid var(--neutral-divider-rest); +} .tabulator-edit-list { max-height: 200px; font-size: 14px; overflow-y: auto; - -webkit-overflow-scrolling: touch; } - .tabulator-edit-list .tabulator-edit-list-item { - padding: 4px; - color: var(--neutral-foreground-rest); - outline: none; } - .tabulator-edit-list .tabulator-edit-list-item.active { - color: var(--fill-color); - background: #999; } - .tabulator-edit-list .tabulator-edit-list-item.active.focused { - outline: 1px solid rgba(var(--fill-color), 0.5); } - .tabulator-edit-list .tabulator-edit-list-item.focused { - outline: 1px solid #999; } - .tabulator-edit-list .tabulator-edit-list-item:hover { - cursor: pointer; - color: var(--fill-color); - background: #999; } - .tabulator-edit-list .tabulator-edit-list-placeholder { - padding: 4px; - color: var(--neutral-foreground-rest); - text-align: center; } - .tabulator-edit-list .tabulator-edit-list-group { - border-bottom: 1px solid var(--neutral-divider-rest); - padding: 4px; - padding-top: 6px; - color: var(--neutral-foreground-rest); - font-weight: bold; } - .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2, .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2 { - padding-left: 12px; } - .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3, .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3 { - padding-left: 20px; } - .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4, .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4 { - padding-left: 28px; } - .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5, .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5 { - padding-left: 36px; } + -webkit-overflow-scrolling: touch; +} +.tabulator-edit-list .tabulator-edit-list-item { + padding: 4px; + color: var(--neutral-foreground-rest); + outline: none; +} +.tabulator-edit-list .tabulator-edit-list-item.active { + color: var(--fill-color); + background: #999; +} +.tabulator-edit-list .tabulator-edit-list-item.active.focused { + outline: 1px solid rgba(var(--fill-color), 0.5); +} +.tabulator-edit-list .tabulator-edit-list-item.focused { + outline: 1px solid #999; +} +.tabulator-edit-list .tabulator-edit-list-item:hover { + cursor: pointer; + color: var(--fill-color); + background: #999; +} +.tabulator-edit-list .tabulator-edit-list-placeholder { + padding: 4px; + color: var(--neutral-foreground-rest); + text-align: center; +} +.tabulator-edit-list .tabulator-edit-list-group { + border-bottom: 1px solid var(--neutral-divider-rest); + padding: 4px; + padding-top: 6px; + color: var(--neutral-foreground-rest); + font-weight: bold; +} +.tabulator-edit-list + .tabulator-edit-list-item.tabulator-edit-list-group-level-2, +.tabulator-edit-list + .tabulator-edit-list-group.tabulator-edit-list-group-level-2 { + padding-left: 12px; +} +.tabulator-edit-list + .tabulator-edit-list-item.tabulator-edit-list-group-level-3, +.tabulator-edit-list + .tabulator-edit-list-group.tabulator-edit-list-group-level-3 { + padding-left: 20px; +} +.tabulator-edit-list + .tabulator-edit-list-item.tabulator-edit-list-group-level-4, +.tabulator-edit-list + .tabulator-edit-list-group.tabulator-edit-list-group-level-4 { + padding-left: 28px; +} +.tabulator-edit-list + .tabulator-edit-list-item.tabulator-edit-list-group-level-5, +.tabulator-edit-list + .tabulator-edit-list-group.tabulator-edit-list-group-level-5 { + padding-left: 36px; +} .tabulator.tabulator-ltr { - direction: ltr; } + direction: ltr; +} .tabulator.tabulator-rtl { text-align: initial; - direction: rtl; } - .tabulator.tabulator-rtl .tabulator-header .tabulator-col { - text-align: initial; - border-left: 1px solid var(--accent-fill-rest); - border-right: initial; } - .tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { - margin-right: initial; - margin-left: -1px; } - .tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { - padding-right: 0; - padding-left: 25px; } - .tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter { - left: 8px; - right: initial; } - .tabulator.tabulator-rtl .tabulator-row .tabulator-cell { - border-right: initial; - border-left: 1px solid var(--neutral-divider-rest); } - .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch { - margin-right: initial; - margin-left: 5px; - border-bottom-left-radius: initial; - border-bottom-right-radius: 1px; - border-left: initial; - border-right: 2px solid var(--neutral-divider-rest); } - .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control { - margin-right: initial; - margin-left: 5px; } - .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { - border-left: 2px solid var(--neutral-divider-rest); } - .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right { - border-right: 2px solid var(--neutral-divider-rest); } - .tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type { - width: 3px; - margin-left: 0; - margin-right: -3px; } - .tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder { - text-align: initial; } + direction: rtl; +} +.tabulator.tabulator-rtl .tabulator-header .tabulator-col { + text-align: initial; + border-left: 1px solid var(--accent-fill-rest); + border-right: initial; +} +.tabulator.tabulator-rtl + .tabulator-header + .tabulator-col.tabulator-col-group + .tabulator-col-group-cols { + margin-right: initial; + margin-left: -1px; +} +.tabulator.tabulator-rtl + .tabulator-header + .tabulator-col.tabulator-sortable + .tabulator-col-title { + padding-right: 0; + padding-left: 25px; +} +.tabulator.tabulator-rtl + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-sorter { + left: 8px; + right: initial; +} +.tabulator.tabulator-rtl .tabulator-row .tabulator-cell { + border-right: initial; + border-left: 1px solid var(--neutral-divider-rest); +} +.tabulator.tabulator-rtl + .tabulator-row + .tabulator-cell + .tabulator-data-tree-branch { + margin-right: initial; + margin-left: 5px; + border-bottom-left-radius: initial; + border-bottom-right-radius: 1px; + border-left: initial; + border-right: 2px solid var(--neutral-divider-rest); +} +.tabulator.tabulator-rtl + .tabulator-row + .tabulator-cell + .tabulator-data-tree-control { + margin-right: initial; + margin-left: 5px; +} +.tabulator.tabulator-rtl + .tabulator-row + .tabulator-cell.tabulator-frozen.tabulator-frozen-left { + border-left: 2px solid var(--neutral-divider-rest); +} +.tabulator.tabulator-rtl + .tabulator-row + .tabulator-cell.tabulator-frozen.tabulator-frozen-right { + border-right: 2px solid var(--neutral-divider-rest); +} +.tabulator.tabulator-rtl + .tabulator-row + .tabulator-col-resize-handle:last-of-type { + width: 3px; + margin-left: 0; + margin-right: -3px; +} +.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder { + text-align: initial; +} -.tabulator-cell a {color: var(--accent-fill-rest);} -.tabulator-cell a:hover {color: var(--neutral-foreground-rest); } +.tabulator-cell a { + color: var(--accent-fill-rest); +} +.tabulator-cell a:hover { + color: var(--neutral-foreground-rest); +} .tabulator-print-fullscreen { position: absolute; @@ -703,162 +1066,220 @@ bottom: 0; left: 0; right: 0; - z-index: 10000; } + z-index: 10000; +} body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) { - display: none !important; } + display: none !important; +} .tabulator-print-table { - border-collapse: collapse; } - .tabulator-print-table .tabulator-data-tree-branch { - display: inline-block; - vertical-align: middle; - height: 9px; - width: 7px; - margin-top: -9px; - margin-right: 5px; - border-bottom-left-radius: 1px; - border-left: 2px solid var(--neutral-divider-rest); - border-bottom: 2px solid var(--neutral-divider-rest); } - .tabulator-print-table .tabulator-print-table-group { - box-sizing: border-box; - border-bottom: 1px solid #999; - border-right: 1px solid var(--neutral-divider-rest); - border-top: 1px solid #999; - padding: 5px; - padding-left: 10px; - background: #ccc; - font-weight: bold; - min-width: 100%; } - .tabulator-print-table .tabulator-print-table-group:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.1); } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow { - margin-right: 10px; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 6px solid #666; - border-bottom: 0; } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td { - padding-left: 30px !important; } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td { - padding-left: 50px !important; } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td { - padding-left: 70px !important; } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td { - padding-left: 90px !important; } - .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td { - padding-left: 110px !important; } - .tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle { - display: inline-block; } - .tabulator-print-table .tabulator-print-table-group .tabulator-arrow { - display: inline-block; - width: 0; - height: 0; - margin-right: 16px; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-right: 0; - border-left: 6px solid #666; - vertical-align: middle; } - .tabulator-print-table .tabulator-print-table-group span { - margin-left: 10px; - color: #d00; } - .tabulator-print-table .tabulator-data-tree-control { - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: middle; - height: 11px; - width: 11px; - margin-right: 5px; - border: 1px solid var(--neutral-foreground-rest); - border-radius: 2px; - background: rgba(0, 0, 0, 0.1); - overflow: hidden; } - .tabulator-print-table .tabulator-data-tree-control:hover { - cursor: pointer; - background: rgba(0, 0, 0, 0.2); } - .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse { - display: inline-block; - position: relative; - height: 7px; - width: 1px; - background: transparent; } - .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after { - position: absolute; - content: ""; - left: -3px; - top: 3px; - height: 1px; - width: 7px; - background: var(--neutral-foreground-rest); } - .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand { - display: inline-block; - position: relative; - height: 7px; - width: 1px; - background: var(--neutral-foreground-rest); } - .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after { - position: absolute; - content: ""; - left: -3px; - top: 3px; - height: 1px; - width: 7px; - background: var(--neutral-foreground-rest); } + border-collapse: collapse; +} +.tabulator-print-table .tabulator-data-tree-branch { + display: inline-block; + vertical-align: middle; + height: 9px; + width: 7px; + margin-top: -9px; + margin-right: 5px; + border-bottom-left-radius: 1px; + border-left: 2px solid var(--neutral-divider-rest); + border-bottom: 2px solid var(--neutral-divider-rest); +} +.tabulator-print-table .tabulator-print-table-group { + box-sizing: border-box; + border-bottom: 1px solid #999; + border-right: 1px solid var(--neutral-divider-rest); + border-top: 1px solid #999; + padding: 5px; + padding-left: 10px; + background: #ccc; + font-weight: bold; + min-width: 100%; +} +.tabulator-print-table .tabulator-print-table-group:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.1); +} +.tabulator-print-table + .tabulator-print-table-group.tabulator-group-visible + .tabulator-arrow { + margin-right: 10px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #666; + border-bottom: 0; +} +.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td { + padding-left: 30px !important; +} +.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td { + padding-left: 50px !important; +} +.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td { + padding-left: 70px !important; +} +.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td { + padding-left: 90px !important; +} +.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td { + padding-left: 110px !important; +} +.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle { + display: inline-block; +} +.tabulator-print-table .tabulator-print-table-group .tabulator-arrow { + display: inline-block; + width: 0; + height: 0; + margin-right: 16px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 0; + border-left: 6px solid #666; + vertical-align: middle; +} +.tabulator-print-table .tabulator-print-table-group span { + margin-left: 10px; + color: #d00; +} +.tabulator-print-table .tabulator-data-tree-control { + display: inline-flex; + justify-content: center; + align-items: center; + vertical-align: middle; + height: 11px; + width: 11px; + margin-right: 5px; + border: 1px solid var(--neutral-foreground-rest); + border-radius: 2px; + background: rgba(0, 0, 0, 0.1); + overflow: hidden; +} +.tabulator-print-table .tabulator-data-tree-control:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); +} +.tabulator-print-table + .tabulator-data-tree-control + .tabulator-data-tree-control-collapse { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: transparent; +} +.tabulator-print-table + .tabulator-data-tree-control + .tabulator-data-tree-control-collapse:after { + position: absolute; + content: ''; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: var(--neutral-foreground-rest); +} +.tabulator-print-table + .tabulator-data-tree-control + .tabulator-data-tree-control-expand { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: var(--neutral-foreground-rest); +} +.tabulator-print-table + .tabulator-data-tree-control + .tabulator-data-tree-control-expand:after { + position: absolute; + content: ''; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: var(--neutral-foreground-rest); +} .tabulator { - background-color: var(--fill-color); } - .tabulator .tabulator-header .tabulator-col { - background-color: var(--fill-color); } - .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor { - color: #fff; } - .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input, .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select { - border: 1px solid #999; - background: #444; - color: #fff; } - .tabulator .tabulator-header .tabulator-calcs-holder { - background: var(--fill-color) !important; } - .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { - background: var(--fill-color) !important; } - .tabulator .tabulator-footer .tabulator-calcs-holder { - background: var(--fill-color) !important; } - .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { - background: var(--fill-color) !important; } - .tabulator .tabulator-footer .tabulator-paginator label { - color: #fff; } - .tabulator .tabulator-footer .tabulator-page-counter { - color: #fff; } - .tabulator .tabulator-footer .tabulator-page { - color: var(--neutral-foreground-rest); - font-family: inherit; - font-weight: inherit; - font-size: inherit; } + background-color: var(--fill-color); +} +.tabulator .tabulator-header .tabulator-col { + background-color: var(--fill-color); +} +.tabulator + .tabulator-header + .tabulator-col + .tabulator-col-content + .tabulator-col-title + .tabulator-title-editor { + color: #fff; +} +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input, +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter select { + border: 1px solid #999; + background: #444; + color: #fff; +} +.tabulator .tabulator-header .tabulator-calcs-holder { + background: var(--fill-color) !important; +} +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { + background: var(--fill-color) !important; +} +.tabulator .tabulator-footer .tabulator-calcs-holder { + background: var(--fill-color) !important; +} +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { + background: var(--fill-color) !important; +} +.tabulator .tabulator-footer .tabulator-paginator label { + color: #fff; +} +.tabulator .tabulator-footer .tabulator-page-counter { + color: #fff; +} +.tabulator .tabulator-footer .tabulator-page { + color: var(--neutral-foreground-rest); + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} .tabulator-row.tabulator-group { min-width: 100%; - color: #333; } - .tabulator-row.tabulator-group:hover { - cursor: pointer; - background-color: rgba(0, 0, 0, 0.1); } - .tabulator-row.tabulator-group span { - color: #666; } + color: #333; +} +.tabulator-row.tabulator-group:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.1); +} +.tabulator-row.tabulator-group span { + color: #666; +} .tabulator-edit-select-list { - background: var(--neutral-foreground-rest); } - .tabulator-edit-select-list .tabulator-edit-select-list-item { - color: var(--fill-color); } - .tabulator-edit-select-list .tabulator-edit-select-list-item.active { - color: #999; - background: var(--neutral-fill-rest); } - .tabulator-edit-select-list .tabulator-edit-select-list-item.active.focused { - outline: 1px solid rgba(153, 153, 153, 0.5); } - .tabulator-edit-select-list .tabulator-edit-select-list-item.focused { - outline: 1px solid var(--neutral-fill-rest); } - .tabulator-edit-select-list .tabulator-edit-select-list-item:hover { - color: #999; - background: var(--fill-color); } + background: var(--neutral-foreground-rest); +} +.tabulator-edit-select-list .tabulator-edit-select-list-item { + color: var(--fill-color); +} +.tabulator-edit-select-list .tabulator-edit-select-list-item.active { + color: #999; + background: var(--neutral-fill-rest); +} +.tabulator-edit-select-list .tabulator-edit-select-list-item.active.focused { + outline: 1px solid rgba(153, 153, 153, 0.5); +} +.tabulator-edit-select-list .tabulator-edit-select-list-item.focused { + outline: 1px solid var(--neutral-fill-rest); +} +.tabulator-edit-select-list .tabulator-edit-select-list-item:hover { + color: #999; + background: var(--fill-color); +} .tabulator-print-table .tabulator-print-table-group { - color: #333; } + color: #333; +} diff --git a/panel/dist/css/alerts.css b/panel/dist/css/alerts.css index df0646d93d..05ff035161 100644 --- a/panel/dist/css/alerts.css +++ b/panel/dist/css/alerts.css @@ -1,132 +1,137 @@ :host(.alert) { - padding: 0.75rem 1.25rem; - border: 1px solid transparent; - border-radius: 0.25rem; + padding: 0.75rem 1.25rem; + border: 1px solid transparent; + border-radius: 0.25rem; } :host(.alert) a { - color: rgb(11, 46, 19); /* #002752; */ - font-weight: 700; - text-decoration: rgb(11, 46, 19); - text-decoration-color: rgb(11, 46, 19); - text-decoration-line: none; - text-decoration-style: solid; - text-decoration-thickness: auto; + color: rgb(11, 46, 19); /* #002752; */ + font-weight: 700; + text-decoration: rgb(11, 46, 19); + text-decoration-color: rgb(11, 46, 19); + text-decoration-line: none; + text-decoration-style: solid; + text-decoration-thickness: auto; } :host(.alert) a:hover { - color: rgb(11, 46, 19); - font-weight: 700; - text-decoration: underline; + color: rgb(11, 46, 19); + font-weight: 700; + text-decoration: underline; } :host(.alert-primary) { - color: var(--primary-text-color); - background-color: var(--primary-bg-subtle); - border-color: var(--primary-border-subtle); + color: var(--primary-text-color); + background-color: var(--primary-bg-subtle); + border-color: var(--primary-border-subtle); } :host(.alert-primary) hr { - border-top-color: #9fcdff; + border-top-color: #9fcdff; } :host(.alert-secondary) { - color: var(--secondary-text-color); - background-color: var(--secondary-bg-subtle); - border-color: var(--secondary-border-subtle); + color: var(--secondary-text-color); + background-color: var(--secondary-bg-subtle); + border-color: var(--secondary-border-subtle); } :host(.alert-secondary) hr { - border-top-color: #c8cbcf; + border-top-color: #c8cbcf; } :host(.alert-success) { - color: var(--success-text-color); - background-color: var(--success-bg-subtle); - border-color: var(--success-border-subtle); + color: var(--success-text-color); + background-color: var(--success-bg-subtle); + border-color: var(--success-border-subtle); } :host(.alert-success) hr { - border-top-color: #b1dfbb; + border-top-color: #b1dfbb; } :host(.alert-info) { - color: var(--info-text-color); - background-color: var(--info-bg-subtle); - border-color: var(--info-border-subtle); + color: var(--info-text-color); + background-color: var(--info-bg-subtle); + border-color: var(--info-border-subtle); } :host(.alert-info) hr { - border-top-color: #abdde5; + border-top-color: #abdde5; } :host(.alert-warning) { - color: var(--warning-text-color); - background-color: var(--warning-bg-subtle); - border-color: var(--warning-border-subtle); + color: var(--warning-text-color); + background-color: var(--warning-bg-subtle); + border-color: var(--warning-border-subtle); } :host(.alert-warning) hr { - border-top-color: #ffe8a1; + border-top-color: #ffe8a1; } :host(.alert-danger) { - color: var(--danger-text-color); - background-color: var(--danger-bg-subtle); - border-color: var(--danger-border-subtle); + color: var(--danger-text-color); + background-color: var(--danger-bg-subtle); + border-color: var(--danger-border-subtle); } :host(.alert-danger) hr { - border-top-color: #f1b0b7; + border-top-color: #f1b0b7; } :host(.alert-light) { - color: var(--light-text-color); - background-color: var(--light-bg-subtle); - border-color: var(--light-border-subtle); + color: var(--light-text-color); + background-color: var(--light-bg-subtle); + border-color: var(--light-border-subtle); } :host(.alert-light) hr { - border-top-color: #ececf6; + border-top-color: #ececf6; } :host(.alert-dark) { - color: var(--dark-text-color); - background-color: var(--dark-bg-subtle); - border-color: var(--dark-border-subtle); + color: var(--dark-text-color); + background-color: var(--dark-bg-subtle); + border-color: var(--dark-border-subtle); } :host(.alert-dark) hr { - border-top-color: #b9bbbe; + border-top-color: #b9bbbe; } /* adjfæl */ :host(.alert-primary) a { - color: var(--primary-text-color); + color: var(--primary-text-color); } :host(.alert-secondary) a { - color: var(--secondary-text-color); + color: var(--secondary-text-color); } :host(.alert-success) a { - color: var(--success-text-color); + color: var(--success-text-color); } :host(.alert-info) a { - color: var(--info-text-color); + color: var(--info-text-color); } :host(.alert-warning) a { - color: var(--warning-text-color); + color: var(--warning-text-color); } :host(.alert-danger) a { - color: var(--danger-text-color); + color: var(--danger-text-color); } :host(.alert-light) a { - color: var(--light-text-color); + color: var(--light-text-color); } :host(.alert-dark) a { - color: var(--dark-text-color); + color: var(--dark-text-color); } -h1, h2, h3, h4, h5, h6 { - margin-block-start: 0; - margin-block-end: 0.2em; +h1, +h2, +h3, +h4, +h5, +h6 { + margin-block-start: 0; + margin-block-end: 0.2em; } diff --git a/panel/dist/css/button.css b/panel/dist/css/button.css index 4769f03d71..99ded4130a 100644 --- a/panel/dist/css/button.css +++ b/panel/dist/css/button.css @@ -1,106 +1,125 @@ +:host { + --primary-color: var(--design-primary-color, var(--panel-primary-color)); + --primary-text-color: var( + --design-primary-text-color, + var(--panel-on-primary-color) + ); + --background-text-color: var( + --design-background-text-color, + var(--panel-on-background-color) + ); + --surface-color: var(--design-surface-color, var(--panel-surface-color)); + --surface-text-color: var(--design-surface-color, var(--panel-surface-color)); +} + .bk-btn:active { - transform: scale(0.98); + transform: scale(0.98); } :host(.outline) .bk-btn { - background-color: transparent; + background-color: transparent; } :host(.solid) .bk-btn { - border: unset; + border: unset; } :host(.solid) .bk-btn.bk-btn-default { - background-color: var(--panel-surface-color); - color: var(--panel-on-surface-color); + background-color: var(--surface-color); + color: var(--on-surface-color); } :host(.outline) .bk-btn.bk-btn-default { - color: var(--panel-on-background-color); + color: var(--background-text-color); } :host(.outline) .bk-btn.bk-btn-default.bk-active { - color: var(--panel-on-background-color); - box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%); + color: var(--background-text-color); + box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%); } :host(.outline) .bk-btn-group .bk-btn-default.bk-active { - background-color: var(--panel-surface-color); - color: var(--panel-on-surface-color); + background-color: var(--surface-color); + color: var(--surface-text-color); } :host(.solid) .bk-btn.bk-btn-primary { - background-color: var(--panel-primary-color); + background-color: var(--primary-color); } :host(.solid) .bk-btn.bk-btn-primary.bk-active { - background-color: var(--panel-primary-color); - box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%); + background-color: var(--primary-color); + box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%); } :host(.outline) .bk-btn-primary { - background-color: transparent; - color: var(--panel-on-background-color); + background-color: transparent; + color: var(--background-text-color); } -:host(.outline) .bk-btn-primary.bk-active,:host(.outline) .bk-btn-primary:hover { - color: var(--neutral-foreground-rest); +:host(.outline) .bk-btn-primary.bk-active, +:host(.outline) .bk-btn-primary:hover { + color: var(--background-text-color); } :host(.outline) .bk-btn-group .bk-btn-primary.bk-active { - background-color: var(--panel-primary-color); - color: var(--panel-on-primary-color); + background-color: var(--primary-color); + color: var(--primary-text-color); } :host(.outline) .bk-btn-success { - color: var(--success-bg-color); + color: var(--success-bg-color); } -:host(.outline) .bk-btn-success.bk-active, :host(.outline) .bk-btn-success:hover { - color: var(--panel-on-background-color); +:host(.outline) .bk-btn-success.bk-active, +:host(.outline) .bk-btn-success:hover { + color: var(--background-text-color); } :host(.outline) .bk-btn-group .bk-btn-success.bk-active { - background-color: var(--success-bg-color); - color: var(--success-text-color); + background-color: var(--success-bg-color); + color: var(--success-text-color); } :host(.outline) .bk-btn-warning { - color: var(--warning-bg-color); + color: var(--warning-bg-color); } -:host(.outline) .bk-btn-warning.bk-active, :host(.outline) .bk-btn-warning:hover { - color: var(--panel-on-background-color); +:host(.outline) .bk-btn-warning.bk-active, +:host(.outline) .bk-btn-warning:hover { + color: var(--background-text-color); } :host(.outline) .bk-btn-group .bk-btn-warning.bk-active { - background-color: var(--warning-bg-color); - color: var(--warning-text-color); + background-color: var(--warning-bg-color); + color: var(--warning-text-color); } :host(.outline) .bk-btn-danger { - color: var(--danger-bg-color); + color: var(--danger-bg-color); } -:host(.outline) .bk-btn-danger.bk-active, :host(.outline) .bk-btn-danger:hover { - color: var(--panel-on-background-color); +:host(.outline) .bk-btn-danger.bk-active, +:host(.outline) .bk-btn-danger:hover { + color: var(--background-text-color); } :host(.outline) .bk-btn-group .bk-btn-danger.bk-active { - background-color: var(--danger-bg-color); - color: var(--danger-text-color); + background-color: var(--danger-bg-color); + color: var(--danger-text-color); } :host(.outline) .bk-btn-light { - border-color: var(--light-bg-color); - color: var(--panel-on-background-color); + border-color: var(--light-bg-color); + color: var(--background-text-color); } -:host(.outline) .bk-btn-light.bk-active, :host(.outline) .bk-btn-light:hover { - color: var(--panel-on-background-color); +:host(.outline) .bk-btn-light.bk-active, +:host(.outline) .bk-btn-light:hover { + color: var(--background-text-color); } :host(.outline) .bk-btn-group .bk-btn-light.bk-active { - background-color: var(--light-bg-color); - color: var(--light-text-color); + background-color: var(--light-bg-color); + color: var(--light-text-color); } diff --git a/panel/dist/css/card.css b/panel/dist/css/card.css index 2626109eaf..c17cdde19b 100644 --- a/panel/dist/css/card.css +++ b/panel/dist/css/card.css @@ -1,57 +1,57 @@ :host(.card) { - border: 1px solid rgba(0,0,0,.125); - border-radius: 0.25rem; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; } :host(.accordion) { - border: 1px solid rgba(0,0,0,.125); + border: 1px solid rgba(0, 0, 0, 0.125); } .card-header { - align-items: center; - background-color: rgba(0, 0, 0, 0.03); - border: unset; - border-radius: 0.25rem; - display: inline-flex; - justify-content: start; - position: sticky; - left: 0; - width: 100%; + align-items: center; + background-color: rgba(0, 0, 0, 0.03); + border: unset; + border-radius: 0.25rem; + display: inline-flex; + justify-content: start; + position: sticky; + left: 0; + width: 100%; } .accordion-header { - align-items: center; - background-color: rgba(0, 0, 0, 0.03); - border: 1px solid; - border-radius: 0; - display: flex; - justify-content: start; - position: sticky; - left: 0; - width: 100%; + align-items: center; + background-color: rgba(0, 0, 0, 0.03); + border: 1px solid; + border-radius: 0; + display: flex; + justify-content: start; + position: sticky; + left: 0; + width: 100%; } .card-button { - background-color: transparent; - margin-left: 0.5em; - margin-right: 0.5em; + background-color: transparent; + margin-left: 0.5em; + margin-right: 0.5em; } .card-header-row { - margin-bottom: auto; - margin-top: auto; - position: relative !important; - max-width: calc(100% - 2em); + margin-bottom: auto; + margin-top: auto; + position: relative !important; + max-width: calc(100% - 2em); } .card-title { - align-items: center; - font-size: 1.4em; - font-weight: bold; - overflow-wrap: break-word; + align-items: center; + font-size: 1.4em; + font-weight: bold; + overflow-wrap: break-word; } .card-header-row > .bk { - overflow-wrap: break-word; - text-align: center; + overflow-wrap: break-word; + text-align: center; } diff --git a/panel/dist/css/dataframe.css b/panel/dist/css/dataframe.css index daaa90dd78..d3e09bfd7b 100644 --- a/panel/dist/css/dataframe.css +++ b/panel/dist/css/dataframe.css @@ -1,47 +1,50 @@ table.panel-df { - margin-left: auto; - margin-right: auto; - border: none; - border-collapse: collapse; - border-spacing: 0; - font-size: 12px; - table-layout: auto; - width: 100%; + margin-left: auto; + margin-right: auto; + border: none; + border-collapse: collapse; + border-spacing: 0; + font-size: 12px; + table-layout: auto; + width: 100%; } -.panel-df tr, .panel-df th, .panel-df td { - text-align: right; - vertical-align: middle; - padding: 0.5em 0.5em; - line-height: normal; - white-space: normal; - max-width: none; - border: none; +.panel-df tr, +.panel-df th, +.panel-df td { + text-align: right; + vertical-align: middle; + padding: 0.5em 0.5em; + line-height: normal; + white-space: normal; + max-width: none; + border: none; } .panel-df tbody { - display: table-row-group; - vertical-align: middle; - border-color: inherit; + display: table-row-group; + vertical-align: middle; + border-color: inherit; } .panel-df tbody tr:nth-child(odd) { - background: var(--panel-surface-color); - color: var(--panel-on-surface-color); + background: var(--design-surface-color, var(--panel-surface-color)); + color: var(--design-surface-text-color, var(--panel-on-surface-color)); } .panel-df thead { - border-bottom: 1px solid var(--panel-on-background-color); - vertical-align: bottom; + border-bottom: 1px solid + var(--design-background-text-color, var(--panel-on-background-color)); + vertical-align: bottom; } .panel-df tbody tr:hover { - background-color: #e1f5fe; - color: #000000; - cursor: pointer; + background-color: #e1f5fe; + color: #000000; + cursor: pointer; } :host { - overflow: auto; - padding-right: 1px; + overflow: auto; + padding-right: 1px; } diff --git a/panel/dist/css/debugger.css b/panel/dist/css/debugger.css index 763f514b1a..7361cd87ca 100644 --- a/panel/dist/css/debugger.css +++ b/panel/dist/css/debugger.css @@ -1,14 +1,14 @@ .debugger-card { - border: 1px solid rgba(0,0,0,1); - color: rgba(255,255,255,1); - background-color: rgba(0,0,0,1); + border: 1px solid rgba(0, 0, 0, 1); + color: rgba(255, 255, 255, 1); + background-color: rgba(0, 0, 0, 1); border-radius: 0rem; } .debugger-card-header { align-items: center; text-align: left; - background-color: rgba(0, 0, 0, 1)!important; + background-color: rgba(0, 0, 0, 1) !important; color: rgba(255, 255, 255, 1); border-radius: 0rem; display: inline-flex; @@ -32,11 +32,11 @@ /* Special debugger buttons for clearing and saving */ button.special_btn { - width: 25px; - height: 25px; - background-color: black; - color: white; - display: inline-block; + width: 25px; + height: 25px; + background-color: black; + color: white; + display: inline-block; } button.special_btn .tooltiptext { @@ -62,9 +62,9 @@ button.special_btn:hover .tooltiptext { } button.clear_btn:hover .shown { - display: none; + display: none; } button.clear_btn:hover:before { - content: "☑"; + content: '☑'; } diff --git a/panel/dist/css/divider.css b/panel/dist/css/divider.css index 1e6c600429..c2f696060e 100644 --- a/panel/dist/css/divider.css +++ b/panel/dist/css/divider.css @@ -1,10 +1,10 @@ -:host{ - width: 100%; +:host { + width: 100%; } -div.bk-clearfix{ - width:100%; +div.bk-clearfix { + width: 100%; } -hr{ - margin:0px; - margin-bottom:3px; +hr { + margin: 0px; + margin-bottom: 3px; } diff --git a/panel/dist/css/gridbox.css b/panel/dist/css/gridbox.css index 41614b0edc..c1a05145df 100644 --- a/panel/dist/css/gridbox.css +++ b/panel/dist/css/gridbox.css @@ -1,10 +1,10 @@ :host(.equal-width) { - grid-auto-columns: minmax(0, 1fr); - grid-auto-flow: column; - grid-template-columns: unset; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; + grid-template-columns: unset; } :host(.equal-height) { - grid-auto-rows: minmax(0, 1fr); - grid-template-rows: unset; + grid-auto-rows: minmax(0, 1fr); + grid-template-rows: unset; } diff --git a/panel/dist/css/gridspec.css b/panel/dist/css/gridspec.css index 8a5050bc23..fd0173a503 100644 --- a/panel/dist/css/gridspec.css +++ b/panel/dist/css/gridspec.css @@ -1,7 +1,7 @@ :host { - grid-auto-columns: minmax(0, 1fr); - grid-auto-rows: minmax(0, 1fr); - grid-auto-flow: column; - grid-template-columns: unset; - grid-template-rows: unset; + grid-auto-columns: minmax(0, 1fr); + grid-auto-rows: minmax(0, 1fr); + grid-auto-flow: column; + grid-template-columns: unset; + grid-template-rows: unset; } diff --git a/panel/dist/css/gridstack.css b/panel/dist/css/gridstack.css index e2517d325c..ee88d540d9 100644 --- a/panel/dist/css/gridstack.css +++ b/panel/dist/css/gridstack.css @@ -1,4 +1,4 @@ .grid-stack > .grid-stack-item > .ui-resizable-se { - right: 5px !important; - bottom: 5px !important; + right: 5px !important; + bottom: 5px !important; } diff --git a/panel/dist/css/json.css b/panel/dist/css/json.css index ea0d5d2cee..ebc916b0ef 100644 --- a/panel/dist/css/json.css +++ b/panel/dist/css/json.css @@ -17,11 +17,13 @@ .json-formatter-row .json-formatter-children.json-formatter-empty:after { display: none; } -.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after { - content: "No properties"; +.json-formatter-row + .json-formatter-children.json-formatter-empty.json-formatter-object:after { + content: 'No properties'; } -.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after { - content: "[]"; +.json-formatter-row + .json-formatter-children.json-formatter-empty.json-formatter-array:after { + content: '[]'; } .json-formatter-row .json-formatter-string, .json-formatter-row .json-formatter-stringifiable { @@ -36,13 +38,13 @@ color: red; } .json-formatter-row .json-formatter-null { - color: #855A00; + color: #855a00; } .json-formatter-row .json-formatter-undefined { color: #ca0b69; } .json-formatter-row .json-formatter-function { - color: #FF20ED; + color: #ff20ed; } .json-formatter-row .json-formatter-date { background-color: rgba(0, 0, 0, 0.05); @@ -56,7 +58,7 @@ color: blue; } .json-formatter-row .json-formatter-key { - color: #00008B; + color: #00008b; padding-right: 0.2rem; } .json-formatter-row .json-formatter-toggler-link { @@ -73,7 +75,7 @@ .json-formatter-row .json-formatter-toggler:after { display: inline-block; transition: transform 100ms ease-in; - content: "\25BA"; + content: '\25BA'; } .json-formatter-row > a > .json-formatter-preview-text { opacity: 0; @@ -83,7 +85,9 @@ .json-formatter-row:hover > a > .json-formatter-preview-text { opacity: 0.6; } -.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after { +.json-formatter-row.json-formatter-open + > .json-formatter-toggler-link + .json-formatter-toggler:after { transform: rotate(90deg); } .json-formatter-row.json-formatter-open > .json-formatter-children:after { @@ -107,53 +111,57 @@ .json-formatter-dark.json-formatter-row .json-formatter-row { margin-left: 1rem; } -.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty { +.json-formatter-dark.json-formatter-row + .json-formatter-children.json-formatter-empty { opacity: 0.5; margin-left: 1rem; } -.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after { +.json-formatter-dark.json-formatter-row + .json-formatter-children.json-formatter-empty:after { display: none; } -.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after { - content: "No properties"; +.json-formatter-dark.json-formatter-row + .json-formatter-children.json-formatter-empty.json-formatter-object:after { + content: 'No properties'; } -.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after { - content: "[]"; +.json-formatter-dark.json-formatter-row + .json-formatter-children.json-formatter-empty.json-formatter-array:after { + content: '[]'; } .json-formatter-dark.json-formatter-row .json-formatter-string, .json-formatter-dark.json-formatter-row .json-formatter-stringifiable { - color: #31F031; + color: #31f031; white-space: pre; word-wrap: break-word; } .json-formatter-dark.json-formatter-row .json-formatter-number { - color: #66C2FF; + color: #66c2ff; } .json-formatter-dark.json-formatter-row .json-formatter-boolean { - color: #EC4242; + color: #ec4242; } .json-formatter-dark.json-formatter-row .json-formatter-null { - color: #EEC97D; + color: #eec97d; } .json-formatter-dark.json-formatter-row .json-formatter-undefined { color: #ef8fbe; } .json-formatter-dark.json-formatter-row .json-formatter-function { - color: #FD48CB; + color: #fd48cb; } .json-formatter-dark.json-formatter-row .json-formatter-date { background-color: rgba(255, 255, 255, 0.05); } .json-formatter-dark.json-formatter-row .json-formatter-url { text-decoration: underline; - color: #027BFF; + color: #027bff; cursor: pointer; } .json-formatter-dark.json-formatter-row .json-formatter-bracket { - color: #9494FF; + color: #9494ff; } .json-formatter-dark.json-formatter-row .json-formatter-key { - color: #23A0DB; + color: #23a0db; padding-right: 0.2rem; } .json-formatter-dark.json-formatter-row .json-formatter-toggler-link { @@ -170,23 +178,30 @@ .json-formatter-dark.json-formatter-row .json-formatter-toggler:after { display: inline-block; transition: transform 100ms ease-in; - content: "\25BA"; + content: '\25BA'; } .json-formatter-dark.json-formatter-row > a > .json-formatter-preview-text { opacity: 0; transition: opacity 0.15s ease-in; font-style: italic; } -.json-formatter-dark.json-formatter-row:hover > a > .json-formatter-preview-text { +.json-formatter-dark.json-formatter-row:hover + > a + > .json-formatter-preview-text { opacity: 0.6; } -.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after { +.json-formatter-dark.json-formatter-row.json-formatter-open + > .json-formatter-toggler-link + .json-formatter-toggler:after { transform: rotate(90deg); } -.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-children:after { +.json-formatter-dark.json-formatter-row.json-formatter-open + > .json-formatter-children:after { display: inline-block; } -.json-formatter-dark.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text { +.json-formatter-dark.json-formatter-row.json-formatter-open + > a + > .json-formatter-preview-text { display: none; } .json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after { diff --git a/panel/dist/css/katex.css b/panel/dist/css/katex.css index 54ed5a60df..b7a40bf8be 100644 --- a/panel/dist/css/katex.css +++ b/panel/dist/css/katex.css @@ -1,3 +1,3 @@ span.katex-html { - display: none; + display: none; } diff --git a/panel/dist/css/layout.css b/panel/dist/css/layout.css new file mode 100644 index 0000000000..4f6c6eacc7 --- /dev/null +++ b/panel/dist/css/layout.css @@ -0,0 +1,2 @@ +.scrollable { +} diff --git a/panel/dist/css/loading.css b/panel/dist/css/loading.css index 8424596821..80294a3bf7 100644 --- a/panel/dist/css/loading.css +++ b/panel/dist/css/loading.css @@ -1,14 +1,16 @@ -:host(.pn-loading), .pn-loading { +:host(.pn-loading), +.pn-loading { overflow: hidden; } -:host(.pn-loading):before, .pn-loading:before { +:host(.pn-loading):before, +.pn-loading:before { position: absolute; height: 100%; width: 100%; content: ''; z-index: 1000; - background-color: rgb(255,255,255,0.50); + background-color: rgb(255, 255, 255, 0.5); border-color: lightgray; background-repeat: no-repeat; background-position: center; @@ -17,7 +19,8 @@ cursor: progress; } -:host(.pn-loading) .pn-loading-msg, .pn-loading .pn-loading-msg { +:host(.pn-loading) .pn-loading-msg, +.pn-loading .pn-loading-msg { position: absolute; top: 72%; font-size: 2em; diff --git a/panel/dist/css/loadingspinner.css b/panel/dist/css/loadingspinner.css index 4d02b93193..e4a74c6a69 100644 --- a/panel/dist/css/loadingspinner.css +++ b/panel/dist/css/loadingspinner.css @@ -1,18 +1,18 @@ :host(.loader) { - overflow: hidden; - display: flex; + overflow: hidden; + display: flex; } :host(.loader) div::after { - content: ""; - display: block; - border-radius: 50%; - -webkit-mask-image: radial-gradient(transparent 50%, rgba(0, 0, 0, 1) 54%); - width: 100%; - height: 100%; - left: 0; - top: 0; - animation: spin 2s linear infinite; + content: ''; + display: block; + border-radius: 50%; + -webkit-mask-image: radial-gradient(transparent 50%, rgba(0, 0, 0, 1) 54%); + width: 100%; + height: 100%; + left: 0; + top: 0; + animation: spin 2s linear infinite; } :host(.loader.dark) div::after { @@ -67,7 +67,7 @@ linear-gradient(45deg, #f0f0f0 50%, #343a40 50%); } -:host(.loader.spin.primary-dark) div::after { +:host(.loader.spin.primary-dark) div::after { background: linear-gradient(135deg, #0f0f0f 50%, transparent 50%), linear-gradient(45deg, #0f0f0f 50%, var(--primary-bg-color) 50%); } @@ -109,11 +109,19 @@ /* Safari */ @-webkit-keyframes spin { - 0% { -webkit-transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); } + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } } @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } diff --git a/panel/dist/css/markdown.css b/panel/dist/css/markdown.css index e38c35eefe..3332c1ff1f 100644 --- a/panel/dist/css/markdown.css +++ b/panel/dist/css/markdown.css @@ -1,121 +1,337 @@ -.codehilite .hll { background-color: #2C3B41 } -.codehilite { background: var(--code-bg-color); } -.codehilite .c { color: #546E7A; font-style: italic } /* Comment */ -.codehilite .err { border: 1px solid #FF5370 } /* Error */ -.codehilite .esc { color: #89DDFF; } /* Escape */ -.codehilite .g { color: #EFFFFF; } /* Generic */ -.codehilite .k { color: #BB80B3; font-weight: bold } /* Keyword */ -.codehilite .l { color: #C3E88D; font-weight: bold } /* Literal */ -.codehilite .n { color: #EEFFFF; } /* Name */ -.codehilite .o { color: #89DDFF; } /* Operator */ -.codehilite .p { color: #89DDFF; } /* Punctuation */ -.codehilite .ch { color: #546E7A; font-style: italic } /* Comment.Hashbang */ -.codehilite .cm { color: #546E7A; font-style: italic } /* Comment.Multiline */ -.codehilite .cp { color: #546E7A } /* Comment.Preproc */ -.codehilite .cpf { color: #546E7A; font-style: italic } /* Comment.PreprocFile */ -.codehilite .c1 { color: #546E7A; font-style: italic } /* Comment.Single */ -.codehilite .cs { color: #546E7A; font-style: italic } /* Comment.Special */ -.codehilite .gd { color: #FF5370; } /* Generic.Deleted */ -.codehilite .ge { color: #89DDFF; font-style: italic } /* Generic.Emph */ -.codehilite .gr { color: #FF5370; } /* Generic.Error */ -.codehilite .gh { color: #C3E88D; font-weight: bold } /* Generic.Heading */ -.codehilite .gi { color: #C3E88D; } /* Generic.Inserted */ -.codehilite .go { color: #546E7A; } /* Generic.Output */ -.codehilite .gp { color: #FFCB6B; font-weight: bold } /* Generic.Prompt */ -.codehilite .gs { color: #FF5370; font-weight: bold } /* Generic.Strong */ -.codehilite .gu { color: #89DDFF; font-weight: bold } /* Generic.Subheading */ -.codehilite .gt { color: #FF5370 } /* Generic.Traceback */ -.codehilite .kc { color: #89DDFF; font-weight: bold } /* Keyword.Constant */ -.codehilite .kd { color: #BB80B3; font-weight: bold } /* Keyword.Declaration */ -.codehilite .kn { color: #89DDFF; font-weight: bold } /* Keyword.Namespace */ -.codehilite .kp { color: #89DDFF } /* Keyword.Pseudo */ -.codehilite .kr { color: #BB80B3; font-weight: bold } /* Keyword.Reserved */ -.codehilite .kt { color: #BB80B3 } /* Keyword.Type */ -.codehilite .ld { color: #C3E88D } /* Literal.Date */ -.codehilite .m { color: #F78C6C } /* Literal.Number */ -.codehilite .s { color: #C3E88D } /* Literal.String */ -.codehilite .na { color: #BB80B3 } /* Name.Attribute */ -.codehilite .nb { color: #82AAFF } /* Name.Builtin */ -.codehilite .nc { color: #FFCB6B; font-weight: bold } /* Name.Class */ -.codehilite .no { color: #EEFFFF } /* Name.Constant */ -.codehilite .nd { color: #82AAFF } /* Name.Decorator */ -.codehilite .ni { color: #89DDFF; font-weight: bold } /* Name.Entity */ -.codehilite .ne { color: #FFCB6B; font-weight: bold } /* Name.Exception */ -.codehilite .nf { color: #82AAFF } /* Name.Function */ -.codehilite .nl { color: #82AAFF } /* Name.Label */ -.codehilite .nn { color: #FFCB6B; font-weight: bold } /* Name.Namespace */ -.codehilite .nt { color: #FF5370; font-weight: bold } /* Name.Tag */ -.codehilite .np { color: #FFCB6B; } /* Name.Property */ -.codehilite .nx { color: #EFFFFF; } /* Name.Other */ -.codehilite .nv { color: #89DDFF; } /* Name.Variable */ -.codehilite .ow { color: #89DDFF; font-weight: bold } /* Operator.Word */ -.codehilite .pm { color: #89DDFF; } /* Punctuation.Marker */ -.codehilite .py { color: #FFCB6B; } /* Name.Property */ -.codehilite .w { color: #EEFFFF } /* Text.Whitespace */ -.codehilite .mb { color: #F78C6C } /* Literal.Number.Bin */ -.codehilite .mf { color: #F78C6C } /* Literal.Number.Float */ -.codehilite .mh { color: #F78C6C } /* Literal.Number.Hex */ -.codehilite .mi { color: #F78C6C } /* Literal.Number.Integer */ -.codehilite .mo { color: #F78C6C } /* Literal.Number.Oct */ -.codehilite .sa { color: #BB80B3 } /* Literal.String.Affix */ -.codehilite .sb { color: #C3E88D } /* Literal.String.Backtick */ -.codehilite .sc { color: #C3E88D } /* Literal.String.Char */ -.codehilite .dl { color: #EEFFFF } /* Literal.String.Delimiter */ -.codehilite .sd { color: #546E7A; font-style: italic } /* Literal.String.Doc */ -.codehilite .s2 { color: #C3E88D } /* Literal.String.Double */ -.codehilite .se { color: #EEFFFF; font-weight: bold } /* Literal.String.Escape */ -.codehilite .sh { color: #C3E88D } /* Literal.String.Heredoc */ -.codehilite .si { color: #89DDFF; font-weight: bold } /* Literal.String.Interpol */ -.codehilite .sx { color: #C3E88D } /* Literal.String.Other */ -.codehilite .sr { color: #89DDFF } /* Literal.String.Regex */ -.codehilite .s1 { color: #C3E88D } /* Literal.String.Single */ -.codehilite .ss { color: #89DDFF } /* Literal.String.Symbol */ -.codehilite .bp { color: #89DDFF } /* Name.Builtin.Pseudo */ -.codehilite .fm { color: #82AAFF } /* Name.Function.Magic */ -.codehilite .vc { color: #89DDFF } /* Name.Variable.Class */ -.codehilite .vg { color: #89DDFF } /* Name.Variable.Global */ -.codehilite .vi { color: #89DDFF } /* Name.Variable.Instance */ -.codehilite .vm { color: #82AAFF } /* Name.Variable.Magic */ -.codehilite .il { color: #F78C6C } /* Literal.Number.Integer.Long */ +.codehilite .hll { + background-color: #2c3b41; +} +.codehilite { + background: var(--code-bg-color); +} +.codehilite .c { + color: #546e7a; + font-style: italic; +} /* Comment */ +.codehilite .err { + border: 1px solid #ff5370; +} /* Error */ +.codehilite .esc { + color: #89ddff; +} /* Escape */ +.codehilite .g { + color: #efffff; +} /* Generic */ +.codehilite .k { + color: #bb80b3; + font-weight: bold; +} /* Keyword */ +.codehilite .l { + color: #c3e88d; + font-weight: bold; +} /* Literal */ +.codehilite .n { + color: #eeffff; +} /* Name */ +.codehilite .o { + color: #89ddff; +} /* Operator */ +.codehilite .p { + color: #89ddff; +} /* Punctuation */ +.codehilite .ch { + color: #546e7a; + font-style: italic; +} /* Comment.Hashbang */ +.codehilite .cm { + color: #546e7a; + font-style: italic; +} /* Comment.Multiline */ +.codehilite .cp { + color: #546e7a; +} /* Comment.Preproc */ +.codehilite .cpf { + color: #546e7a; + font-style: italic; +} /* Comment.PreprocFile */ +.codehilite .c1 { + color: #546e7a; + font-style: italic; +} /* Comment.Single */ +.codehilite .cs { + color: #546e7a; + font-style: italic; +} /* Comment.Special */ +.codehilite .gd { + color: #ff5370; +} /* Generic.Deleted */ +.codehilite .ge { + color: #89ddff; + font-style: italic; +} /* Generic.Emph */ +.codehilite .gr { + color: #ff5370; +} /* Generic.Error */ +.codehilite .gh { + color: #c3e88d; + font-weight: bold; +} /* Generic.Heading */ +.codehilite .gi { + color: #c3e88d; +} /* Generic.Inserted */ +.codehilite .go { + color: #546e7a; +} /* Generic.Output */ +.codehilite .gp { + color: #ffcb6b; + font-weight: bold; +} /* Generic.Prompt */ +.codehilite .gs { + color: #ff5370; + font-weight: bold; +} /* Generic.Strong */ +.codehilite .gu { + color: #89ddff; + font-weight: bold; +} /* Generic.Subheading */ +.codehilite .gt { + color: #ff5370; +} /* Generic.Traceback */ +.codehilite .kc { + color: #89ddff; + font-weight: bold; +} /* Keyword.Constant */ +.codehilite .kd { + color: #bb80b3; + font-weight: bold; +} /* Keyword.Declaration */ +.codehilite .kn { + color: #89ddff; + font-weight: bold; +} /* Keyword.Namespace */ +.codehilite .kp { + color: #89ddff; +} /* Keyword.Pseudo */ +.codehilite .kr { + color: #bb80b3; + font-weight: bold; +} /* Keyword.Reserved */ +.codehilite .kt { + color: #bb80b3; +} /* Keyword.Type */ +.codehilite .ld { + color: #c3e88d; +} /* Literal.Date */ +.codehilite .m { + color: #f78c6c; +} /* Literal.Number */ +.codehilite .s { + color: #c3e88d; +} /* Literal.String */ +.codehilite .na { + color: #bb80b3; +} /* Name.Attribute */ +.codehilite .nb { + color: #82aaff; +} /* Name.Builtin */ +.codehilite .nc { + color: #ffcb6b; + font-weight: bold; +} /* Name.Class */ +.codehilite .no { + color: #eeffff; +} /* Name.Constant */ +.codehilite .nd { + color: #82aaff; +} /* Name.Decorator */ +.codehilite .ni { + color: #89ddff; + font-weight: bold; +} /* Name.Entity */ +.codehilite .ne { + color: #ffcb6b; + font-weight: bold; +} /* Name.Exception */ +.codehilite .nf { + color: #82aaff; +} /* Name.Function */ +.codehilite .nl { + color: #82aaff; +} /* Name.Label */ +.codehilite .nn { + color: #ffcb6b; + font-weight: bold; +} /* Name.Namespace */ +.codehilite .nt { + color: #ff5370; + font-weight: bold; +} /* Name.Tag */ +.codehilite .np { + color: #ffcb6b; +} /* Name.Property */ +.codehilite .nx { + color: #efffff; +} /* Name.Other */ +.codehilite .nv { + color: #89ddff; +} /* Name.Variable */ +.codehilite .ow { + color: #89ddff; + font-weight: bold; +} /* Operator.Word */ +.codehilite .pm { + color: #89ddff; +} /* Punctuation.Marker */ +.codehilite .py { + color: #ffcb6b; +} /* Name.Property */ +.codehilite .w { + color: #eeffff; +} /* Text.Whitespace */ +.codehilite .mb { + color: #f78c6c; +} /* Literal.Number.Bin */ +.codehilite .mf { + color: #f78c6c; +} /* Literal.Number.Float */ +.codehilite .mh { + color: #f78c6c; +} /* Literal.Number.Hex */ +.codehilite .mi { + color: #f78c6c; +} /* Literal.Number.Integer */ +.codehilite .mo { + color: #f78c6c; +} /* Literal.Number.Oct */ +.codehilite .sa { + color: #bb80b3; +} /* Literal.String.Affix */ +.codehilite .sb { + color: #c3e88d; +} /* Literal.String.Backtick */ +.codehilite .sc { + color: #c3e88d; +} /* Literal.String.Char */ +.codehilite .dl { + color: #eeffff; +} /* Literal.String.Delimiter */ +.codehilite .sd { + color: #546e7a; + font-style: italic; +} /* Literal.String.Doc */ +.codehilite .s2 { + color: #c3e88d; +} /* Literal.String.Double */ +.codehilite .se { + color: #eeffff; + font-weight: bold; +} /* Literal.String.Escape */ +.codehilite .sh { + color: #c3e88d; +} /* Literal.String.Heredoc */ +.codehilite .si { + color: #89ddff; + font-weight: bold; +} /* Literal.String.Interpol */ +.codehilite .sx { + color: #c3e88d; +} /* Literal.String.Other */ +.codehilite .sr { + color: #89ddff; +} /* Literal.String.Regex */ +.codehilite .s1 { + color: #c3e88d; +} /* Literal.String.Single */ +.codehilite .ss { + color: #89ddff; +} /* Literal.String.Symbol */ +.codehilite .bp { + color: #89ddff; +} /* Name.Builtin.Pseudo */ +.codehilite .fm { + color: #82aaff; +} /* Name.Function.Magic */ +.codehilite .vc { + color: #89ddff; +} /* Name.Variable.Class */ +.codehilite .vg { + color: #89ddff; +} /* Name.Variable.Global */ +.codehilite .vi { + color: #89ddff; +} /* Name.Variable.Instance */ +.codehilite .vm { + color: #82aaff; +} /* Name.Variable.Magic */ +.codehilite .il { + color: #f78c6c; +} /* Literal.Number.Integer.Long */ -h1 { margin-block-start: 0.34em; margin-block-end: 0.34em; } -h2 { margin-block-start: 0.42em; margin-block-end: 0.42em; } -h3 { margin-block-start: 0.5em; margin-block-end: 0.5em; } -h4 { margin-block-start: 0.67em; margin-block-end: 0.67em; } -h5 { margin-block-start: 0.84em; margin-block-end: 0.84em; } -h6 { margin-block-start: 1.17em; margin-block-end: 1.17em; } -ul { padding-inline-start: 2em } -ol { padding-inline-start: 2em } -strong { font-weight: 600 } -a { color: var(--panel-primary-color); } -code { color: var(--code-text-color); } -a.header-anchor { visibility: hidden; } +h1 { + margin-block-start: 0.34em; + margin-block-end: 0.34em; +} +h2 { + margin-block-start: 0.42em; + margin-block-end: 0.42em; +} +h3 { + margin-block-start: 0.5em; + margin-block-end: 0.5em; +} +h4 { + margin-block-start: 0.67em; + margin-block-end: 0.67em; +} +h5 { + margin-block-start: 0.84em; + margin-block-end: 0.84em; +} +h6 { + margin-block-start: 1.17em; + margin-block-end: 1.17em; +} +ul { + padding-inline-start: 2em; +} +ol { + padding-inline-start: 2em; +} +strong { + font-weight: 600; +} +a { + color: var(--design-primary-color, var(--panel-primary-color)); +} +code { + color: var(--code-text-color); +} +a.header-anchor { + visibility: hidden; +} h1:hover a.header-anchor::before, h2:hover a.header-anchor::before { - content: ""; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM4MDgwODAiIGQ9Ik00NTkuNjU0LDIzMy4zNzNsLTkwLjUzMSw5MC41Yy00OS45NjksNTAtMTMxLjAzMSw1MC0xODEsMGMtNy44NzUtNy44NDQtMTQuMDMxLTE2LjY4OC0xOS40MzgtMjUuODEzDQoJbDQyLjA2My00Mi4wNjNjMi0yLjAxNiw0LjQ2OS0zLjE3Miw2LjgyOC00LjUzMWMyLjkwNiw5LjkzOCw3Ljk4NCwxOS4zNDQsMTUuNzk3LDI3LjE1NmMyNC45NTMsMjQuOTY5LDY1LjU2MywyNC45MzgsOTAuNSwwDQoJbDkwLjUtOTAuNWMyNC45NjktMjQuOTY5LDI0Ljk2OS02NS41NjMsMC05MC41MTZjLTI0LjkzOC0yNC45NTMtNjUuNTMxLTI0Ljk1My05MC41LDBsLTMyLjE4OCwzMi4yMTkNCgljLTI2LjEwOS0xMC4xNzItNTQuMjUtMTIuOTA2LTgxLjY0MS04Ljg5MWw2OC41NzgtNjguNTc4YzUwLTQ5Ljk4NCwxMzEuMDMxLTQ5Ljk4NCwxODEuMDMxLDANCglDNTA5LjYyMywxMDIuMzQyLDUwOS42MjMsMTgzLjM4OSw0NTkuNjU0LDIzMy4zNzN6IE0yMjAuMzI2LDM4Mi4xODZsLTMyLjIwMywzMi4yMTljLTI0Ljk1MywyNC45MzgtNjUuNTYzLDI0LjkzOC05MC41MTYsMA0KCWMtMjQuOTUzLTI0Ljk2OS0yNC45NTMtNjUuNTYzLDAtOTAuNTMxbDkwLjUxNi05MC41YzI0Ljk2OS0yNC45NjksNjUuNTQ3LTI0Ljk2OSw5MC41LDBjNy43OTcsNy43OTcsMTIuODc1LDE3LjIwMywxNS44MTMsMjcuMTI1DQoJYzIuMzc1LTEuMzc1LDQuODEzLTIuNSw2LjgxMy00LjVsNDIuMDYzLTQyLjA0N2MtNS4zNzUtOS4xNTYtMTEuNTYzLTE3Ljk2OS0xOS40MzgtMjUuODI4Yy00OS45NjktNDkuOTg0LTEzMS4wMzEtNDkuOTg0LTE4MS4wMTYsMA0KCWwtOTAuNSw5MC41Yy00OS45ODQsNTAtNDkuOTg0LDEzMS4wMzEsMCwxODEuMDMxYzQ5Ljk4NCw0OS45NjksMTMxLjAzMSw0OS45NjksMTgxLjAxNiwwbDY4LjU5NC02OC41OTQNCglDMjc0LjU2MSwzOTUuMDkyLDI0Ni40MiwzOTIuMzQyLDIyMC4zMjYsMzgyLjE4NnoiLz4NCjwvc3ZnPg0K'); - background-size: 0.7em 0.7em; - background-repeat: no-repeat; - display: inline-block; - width: 0.7em; - height: 0.7em; - visibility: visible; + content: ''; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM4MDgwODAiIGQ9Ik00NTkuNjU0LDIzMy4zNzNsLTkwLjUzMSw5MC41Yy00OS45NjksNTAtMTMxLjAzMSw1MC0xODEsMGMtNy44NzUtNy44NDQtMTQuMDMxLTE2LjY4OC0xOS40MzgtMjUuODEzDQoJbDQyLjA2My00Mi4wNjNjMi0yLjAxNiw0LjQ2OS0zLjE3Miw2LjgyOC00LjUzMWMyLjkwNiw5LjkzOCw3Ljk4NCwxOS4zNDQsMTUuNzk3LDI3LjE1NmMyNC45NTMsMjQuOTY5LDY1LjU2MywyNC45MzgsOTAuNSwwDQoJbDkwLjUtOTAuNWMyNC45NjktMjQuOTY5LDI0Ljk2OS02NS41NjMsMC05MC41MTZjLTI0LjkzOC0yNC45NTMtNjUuNTMxLTI0Ljk1My05MC41LDBsLTMyLjE4OCwzMi4yMTkNCgljLTI2LjEwOS0xMC4xNzItNTQuMjUtMTIuOTA2LTgxLjY0MS04Ljg5MWw2OC41NzgtNjguNTc4YzUwLTQ5Ljk4NCwxMzEuMDMxLTQ5Ljk4NCwxODEuMDMxLDANCglDNTA5LjYyMywxMDIuMzQyLDUwOS42MjMsMTgzLjM4OSw0NTkuNjU0LDIzMy4zNzN6IE0yMjAuMzI2LDM4Mi4xODZsLTMyLjIwMywzMi4yMTljLTI0Ljk1MywyNC45MzgtNjUuNTYzLDI0LjkzOC05MC41MTYsMA0KCWMtMjQuOTUzLTI0Ljk2OS0yNC45NTMtNjUuNTYzLDAtOTAuNTMxbDkwLjUxNi05MC41YzI0Ljk2OS0yNC45NjksNjUuNTQ3LTI0Ljk2OSw5MC41LDBjNy43OTcsNy43OTcsMTIuODc1LDE3LjIwMywxNS44MTMsMjcuMTI1DQoJYzIuMzc1LTEuMzc1LDQuODEzLTIuNSw2LjgxMy00LjVsNDIuMDYzLTQyLjA0N2MtNS4zNzUtOS4xNTYtMTEuNTYzLTE3Ljk2OS0xOS40MzgtMjUuODI4Yy00OS45NjktNDkuOTg0LTEzMS4wMzEtNDkuOTg0LTE4MS4wMTYsMA0KCWwtOTAuNSw5MC41Yy00OS45ODQsNTAtNDkuOTg0LDEzMS4wMzEsMCwxODEuMDMxYzQ5Ljk4NCw0OS45NjksMTMxLjAzMSw0OS45NjksMTgxLjAxNiwwbDY4LjU5NC02OC41OTQNCglDMjc0LjU2MSwzOTUuMDkyLDI0Ni40MiwzOTIuMzQyLDIyMC4zMjYsMzgyLjE4NnoiLz4NCjwvc3ZnPg0K'); + background-size: 0.7em 0.7em; + background-repeat: no-repeat; + display: inline-block; + width: 0.7em; + height: 0.7em; + visibility: visible; } .codehilite { - padding: 1rem 1.25rem; - margin-top: 1rem; - margin-bottom: 1rem; - border-radius: 0.25rem; + padding: 1rem 1.25rem; + margin-top: 1rem; + margin-bottom: 1rem; + border-radius: 0.25rem; } -table, th, td { - border: 1px solid; - border-collapse: collapse; - padding: 5px; +table, +th, +td { + border: 1px solid; + border-collapse: collapse; + padding: 5px; } p { - overflow-wrap: break-word; + overflow-wrap: break-word; } diff --git a/panel/dist/css/perspective-datatable.css b/panel/dist/css/perspective-datatable.css index 54ebf52104..ac72d59681 100644 --- a/panel/dist/css/perspective-datatable.css +++ b/panel/dist/css/perspective-datatable.css @@ -33,17 +33,37 @@ regular-table:hover { } .sub-cell-scroll-enabled regular-table table tbody tr:first-child td, .sub-cell-scroll-enabled regular-table table tbody tr:first-child th { - clip-path: polygon(0 var(--regular-table--clip-y, 0), 0 200%, 200% 200%, 200% var(--regular-table--clip-y, 0)); + clip-path: polygon( + 0 var(--regular-table--clip-y, 0), + 0 200%, + 200% 200%, + 200% var(--regular-table--clip-y, 0) + ); } .sub-cell-scroll-enabled regular-table table thead th.rt-group-corner { background: var(--plugin--background, white); z-index: 1; } .sub-cell-scroll-enabled regular-table table tbody tr td:first-of-type { - clip-path: polygon(var(--regular-table--clip-x, 0) 0, var(--regular-table--clip-x, 0) 200%, 200% 200%, 200% 0); -} -.sub-cell-scroll-enabled regular-table table tbody tr:first-child td:first-of-type { - clip-path: polygon(var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0), var(--regular-table--clip-x, 0) 200%, 200% 200%, 200% var(--regular-table--clip-y, 0)); + clip-path: polygon( + var(--regular-table--clip-x, 0) 0, + var(--regular-table--clip-x, 0) 200%, + 200% 200%, + 200% 0 + ); +} +.sub-cell-scroll-enabled + regular-table + table + tbody + tr:first-child + td:first-of-type { + clip-path: polygon( + var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0), + var(--regular-table--clip-x, 0) 200%, + 200% 200%, + 200% var(--regular-table--clip-y, 0) + ); } regular-table { font-family: inherit; @@ -135,14 +155,14 @@ regular-table table { regular-table span.rt-row-header-icon { color: #aaa; padding-right: 4px; - font-family: var(--button--font-family, "Material Icons"); + font-family: var(--button--font-family, 'Material Icons'); } regular-table span.rt-column-header-icon { font-size: 10px; padding-left: 3px; display: inline-block; width: 10px; - font-family: var(--button--font-family, "Material Icons"); + font-family: var(--button--font-family, 'Material Icons'); } regular-table span.rt-row-header-icon:hover { color: #1a7da1; @@ -228,10 +248,12 @@ regular-table::-webkit-scrollbar-thumb:hover { box-shadow: 5px 4px 0px -4px var(--inactive--color, #eaedef); } .psp-is-top.psp-header-group:not(.psp-header-group-corner) { - box-shadow: 5px 4px 0px -4px var(--inactive--color, #eaedef), 0px 10px 0 -9px var(--inactive--color, #eaedef); + box-shadow: 5px 4px 0px -4px var(--inactive--color, #eaedef), + 0px 10px 0 -9px var(--inactive--color, #eaedef); } .psp-header-border.psp-header-group:not(.psp-is-top):not(.psp-header-group-corner) { - box-shadow: 1px 0px var(--inactive--color, #eaedef), 0px 10px 0 -9px var(--inactive--color, #eaedef); + box-shadow: 1px 0px var(--inactive--color, #eaedef), + 0px 10px 0 -9px var(--inactive--color, #eaedef); } .psp-header-leaf.psp-header-border { box-shadow: 5px -4px 0px -4px var(--inactive--color, #eaedef); @@ -247,16 +269,38 @@ tr:only-child th { * the Apache License 2.0. The full license can be found in the LICENSE file. * */ -regular-table tbody tr:hover th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected), -regular-table tbody tr:hover th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), -regular-table tbody tr:hover td:not(.psp-row-selected):not(.psp-row-subselected) { +regular-table + tbody + tr:hover + th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected), +regular-table + tbody + tr:hover + th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), +regular-table + tbody + tr:hover + td:not(.psp-row-selected):not(.psp-row-subselected) { border-color: var(--rt-hover--border-color, #c5c9d080) !important; background-color: transparent; - box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080), 0px 3px 0px rgba(0, 0, 0, 0.05), 0px 5px 0px rgba(0, 0, 0, 0.01); -} -regular-table tbody tr:hover + tr th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected), -regular-table tbody tr:hover + tr th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), -regular-table tbody tr:hover + tr td:not(.psp-row-selected):not(.psp-row-subselected) { + box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080), + 0px 3px 0px rgba(0, 0, 0, 0.05), 0px 5px 0px rgba(0, 0, 0, 0.01); +} +regular-table + tbody + tr:hover + + tr + th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected), +regular-table + tbody + tr:hover + + tr + th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), +regular-table + tbody + tr:hover + + tr + td:not(.psp-row-selected):not(.psp-row-subselected) { border-top-color: transparent; } regular-table tbody tr th:first-child:not(:empty), @@ -297,26 +341,39 @@ perspective-viewer[settings] regular-table .psp-header-leaf { vertical-align: top; padding-top: 2px; } -perspective-viewer[settings] regular-table .psp-header-leaf:not(.psp-header-corner):before { +perspective-viewer[settings] + regular-table + .psp-header-leaf:not(.psp-header-corner):before { font-family: var(--button--font-family, inherit); - content: var(--column-style-open-button--content, var(--config-button-icon--content, "\1f527")); + content: var( + --column-style-open-button--content, + var(--config-button-icon--content, '\1f527') + ); position: absolute; width: calc(100% - 8px); left: 5px; bottom: 0px; color: var(--inactive--color, #b4b7be); } -perspective-viewer[settings] regular-table .psp-header-leaf.psp-menu-enabled:not(.psp-header-corner):before { +perspective-viewer[settings] + regular-table + .psp-header-leaf.psp-menu-enabled:not(.psp-header-corner):before { color: inherit; cursor: pointer; } -perspective-viewer[settings] regular-table .psp-header-leaf.psp-menu-open:not(.psp-header-corner) { +perspective-viewer[settings] + regular-table + .psp-header-leaf.psp-menu-open:not(.psp-header-corner) { pointer-events: none; } -perspective-viewer[settings] regular-table .psp-header-leaf.psp-menu-open:not(.psp-header-corner):before { - content: var(--column-style-close-button--content, "X"); +perspective-viewer[settings] + regular-table + .psp-header-leaf.psp-menu-open:not(.psp-header-corner):before { + content: var(--column-style-close-button--content, 'X'); } -perspective-viewer[settings] regular-table .psp-header-leaf.psp-menu-enabled:hover:before { +perspective-viewer[settings] + regular-table + .psp-header-leaf.psp-menu-enabled:hover:before { color: #338dcd; } perspective-viewer[settings] regular-table .psp-header-leaf .rt-column-resize { @@ -356,22 +413,22 @@ perspective-viewer.dragging regular-table { .psp-header-sort-desc:after { font-family: var(--button--font-family, inherit); font-size: 10px; - content: var(--sort-order-desc--content, "\2193"); + content: var(--sort-order-desc--content, '\2193'); } .psp-header-sort-asc:after { font-family: var(--button--font-family, inherit); font-size: 10px; - content: var(--sort-order-asc--content, "\2191"); + content: var(--sort-order-asc--content, '\2191'); } .psp-header-sort-col-desc:after { font-family: var(--button--font-family, inherit); font-size: 10px; - content: var(--sort-order-col-desc--content, "\2190"); + content: var(--sort-order-col-desc--content, '\2190'); } .psp-header-sort-col-asc:after { font-family: var(--button--font-family, inherit); font-size: 10px; - content: var(--sort-order-col-asc--content, "\2192"); + content: var(--sort-order-col-asc--content, '\2192'); } tbody th:last-of-type { border-right: 1px solid #eaedef; @@ -379,7 +436,12 @@ tbody th:last-of-type { text-overflow: ellipsis; } tbody th:empty { - background-image: linear-gradient(to right, transparent 9px, #eee 10px, transparent 11px); + background-image: linear-gradient( + to right, + transparent 9px, + #eee 10px, + transparent 11px + ); background-repeat: no-repeat; min-width: 20px; max-width: 20px; @@ -396,10 +458,10 @@ tbody th:empty { vertical-align: -1px; } .psp-tree-label-expand:before { - content: var(--tree-label-expand--content, "+"); + content: var(--tree-label-expand--content, '+'); } .psp-tree-label-collapse:before { - content: var(--tree-label-collapse--content, "-"); + content: var(--tree-label-collapse--content, '-'); } .psp-tree-label:hover:before { color: #338dcd; @@ -434,7 +496,7 @@ regular-table table tbody td { border-left-width: 0px; } .psp-bool-type { - font-family: var(--button--font-family, "Material Icons"); + font-family: var(--button--font-family, 'Material Icons'); } .boolean-editable { cursor: pointer; @@ -472,7 +534,10 @@ regular-table table tbody th:empty { } @keyframes pulse_pos { 0% { - background-color: var(--pulse--background-color-start, rgba(0, 128, 255, 0.5)); + background-color: var( + --pulse--background-color-start, + rgba(0, 128, 255, 0.5) + ); } 100% { background-color: var(--pulse--background-color-end, rgba(0, 128, 255, 0)); @@ -480,7 +545,10 @@ regular-table table tbody th:empty { } @keyframes pulse_pos2 { 0% { - background-color: var(--pulse--background-color-start, rgba(0, 128, 255, 0.5)); + background-color: var( + --pulse--background-color-start, + rgba(0, 128, 255, 0.5) + ); } 100% { background-color: var(--pulse--background-color-end, rgba(0, 128, 255, 0)); @@ -488,7 +556,10 @@ regular-table table tbody th:empty { } @keyframes pulse_neg { 0% { - background-color: var(--pulse--background-color-start, rgba(255, 25, 0, 0.5)); + background-color: var( + --pulse--background-color-start, + rgba(255, 25, 0, 0.5) + ); } 100% { background-color: var(--pulse--background-color-end, rgba(255, 25, 0, 0)); @@ -496,7 +567,10 @@ regular-table table tbody th:empty { } @keyframes pulse_neg2 { 0% { - background-color: var(--pulse--background-color-start, rgba(255, 25, 0, 0.5)); + background-color: var( + --pulse--background-color-start, + rgba(255, 25, 0, 0.5) + ); } 100% { background-color: var(--pulse--background-color-end, rgba(255, 25, 0, 0)); diff --git a/panel/dist/css/plotly.css b/panel/dist/css/plotly.css index 7392ec5931..867f47787a 100644 --- a/panel/dist/css/plotly.css +++ b/panel/dist/css/plotly.css @@ -1,109 +1,143 @@ -.js-plotly-plot .plotly, .js-plotly-plot .plotly div { +.js-plotly-plot .plotly, +.js-plotly-plot .plotly div { direction: ltr; font-family: 'Open Sans', verdana, arial, sans-serif; margin: 0; - padding: 0; } + padding: 0; +} -.js-plotly-plot .plotly input, .js-plotly-plot .plotly button { - font-family: 'Open Sans', verdana, arial, sans-serif; } - .js-plotly-plot .plotly input:focus, .js-plotly-plot .plotly button:focus { - outline: none; } +.js-plotly-plot .plotly input, +.js-plotly-plot .plotly button { + font-family: 'Open Sans', verdana, arial, sans-serif; +} +.js-plotly-plot .plotly input:focus, +.js-plotly-plot .plotly button:focus { + outline: none; +} .js-plotly-plot .plotly a { - text-decoration: none; } - .js-plotly-plot .plotly a:hover { - text-decoration: none; } + text-decoration: none; +} +.js-plotly-plot .plotly a:hover { + text-decoration: none; +} .js-plotly-plot .plotly .crisp { - shape-rendering: crispEdges; } + shape-rendering: crispEdges; +} .js-plotly-plot .plotly .user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; - user-select: none; } + user-select: none; +} .js-plotly-plot .plotly svg { - overflow: hidden; } + overflow: hidden; +} .js-plotly-plot .plotly svg a { - fill: #447adb; } + fill: #447adb; +} .js-plotly-plot .plotly svg a:hover { - fill: #3c6dc5; } + fill: #3c6dc5; +} .js-plotly-plot .plotly .main-svg { position: absolute; top: 0; left: 0; - pointer-events: none; } - .js-plotly-plot .plotly .main-svg .draglayer { - pointer-events: all; } + pointer-events: none; +} +.js-plotly-plot .plotly .main-svg .draglayer { + pointer-events: all; +} .js-plotly-plot .plotly .cursor-default { - cursor: default; } + cursor: default; +} .js-plotly-plot .plotly .cursor-pointer { - cursor: pointer; } + cursor: pointer; +} .js-plotly-plot .plotly .cursor-crosshair { - cursor: crosshair; } + cursor: crosshair; +} .js-plotly-plot .plotly .cursor-move { - cursor: move; } + cursor: move; +} .js-plotly-plot .plotly .cursor-col-resize { - cursor: col-resize; } + cursor: col-resize; +} .js-plotly-plot .plotly .cursor-row-resize { - cursor: row-resize; } + cursor: row-resize; +} .js-plotly-plot .plotly .cursor-ns-resize { - cursor: ns-resize; } + cursor: ns-resize; +} .js-plotly-plot .plotly .cursor-ew-resize { - cursor: ew-resize; } + cursor: ew-resize; +} .js-plotly-plot .plotly .cursor-sw-resize { - cursor: sw-resize; } + cursor: sw-resize; +} .js-plotly-plot .plotly .cursor-s-resize { - cursor: s-resize; } + cursor: s-resize; +} .js-plotly-plot .plotly .cursor-se-resize { - cursor: se-resize; } + cursor: se-resize; +} .js-plotly-plot .plotly .cursor-w-resize { - cursor: w-resize; } + cursor: w-resize; +} .js-plotly-plot .plotly .cursor-e-resize { - cursor: e-resize; } + cursor: e-resize; +} .js-plotly-plot .plotly .cursor-nw-resize { - cursor: nw-resize; } + cursor: nw-resize; +} .js-plotly-plot .plotly .cursor-n-resize { - cursor: n-resize; } + cursor: n-resize; +} .js-plotly-plot .plotly .cursor-ne-resize { - cursor: ne-resize; } + cursor: ne-resize; +} .js-plotly-plot .plotly .cursor-grab { cursor: -webkit-grab; - cursor: grab; } + cursor: grab; +} .js-plotly-plot .plotly .modebar { position: absolute; top: 2px; - right: 2px; } + right: 2px; +} .js-plotly-plot .plotly .ease-bg { -webkit-transition: background-color 0.3s ease 0s; -moz-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; - transition: background-color 0.3s ease 0s; } + transition: background-color 0.3s ease 0s; +} .js-plotly-plot .plotly .modebar--hover > :not(.watermark) { opacity: 0; @@ -111,10 +145,12 @@ -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; - transition: opacity 0.3s ease 0s; } + transition: opacity 0.3s ease 0s; +} .js-plotly-plot .plotly:hover .modebar--hover .modebar-group { - opacity: 1; } + opacity: 1; +} .js-plotly-plot .plotly .modebar-group { float: left; @@ -123,7 +159,8 @@ padding-left: 8px; position: relative; vertical-align: middle; - white-space: nowrap; } + white-space: nowrap; +} .js-plotly-plot .plotly .modebar-btn { position: relative; @@ -133,77 +170,93 @@ /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */ cursor: pointer; line-height: normal; - box-sizing: border-box; } - .js-plotly-plot .plotly .modebar-btn svg { - position: relative; - top: 2px; } + box-sizing: border-box; +} +.js-plotly-plot .plotly .modebar-btn svg { + position: relative; + top: 2px; +} .js-plotly-plot .plotly .modebar.vertical { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; - max-height: 100%; } - .js-plotly-plot .plotly .modebar.vertical svg { - top: -1px; } - .js-plotly-plot .plotly .modebar.vertical .modebar-group { - display: block; - float: none; - padding-left: 0px; - padding-bottom: 8px; } - .js-plotly-plot .plotly .modebar.vertical .modebar-group .modebar-btn { - display: block; - text-align: center; } + max-height: 100%; +} +.js-plotly-plot .plotly .modebar.vertical svg { + top: -1px; +} +.js-plotly-plot .plotly .modebar.vertical .modebar-group { + display: block; + float: none; + padding-left: 0px; + padding-bottom: 8px; +} +.js-plotly-plot .plotly .modebar.vertical .modebar-group .modebar-btn { + display: block; + text-align: center; +} .js-plotly-plot .plotly [data-title] { /** * tooltip body - */ } - .js-plotly-plot .plotly [data-title]:before, .js-plotly-plot .plotly [data-title]:after { - position: absolute; - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - display: none; - opacity: 0; - z-index: 1001; - pointer-events: none; - top: 110%; - right: 50%; } - .js-plotly-plot .plotly [data-title]:hover:before, .js-plotly-plot .plotly [data-title]:hover:after { - display: block; - opacity: 1; } - .js-plotly-plot .plotly [data-title]:before { - content: ''; - position: absolute; - background: transparent; - border: 6px solid transparent; - z-index: 1002; - margin-top: -12px; - border-bottom-color: #69738a; - margin-right: -6px; } - .js-plotly-plot .plotly [data-title]:after { - content: attr(data-title); - background: #69738a; - color: white; - padding: 8px 10px; - font-size: 12px; - line-height: 12px; - white-space: nowrap; - margin-right: -18px; - border-radius: 2px; } - -.js-plotly-plot .plotly .vertical [data-title]:before, .js-plotly-plot .plotly .vertical [data-title]:after { + */ +} +.js-plotly-plot .plotly [data-title]:before, +.js-plotly-plot .plotly [data-title]:after { + position: absolute; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + display: none; + opacity: 0; + z-index: 1001; + pointer-events: none; + top: 110%; + right: 50%; +} +.js-plotly-plot .plotly [data-title]:hover:before, +.js-plotly-plot .plotly [data-title]:hover:after { + display: block; + opacity: 1; +} +.js-plotly-plot .plotly [data-title]:before { + content: ''; + position: absolute; + background: transparent; + border: 6px solid transparent; + z-index: 1002; + margin-top: -12px; + border-bottom-color: #69738a; + margin-right: -6px; +} +.js-plotly-plot .plotly [data-title]:after { + content: attr(data-title); + background: #69738a; + color: white; + padding: 8px 10px; + font-size: 12px; + line-height: 12px; + white-space: nowrap; + margin-right: -18px; + border-radius: 2px; +} + +.js-plotly-plot .plotly .vertical [data-title]:before, +.js-plotly-plot .plotly .vertical [data-title]:after { top: 0%; - right: 200%; } + right: 200%; +} .js-plotly-plot .plotly .vertical [data-title]:before { border: 6px solid transparent; border-left-color: #69738a; margin-top: 8px; - margin-right: -30px; } + margin-right: -30px; +} .plotly-notifier { font-family: 'Open Sans', verdana, arial, sans-serif; @@ -212,35 +265,40 @@ right: 20px; z-index: 10000; font-size: 10pt; - max-width: 180px; } - .plotly-notifier p { - margin: 0; } - .plotly-notifier .notifier-note { - min-width: 180px; - max-width: 250px; - border: 1px solid #fff; - z-index: 3000; - margin: 0; - background-color: #8c97af; - background-color: rgba(140, 151, 175, 0.9); - color: #fff; - padding: 10px; - overflow-wrap: break-word; - word-wrap: break-word; - -ms-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; } - .plotly-notifier .notifier-close { - color: #fff; - opacity: 0.8; - float: right; - padding: 0 5px; - background: none; - border: none; - font-size: 20px; - font-weight: bold; - line-height: 20px; } - .plotly-notifier .notifier-close:hover { - color: #444; - text-decoration: none; - cursor: pointer; } + max-width: 180px; +} +.plotly-notifier p { + margin: 0; +} +.plotly-notifier .notifier-note { + min-width: 180px; + max-width: 250px; + border: 1px solid #fff; + z-index: 3000; + margin: 0; + background-color: #8c97af; + background-color: rgba(140, 151, 175, 0.9); + color: #fff; + padding: 10px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; +} +.plotly-notifier .notifier-close { + color: #fff; + opacity: 0.8; + float: right; + padding: 0 5px; + background: none; + border: none; + font-size: 20px; + font-weight: bold; + line-height: 20px; +} +.plotly-notifier .notifier-close:hover { + color: #444; + text-decoration: none; + cursor: pointer; +} diff --git a/panel/dist/css/progress.css b/panel/dist/css/progress.css index 629a14410a..966c9f63ca 100644 --- a/panel/dist/css/progress.css +++ b/panel/dist/css/progress.css @@ -1,15 +1,15 @@ progress { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - border: none; - height: 20px; - border-radius: 3px; - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset; - color: royalblue; - position: relative; - margin: 0 0 1.5em; - width: 100%; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + border: none; + height: 20px; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset; + color: royalblue; + position: relative; + margin: 0 0 1.5em; + width: 100%; } progress[value]::-webkit-progress-bar { @@ -181,7 +181,7 @@ progress:not([value])::-webkit-progress-bar { left/2.5em 1.5em; } progress:not([value])::before { - content: " "; + content: ' '; position: absolute; height: 20px; top: 0; diff --git a/panel/dist/css/regular_table.css b/panel/dist/css/regular_table.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/panel/dist/css/select.css b/panel/dist/css/select.css index f9decac26d..da29b60694 100644 --- a/panel/dist/css/select.css +++ b/panel/dist/css/select.css @@ -1,4 +1,4 @@ .bk-input { - box-sizing: border-box; - margin: 10px 0; + box-sizing: border-box; + margin: 10px 0; } diff --git a/panel/dist/css/swipe.css b/panel/dist/css/swipe.css index 31f07187d5..9d242baa50 100644 --- a/panel/dist/css/swipe.css +++ b/panel/dist/css/swipe.css @@ -1,12 +1,12 @@ .swipe-container { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; } .swipe-container .outer { - grid-column: 1; - grid-row: 1; + grid-column: 1; + grid-row: 1; } .swipe-container .slider { diff --git a/panel/dist/css/widgetbox.css b/panel/dist/css/widgetbox.css index e644e827e0..56ec2f00fe 100644 --- a/panel/dist/css/widgetbox.css +++ b/panel/dist/css/widgetbox.css @@ -1,9 +1,9 @@ :host(.panel-widget-box) { - min-height: 20px; - border: 1px solid #e3e3e3; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); - box-shadow: inset 0 1px 1px rgba(0,0,0,.05); - overflow-x: hidden; - overflow-y: hidden; + min-height: 20px; + border: 1px solid #e3e3e3; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + overflow-x: hidden; + overflow-y: hidden; } diff --git a/panel/dist/css/widgets.css b/panel/dist/css/widgets.css index d2b0c13570..d8145a0bed 100644 --- a/panel/dist/css/widgets.css +++ b/panel/dist/css/widgets.css @@ -1,5 +1,6 @@ /* JSON Pane */ -.bk-root .json-formatter-row .json-formatter-string, .bk-root .json-formatter-row .json-formatter-stringifiable { +.bk-root .json-formatter-row .json-formatter-string, +.bk-root .json-formatter-row .json-formatter-stringifiable { white-space: pre-wrap; } diff --git a/panel/io/resources.py b/panel/io/resources.py index 7a04de3938..af91a67592 100644 --- a/panel/io/resources.py +++ b/panel/io/resources.py @@ -671,7 +671,7 @@ def css_raw(self): if config.global_loading_spinner: loading_base = (DIST_DIR / "css" / "loading.css").read_text(encoding='utf-8') raw.extend([loading_base, loading_css()]) - return raw + process_raw_css(config.raw_css) + return raw + process_raw_css(config.raw_css) + process_raw_css(config.global_css) @property def js_files(self): diff --git a/panel/template/bootstrap/bootstrap.css b/panel/template/bootstrap/bootstrap.css index ab47c3cc38..e0789a8049 100644 --- a/panel/template/bootstrap/bootstrap.css +++ b/panel/template/bootstrap/bootstrap.css @@ -1,175 +1,193 @@ -:root, :host { - --bs-primary-color: var(--panel-on-primary-color); - --bs-primary-bg: var(--panel-primary-color); - --bs-secondary-color: var(--panel-on-secondary-color); - --bs-secondary-bg: var(--panel-secondary-color); - --bs-form-control-bg: var(--panel-background-color); - --bs-body-bg: var(--panel-background-color); - --bs-body-color: var(--panel-on-background-color); - --bs-surface-bg: var(--panel-surface-color); - --bs-surface-color: var(--panel-on-surface-color); - --bokeh-base-font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; +:root, +:host { + --bs-primary-color: var( + --design-primary-text-color, + var(--panel-on-primary-color) + ); + --bs-primary-bg: var(--design-primary-color, var(--panel-primary-color)); + --bs-secondary-color: var( + --design-secondary-text-color, + var(--panel-on-secondary-color) + ); + --bs-secondary-bg: var(--design-primary-color, var(--panel-secondary-color)); + --bs-form-control-bg: var( + --design-background-color, + var(--panel-background-color) + ); + --bs-body-bg: var(--design-background-color, var(--panel-background-color)); + --bs-body-color: var( + --design-background-text-color, + var(--panel-on-background-color) + ); + --bs-surface-bg: var(--design-surface-color, var(--panel-surface-color)); + --bs-surface-color: var( + --design-surface-text-color, + var(--panel-on-surface-color) + ); + --bokeh-base-font: system-ui, -apple-system, 'Segoe UI', Roboto, + 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } html { - scrollbar-face-color: var(--bs-surface-bg); - scrollbar-base-color: var(--bs-surface-bg); - scrollbar-3dlight-color: var(--bs-surface-bg); - scrollbar-highlight-color: var(--bs-surface-bg); - scrollbar-track-color: var(--bs-body-bg); - scrollbar-arrow-color: var(--bs-body-bg); - scrollbar-shadow-color: var(--bs-surface-bg); + scrollbar-face-color: var(--bs-surface-bg); + scrollbar-base-color: var(--bs-surface-bg); + scrollbar-3dlight-color: var(--bs-surface-bg); + scrollbar-highlight-color: var(--bs-surface-bg); + scrollbar-track-color: var(--bs-body-bg); + scrollbar-arrow-color: var(--bs-body-bg); + scrollbar-shadow-color: var(--bs-surface-bg); } ::-webkit-scrollbar { - width: 12px; + width: 12px; } ::-webkit-scrollbar-track { - background-color: var(--bs-body-bg); - border-radius: 10px; + background-color: var(--bs-body-bg); + border-radius: 10px; } ::-webkit-scrollbar-thumb { - background-color: var(--bs-surface-bg); + background-color: var(--bs-surface-bg); } ::-webkit-scrollbar-corner { - background-color: var(--bs-surface-bg); + background-color: var(--bs-surface-bg); } body { - color: var(--bs-body-color); - background-color: var(--bs-body-bg); - height: 100vh; + color: var(--bs-body-color); + background-color: var(--bs-body-bg); + height: 100vh; } #container { - padding: 0px; + padding: 0px; } /* Header */ #header { - background-color: var(--bs-primary-bg); - color: var(--bs-primary-color); + background-color: var(--bs-primary-bg); + color: var(--bs-primary-color); } .navbar-toggle { - background: none; - border: none; - padding-left: 10px; + background: none; + border: none; + padding-left: 10px; } a.navbar-brand { - padding-left: 10px; - display: flex; - align-items: center; - font-size: 1.5em; + padding-left: 10px; + display: flex; + align-items: center; + font-size: 1.5em; } #header .title { - color: var(--bs-primary-color); - text-decoration: none; - text-decoration-line: none; - text-decoration-style: initial; - text-decoration-color: initial; - font-weight: 400; - font-size: 1.5em; - padding-left: 0.5em; - line-height: 2em; - white-space: nowrap; + color: var(--bs-primary-color); + text-decoration: none; + text-decoration-line: none; + text-decoration-style: initial; + text-decoration-color: initial; + font-weight: 400; + font-size: 1.5em; + padding-left: 0.5em; + line-height: 2em; + white-space: nowrap; } #header-items { - align-items: center; - display: flex; - flex-grow: 1; - margin-left: 15px; - white-space: nowrap; + align-items: center; + display: flex; + flex-grow: 1; + margin-left: 15px; + white-space: nowrap; } .app-header { - display: contents; - padding-left: 10px; + display: contents; + padding-left: 10px; } .app-header a.title:hover { - color: var(--bs-primary-color); - text-decoration: none; + color: var(--bs-primary-color); + text-decoration: none; } img.app-logo { - padding-right: 10px; - font-size: 28px; - height: 30px; - max-width: inherit; + padding-right: 10px; + font-size: 28px; + height: 30px; + max-width: inherit; } /* Sidebar */ #sidebar { - border-right: 1px solid var(--bs-border-color); - height: 100%; - overflow: hidden auto; - padding: 15px 10px 15px 5px; + border-right: 1px solid var(--bs-border-color); + height: 100%; + overflow: hidden auto; + padding: 15px 10px 15px 5px; } #sidebar.collapsing { - display: block; - width: 0; + display: block; + width: 0; } /* Main Area */ #content { - height: 100%; - margin: 0px; + height: 100%; + margin: 0px; } #main { - background-color: var(--bs-body-bg); - color: var(--bs-body-color); - overflow-y: auto; - padding: 10px 20px 20px 10px; + background-color: var(--bs-body-bg); + color: var(--bs-body-color); + overflow-y: auto; + padding: 10px 20px 20px 10px; } /* Modal */ .pn-modal { - overflow-y: auto; + overflow-y: auto; } .pn-modal-content { - display: block; - min-height: 42px; + display: block; + min-height: 42px; } .pn-modal-close { - height: 40px; - float: right; - padding: 0px; - position: relative; - width: 40px; - z-index: 100; + height: 40px; + float: right; + padding: 0px; + position: relative; + width: 40px; + z-index: 100; } .pn-modal-close:hover, .pn-modal-close:focus { - cursor: pointer; - font-weight: 800; - text-decoration: none; + cursor: pointer; + font-weight: 800; + text-decoration: none; } .pn-busy-container { - align-items: center; - justify-content: center; - display: flex; - margin-left: auto; + align-items: center; + justify-content: center; + display: flex; + margin-left: auto; } @media (min-width: 576px) { - .modal-dialog { - max-width: 80%; - } + .modal-dialog { + max-width: 80%; + } } diff --git a/panel/template/bootstrap/bootstrap.html b/panel/template/bootstrap/bootstrap.html index 4a0d5af0c1..4bacb46570 100644 --- a/panel/template/bootstrap/bootstrap.html +++ b/panel/template/bootstrap/bootstrap.html @@ -48,13 +48,13 @@ diff --git a/panel/template/fast/js/fast_template.js b/panel/template/fast/js/fast_template.js index 50f443fabe..edfc7a2e1f 100644 --- a/panel/template/fast/js/fast_template.js +++ b/panel/template/fast/js/fast_template.js @@ -1,113 +1,117 @@ function updateURLParameter(url, param, paramVal) { - var TheAnchor = null; - var newAdditionalURL = ""; - var tempArray = url.split("?"); - var baseURL = tempArray[0]; - var additionalURL = tempArray[1]; - var temp = ""; + var TheAnchor = null + var newAdditionalURL = '' + var tempArray = url.split('?') + var baseURL = tempArray[0] + var additionalURL = tempArray[1] + var temp = '' if (additionalURL) { - var tmpAnchor = additionalURL.split("#"); - var TheParams = tmpAnchor[0]; - var TheAnchor = tmpAnchor[1]; + var tmpAnchor = additionalURL.split('#') + var TheParams = tmpAnchor[0] + var TheAnchor = tmpAnchor[1] if (TheAnchor) { - additionalURL = TheParams; + additionalURL = TheParams } - tempArray = additionalURL.split("&"); + tempArray = additionalURL.split('&') - for (var i=0; i' } else { - button.innerHTML = '' + button.innerHTML = + '' } -}); +}) diff --git a/panel/template/fast/list/fast_list_template.css b/panel/template/fast/list/fast_list_template.css index 1883a66257..00755f9674 100644 --- a/panel/template/fast/list/fast_list_template.css +++ b/panel/template/fast/list/fast_list_template.css @@ -1,3 +1,3 @@ .card-margin { - margin: 1em 0; + margin: 1em 0; } diff --git a/panel/template/fast/list/fast_list_template.html b/panel/template/fast/list/fast_list_template.html index 3431154f08..fb5d39ad84 100644 --- a/panel/template/fast/list/fast_list_template.html +++ b/panel/template/fast/list/fast_list_template.html @@ -28,31 +28,31 @@ diff --git a/panel/template/golden/golden.css b/panel/template/golden/golden.css index 554a4062a4..38f49e9967 100644 --- a/panel/template/golden/golden.css +++ b/panel/template/golden/golden.css @@ -1,11 +1,14 @@ body { display: flex; height: 100vh; - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; margin: 0px; } -body, .main-area, .main-content, .lm_goldenlayout { +body, +.main-area, +.main-content, +.lm_goldenlayout { overflow: hidden; } @@ -59,8 +62,8 @@ img.app-logo { padding-right: 10px; font-size: 28px; height: 30px; - padding-top:9px; - padding-bottom:9px; + padding-top: 9px; + padding-bottom: 9px; max-width: inherit; } @@ -90,7 +93,10 @@ p.bk.golden-card-button { } .lm_content { - background-color: var(--panel-background-color); + background-color: var( + --design-background-color, + var(--panel-background-color) + ); overflow-y: auto !important; } @@ -113,7 +119,7 @@ p.bk.golden-card-button { } .pn-modal-content { - background-color: #fefefe; + background-color: var(--design-surface-color, var(--panel-surface-color)); margin: auto; margin-top: 25px; margin-bottom: 25px; diff --git a/panel/template/golden/golden.html b/panel/template/golden/golden.html index 9aa9a06df1..2802613084 100644 --- a/panel/template/golden/golden.html +++ b/panel/template/golden/golden.html @@ -34,13 +34,13 @@ diff --git a/panel/template/material/default.css b/panel/template/material/default.css index 1787bb61be..9a6e45603e 100644 --- a/panel/template/material/default.css +++ b/panel/template/material/default.css @@ -1,4 +1,4 @@ :root { - --mdc-theme-error: #b00020; - --mdc-theme-on-error: #ffffff; + --mdc-theme-error: #b00020; + --mdc-theme-on-error: #ffffff; } diff --git a/panel/template/material/material.css b/panel/template/material/material.css index d8c96a3b31..0c0d01ff94 100644 --- a/panel/template/material/material.css +++ b/panel/template/material/material.css @@ -1,189 +1,219 @@ :root { - --bokeh-base-font: inherit; - --mdc-theme-primary: var(--panel-primary-color); - --mdc-theme-primary-lightened: rgba(var(--panel-primary-rgb), 0.35); - --mdc-theme-on-primary: var(--panel-on-primary-color); - --mdc-theme-secondary: var(--panel-secondary-color); - --mdc-theme-secondary-lightened: rgba(var(--panel-secondary-rgb), 0.8); - --mdc-theme-on-secondary: var(--panel-on-secondary-color); - --mdc-theme-background: var(--panel-background-color); - --mdc-theme-on-background: var(--panel-on-background-color); - --mdc-theme-surface: var(--panel-surface-color); - --mdc-theme-on-surface: var(--panel-on-surface-color); - --mdc-theme-text-primary-on-background: rgba(var(--panel-on-background-rgb), 0.87); - --mdc-typography--font-family: var(--bokeh-base-font); - --mdc-shape-small: 4px; - --mdc-shape-medium: 4px; - --mdc-shape-large: 0px; + --bokeh-base-font: inherit; + --mdc-theme-surface: var(--design-surface-color, var(--panel-surface-color)); + --mdc-theme-primary: var(--design-primary-color, var(--panel-primary-color)); + --mdc-theme-primary-lightened: color-mix( + in srgb, + var(--mdc-theme-primary) 30%, + var(--mdc-theme-surface) + ); + --mdc-theme-on-primary: var( + --design-primary-text-color, + var(--panel-on-primary-color) + ); + --mdc-theme-secondary: var( + --design-secondary-color, + var(--panel-secondary-color) + ); + --mdc-theme-secondary-lightened: color-mix( + in srgb, + var(--mdc-theme-secondary) 80%, + var(--mdc-theme-surface) + ); + --mdc-theme-on-secondary: var( + --design-secondary-text-color, + var(--panel-on-secondary-color) + ); + --mdc-theme-background: var( + --design-background-color, + var(--panel-background-color) + ); + --mdc-theme-on-background: var( + --design-background-text-color, + var(--panel-on-background-color) + ); + --mdc-theme-on-surface: var( + --design-surface-text-color, + var(--panel-on-surface-color) + ); + --mdc-theme-text-primary-on-background: color-mix( + in srgb, + var(--mdc-theme-on-background) 87%, + var(--mdc-theme-surface) + ); + --mdc-typography--font-family: var(--bokeh-base-font); + --mdc-shape-small: 4px; + --mdc-shape-medium: 4px; + --mdc-shape-large: 0px; } html { - scrollbar-face-color: var(--mdc-theme-surface); - scrollbar-base-color: var(--mdc-theme-surface); - scrollbar-3dlight-color: var(--mdc-theme-surface); - scrollbar-highlight-color: var(--mdc-theme-surface); - scrollbar-track-color: var(--mdc-theme-background); - scrollbar-arrow-color: var(--mdc-theme-background); - scrollbar-shadow-color: var(--mdc-theme-surface); + scrollbar-face-color: var(--mdc-theme-surface); + scrollbar-base-color: var(--mdc-theme-surface); + scrollbar-3dlight-color: var(--mdc-theme-surface); + scrollbar-highlight-color: var(--mdc-theme-surface); + scrollbar-track-color: var(--mdc-theme-background); + scrollbar-arrow-color: var(--mdc-theme-background); + scrollbar-shadow-color: var(--mdc-theme-surface); } ::-webkit-scrollbar { - width: 12px; + width: 12px; } ::-webkit-scrollbar-track { - background-color: var(--mdc-theme-background); - border-radius: 10px; + background-color: var(--mdc-theme-background); + border-radius: 10px; } ::-webkit-scrollbar-thumb { - background-color: var(--mdc-theme-surface); + background-color: var(--mdc-theme-surface); } ::-webkit-scrollbar-corner { - background-color: var(--mdc-theme-surface); + background-color: var(--mdc-theme-surface); } body { - background-color: var(--mdc-theme-background); - color: var(--mdc-theme-on-background); - display: flex; - height: 100vh; - margin: 0px; - overflow-x: hidden; - overflow-y: hidden; + background-color: var(--mdc-theme-background); + color: var(--mdc-theme-on-background); + display: flex; + height: 100vh; + margin: 0px; + overflow-x: hidden; + overflow-y: hidden; } img { - max-width: 100%; + max-width: 100%; } #container { - padding: 0px; - height: 100vh; - width: 100vw; - max-width: 100vw; + padding: 0px; + height: 100vh; + width: 100vw; + max-width: 100vw; } #sidebar .mdc-list { - padding-left: 5px; - padding-right: 5px; + padding-left: 5px; + padding-right: 5px; } .mdc-drawer-app-content { - flex: auto; - position: relative; - overflow: hidden; + flex: auto; + position: relative; + overflow: hidden; } .mdc-drawer { - background: var(--mdc-theme-background); - color: var(--mdc-theme-on-background); + background: var(--mdc-theme-background); + color: var(--mdc-theme-on-background); } .mdc-drawer-app-content { - margin-left: 0 !important; + margin-left: 0 !important; } .title-bar { - display: contents; - justify-content: center; - align-content: center; - width: 100%; + display: contents; + justify-content: center; + align-content: center; + width: 100%; } .app-header { - display: contents; - padding-left: 10px; - font-size: 1.25em; + display: contents; + padding-left: 10px; + font-size: 1.25em; } img.app-logo { - padding-right: 10px; - font-size: 28px; - height: 30px; - max-width: inherit; - padding-top: 12px; - padding-bottom: 6px; + padding-right: 10px; + font-size: 28px; + height: 30px; + max-width: inherit; + padding-top: 12px; + padding-bottom: 6px; } #app-title { - padding-right: 12px; - padding-left: 12px; + padding-right: 12px; + padding-left: 12px; } .title { - color: #fff; - text-decoration: none; - text-decoration-line: none; - text-decoration-style: initial; - text-decoration-color: initial; - font-weight: 400; - font-size: 1.25em; - line-height: 2em; - white-space: nowrap; + color: #fff; + text-decoration: none; + text-decoration-line: none; + text-decoration-style: initial; + text-decoration-color: initial; + font-weight: 400; + font-size: 1.25em; + line-height: 2em; + white-space: nowrap; } .main-content { - height: calc(100vh - 64px); - overflow: auto; - padding: 5px 15px 0px 15px; + height: calc(100vh - 64px); + overflow: auto; + padding: 5px 15px 0px 15px; } #header { - position: absolute; - z-index: 7; + position: absolute; + z-index: 7; } #header-items { - align-items: center; - display: flex; - width: 100%; - margin-left: 25px; + align-items: center; + display: flex; + width: 100%; + margin-left: 25px; } .pn-busy-container { - align-items: center; - justify-content: center; - display: flex; + align-items: center; + justify-content: center; + display: flex; } .mdc-drawer__content { - overflow-x: hidden; + overflow-x: hidden; } .pn-modal { - overflow-y: scroll; - width: 100%; - display: none; - position: absolute; - top: 0; - left: 0; + overflow-y: scroll; + width: 100%; + display: none; + position: absolute; + top: 0; + left: 0; } .mdc-dialog .mdc-dialog__content { - color: var(--mdc-theme-on-surface); + color: var(--mdc-theme-on-surface); } .pn-modal-content { - background-color: var(--mdc-theme-surface); - margin: auto; - margin-top: 25px; - margin-bottom: 25px; - padding: 15px 20px 20px 20px; - border: 1px solid #888; - width: 80% !important; + background-color: var(--mdc-theme-surface); + margin: auto; + margin-top: 25px; + margin-bottom: 25px; + padding: 15px 20px 20px 20px; + border: 1px solid #888; + width: 80% !important; } .pn-modal-close { - position: absolute; - right: 25px; - z-index: 100; + position: absolute; + right: 25px; + z-index: 100; } .pn-modal-close:hover, .pn-modal-close:focus { - color: #000; - text-decoration: none; - cursor: pointer; + color: #000; + text-decoration: none; + cursor: pointer; } diff --git a/panel/template/material/material.html b/panel/template/material/material.html index 151f4d9cc5..fa9c28d4c1 100644 --- a/panel/template/material/material.html +++ b/panel/template/material/material.html @@ -48,8 +48,8 @@ {% endblock %} @@ -53,10 +53,10 @@