├── src └── django_bpmn │ ├── __init__.py │ ├── static │ └── django_bpmn │ │ └── css │ │ ├── django_bpmn.css │ │ ├── bpmn-js.css │ │ ├── bpmn.css │ │ └── diagram-js.css │ ├── widget.py │ └── templates │ └── django_bpmn │ └── bpmn.html ├── pyproject.toml ├── setup.cfg ├── README.md ├── LICENSE └── .gitignore /src/django_bpmn/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [build-system] 2 | requires = ["setuptools>=42"] 3 | build-backend = "setuptools.build_meta" -------------------------------------------------------------------------------- /src/django_bpmn/static/django_bpmn/css/django_bpmn.css: -------------------------------------------------------------------------------- 1 | .djs-container, .djs-palette-shown, .djs-palette-two-column, .djs-palette-open{ 2 | height: auto !important; 3 | min-height: 500px !important; 4 | } -------------------------------------------------------------------------------- /setup.cfg: -------------------------------------------------------------------------------- 1 | [metadata] 2 | name = django_bpmn 3 | version = 0.0.4 4 | author = Joao Paulo Lobianco 5 | author_email = joaopaulolobianco1@gmail.com 6 | description = Encapsulates the bpmn-js diagram modeler into a Django widget 7 | long_description = file: README.md 8 | long_description_content_type = text/markdown 9 | keywords = bpmn,django 10 | url = https://github.com/jplobianco/django-bpmn 11 | project_urls = 12 | Bug Tracker = https://github.com/jplobianco/django-bpmn/issues 13 | classifiers = 14 | Programming Language :: Python :: 3 15 | Framework :: Django 16 | Operating System :: OS Independent 17 | 18 | [options] 19 | include_package_data = True 20 | packages = find: 21 | install_requires = 22 | django 23 | python_requires = >=3.9 24 | 25 | [options.packages.find] 26 | where = src 27 | 28 | [options.package_data] 29 | django_bpmn = static/django_bpmn/css/*.css, static/django_bpmn/js/*.js, templates/django_bpmn/*.html -------------------------------------------------------------------------------- /src/django_bpmn/widget.py: -------------------------------------------------------------------------------- 1 | from django import forms 2 | 3 | 4 | class BPMNWidget(forms.HiddenInput): 5 | template_name = 'django_bpmn/bpmn.html' 6 | input_type = 'hidden' 7 | 8 | class Media: 9 | css = {'all': ('https://unpkg.com/bpmn-js@9.0.3/dist/assets/diagram-js.css', 10 | 'https://unpkg.com/bpmn-js@9.0.3/dist/assets/bpmn-js.css', 11 | 'https://unpkg.com/bpmn-js@9.0.3/dist/assets/bpmn-font/css/bpmn.css', 12 | '/static/django_bpmn/css/django_bpmn.css'), 13 | } 14 | js = ('https://unpkg.com/bpmn-js@9.0.3/dist/bpmn-modeler.development.js',) 15 | 16 | # css = {'all':('/static/django_bpmn/css/diagram-js.css', 17 | # '/static/django_bpmn/css/bpmn-js.css', 18 | # '/static/django_bpmn/css/bpmn.css', 19 | # '/static/django_bpmn/css/django_bpmn'),} 20 | # js = ('/static/django_bpmn/js/bpmn-modeler.development.js',) 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # django-bpmn 2 | 3 | Encapsulates the [bpmn-js](https://github.com/bpmn-io/bpmn-js.git) modeler into a Django widget. 4 | This is not part of the oficial [bpmn-io](https://github.com/bpmn-io/) initiative. 5 | Take a look at their [license](https://raw.githubusercontent.com/bpmn-io/bpmn-js/develop/LICENSE), specially the explicit forbidden to hide their watermark. 6 | 7 | 8 | ## Usage 9 | 10 | Install the dependency ```pip install django-bpmn``` 11 | 12 | Add 'django_bpmn' to _INSTALLED_APPS_ 13 | 14 | In a text field in your form add the _widget=BPMNWidget_ 15 | 16 | ```python 17 | from django import forms 18 | from django_bpmn.widget import BPMNWidget 19 | 20 | from sample.models import BPMN 21 | 22 | 23 | class BPMNForm(forms.Form): 24 | diagram = forms.CharField(widget=BPMNWidget) 25 | 26 | 27 | class BPMNModelForm(forms.ModelForm): 28 | diagram = forms.CharField(widget=BPMNWidget) 29 | 30 | class Meta: 31 | model = BPMN 32 | exclude = () 33 | 34 | ``` 35 | 36 | The model attibute that store the attribute should be a blob type like TextField. 37 | 38 | ```python 39 | from django.db import models 40 | 41 | 42 | class BPMN(models.Model): 43 | diagram = models.TextField('Diagram') 44 | 45 | ``` 46 | 47 | 48 | ## Sample 49 | 50 | ``` 51 | docker run -p 8000:8000 jplobianco/django-bpmn-sample 52 | ``` 53 | 54 | Access your browser at _localhost:8000_. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014-present Camunda Services GmbH 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in the 5 | Software without restriction, including without limitation the rights to use, copy, 6 | modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 7 | and to permit persons to whom the Software is furnished to do so, subject to the 8 | following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | The source code responsible for displaying the bpmn.io project watermark that 14 | links back to https://bpmn.io as part of rendered diagrams MUST NOT be 15 | removed or changed. When this software is being used in a website or application, 16 | the watermark must stay fully visible and not visually overlapped by other elements. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 19 | INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 20 | PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 21 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 22 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 23 | OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | env/ 12 | build/ 13 | develop-eggs/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | *.egg-info/ 24 | .installed.cfg 25 | *.egg 26 | 27 | # PyInstaller 28 | # Usually these files are written by a python script from a template 29 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 30 | *.manifest 31 | *.spec 32 | 33 | # Installer logs 34 | pip-log.txt 35 | pip-delete-this-directory.txt 36 | 37 | # Unit test / coverage reports 38 | htmlcov/ 39 | .tox/ 40 | .coverage 41 | .coverage.* 42 | .cache 43 | nosetests.xml 44 | coverage.xml 45 | *.cover 46 | .hypothesis/ 47 | 48 | # Translations 49 | *.mo 50 | *.pot 51 | 52 | # Django stuff: 53 | *.log 54 | local_settings.py 55 | 56 | # Flask stuff: 57 | instance/ 58 | .webassets-cache 59 | 60 | # Scrapy stuff: 61 | .scrapy 62 | 63 | # Sphinx documentation 64 | docs/_build/ 65 | 66 | # PyBuilder 67 | target/ 68 | 69 | # Jupyter Notebook 70 | .ipynb_checkpoints 71 | 72 | # pyenv 73 | .python-version 74 | 75 | # celery beat schedule file 76 | celerybeat-schedule 77 | 78 | # SageMath parsed files 79 | *.sage.py 80 | 81 | # dotenv 82 | .env 83 | 84 | # virtualenv 85 | .venv 86 | venv/ 87 | ENV/ 88 | 89 | # Spyder project settings 90 | .spyderproject 91 | .spyproject 92 | 93 | # Rope project settings 94 | .ropeproject 95 | 96 | # mkdocs documentation 97 | /site 98 | 99 | # mypy 100 | .mypy_cache/ 101 | 102 | # tmp directory 103 | tmp/* 104 | 105 | # sqlite database 106 | django_bpmn_project/db.demo 107 | 108 | .idea 109 | db.demo -------------------------------------------------------------------------------- /src/django_bpmn/templates/django_bpmn/bpmn.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 50 | -------------------------------------------------------------------------------- /src/django_bpmn/static/django_bpmn/css/bpmn-js.css: -------------------------------------------------------------------------------- 1 | .bjs-container { 2 | --bjs-font-family: Arial, sans-serif; 3 | 4 | --color-grey-225-10-15: hsl(225, 10%, 15%); 5 | --color-grey-225-10-35: hsl(225, 10%, 35%); 6 | --color-grey-225-10-55: hsl(225, 10%, 55%); 7 | --color-grey-225-10-75: hsl(225, 10%, 75%); 8 | --color-grey-225-10-80: hsl(225, 10%, 80%); 9 | --color-grey-225-10-85: hsl(225, 10%, 85%); 10 | --color-grey-225-10-90: hsl(225, 10%, 90%); 11 | --color-grey-225-10-95: hsl(225, 10%, 95%); 12 | --color-grey-225-10-97: hsl(225, 10%, 97%); 13 | 14 | --color-blue-205-100-45: hsl(205, 100%, 45%); 15 | --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 16 | --color-blue-205-100-50: hsl(205, 100%, 50%); 17 | --color-blue-205-100-95: hsl(205, 100%, 95%); 18 | 19 | --color-green-150-86-44: hsl(150, 86%, 44%); 20 | 21 | --color-red-360-100-40: hsl(360, 100%, 40%); 22 | --color-red-360-100-45: hsl(360, 100%, 45%); 23 | --color-red-360-100-92: hsl(360, 100%, 92%); 24 | --color-red-360-100-97: hsl(360, 100%, 97%); 25 | 26 | --color-white: hsl(0, 0%, 100%); 27 | --color-black: hsl(0, 0%, 0%); 28 | --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 29 | --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 30 | 31 | --breadcrumbs-font-family: var(--bjs-font-family); 32 | --breadcrumbs-item-color: var(--color-blue-205-100-50); 33 | --breadcrumbs-arrow-color: var(--color-black); 34 | --drilldown-fill-color: var(--color-white); 35 | --drilldown-background-color: var(--color-blue-205-100-50); 36 | } 37 | 38 | .bjs-breadcrumbs { 39 | position: absolute; 40 | display: none; 41 | flex-wrap: wrap; 42 | align-items: center; 43 | top: 30px; 44 | left: 30px; 45 | padding: 0px; 46 | margin: 0px; 47 | font-family: var(--breadcrumbs-font-family); 48 | font-size: 16px; 49 | line-height: normal; 50 | } 51 | 52 | .bjs-breadcrumbs-shown .bjs-breadcrumbs { 53 | display: flex; 54 | } 55 | 56 | .djs-palette-shown .bjs-breadcrumbs { 57 | left: 90px; 58 | } 59 | 60 | .djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs { 61 | left: 140px; 62 | } 63 | 64 | .bjs-breadcrumbs li { 65 | display: inline-flex; 66 | padding-bottom: 5px; 67 | } 68 | 69 | .bjs-breadcrumbs li a { 70 | cursor: pointer; 71 | color: var(--breadcrumbs-item-color); 72 | } 73 | 74 | .bjs-breadcrumbs li:last-of-type a { 75 | color: inherit; 76 | cursor: default; 77 | } 78 | 79 | .bjs-breadcrumbs li:not(:first-child)::before { 80 | content: url('data:image/svg+xml;utf8,'); 81 | padding: 0 8px; 82 | color: var(--breadcrumbs-arrow-color); 83 | height: 1em; 84 | } 85 | 86 | .bjs-breadcrumbs .bjs-crumb { 87 | display: inline-block; 88 | max-width: 200px; 89 | overflow: hidden; 90 | text-overflow: ellipsis; 91 | white-space: nowrap; 92 | } 93 | 94 | .bjs-drilldown { 95 | width: 20px; 96 | height: 20px; 97 | 98 | padding: 0px; 99 | margin-left: -20px; 100 | 101 | cursor: pointer; 102 | border: none; 103 | border-radius: 2px; 104 | outline: none; 105 | 106 | fill: var(--drilldown-fill-color); 107 | background-color: var(--drilldown-background-color); 108 | } 109 | 110 | .bjs-drilldown-empty { 111 | display: none; 112 | } 113 | 114 | .selected .bjs-drilldown-empty { 115 | display: inherit; 116 | } -------------------------------------------------------------------------------- /src/django_bpmn/static/django_bpmn/css/bpmn.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'bpmn'; 3 | src: url('../font/bpmn.eot?26374340'); 4 | src: url('../font/bpmn.eot?26374340#iefix') format('embedded-opentype'), 5 | url('../font/bpmn.woff2?26374340') format('woff2'), 6 | url('../font/bpmn.woff?26374340') format('woff'), 7 | url('../font/bpmn.ttf?26374340') format('truetype'), 8 | url('../font/bpmn.svg?26374340#bpmn') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ 13 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ 14 | /* 15 | @media screen and (-webkit-min-device-pixel-ratio:0) { 16 | @font-face { 17 | font-family: 'bpmn'; 18 | src: url('../font/bpmn.svg?26374340#bpmn') format('svg'); 19 | } 20 | } 21 | */ 22 | 23 | [class^="bpmn-icon-"]:before, [class*=" bpmn-icon-"]:before { 24 | font-family: "bpmn"; 25 | font-style: normal; 26 | font-weight: normal; 27 | speak: never; 28 | 29 | display: inline-block; 30 | text-decoration: inherit; 31 | width: 1em; 32 | /* margin-right: .2em; */ 33 | text-align: center; 34 | /* opacity: .8; */ 35 | 36 | /* For safety - reset parent styles, that can break glyph codes*/ 37 | font-variant: normal; 38 | text-transform: none; 39 | 40 | /* fix buttons height, for twitter bootstrap */ 41 | line-height: 1em; 42 | 43 | /* Animation center compensation - margins should be symmetric */ 44 | /* remove if not needed */ 45 | /* margin-left: .2em; */ 46 | 47 | /* you can be more comfortable with increased icons size */ 48 | /* font-size: 120%; */ 49 | 50 | /* Font smoothing. That was taken from TWBS */ 51 | -webkit-font-smoothing: antialiased; 52 | -moz-osx-font-smoothing: grayscale; 53 | 54 | /* Uncomment for 3D effect */ 55 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 56 | } 57 | 58 | .bpmn-icon-screw-wrench:before { content: '\e800'; } /* '' */ 59 | .bpmn-icon-trash:before { content: '\e801'; } /* '' */ 60 | .bpmn-icon-conditional-flow:before { content: '\e802'; } /* '' */ 61 | .bpmn-icon-default-flow:before { content: '\e803'; } /* '' */ 62 | .bpmn-icon-gateway-parallel:before { content: '\e804'; } /* '' */ 63 | .bpmn-icon-intermediate-event-catch-cancel:before { content: '\e805'; } /* '' */ 64 | .bpmn-icon-intermediate-event-catch-non-interrupting-message:before { content: '\e806'; } /* '' */ 65 | .bpmn-icon-start-event-compensation:before { content: '\e807'; } /* '' */ 66 | .bpmn-icon-start-event-non-interrupting-parallel-multiple:before { content: '\e808'; } /* '' */ 67 | .bpmn-icon-loop-marker:before { content: '\e809'; } /* '' */ 68 | .bpmn-icon-parallel-mi-marker:before { content: '\e80a'; } /* '' */ 69 | .bpmn-icon-start-event-non-interrupting-signal:before { content: '\e80b'; } /* '' */ 70 | .bpmn-icon-intermediate-event-catch-non-interrupting-timer:before { content: '\e80c'; } /* '' */ 71 | .bpmn-icon-intermediate-event-catch-parallel-multiple:before { content: '\e80d'; } /* '' */ 72 | .bpmn-icon-intermediate-event-catch-compensation:before { content: '\e80e'; } /* '' */ 73 | .bpmn-icon-gateway-xor:before { content: '\e80f'; } /* '' */ 74 | .bpmn-icon-connection:before { content: '\e810'; } /* '' */ 75 | .bpmn-icon-end-event-cancel:before { content: '\e811'; } /* '' */ 76 | .bpmn-icon-intermediate-event-catch-condition:before { content: '\e812'; } /* '' */ 77 | .bpmn-icon-intermediate-event-catch-non-interrupting-parallel-multiple:before { content: '\e813'; } /* '' */ 78 | .bpmn-icon-start-event-condition:before { content: '\e814'; } /* '' */ 79 | .bpmn-icon-start-event-non-interrupting-timer:before { content: '\e815'; } /* '' */ 80 | .bpmn-icon-sequential-mi-marker:before { content: '\e816'; } /* '' */ 81 | .bpmn-icon-user-task:before { content: '\e817'; } /* '' */ 82 | .bpmn-icon-business-rule:before { content: '\e818'; } /* '' */ 83 | .bpmn-icon-sub-process-marker:before { content: '\e819'; } /* '' */ 84 | .bpmn-icon-start-event-parallel-multiple:before { content: '\e81a'; } /* '' */ 85 | .bpmn-icon-start-event-error:before { content: '\e81b'; } /* '' */ 86 | .bpmn-icon-intermediate-event-catch-signal:before { content: '\e81c'; } /* '' */ 87 | .bpmn-icon-intermediate-event-catch-error:before { content: '\e81d'; } /* '' */ 88 | .bpmn-icon-end-event-compensation:before { content: '\e81e'; } /* '' */ 89 | .bpmn-icon-subprocess-collapsed:before { content: '\e81f'; } /* '' */ 90 | .bpmn-icon-subprocess-expanded:before { content: '\e820'; } /* '' */ 91 | .bpmn-icon-task:before { content: '\e821'; } /* '' */ 92 | .bpmn-icon-end-event-error:before { content: '\e822'; } /* '' */ 93 | .bpmn-icon-intermediate-event-catch-escalation:before { content: '\e823'; } /* '' */ 94 | .bpmn-icon-intermediate-event-catch-timer:before { content: '\e824'; } /* '' */ 95 | .bpmn-icon-start-event-escalation:before { content: '\e825'; } /* '' */ 96 | .bpmn-icon-start-event-signal:before { content: '\e826'; } /* '' */ 97 | .bpmn-icon-business-rule-task:before { content: '\e827'; } /* '' */ 98 | .bpmn-icon-manual:before { content: '\e828'; } /* '' */ 99 | .bpmn-icon-receive:before { content: '\e829'; } /* '' */ 100 | .bpmn-icon-call-activity:before { content: '\e82a'; } /* '' */ 101 | .bpmn-icon-start-event-timer:before { content: '\e82b'; } /* '' */ 102 | .bpmn-icon-start-event-message:before { content: '\e82c'; } /* '' */ 103 | .bpmn-icon-intermediate-event-none:before { content: '\e82d'; } /* '' */ 104 | .bpmn-icon-intermediate-event-catch-link:before { content: '\e82e'; } /* '' */ 105 | .bpmn-icon-end-event-escalation:before { content: '\e82f'; } /* '' */ 106 | .bpmn-icon-text-annotation:before { content: '\e830'; } /* '' */ 107 | .bpmn-icon-bpmn-io:before { content: '\e831'; } /* '' */ 108 | .bpmn-icon-gateway-complex:before { content: '\e832'; } /* '' */ 109 | .bpmn-icon-gateway-eventbased:before { content: '\e833'; } /* '' */ 110 | .bpmn-icon-gateway-none:before { content: '\e834'; } /* '' */ 111 | .bpmn-icon-gateway-or:before { content: '\e835'; } /* '' */ 112 | .bpmn-icon-end-event-terminate:before { content: '\e836'; } /* '' */ 113 | .bpmn-icon-end-event-signal:before { content: '\e837'; } /* '' */ 114 | .bpmn-icon-end-event-none:before { content: '\e838'; } /* '' */ 115 | .bpmn-icon-end-event-multiple:before { content: '\e839'; } /* '' */ 116 | .bpmn-icon-end-event-message:before { content: '\e83a'; } /* '' */ 117 | .bpmn-icon-end-event-link:before { content: '\e83b'; } /* '' */ 118 | .bpmn-icon-intermediate-event-catch-message:before { content: '\e83c'; } /* '' */ 119 | .bpmn-icon-intermediate-event-throw-compensation:before { content: '\e83d'; } /* '' */ 120 | .bpmn-icon-start-event-multiple:before { content: '\e83e'; } /* '' */ 121 | .bpmn-icon-script:before { content: '\e83f'; } /* '' */ 122 | .bpmn-icon-manual-task:before { content: '\e840'; } /* '' */ 123 | .bpmn-icon-send:before { content: '\e841'; } /* '' */ 124 | .bpmn-icon-service:before { content: '\e842'; } /* '' */ 125 | .bpmn-icon-receive-task:before { content: '\e843'; } /* '' */ 126 | .bpmn-icon-user:before { content: '\e844'; } /* '' */ 127 | .bpmn-icon-start-event-none:before { content: '\e845'; } /* '' */ 128 | .bpmn-icon-intermediate-event-throw-escalation:before { content: '\e846'; } /* '' */ 129 | .bpmn-icon-intermediate-event-catch-multiple:before { content: '\e847'; } /* '' */ 130 | .bpmn-icon-intermediate-event-catch-non-interrupting-escalation:before { content: '\e848'; } /* '' */ 131 | .bpmn-icon-intermediate-event-throw-link:before { content: '\e849'; } /* '' */ 132 | .bpmn-icon-start-event-non-interrupting-condition:before { content: '\e84a'; } /* '' */ 133 | .bpmn-icon-data-object:before { content: '\e84b'; } /* '' */ 134 | .bpmn-icon-script-task:before { content: '\e84c'; } /* '' */ 135 | .bpmn-icon-send-task:before { content: '\e84d'; } /* '' */ 136 | .bpmn-icon-data-store:before { content: '\e84e'; } /* '' */ 137 | .bpmn-icon-start-event-non-interrupting-escalation:before { content: '\e84f'; } /* '' */ 138 | .bpmn-icon-intermediate-event-throw-message:before { content: '\e850'; } /* '' */ 139 | .bpmn-icon-intermediate-event-catch-non-interrupting-multiple:before { content: '\e851'; } /* '' */ 140 | .bpmn-icon-intermediate-event-catch-non-interrupting-signal:before { content: '\e852'; } /* '' */ 141 | .bpmn-icon-intermediate-event-throw-multiple:before { content: '\e853'; } /* '' */ 142 | .bpmn-icon-start-event-non-interrupting-message:before { content: '\e854'; } /* '' */ 143 | .bpmn-icon-ad-hoc-marker:before { content: '\e855'; } /* '' */ 144 | .bpmn-icon-service-task:before { content: '\e856'; } /* '' */ 145 | .bpmn-icon-task-none:before { content: '\e857'; } /* '' */ 146 | .bpmn-icon-compensation-marker:before { content: '\e858'; } /* '' */ 147 | .bpmn-icon-start-event-non-interrupting-multiple:before { content: '\e859'; } /* '' */ 148 | .bpmn-icon-intermediate-event-throw-signal:before { content: '\e85a'; } /* '' */ 149 | .bpmn-icon-intermediate-event-catch-non-interrupting-condition:before { content: '\e85b'; } /* '' */ 150 | .bpmn-icon-participant:before { content: '\e85c'; } /* '' */ 151 | .bpmn-icon-event-subprocess-expanded:before { content: '\e85d'; } /* '' */ 152 | .bpmn-icon-lane-insert-below:before { content: '\e85e'; } /* '' */ 153 | .bpmn-icon-space-tool:before { content: '\e85f'; } /* '' */ 154 | .bpmn-icon-connection-multi:before { content: '\e860'; } /* '' */ 155 | .bpmn-icon-lane:before { content: '\e861'; } /* '' */ 156 | .bpmn-icon-lasso-tool:before { content: '\e862'; } /* '' */ 157 | .bpmn-icon-lane-insert-above:before { content: '\e863'; } /* '' */ 158 | .bpmn-icon-lane-divide-three:before { content: '\e864'; } /* '' */ 159 | .bpmn-icon-lane-divide-two:before { content: '\e865'; } /* '' */ 160 | .bpmn-icon-data-input:before { content: '\e866'; } /* '' */ 161 | .bpmn-icon-data-output:before { content: '\e867'; } /* '' */ 162 | .bpmn-icon-hand-tool:before { content: '\e868'; } /* '' */ 163 | .bpmn-icon-group:before { content: '\e869'; } /* '' */ 164 | .bpmn-icon-transaction:before { content: '\e8c4'; } /* '' */ -------------------------------------------------------------------------------- /src/django_bpmn/static/django_bpmn/css/diagram-js.css: -------------------------------------------------------------------------------- 1 | /** 2 | * color definitions 3 | */ 4 | .djs-container { 5 | --color-grey-225-10-15: hsl(225, 10%, 15%); 6 | --color-grey-225-10-35: hsl(225, 10%, 35%); 7 | --color-grey-225-10-55: hsl(225, 10%, 55%); 8 | --color-grey-225-10-75: hsl(225, 10%, 75%); 9 | --color-grey-225-10-80: hsl(225, 10%, 80%); 10 | --color-grey-225-10-85: hsl(225, 10%, 85%); 11 | --color-grey-225-10-90: hsl(225, 10%, 90%); 12 | --color-grey-225-10-95: hsl(225, 10%, 95%); 13 | --color-grey-225-10-97: hsl(225, 10%, 97%); 14 | 15 | --color-blue-205-100-45: hsl(205, 100%, 45%); 16 | --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 17 | --color-blue-205-100-50: hsl(205, 100%, 50%); 18 | --color-blue-205-100-95: hsl(205, 100%, 95%); 19 | 20 | --color-green-150-86-44: hsl(150, 86%, 44%); 21 | 22 | --color-red-360-100-40: hsl(360, 100%, 40%); 23 | --color-red-360-100-45: hsl(360, 100%, 45%); 24 | --color-red-360-100-92: hsl(360, 100%, 92%); 25 | --color-red-360-100-97: hsl(360, 100%, 97%); 26 | 27 | --color-white: hsl(0, 0%, 100%); 28 | --color-black: hsl(0, 0%, 0%); 29 | --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 30 | --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 31 | 32 | --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30); 33 | --bendpoint-stroke-color: var(--color-blue-205-100-50); 34 | 35 | --context-pad-entry-background-color: var(--color-white); 36 | --context-pad-entry-hover-background-color: var(--color-grey-225-10-95); 37 | 38 | --element-dragger-color: var(--color-blue-205-100-50); 39 | --element-hover-outline-fill-color: var(--color-blue-205-100-45); 40 | --element-selected-outline-stroke-color: var(--color-blue-205-100-50); 41 | 42 | --lasso-fill-color: var(--color-black-opacity-05); 43 | --lasso-stroke-color: var(--color-black); 44 | 45 | --palette-entry-color: var(--color-grey-225-10-15); 46 | --palette-entry-hover-color: var(--color-blue-205-100-45); 47 | --palette-entry-selected-color: var(--color-blue-205-100-50); 48 | --palette-separator-color: var(--color-grey-225-10-75); 49 | --palette-toggle-hover-background-color: var(--color-grey-225-10-55); 50 | --palette-background-color: var(--color-grey-225-10-97); 51 | --palette-border-color: var(--color-grey-225-10-75); 52 | 53 | --popup-body-background-color: var(--color-white); 54 | --popup-header-entry-selected-color: var(--color-blue-205-100-50); 55 | --popup-header-entry-selected-background-color: var(--color-black-opacity-10); 56 | --popup-header-separator-color: var(--color-grey-225-10-75); 57 | --popup-background-color: var(--color-grey-225-10-97); 58 | --popup-border-color: var(--color-grey-225-10-75); 59 | 60 | --resizer-fill-color: var(--color-blue-205-100-45-opacity-30); 61 | --resizer-stroke-color: var(--color-blue-205-100-50); 62 | 63 | --search-container-background-color: var(--color-grey-225-10-97); 64 | --search-container-border-color: var(--color-blue-205-100-50); 65 | --search-container-box-shadow-color: var(--color-blue-205-100-95); 66 | --search-container-box-shadow-inset-color: var(--color-grey-225-10-80); 67 | --search-input-border-color: var(--color-grey-225-10-75); 68 | --search-result-border-color: var(--color-grey-225-10-75); 69 | --search-result-highlight-color: var(--color-black); 70 | --search-result-selected-color: var(--color-blue-205-100-45-opacity-30); 71 | 72 | --shape-attach-allowed-stroke-color: var(--color-blue-205-100-50); 73 | --shape-connect-allowed-fill-color: var(--color-grey-225-10-97); 74 | --shape-drop-allowed-fill-color: var(--color-grey-225-10-97); 75 | --shape-drop-not-allowed-fill-color: var(--color-red-360-100-97); 76 | --shape-resize-preview-stroke-color: var(--color-blue-205-100-50); 77 | 78 | --snap-line-stroke-color: var(--color-blue-205-100-45-opacity-30); 79 | 80 | --space-tool-crosshair-stroke-color: var(--color-black); 81 | 82 | --tooltip-error-background-color: var(--color-red-360-100-97); 83 | --tooltip-error-border-color: var(--color-red-360-100-45); 84 | --tooltip-error-color: var(--color-red-360-100-45); 85 | } 86 | 87 | /** 88 | * outline styles 89 | */ 90 | 91 | .djs-outline { 92 | fill: none; 93 | visibility: hidden; 94 | } 95 | 96 | .djs-element.hover .djs-outline, 97 | .djs-element.selected .djs-outline { 98 | visibility: visible; 99 | shape-rendering: geometricPrecision; 100 | stroke-dasharray: 3,3; 101 | } 102 | 103 | .djs-element.selected .djs-outline { 104 | stroke: var(--element-selected-outline-stroke-color); 105 | stroke-width: 1px; 106 | } 107 | 108 | .djs-element.hover .djs-outline { 109 | stroke: var(--element-hover-outline-fill-color); 110 | stroke-width: 1px; 111 | } 112 | 113 | .djs-shape.connect-ok .djs-visual > :nth-child(1) { 114 | fill: var(--shape-connect-allowed-fill-color) !important; 115 | } 116 | 117 | .djs-shape.connect-not-ok .djs-visual > :nth-child(1), 118 | .djs-shape.drop-not-ok .djs-visual > :nth-child(1) { 119 | fill: var(--shape-drop-not-allowed-fill-color) !important; 120 | } 121 | 122 | .djs-shape.new-parent .djs-visual > :nth-child(1) { 123 | fill: var(--shape-drop-allowed-fill-color) !important; 124 | } 125 | 126 | svg.drop-not-ok { 127 | background: var(--shape-drop-not-allowed-fill-color) !important; 128 | } 129 | 130 | svg.new-parent { 131 | background: var(--shape-drop-allowed-fill-color) !important; 132 | } 133 | 134 | .djs-connection.connect-ok .djs-visual > :nth-child(1), 135 | .djs-connection.drop-ok .djs-visual > :nth-child(1) { 136 | stroke: var(--shape-drop-allowed-fill-color) !important; 137 | } 138 | 139 | .djs-connection.connect-not-ok .djs-visual > :nth-child(1), 140 | .djs-connection.drop-not-ok .djs-visual > :nth-child(1) { 141 | stroke: var(--shape-drop-not-allowed-fill-color) !important; 142 | } 143 | 144 | .drop-not-ok, 145 | .connect-not-ok { 146 | cursor: not-allowed; 147 | } 148 | 149 | .djs-element.attach-ok .djs-visual > :nth-child(1) { 150 | stroke-width: 5px !important; 151 | stroke: var(--shape-attach-allowed-stroke-color) !important; 152 | } 153 | 154 | .djs-frame.connect-not-ok .djs-visual > :nth-child(1), 155 | .djs-frame.drop-not-ok .djs-visual > :nth-child(1) { 156 | stroke-width: 3px !important; 157 | stroke: var(--shape-drop-not-allowed-fill-color) !important; 158 | fill: none !important; 159 | } 160 | 161 | /** 162 | * Selection box style 163 | * 164 | */ 165 | .djs-lasso-overlay { 166 | fill: var(--lasso-fill-color); 167 | 168 | stroke-dasharray: 5 1 3 1; 169 | stroke: var(--lasso-stroke-color); 170 | 171 | shape-rendering: geometricPrecision; 172 | pointer-events: none; 173 | } 174 | 175 | /** 176 | * Resize styles 177 | */ 178 | .djs-resize-overlay { 179 | fill: none; 180 | 181 | stroke-dasharray: 5 1 3 1; 182 | stroke: var(--shape-resize-preview-stroke-color); 183 | 184 | pointer-events: none; 185 | } 186 | 187 | .djs-resizer-hit { 188 | fill: none; 189 | pointer-events: all; 190 | } 191 | 192 | .djs-resizer-visual { 193 | fill: var(--resizer-fill-color); 194 | stroke-width: 1px; 195 | stroke-opacity: 0.5; 196 | stroke: var(--resizer-stroke-color); 197 | shape-rendering: geometricprecision; 198 | } 199 | 200 | .djs-resizer:hover .djs-resizer-visual { 201 | stroke: var(--resizer-stroke-color); 202 | stroke-opacity: 1; 203 | } 204 | 205 | .djs-cursor-resize-ns, 206 | .djs-resizer-n, 207 | .djs-resizer-s { 208 | cursor: ns-resize; 209 | } 210 | 211 | .djs-cursor-resize-ew, 212 | .djs-resizer-e, 213 | .djs-resizer-w { 214 | cursor: ew-resize; 215 | } 216 | 217 | .djs-cursor-resize-nwse, 218 | .djs-resizer-nw, 219 | .djs-resizer-se { 220 | cursor: nwse-resize; 221 | } 222 | 223 | .djs-cursor-resize-nesw, 224 | .djs-resizer-ne, 225 | .djs-resizer-sw { 226 | cursor: nesw-resize; 227 | } 228 | 229 | .djs-shape.djs-resizing > .djs-outline { 230 | visibility: hidden !important; 231 | } 232 | 233 | .djs-shape.djs-resizing > .djs-resizer { 234 | visibility: hidden; 235 | } 236 | 237 | .djs-dragger > .djs-resizer { 238 | visibility: hidden; 239 | } 240 | 241 | /** 242 | * drag styles 243 | */ 244 | .djs-dragger * { 245 | fill: none !important; 246 | stroke: var(--element-dragger-color) !important; 247 | } 248 | 249 | .djs-dragger tspan, 250 | .djs-dragger text { 251 | fill: var(--element-dragger-color) !important; 252 | stroke: none !important; 253 | } 254 | 255 | marker.djs-dragger circle, 256 | marker.djs-dragger path, 257 | marker.djs-dragger polygon, 258 | marker.djs-dragger polyline, 259 | marker.djs-dragger rect { 260 | fill: var(--element-dragger-color) !important; 261 | stroke: none !important; 262 | } 263 | 264 | marker.djs-dragger text, 265 | marker.djs-dragger tspan { 266 | fill: none !important; 267 | stroke: var(--element-dragger-color) !important; 268 | } 269 | 270 | .djs-dragging { 271 | opacity: 0.3; 272 | } 273 | 274 | .djs-dragging, 275 | .djs-dragging > * { 276 | pointer-events: none !important; 277 | } 278 | 279 | .djs-dragging .djs-context-pad, 280 | .djs-dragging .djs-outline { 281 | display: none !important; 282 | } 283 | 284 | /** 285 | * no pointer events for visual 286 | */ 287 | .djs-visual, 288 | .djs-outline { 289 | pointer-events: none; 290 | } 291 | 292 | .djs-element.attach-ok .djs-hit { 293 | stroke-width: 60px !important; 294 | } 295 | 296 | /** 297 | * all pointer events for hit shape 298 | */ 299 | .djs-element > .djs-hit-all { 300 | pointer-events: all; 301 | } 302 | 303 | .djs-element > .djs-hit-stroke, 304 | .djs-element > .djs-hit-click-stroke { 305 | pointer-events: stroke; 306 | } 307 | 308 | /** 309 | * all pointer events for hit shape 310 | */ 311 | .djs-drag-active .djs-element > .djs-hit-click-stroke { 312 | pointer-events: all; 313 | } 314 | 315 | /** 316 | * shape / connection basic styles 317 | */ 318 | .djs-connection .djs-visual { 319 | stroke-width: 2px; 320 | fill: none; 321 | } 322 | 323 | .djs-cursor-grab { 324 | cursor: -webkit-grab; 325 | cursor: -moz-grab; 326 | cursor: grab; 327 | } 328 | 329 | .djs-cursor-grabbing { 330 | cursor: -webkit-grabbing; 331 | cursor: -moz-grabbing; 332 | cursor: grabbing; 333 | } 334 | 335 | .djs-cursor-crosshair { 336 | cursor: crosshair; 337 | } 338 | 339 | .djs-cursor-move { 340 | cursor: move; 341 | } 342 | 343 | .djs-cursor-resize-ns { 344 | cursor: ns-resize; 345 | } 346 | 347 | .djs-cursor-resize-ew { 348 | cursor: ew-resize; 349 | } 350 | 351 | 352 | /** 353 | * snapping 354 | */ 355 | .djs-snap-line { 356 | stroke: var(--snap-line-stroke-color); 357 | stroke-linecap: round; 358 | stroke-width: 2px; 359 | pointer-events: none; 360 | } 361 | 362 | /** 363 | * snapping 364 | */ 365 | .djs-crosshair { 366 | stroke: var(--space-tool-crosshair-stroke-color); 367 | stroke-linecap: round; 368 | stroke-width: 1px; 369 | pointer-events: none; 370 | shape-rendering: crispEdges; 371 | stroke-dasharray: 5, 5; 372 | } 373 | 374 | /** 375 | * palette 376 | */ 377 | 378 | .djs-palette { 379 | position: absolute; 380 | left: 20px; 381 | top: 20px; 382 | 383 | box-sizing: border-box; 384 | width: 48px; 385 | } 386 | 387 | .djs-palette .separator { 388 | margin: 0 5px; 389 | padding-top: 5px; 390 | 391 | border: none; 392 | border-bottom: solid 1px var(--palette-separator-color); 393 | 394 | clear: both; 395 | } 396 | 397 | .djs-palette .entry:before { 398 | vertical-align: text-bottom; 399 | } 400 | 401 | .djs-palette .djs-palette-toggle { 402 | cursor: pointer; 403 | } 404 | 405 | .djs-palette .entry, 406 | .djs-palette .djs-palette-toggle { 407 | color: var(--palette-entry-color); 408 | font-size: 30px; 409 | 410 | text-align: center; 411 | } 412 | 413 | .djs-palette .entry { 414 | float: left; 415 | } 416 | 417 | .djs-palette .entry img { 418 | max-width: 100%; 419 | } 420 | 421 | .djs-palette .djs-palette-entries:after { 422 | content: ''; 423 | display: table; 424 | clear: both; 425 | } 426 | 427 | .djs-palette .djs-palette-toggle:hover { 428 | background: var(--palette-toggle-hover-background-color); 429 | } 430 | 431 | .djs-palette .entry:hover { 432 | color: var(--palette-entry-hover-color); 433 | } 434 | 435 | .djs-palette .highlighted-entry { 436 | color: var(--palette-entry-selected-color) !important; 437 | } 438 | 439 | .djs-palette .entry, 440 | .djs-palette .djs-palette-toggle { 441 | width: 46px; 442 | height: 46px; 443 | line-height: 46px; 444 | cursor: default; 445 | } 446 | 447 | /** 448 | * Palette open / two-column layout is controlled via 449 | * classes on the palette. Events to hook into palette 450 | * changed life-cycle are available in addition. 451 | */ 452 | .djs-palette.two-column.open { 453 | width: 94px; 454 | } 455 | 456 | .djs-palette:not(.open) .djs-palette-entries { 457 | display: none; 458 | } 459 | 460 | .djs-palette:not(.open) { 461 | overflow: hidden; 462 | } 463 | 464 | .djs-palette.open .djs-palette-toggle { 465 | display: none; 466 | } 467 | 468 | /** 469 | * context-pad 470 | */ 471 | .djs-overlay-context-pad { 472 | width: 72px; 473 | z-index: 100; 474 | } 475 | 476 | .djs-context-pad { 477 | position: absolute; 478 | display: none; 479 | pointer-events: none; 480 | } 481 | 482 | .djs-context-pad .entry { 483 | width: 22px; 484 | height: 22px; 485 | text-align: center; 486 | display: inline-block; 487 | font-size: 22px; 488 | margin: 0 2px 2px 0; 489 | 490 | border-radius: 3px; 491 | 492 | cursor: default; 493 | 494 | background-color: var(--context-pad-entry-background-color); 495 | box-shadow: 0 0 2px 1px var(--context-pad-entry-background-color); 496 | pointer-events: all; 497 | } 498 | 499 | .djs-context-pad .entry:before { 500 | vertical-align: top; 501 | } 502 | 503 | .djs-context-pad .entry:hover { 504 | background: var(--context-pad-entry-hover-background-color); 505 | } 506 | 507 | .djs-context-pad.open { 508 | display: block; 509 | } 510 | 511 | /** 512 | * popup styles 513 | */ 514 | .djs-popup .entry { 515 | line-height: 20px; 516 | white-space: nowrap; 517 | cursor: default; 518 | } 519 | 520 | /* larger font for prefixed icons */ 521 | .djs-popup .entry:before { 522 | vertical-align: middle; 523 | font-size: 20px; 524 | } 525 | 526 | .djs-popup .entry > span { 527 | vertical-align: middle; 528 | font-size: 14px; 529 | } 530 | 531 | .djs-popup .entry:hover, 532 | .djs-popup .entry.active:hover { 533 | background: var(--popup-header-entry-selected-background-color); 534 | } 535 | 536 | .djs-popup .entry.disabled { 537 | background: inherit; 538 | } 539 | 540 | .djs-popup .djs-popup-header .entry { 541 | display: inline-block; 542 | padding: 2px 3px 2px 3px; 543 | 544 | border: solid 1px transparent; 545 | border-radius: 3px; 546 | } 547 | 548 | .djs-popup .djs-popup-header .entry.active { 549 | color: var(--popup-header-entry-selected-color); 550 | border: solid 1px var(--popup-header-entry-selected-color); 551 | background-color: var(--popup-header-entry-selected-background-color); 552 | } 553 | 554 | .djs-popup-body .entry { 555 | padding: 4px 10px 4px 5px; 556 | } 557 | 558 | .djs-popup-body .entry > span { 559 | margin-left: 5px; 560 | } 561 | 562 | .djs-popup-body { 563 | background-color: var(--popup-body-background-color); 564 | } 565 | 566 | .djs-popup-header { 567 | border-bottom: 1px solid var(--popup-header-separator-color); 568 | } 569 | 570 | .djs-popup-header .entry { 571 | margin: 1px; 572 | margin-left: 3px; 573 | } 574 | 575 | .djs-popup-header .entry:last-child { 576 | margin-right: 3px; 577 | } 578 | 579 | /** 580 | * popup / palette styles 581 | */ 582 | .djs-palette { 583 | background: var(--palette-background-color); 584 | border: solid 1px var(--palette-border-color); 585 | border-radius: 2px; 586 | } 587 | 588 | .djs-popup { 589 | background: var(--popup-background-color); 590 | border: solid 1px var(--popup-border-color); 591 | border-radius: 2px; 592 | } 593 | 594 | /** 595 | * touch 596 | */ 597 | 598 | .djs-shape, 599 | .djs-connection { 600 | touch-action: none; 601 | } 602 | 603 | .djs-segment-dragger, 604 | .djs-bendpoint { 605 | display: none; 606 | } 607 | 608 | /** 609 | * bendpoints 610 | */ 611 | .djs-segment-dragger .djs-visual { 612 | display: none; 613 | 614 | fill: var(--bendpoint-fill-color); 615 | stroke: var(--bendpoint-stroke-color); 616 | stroke-width: 1px; 617 | stroke-opacity: 1; 618 | } 619 | 620 | .djs-segment-dragger:hover .djs-visual { 621 | display: block; 622 | } 623 | 624 | .djs-bendpoint .djs-visual { 625 | fill: var(--bendpoint-fill-color); 626 | stroke: var(--bendpoint-stroke-color); 627 | stroke-width: 1px; 628 | stroke-opacity: 0.5; 629 | } 630 | 631 | .djs-segment-dragger:hover, 632 | .djs-bendpoints.hover .djs-segment-dragger, 633 | .djs-bendpoints.selected .djs-segment-dragger, 634 | .djs-bendpoint:hover, 635 | .djs-bendpoints.hover .djs-bendpoint, 636 | .djs-bendpoints.selected .djs-bendpoint { 637 | display: block; 638 | } 639 | 640 | .djs-drag-active .djs-bendpoints * { 641 | display: none; 642 | } 643 | 644 | .djs-bendpoints:not(.hover) .floating { 645 | display: none; 646 | } 647 | 648 | .djs-segment-dragger:hover .djs-visual, 649 | .djs-segment-dragger.djs-dragging .djs-visual, 650 | .djs-bendpoint:hover .djs-visual, 651 | .djs-bendpoint.floating .djs-visual { 652 | fill: var(--bendpoint-fill-color); 653 | stroke: var(--bendpoint-stroke-color); 654 | stroke-opacity: 1; 655 | } 656 | 657 | .djs-bendpoint.floating .djs-hit { 658 | pointer-events: none; 659 | } 660 | 661 | .djs-segment-dragger .djs-hit, 662 | .djs-bendpoint .djs-hit { 663 | fill: none; 664 | pointer-events: all; 665 | } 666 | 667 | .djs-segment-dragger.horizontal .djs-hit { 668 | cursor: ns-resize; 669 | } 670 | 671 | .djs-segment-dragger.vertical .djs-hit { 672 | cursor: ew-resize; 673 | } 674 | 675 | .djs-segment-dragger.djs-dragging .djs-hit { 676 | pointer-events: none; 677 | } 678 | 679 | .djs-updating, 680 | .djs-updating > * { 681 | pointer-events: none !important; 682 | } 683 | 684 | .djs-updating .djs-context-pad, 685 | .djs-updating .djs-outline, 686 | .djs-updating .djs-bendpoint, 687 | .connect-ok .djs-bendpoint, 688 | .connect-not-ok .djs-bendpoint, 689 | .drop-ok .djs-bendpoint, 690 | .drop-not-ok .djs-bendpoint { 691 | display: none !important; 692 | } 693 | 694 | .djs-segment-dragger.djs-dragging, 695 | .djs-bendpoint.djs-dragging { 696 | display: block; 697 | opacity: 1.0; 698 | } 699 | 700 | 701 | /** 702 | * tooltips 703 | */ 704 | .djs-tooltip-error { 705 | width: 160px; 706 | padding: 6px; 707 | 708 | background: var(--tooltip-error-background-color); 709 | border: solid 1px var(--tooltip-error-border-color); 710 | border-radius: 2px; 711 | color: var(--tooltip-error-color); 712 | font-size: 12px; 713 | line-height: 16px; 714 | 715 | opacity: 0.75; 716 | } 717 | 718 | .djs-tooltip-error:hover { 719 | opacity: 1; 720 | } 721 | 722 | 723 | /** 724 | * search pad 725 | */ 726 | .djs-search-container { 727 | position: absolute; 728 | top: 20px; 729 | left: 0; 730 | right: 0; 731 | margin-left: auto; 732 | margin-right: auto; 733 | 734 | width: 25%; 735 | min-width: 300px; 736 | max-width: 400px; 737 | z-index: 10; 738 | 739 | font-size: 1.05em; 740 | opacity: 0.9; 741 | background: var(--search-container-background-color); 742 | border: solid 1px var(--search-container-border-color); 743 | border-radius: 2px; 744 | box-shadow: 0 0 0 2px var(--search-container-box-shadow-color), 0 0 0 1px var(--search-container-box-shadow-inset-color) inset; 745 | } 746 | 747 | .djs-search-container:not(.open) { 748 | display: none; 749 | } 750 | 751 | .djs-search-input input { 752 | font-size: 1.05em; 753 | width: 100%; 754 | padding: 6px 10px; 755 | border: 1px solid var(--search-input-border-color); 756 | box-sizing: border-box; 757 | } 758 | 759 | .djs-search-input input:focus { 760 | outline: none; 761 | border-color: var(--search-input-border-color); 762 | } 763 | 764 | .djs-search-results { 765 | position: relative; 766 | overflow-y: auto; 767 | max-height: 200px; 768 | } 769 | 770 | .djs-search-results:hover { 771 | cursor: pointer; 772 | } 773 | 774 | .djs-search-result { 775 | width: 100%; 776 | padding: 6px 10px; 777 | background: white; 778 | border-bottom: solid 1px var(--search-result-border-color); 779 | border-radius: 1px; 780 | } 781 | 782 | .djs-search-highlight { 783 | color: var(--search-result-highlight-color); 784 | } 785 | 786 | .djs-search-result-primary { 787 | margin: 0 0 10px; 788 | } 789 | 790 | .djs-search-result-secondary { 791 | font-family: monospace; 792 | margin: 0; 793 | } 794 | 795 | .djs-search-result:hover { 796 | background: var(--search-result-selected-color); 797 | } 798 | 799 | .djs-search-result-selected { 800 | background: var(--search-result-selected-color); 801 | } 802 | 803 | .djs-search-result-selected:hover { 804 | background: var(--search-result-selected-color); 805 | } 806 | 807 | .djs-search-overlay { 808 | background: var(--search-result-selected-color); 809 | } 810 | 811 | /** 812 | * hidden styles 813 | */ 814 | .djs-element-hidden, 815 | .djs-element-hidden .djs-hit, 816 | .djs-element-hidden .djs-outline, 817 | .djs-label-hidden .djs-label { 818 | display: none !important; 819 | } 820 | --------------------------------------------------------------------------------