diff --git a/.gitignore b/.gitignore index 265df520..ce3fa217 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ __pycache__/ venv/ env/ Bug/ +regles/ # Variables d'environnement / secrets locaux .env diff --git a/assets/forge-favicon.svg b/assets/forge-favicon.svg new file mode 100644 index 00000000..7ec902b8 --- /dev/null +++ b/assets/forge-favicon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/forge-logo-onwhite.svg b/assets/forge-logo-onwhite.svg new file mode 100644 index 00000000..6b154f90 --- /dev/null +++ b/assets/forge-logo-onwhite.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/forge-logo.svg b/assets/forge-logo.svg new file mode 100644 index 00000000..3c92603d --- /dev/null +++ b/assets/forge-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/build_css.py b/build_css.py new file mode 100644 index 00000000..74c4bd1e --- /dev/null +++ b/build_css.py @@ -0,0 +1,27 @@ +"""Compile styles/forge-theme.scss (tokens Forge + Bulma vendoré en local, +voir regles/FORGE_ENGINE_TEMPLATE_BULMA.md) en static/style.css — le seul +fichier CSS chargé par les templates (un seul , inchangé). Pas de +build automatique : lancer `python build_css.py` après toute modification +sous styles/.""" +import os + +import sass + +_BASE_DIR = os.path.dirname(os.path.abspath(__file__)) +_ENTRY = os.path.join(_BASE_DIR, "styles", "forge-theme.scss") +_OUTPUT = os.path.join(_BASE_DIR, "static", "style.css") + + +def build(): + css = sass.compile( + filename=_ENTRY, + include_paths=[os.path.join(_BASE_DIR, "styles")], + output_style="expanded", + ) + with open(_OUTPUT, "w", encoding="utf-8") as f: + f.write(css) + print(f"Compilé : {_ENTRY} -> {_OUTPUT} ({len(css)} octets)") + + +if __name__ == "__main__": + build() diff --git a/requirements.txt b/requirements.txt index 66d01c43..0c0da56a 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,4 @@ Flask==3.0.3 pyotp==2.10.0 qrcode==8.2 +libsass==0.23.0 diff --git a/static/branding/forge-favicon.svg b/static/branding/forge-favicon.svg new file mode 100644 index 00000000..7ec902b8 --- /dev/null +++ b/static/branding/forge-favicon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/branding/forge-logo-onwhite.svg b/static/branding/forge-logo-onwhite.svg new file mode 100644 index 00000000..6b154f90 --- /dev/null +++ b/static/branding/forge-logo-onwhite.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/branding/forge-logo.svg b/static/branding/forge-logo.svg new file mode 100644 index 00000000..3c92603d --- /dev/null +++ b/static/branding/forge-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/static/style.css b/static/style.css index 5994b808..bc3e9311 100644 --- a/static/style.css +++ b/static/style.css @@ -1,74 +1,12248 @@ -:root{ - --bg:#12151c; --panel:#191d27; --panel2:#1f2430; --border:#2b3140; - --text:#e8eaf0; --text-dim:#8b93a7; --accent:#5b8cff; --danger:#e2685f; +@charset "UTF-8"; +/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ +/* Bulma Utilities */ +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis, .file-cta, +.file-name, .select select, .textarea, .input, .button { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: 1px solid transparent; + border-radius: 10px; + box-shadow: none; + display: inline-flex; + font-size: 1rem; + height: 2.5em; + justify-content: flex-start; + line-height: 1.5; + padding-bottom: calc(0.5em - 1px); + padding-left: calc(0.75em - 1px); + padding-right: calc(0.75em - 1px); + padding-top: calc(0.5em - 1px); + position: relative; + vertical-align: top; } -*{ box-sizing:border-box; } -body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); } -h1{ font-size:20px; margin:0 0 6px; } -h2{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:24px 0 8px; } -h3{ font-size:13px; color:var(--accent); margin:14px 0 6px; } -label{ display:block; font-size:12px; color:var(--text-dim); margin:8px 0 4px; } -input[type=text], input[type=number], input[type=date], textarea, select{ - width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:6px; - color:var(--text); padding:8px 10px; font-size:13px; font-family:inherit; + +.pagination-previous:focus, +.pagination-next:focus, +.pagination-link:focus, +.pagination-ellipsis:focus, .file-cta:focus, +.file-name:focus, .select select:focus, .textarea:focus, .input:focus, .button:focus, .is-focused.pagination-previous, +.is-focused.pagination-next, +.is-focused.pagination-link, +.is-focused.pagination-ellipsis, .is-focused.file-cta, +.is-focused.file-name, .select select.is-focused, .is-focused.textarea, .is-focused.input, .is-focused.button, .pagination-previous:active, +.pagination-next:active, +.pagination-link:active, +.pagination-ellipsis:active, .file-cta:active, +.file-name:active, .select select:active, .textarea:active, .input:active, .button:active, .is-active.pagination-previous, +.is-active.pagination-next, +.is-active.pagination-link, +.is-active.pagination-ellipsis, .is-active.file-cta, +.is-active.file-name, .select select.is-active, .is-active.textarea, .is-active.input, .is-active.button { + outline: none; +} + +[disabled].pagination-previous, +[disabled].pagination-next, +[disabled].pagination-link, +[disabled].pagination-ellipsis, [disabled].file-cta, +[disabled].file-name, .select select[disabled], [disabled].textarea, [disabled].input, [disabled].button, fieldset[disabled] .pagination-previous, +fieldset[disabled] .pagination-next, +fieldset[disabled] .pagination-link, +fieldset[disabled] .pagination-ellipsis, fieldset[disabled] .file-cta, +fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input, fieldset[disabled] .button { + cursor: not-allowed; +} + +.is-unselectable, .tabs, .pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis, .breadcrumb, .file, .button { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after { + border: 3px solid transparent; + border-radius: 2px; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.625em; + margin-top: -0.4375em; + pointer-events: none; + position: absolute; + top: 50%; + transform: rotate(-45deg); + transform-origin: center; + width: 0.625em; +} + +.tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .level:not(:last-child), .breadcrumb:not(:last-child), .block:not(:last-child), .title:not(:last-child), +.subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .box:not(:last-child) { + margin-bottom: 1.5rem; +} + +.modal-close, .delete { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -moz-appearance: none; + -webkit-appearance: none; + background-color: rgba(10, 10, 10, 0.2); + border: none; + border-radius: 999px; + cursor: pointer; + pointer-events: auto; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + vertical-align: top; + width: 20px; +} + +.modal-close::before, .delete::before, .modal-close::after, .delete::after { + background-color: #0b0e14; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; +} + +.modal-close::before, .delete::before { + height: 2px; + width: 50%; +} + +.modal-close::after, .delete::after { + height: 50%; + width: 2px; +} + +.modal-close:hover, .delete:hover, .modal-close:focus, .delete:focus { + background-color: rgba(10, 10, 10, 0.3); +} + +.modal-close:active, .delete:active { + background-color: rgba(10, 10, 10, 0.4); +} + +.is-small.modal-close, .is-small.delete { + height: 16px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; +} + +.is-medium.modal-close, .is-medium.delete { + height: 24px; + max-height: 24px; + max-width: 24px; + min-height: 24px; + min-width: 24px; + width: 24px; +} + +.is-large.modal-close, .is-large.delete { + height: 32px; + max-height: 32px; + max-width: 32px; + min-height: 32px; + min-width: 32px; + width: 32px; +} + +.control.is-loading::after, .select.is-loading::after, .loader, .button.is-loading::after { + animation: spinAround 500ms infinite linear; + border: 2px solid #dbdbdb; + border-radius: 999px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +.hero-video, .is-overlay, .modal-background, .modal, .image.is-square img, +.image.is-square .has-ratio, .image.is-1by1 img, +.image.is-1by1 .has-ratio, .image.is-5by4 img, +.image.is-5by4 .has-ratio, .image.is-4by3 img, +.image.is-4by3 .has-ratio, .image.is-3by2 img, +.image.is-3by2 .has-ratio, .image.is-5by3 img, +.image.is-5by3 .has-ratio, .image.is-16by9 img, +.image.is-16by9 .has-ratio, .image.is-2by1 img, +.image.is-2by1 .has-ratio, .image.is-3by1 img, +.image.is-3by1 .has-ratio, .image.is-4by5 img, +.image.is-4by5 .has-ratio, .image.is-3by4 img, +.image.is-3by4 .has-ratio, .image.is-2by3 img, +.image.is-2by3 .has-ratio, .image.is-3by5 img, +.image.is-3by5 .has-ratio, .image.is-9by16 img, +.image.is-9by16 .has-ratio, .image.is-1by2 img, +.image.is-1by2 .has-ratio, .image.is-1by3 img, +.image.is-1by3 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.navbar-burger { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + +/* Bulma Base */ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} + +ul { + list-style: none; +} + +button, +input, +select, +textarea { + margin: 0; +} + +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +img, +video { + height: auto; + max-width: 100%; +} + +iframe { + border: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +td:not([align]), +th:not([align]) { + text-align: inherit; +} + +html { + background-color: #0b0e14; + font-size: 16px; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: 300px; + overflow-x: hidden; + overflow-y: scroll; + text-rendering: optimizeLegibility; + text-size-adjust: 100%; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +body, +button, +input, +optgroup, +select, +textarea { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: monospace; +} + +body { + color: #e8ecf4; + font-size: 1em; + font-weight: 400; + line-height: 1.5; +} + +a { + color: #ff5f2e; + cursor: pointer; + text-decoration: none; +} + +a strong { + color: currentColor; +} + +a:hover { + color: #363636; +} + +code { + background-color: whitesmoke; + color: #da1039; + font-size: 0.875em; + font-weight: normal; + padding: 0.25em 0.5em 0.25em; +} + +hr { + background-color: whitesmoke; + border: none; + display: block; + height: 2px; + margin: 1.5rem 0; +} + +img { + height: auto; + max-width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; +} + +small { + font-size: 0.875em; +} + +span { + font-style: inherit; + font-weight: inherit; +} + +strong { + color: #363636; + font-weight: 700; +} + +fieldset { + border: none; +} + +pre { + -webkit-overflow-scrolling: touch; + background-color: whitesmoke; + color: #e8ecf4; + font-size: 0.875em; + overflow-x: auto; + padding: 1.25rem 1.5rem; + white-space: pre; + word-wrap: normal; +} + +pre code { + background-color: transparent; + color: currentColor; + font-size: 1em; + padding: 0; +} + +table td, +table th { + vertical-align: top; +} + +table td:not([align]), +table th:not([align]) { + text-align: inherit; +} + +table th { + color: #363636; +} + +@keyframes spinAround { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +/* Bulma Elements */ +.box { + background-color: #0b0e14; + border-radius: 16px; + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + color: #e8ecf4; + display: block; + padding: 1.25rem; +} + +a.box:hover, a.box:focus { + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #ff5f2e; +} + +a.box:active { + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #ff5f2e; +} + +.button { + background-color: #0b0e14; + border-color: #232a38; + border-width: 1px; + color: #363636; + cursor: pointer; + justify-content: center; + padding-bottom: calc(0.5em - 1px); + padding-left: 1em; + padding-right: 1em; + padding-top: calc(0.5em - 1px); + text-align: center; + white-space: nowrap; +} + +.button strong { + color: inherit; +} + +.button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large { + height: 1.5em; + width: 1.5em; +} + +.button .icon:first-child:not(:last-child) { + margin-left: calc(-0.5em - 1px); + margin-right: 0.25em; +} + +.button .icon:last-child:not(:first-child) { + margin-left: 0.25em; + margin-right: calc(-0.5em - 1px); +} + +.button .icon:first-child:last-child { + margin-left: calc(-0.5em - 1px); + margin-right: calc(-0.5em - 1px); +} + +.button:hover, .button.is-hovered { + border-color: #b5b5b5; + color: #363636; +} + +.button:focus, .button.is-focused { + border-color: #485fc7; + color: #363636; +} + +.button:focus:not(:active), .button.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.button:active, .button.is-active { + border-color: #4a4a4a; + color: #363636; +} + +.button.is-text { + background-color: transparent; + border-color: transparent; + color: #e8ecf4; + text-decoration: underline; +} + +.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused { + background-color: whitesmoke; + color: #363636; +} + +.button.is-text:active, .button.is-text.is-active { + background-color: #e8e8e8; + color: #363636; +} + +.button.is-text[disabled], fieldset[disabled] .button.is-text { + background-color: transparent; + border-color: transparent; + box-shadow: none; +} + +.button.is-ghost { + background: none; + border-color: transparent; + color: #ff5f2e; + text-decoration: none; +} + +.button.is-ghost:hover, .button.is-ghost.is-hovered { + color: #ff5f2e; + text-decoration: underline; +} + +.button.is-white { + background-color: white; + border-color: transparent; + color: #0a0a0a; +} + +.button.is-white:hover, .button.is-white.is-hovered { + background-color: #f9f9f9; + border-color: transparent; + color: #0a0a0a; +} + +.button.is-white:focus, .button.is-white.is-focused { + border-color: transparent; + color: #0a0a0a; +} + +.button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); +} + +.button.is-white:active, .button.is-white.is-active { + background-color: #f2f2f2; + border-color: transparent; + color: #0a0a0a; +} + +.button.is-white[disabled], fieldset[disabled] .button.is-white { + background-color: white; + border-color: white; + box-shadow: none; +} + +.button.is-white.is-inverted { + background-color: #0a0a0a; + color: white; +} + +.button.is-white.is-inverted:hover, .button.is-white.is-inverted.is-hovered { + background-color: black; +} + +.button.is-white.is-inverted[disabled], fieldset[disabled] .button.is-white.is-inverted { + background-color: #0a0a0a; + border-color: transparent; + box-shadow: none; + color: white; +} + +.button.is-white.is-loading::after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; +} + +.button.is-white.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} + +.button.is-white.is-outlined:hover, .button.is-white.is-outlined.is-hovered, .button.is-white.is-outlined:focus, .button.is-white.is-outlined.is-focused { + background-color: white; + border-color: white; + color: #0a0a0a; +} + +.button.is-white.is-outlined.is-loading::after { + border-color: transparent transparent white white !important; +} + +.button.is-white.is-outlined.is-loading:hover::after, .button.is-white.is-outlined.is-loading.is-hovered::after, .button.is-white.is-outlined.is-loading:focus::after, .button.is-white.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; +} + +.button.is-white.is-outlined[disabled], fieldset[disabled] .button.is-white.is-outlined { + background-color: transparent; + border-color: white; + box-shadow: none; + color: white; +} + +.button.is-white.is-inverted.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + color: #0a0a0a; +} + +.button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined.is-hovered, .button.is-white.is-inverted.is-outlined:focus, .button.is-white.is-inverted.is-outlined.is-focused { + background-color: #0a0a0a; + color: white; +} + +.button.is-white.is-inverted.is-outlined.is-loading:hover::after, .button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-white.is-inverted.is-outlined.is-loading:focus::after, .button.is-white.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent white white !important; +} + +.button.is-white.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-white.is-inverted.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + box-shadow: none; + color: #0a0a0a; +} + +.button.is-black { + background-color: #0a0a0a; + border-color: transparent; + color: white; +} + +.button.is-black:hover, .button.is-black.is-hovered { + background-color: #040404; + border-color: transparent; + color: white; +} + +.button.is-black:focus, .button.is-black.is-focused { + border-color: transparent; + color: white; +} + +.button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); +} + +.button.is-black:active, .button.is-black.is-active { + background-color: black; + border-color: transparent; + color: white; +} + +.button.is-black[disabled], fieldset[disabled] .button.is-black { + background-color: #0a0a0a; + border-color: #0a0a0a; + box-shadow: none; +} + +.button.is-black.is-inverted { + background-color: white; + color: #0a0a0a; +} + +.button.is-black.is-inverted:hover, .button.is-black.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-black.is-inverted[disabled], fieldset[disabled] .button.is-black.is-inverted { + background-color: white; + border-color: transparent; + box-shadow: none; + color: #0a0a0a; +} + +.button.is-black.is-loading::after { + border-color: transparent transparent white white !important; +} + +.button.is-black.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + color: #0a0a0a; +} + +.button.is-black.is-outlined:hover, .button.is-black.is-outlined.is-hovered, .button.is-black.is-outlined:focus, .button.is-black.is-outlined.is-focused { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; +} + +.button.is-black.is-outlined.is-loading::after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; +} + +.button.is-black.is-outlined.is-loading:hover::after, .button.is-black.is-outlined.is-loading.is-hovered::after, .button.is-black.is-outlined.is-loading:focus::after, .button.is-black.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent white white !important; +} + +.button.is-black.is-outlined[disabled], fieldset[disabled] .button.is-black.is-outlined { + background-color: transparent; + border-color: #0a0a0a; + box-shadow: none; + color: #0a0a0a; +} + +.button.is-black.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} + +.button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined.is-hovered, .button.is-black.is-inverted.is-outlined:focus, .button.is-black.is-inverted.is-outlined.is-focused { + background-color: white; + color: #0a0a0a; +} + +.button.is-black.is-inverted.is-outlined.is-loading:hover::after, .button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-black.is-inverted.is-outlined.is-loading:focus::after, .button.is-black.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #0a0a0a #0a0a0a !important; +} + +.button.is-black.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-black.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + box-shadow: none; + color: white; +} + +.button.is-light { + background-color: whitesmoke; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light:hover, .button.is-light.is-hovered { + background-color: #eeeeee; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light:focus, .button.is-light.is-focused { + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); +} + +.button.is-light:active, .button.is-light.is-active { + background-color: #e8e8e8; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light[disabled], fieldset[disabled] .button.is-light { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; +} + +.button.is-light.is-inverted { + background-color: rgba(0, 0, 0, 0.7); + color: whitesmoke; +} + +.button.is-light.is-inverted:hover, .button.is-light.is-inverted.is-hovered { + background-color: rgba(0, 0, 0, 0.7); +} + +.button.is-light.is-inverted[disabled], fieldset[disabled] .button.is-light.is-inverted { + background-color: rgba(0, 0, 0, 0.7); + border-color: transparent; + box-shadow: none; + color: whitesmoke; +} + +.button.is-light.is-loading::after { + border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; +} + +.button.is-light.is-outlined { + background-color: transparent; + border-color: whitesmoke; + color: whitesmoke; +} + +.button.is-light.is-outlined:hover, .button.is-light.is-outlined.is-hovered, .button.is-light.is-outlined:focus, .button.is-light.is-outlined.is-focused { + background-color: whitesmoke; + border-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light.is-outlined.is-loading::after { + border-color: transparent transparent whitesmoke whitesmoke !important; +} + +.button.is-light.is-outlined.is-loading:hover::after, .button.is-light.is-outlined.is-loading.is-hovered::after, .button.is-light.is-outlined.is-loading:focus::after, .button.is-light.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; +} + +.button.is-light.is-outlined[disabled], fieldset[disabled] .button.is-light.is-outlined { + background-color: transparent; + border-color: whitesmoke; + box-shadow: none; + color: whitesmoke; +} + +.button.is-light.is-inverted.is-outlined { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.7); + color: rgba(0, 0, 0, 0.7); +} + +.button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined.is-hovered, .button.is-light.is-inverted.is-outlined:focus, .button.is-light.is-inverted.is-outlined.is-focused { + background-color: rgba(0, 0, 0, 0.7); + color: whitesmoke; +} + +.button.is-light.is-inverted.is-outlined.is-loading:hover::after, .button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-light.is-inverted.is-outlined.is-loading:focus::after, .button.is-light.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent whitesmoke whitesmoke !important; +} + +.button.is-light.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-light.is-inverted.is-outlined { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.7); + box-shadow: none; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-dark { + background-color: #363636; + border-color: transparent; + color: #fff; +} + +.button.is-dark:hover, .button.is-dark.is-hovered { + background-color: #2f2f2f; + border-color: transparent; + color: #fff; +} + +.button.is-dark:focus, .button.is-dark.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); +} + +.button.is-dark:active, .button.is-dark.is-active { + background-color: #292929; + border-color: transparent; + color: #fff; +} + +.button.is-dark[disabled], fieldset[disabled] .button.is-dark { + background-color: #363636; + border-color: #363636; + box-shadow: none; +} + +.button.is-dark.is-inverted { + background-color: #fff; + color: #363636; +} + +.button.is-dark.is-inverted:hover, .button.is-dark.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-dark.is-inverted[disabled], fieldset[disabled] .button.is-dark.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #363636; +} + +.button.is-dark.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-dark.is-outlined { + background-color: transparent; + border-color: #363636; + color: #363636; +} + +.button.is-dark.is-outlined:hover, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, .button.is-dark.is-outlined.is-focused { + background-color: #363636; + border-color: #363636; + color: #fff; +} + +.button.is-dark.is-outlined.is-loading::after { + border-color: transparent transparent #363636 #363636 !important; +} + +.button.is-dark.is-outlined.is-loading:hover::after, .button.is-dark.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-outlined.is-loading:focus::after, .button.is-dark.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-dark.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-outlined { + background-color: transparent; + border-color: #363636; + box-shadow: none; + color: #363636; +} + +.button.is-dark.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined.is-hovered, .button.is-dark.is-inverted.is-outlined:focus, .button.is-dark.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #363636; +} + +.button.is-dark.is-inverted.is-outlined.is-loading:hover::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-dark.is-inverted.is-outlined.is-loading:focus::after, .button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #363636 #363636 !important; +} + +.button.is-dark.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-dark.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-primary { + background-color: #ff5f2e; + border-color: transparent; + color: #fff; +} + +.button.is-primary:hover, .button.is-primary.is-hovered { + background-color: #ff5521; + border-color: transparent; + color: #fff; +} + +.button.is-primary:focus, .button.is-primary.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.button.is-primary:active, .button.is-primary.is-active { + background-color: #ff4b15; + border-color: transparent; + color: #fff; +} + +.button.is-primary[disabled], fieldset[disabled] .button.is-primary { + background-color: #ff5f2e; + border-color: #ff5f2e; + box-shadow: none; +} + +.button.is-primary.is-inverted { + background-color: #fff; + color: #ff5f2e; +} + +.button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #ff5f2e; +} + +.button.is-primary.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-primary.is-outlined { + background-color: transparent; + border-color: #ff5f2e; + color: #ff5f2e; +} + +.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; +} + +.button.is-primary.is-outlined.is-loading::after { + border-color: transparent transparent #ff5f2e #ff5f2e !important; +} + +.button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined { + background-color: transparent; + border-color: #ff5f2e; + box-shadow: none; + color: #ff5f2e; +} + +.button.is-primary.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #ff5f2e; +} + +.button.is-primary.is-inverted.is-outlined.is-loading:hover::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-inverted.is-outlined.is-loading:focus::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #ff5f2e #ff5f2e !important; +} + +.button.is-primary.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-primary.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered { + background-color: #ffe6de; + border-color: transparent; + color: #c72f00; +} + +.button.is-primary.is-light:active, .button.is-primary.is-light.is-active { + background-color: #ffdcd1; + border-color: transparent; + color: #c72f00; +} + +.button.is-link { + background-color: #ff5f2e; + border-color: transparent; + color: #fff; +} + +.button.is-link:hover, .button.is-link.is-hovered { + background-color: #ff5521; + border-color: transparent; + color: #fff; +} + +.button.is-link:focus, .button.is-link.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.button.is-link:active, .button.is-link.is-active { + background-color: #ff4b15; + border-color: transparent; + color: #fff; +} + +.button.is-link[disabled], fieldset[disabled] .button.is-link { + background-color: #ff5f2e; + border-color: #ff5f2e; + box-shadow: none; +} + +.button.is-link.is-inverted { + background-color: #fff; + color: #ff5f2e; +} + +.button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-link.is-inverted[disabled], fieldset[disabled] .button.is-link.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #ff5f2e; +} + +.button.is-link.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-link.is-outlined { + background-color: transparent; + border-color: #ff5f2e; + color: #ff5f2e; +} + +.button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; +} + +.button.is-link.is-outlined.is-loading::after { + border-color: transparent transparent #ff5f2e #ff5f2e !important; +} + +.button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { + background-color: transparent; + border-color: #ff5f2e; + box-shadow: none; + color: #ff5f2e; +} + +.button.is-link.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #ff5f2e; +} + +.button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #ff5f2e #ff5f2e !important; +} + +.button.is-link.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-link.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-link.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { + background-color: #ffe6de; + border-color: transparent; + color: #c72f00; +} + +.button.is-link.is-light:active, .button.is-link.is-light.is-active { + background-color: #ffdcd1; + border-color: transparent; + color: #c72f00; +} + +.button.is-info { + background-color: #3b82f6; + border-color: transparent; + color: #fff; +} + +.button.is-info:hover, .button.is-info.is-hovered { + background-color: #2f7af5; + border-color: transparent; + color: #fff; +} + +.button.is-info:focus, .button.is-info.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(59, 130, 246, 0.25); +} + +.button.is-info:active, .button.is-info.is-active { + background-color: #2372f5; + border-color: transparent; + color: #fff; +} + +.button.is-info[disabled], fieldset[disabled] .button.is-info { + background-color: #3b82f6; + border-color: #3b82f6; + box-shadow: none; +} + +.button.is-info.is-inverted { + background-color: #fff; + color: #3b82f6; +} + +.button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-info.is-inverted[disabled], fieldset[disabled] .button.is-info.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #3b82f6; +} + +.button.is-info.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-info.is-outlined { + background-color: transparent; + border-color: #3b82f6; + color: #3b82f6; +} + +.button.is-info.is-outlined:hover, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined.is-focused { + background-color: #3b82f6; + border-color: #3b82f6; + color: #fff; +} + +.button.is-info.is-outlined.is-loading::after { + border-color: transparent transparent #3b82f6 #3b82f6 !important; +} + +.button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { + background-color: transparent; + border-color: #3b82f6; + box-shadow: none; + color: #3b82f6; +} + +.button.is-info.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined.is-hovered, .button.is-info.is-inverted.is-outlined:focus, .button.is-info.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #3b82f6; +} + +.button.is-info.is-inverted.is-outlined.is-loading:hover::after, .button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-info.is-inverted.is-outlined.is-loading:focus::after, .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #3b82f6 #3b82f6 !important; +} + +.button.is-info.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-info.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-info.is-light { + background-color: #ebf3fe; + color: #0954cd; +} + +.button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { + background-color: #dfebfe; + border-color: transparent; + color: #0954cd; +} + +.button.is-info.is-light:active, .button.is-info.is-light.is-active { + background-color: #d3e3fd; + border-color: transparent; + color: #0954cd; +} + +.button.is-success { + background-color: #10b981; + border-color: transparent; + color: #fff; +} + +.button.is-success:hover, .button.is-success.is-hovered { + background-color: #0fad79; + border-color: transparent; + color: #fff; +} + +.button.is-success:focus, .button.is-success.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(16, 185, 129, 0.25); +} + +.button.is-success:active, .button.is-success.is-active { + background-color: #0ea271; + border-color: transparent; + color: #fff; +} + +.button.is-success[disabled], fieldset[disabled] .button.is-success { + background-color: #10b981; + border-color: #10b981; + box-shadow: none; +} + +.button.is-success.is-inverted { + background-color: #fff; + color: #10b981; +} + +.button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-success.is-inverted[disabled], fieldset[disabled] .button.is-success.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #10b981; +} + +.button.is-success.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-success.is-outlined { + background-color: transparent; + border-color: #10b981; + color: #10b981; +} + +.button.is-success.is-outlined:hover, .button.is-success.is-outlined.is-hovered, .button.is-success.is-outlined:focus, .button.is-success.is-outlined.is-focused { + background-color: #10b981; + border-color: #10b981; + color: #fff; +} + +.button.is-success.is-outlined.is-loading::after { + border-color: transparent transparent #10b981 #10b981 !important; +} + +.button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { + background-color: transparent; + border-color: #10b981; + box-shadow: none; + color: #10b981; +} + +.button.is-success.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined.is-hovered, .button.is-success.is-inverted.is-outlined:focus, .button.is-success.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #10b981; +} + +.button.is-success.is-inverted.is-outlined.is-loading:hover::after, .button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-success.is-inverted.is-outlined.is-loading:focus::after, .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #10b981 #10b981 !important; +} + +.button.is-success.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-success.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-success.is-light { + background-color: #ecfdf8; + color: #0ea473; +} + +.button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { + background-color: #e0fcf3; + border-color: transparent; + color: #0ea473; +} + +.button.is-success.is-light:active, .button.is-success.is-light.is-active { + background-color: #d5fbef; + border-color: transparent; + color: #0ea473; +} + +.button.is-warning { + background-color: #ffb020; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning:hover, .button.is-warning.is-hovered { + background-color: #ffab13; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning:focus, .button.is-warning.is-focused { + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(255, 176, 32, 0.25); +} + +.button.is-warning:active, .button.is-warning.is-active { + background-color: #ffa707; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning[disabled], fieldset[disabled] .button.is-warning { + background-color: #ffb020; + border-color: #ffb020; + box-shadow: none; +} + +.button.is-warning.is-inverted { + background-color: rgba(0, 0, 0, 0.7); + color: #ffb020; +} + +.button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { + background-color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning.is-inverted[disabled], fieldset[disabled] .button.is-warning.is-inverted { + background-color: rgba(0, 0, 0, 0.7); + border-color: transparent; + box-shadow: none; + color: #ffb020; +} + +.button.is-warning.is-loading::after { + border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; +} + +.button.is-warning.is-outlined { + background-color: transparent; + border-color: #ffb020; + color: #ffb020; +} + +.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined.is-hovered, .button.is-warning.is-outlined:focus, .button.is-warning.is-outlined.is-focused { + background-color: #ffb020; + border-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning.is-outlined.is-loading::after { + border-color: transparent transparent #ffb020 #ffb020 !important; +} + +.button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; +} + +.button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { + background-color: transparent; + border-color: #ffb020; + box-shadow: none; + color: #ffb020; +} + +.button.is-warning.is-inverted.is-outlined { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.7); + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined.is-hovered, .button.is-warning.is-inverted.is-outlined:focus, .button.is-warning.is-inverted.is-outlined.is-focused { + background-color: rgba(0, 0, 0, 0.7); + color: #ffb020; +} + +.button.is-warning.is-inverted.is-outlined.is-loading:hover::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-inverted.is-outlined.is-loading:focus::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #ffb020 #ffb020 !important; +} + +.button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.7); + box-shadow: none; + color: rgba(0, 0, 0, 0.7); +} + +.button.is-warning.is-light { + background-color: #fff8eb; + color: #946000; +} + +.button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { + background-color: #fff3de; + border-color: transparent; + color: #946000; +} + +.button.is-warning.is-light:active, .button.is-warning.is-light.is-active { + background-color: #ffefd1; + border-color: transparent; + color: #946000; +} + +.button.is-danger { + background-color: #f04438; + border-color: transparent; + color: #fff; +} + +.button.is-danger:hover, .button.is-danger.is-hovered { + background-color: #ef392c; + border-color: transparent; + color: #fff; +} + +.button.is-danger:focus, .button.is-danger.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { + box-shadow: 0 0 0 0.125em rgba(240, 68, 56, 0.25); +} + +.button.is-danger:active, .button.is-danger.is-active { + background-color: #ee2e20; + border-color: transparent; + color: #fff; +} + +.button.is-danger[disabled], fieldset[disabled] .button.is-danger { + background-color: #f04438; + border-color: #f04438; + box-shadow: none; +} + +.button.is-danger.is-inverted { + background-color: #fff; + color: #f04438; +} + +.button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-danger.is-inverted[disabled], fieldset[disabled] .button.is-danger.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #f04438; +} + +.button.is-danger.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-danger.is-outlined { + background-color: transparent; + border-color: #f04438; + color: #f04438; +} + +.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused { + background-color: #f04438; + border-color: #f04438; + color: #fff; +} + +.button.is-danger.is-outlined.is-loading::after { + border-color: transparent transparent #f04438 #f04438 !important; +} + +.button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined { + background-color: transparent; + border-color: #f04438; + box-shadow: none; + color: #f04438; +} + +.button.is-danger.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #f04438; +} + +.button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #f04438 #f04438 !important; +} + +.button.is-danger.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; +} + +.button.is-danger.is-light { + background-color: #feedec; + color: #cc1c0f; +} + +.button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered { + background-color: #fde2e0; + border-color: transparent; + color: #cc1c0f; +} + +.button.is-danger.is-light:active, .button.is-danger.is-light.is-active { + background-color: #fcd7d4; + border-color: transparent; + color: #cc1c0f; +} + +.button.is-small { + font-size: 0.75rem; +} + +.button.is-small:not(.is-rounded) { + border-radius: 8px; +} + +.button.is-normal { + font-size: 1rem; +} + +.button.is-medium { + font-size: 1.25rem; +} + +.button.is-large { + font-size: 1.5rem; +} + +.button[disabled], fieldset[disabled] .button { + background-color: #0b0e14; + border-color: #232a38; + box-shadow: none; + opacity: 0.5; +} + +.button.is-fullwidth { + display: flex; + width: 100%; +} + +.button.is-loading { + color: transparent !important; + pointer-events: none; +} + +.button.is-loading::after { + position: absolute; + left: calc(50% - (1em * 0.5)); + top: calc(50% - (1em * 0.5)); + position: absolute !important; +} + +.button.is-static { + background-color: #161b25; + border-color: #232a38; + color: #8b95a7; + box-shadow: none; + pointer-events: none; +} + +.button.is-rounded { + border-radius: 999px; + padding-left: calc(1em + 0.25em); + padding-right: calc(1em + 0.25em); +} + +.buttons { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.buttons .button { + margin-bottom: 0.5rem; +} + +.buttons .button:not(:last-child):not(.is-fullwidth) { + margin-right: 0.5rem; +} + +.buttons:last-child { + margin-bottom: -0.5rem; +} + +.buttons:not(:last-child) { + margin-bottom: 1rem; +} + +.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large) { + font-size: 0.75rem; +} + +.buttons.are-small .button:not(.is-normal):not(.is-medium):not(.is-large):not(.is-rounded) { + border-radius: 8px; +} + +.buttons.are-medium .button:not(.is-small):not(.is-normal):not(.is-large) { + font-size: 1.25rem; +} + +.buttons.are-large .button:not(.is-small):not(.is-normal):not(.is-medium) { + font-size: 1.5rem; +} + +.buttons.has-addons .button:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.buttons.has-addons .button:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-right: -1px; +} + +.buttons.has-addons .button:last-child { + margin-right: 0; +} + +.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { + z-index: 2; +} + +.buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected { + z-index: 3; +} + +.buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover { + z-index: 4; +} + +.buttons.has-addons .button.is-expanded { + flex-grow: 1; + flex-shrink: 1; +} + +.buttons.is-centered { + justify-content: center; +} + +.buttons.is-centered:not(.has-addons) .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.buttons.is-right { + justify-content: flex-end; +} + +.buttons.is-right:not(.has-addons) .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +@media screen and (max-width: 768px) { + .button.is-responsive.is-small { + font-size: 0.5625rem; + } + .button.is-responsive, +.button.is-responsive.is-normal { + font-size: 0.65625rem; + } + .button.is-responsive.is-medium { + font-size: 0.75rem; + } + .button.is-responsive.is-large { + font-size: 1rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .button.is-responsive.is-small { + font-size: 0.65625rem; + } + .button.is-responsive, +.button.is-responsive.is-normal { + font-size: 0.75rem; + } + .button.is-responsive.is-medium { + font-size: 1rem; + } + .button.is-responsive.is-large { + font-size: 1.25rem; + } +} + +.container { + flex-grow: 1; + margin: 0 auto; + position: relative; + width: auto; +} + +.container.is-fluid { + max-width: none !important; + padding-left: 32px; + padding-right: 32px; + width: 100%; +} + +@media screen and (min-width: 1024px) { + .container { + max-width: 960px; + } +} + +@media screen and (max-width: 1215px) { + .container.is-widescreen:not(.is-max-desktop) { + max-width: 1152px; + } +} + +@media screen and (max-width: 1407px) { + .container.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) { + max-width: 1344px; + } +} + +@media screen and (min-width: 1216px) { + .container:not(.is-max-desktop) { + max-width: 1152px; + } +} + +@media screen and (min-width: 1408px) { + .container:not(.is-max-desktop):not(.is-max-widescreen) { + max-width: 1344px; + } +} + +.content li + li { + margin-top: 0.25em; +} + +.content p:not(:last-child), +.content dl:not(:last-child), +.content ol:not(:last-child), +.content ul:not(:last-child), +.content blockquote:not(:last-child), +.content pre:not(:last-child), +.content table:not(:last-child) { + margin-bottom: 1em; +} + +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + color: #363636; + font-weight: 600; + line-height: 1.125; +} + +.content h1 { + font-size: 2em; + margin-bottom: 0.5em; +} + +.content h1:not(:first-child) { + margin-top: 1em; +} + +.content h2 { + font-size: 1.75em; + margin-bottom: 0.5714em; +} + +.content h2:not(:first-child) { + margin-top: 1.1428em; +} + +.content h3 { + font-size: 1.5em; + margin-bottom: 0.6666em; +} + +.content h3:not(:first-child) { + margin-top: 1.3333em; +} + +.content h4 { + font-size: 1.25em; + margin-bottom: 0.8em; +} + +.content h5 { + font-size: 1.125em; + margin-bottom: 0.8888em; +} + +.content h6 { + font-size: 1em; + margin-bottom: 1em; +} + +.content blockquote { + background-color: whitesmoke; + border-left: 5px solid #232a38; + padding: 1.25em 1.5em; +} + +.content ol { + list-style-position: outside; + margin-left: 2em; + margin-top: 1em; +} + +.content ol:not([type]) { + list-style-type: decimal; +} + +.content ol:not([type]).is-lower-alpha { + list-style-type: lower-alpha; +} + +.content ol:not([type]).is-lower-roman { + list-style-type: lower-roman; +} + +.content ol:not([type]).is-upper-alpha { + list-style-type: upper-alpha; +} + +.content ol:not([type]).is-upper-roman { + list-style-type: upper-roman; +} + +.content ul { + list-style: disc outside; + margin-left: 2em; + margin-top: 1em; +} + +.content ul ul { + list-style-type: circle; + margin-top: 0.5em; +} + +.content ul ul ul { + list-style-type: square; +} + +.content dd { + margin-left: 2em; +} + +.content figure { + margin-left: 2em; + margin-right: 2em; + text-align: center; +} + +.content figure:not(:first-child) { + margin-top: 2em; +} + +.content figure:not(:last-child) { + margin-bottom: 2em; +} + +.content figure img { + display: inline-block; +} + +.content figure figcaption { + font-style: italic; +} + +.content pre { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + padding: 1.25em 1.5em; + white-space: pre; + word-wrap: normal; +} + +.content sup, +.content sub { + font-size: 75%; +} + +.content table { + width: 100%; +} + +.content table td, +.content table th { + border: 1px solid #232a38; + border-width: 0 0 1px; + padding: 0.5em 0.75em; + vertical-align: top; +} + +.content table th { + color: #363636; +} + +.content table th:not([align]) { + text-align: inherit; +} + +.content table thead td, +.content table thead th { + border-width: 0 0 2px; + color: #363636; +} + +.content table tfoot td, +.content table tfoot th { + border-width: 2px 0 0; + color: #363636; +} + +.content table tbody tr:last-child td, +.content table tbody tr:last-child th { + border-bottom-width: 0; +} + +.content .tabs li + li { + margin-top: 0; +} + +.content.is-small { + font-size: 0.75rem; +} + +.content.is-normal { + font-size: 1rem; +} + +.content.is-medium { + font-size: 1.25rem; +} + +.content.is-large { + font-size: 1.5rem; +} + +.icon { + align-items: center; + display: inline-flex; + justify-content: center; + height: 1.5rem; + width: 1.5rem; +} + +.icon.is-small { + height: 1rem; + width: 1rem; +} + +.icon.is-medium { + height: 2rem; + width: 2rem; +} + +.icon.is-large { + height: 3rem; + width: 3rem; +} + +.icon-text { + align-items: flex-start; + color: inherit; + display: inline-flex; + flex-wrap: wrap; + line-height: 1.5rem; + vertical-align: top; +} + +.icon-text .icon { + flex-grow: 0; + flex-shrink: 0; +} + +.icon-text .icon:not(:last-child) { + margin-right: 0.25em; +} + +.icon-text .icon:not(:first-child) { + margin-left: 0.25em; +} + +div.icon-text { + display: flex; +} + +.image { + display: block; + position: relative; +} + +.image img { + display: block; + height: auto; + width: 100%; +} + +.image img.is-rounded { + border-radius: 999px; +} + +.image.is-fullwidth { + width: 100%; +} + +.image.is-square img, +.image.is-square .has-ratio, .image.is-1by1 img, +.image.is-1by1 .has-ratio, .image.is-5by4 img, +.image.is-5by4 .has-ratio, .image.is-4by3 img, +.image.is-4by3 .has-ratio, .image.is-3by2 img, +.image.is-3by2 .has-ratio, .image.is-5by3 img, +.image.is-5by3 .has-ratio, .image.is-16by9 img, +.image.is-16by9 .has-ratio, .image.is-2by1 img, +.image.is-2by1 .has-ratio, .image.is-3by1 img, +.image.is-3by1 .has-ratio, .image.is-4by5 img, +.image.is-4by5 .has-ratio, .image.is-3by4 img, +.image.is-3by4 .has-ratio, .image.is-2by3 img, +.image.is-2by3 .has-ratio, .image.is-3by5 img, +.image.is-3by5 .has-ratio, .image.is-9by16 img, +.image.is-9by16 .has-ratio, .image.is-1by2 img, +.image.is-1by2 .has-ratio, .image.is-1by3 img, +.image.is-1by3 .has-ratio { + height: 100%; + width: 100%; +} + +.image.is-square, .image.is-1by1 { + padding-top: 100%; +} + +.image.is-5by4 { + padding-top: 80%; +} + +.image.is-4by3 { + padding-top: 75%; +} + +.image.is-3by2 { + padding-top: 66.6666%; +} + +.image.is-5by3 { + padding-top: 60%; +} + +.image.is-16by9 { + padding-top: 56.25%; +} + +.image.is-2by1 { + padding-top: 50%; +} + +.image.is-3by1 { + padding-top: 33.3333%; +} + +.image.is-4by5 { + padding-top: 125%; +} + +.image.is-3by4 { + padding-top: 133.3333%; +} + +.image.is-2by3 { + padding-top: 150%; +} + +.image.is-3by5 { + padding-top: 166.6666%; +} + +.image.is-9by16 { + padding-top: 177.7777%; +} + +.image.is-1by2 { + padding-top: 200%; +} + +.image.is-1by3 { + padding-top: 300%; +} + +.image.is-16x16 { + height: 16px; + width: 16px; +} + +.image.is-24x24 { + height: 24px; + width: 24px; +} + +.image.is-32x32 { + height: 32px; + width: 32px; +} + +.image.is-48x48 { + height: 48px; + width: 48px; +} + +.image.is-64x64 { + height: 64px; + width: 64px; +} + +.image.is-96x96 { + height: 96px; + width: 96px; +} + +.image.is-128x128 { + height: 128px; + width: 128px; +} + +.notification { + background-color: whitesmoke; + border-radius: 10px; + position: relative; + padding: 1.25rem 2.5rem 1.25rem 1.5rem; +} + +.notification a:not(.button):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; +} + +.notification strong { + color: currentColor; +} + +.notification code, +.notification pre { + background: #0b0e14; +} + +.notification pre code { + background: transparent; +} + +.notification > .delete { + right: 0.5rem; + position: absolute; + top: 0.5rem; +} + +.notification .title, +.notification .subtitle, +.notification .content { + color: currentColor; +} + +.notification.is-white { + background-color: white; + color: #0a0a0a; +} + +.notification.is-black { + background-color: #0a0a0a; + color: white; +} + +.notification.is-light { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.notification.is-dark { + background-color: #363636; + color: #fff; +} + +.notification.is-primary { + background-color: #ff5f2e; + color: #fff; +} + +.notification.is-primary.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.notification.is-link { + background-color: #ff5f2e; + color: #fff; +} + +.notification.is-link.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.notification.is-info { + background-color: #3b82f6; + color: #fff; +} + +.notification.is-info.is-light { + background-color: #ebf3fe; + color: #0954cd; +} + +.notification.is-success { + background-color: #10b981; + color: #fff; +} + +.notification.is-success.is-light { + background-color: #ecfdf8; + color: #0ea473; +} + +.notification.is-warning { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.notification.is-warning.is-light { + background-color: #fff8eb; + color: #946000; +} + +.notification.is-danger { + background-color: #f04438; + color: #fff; +} + +.notification.is-danger.is-light { + background-color: #feedec; + color: #cc1c0f; +} + +.progress { + -moz-appearance: none; + -webkit-appearance: none; + border: none; + border-radius: 999px; + display: block; + height: 1rem; + overflow: hidden; + padding: 0; + width: 100%; +} + +.progress::-webkit-progress-bar { + background-color: #232a38; +} + +.progress::-webkit-progress-value { + background-color: #e8ecf4; +} + +.progress::-moz-progress-bar { + background-color: #e8ecf4; +} + +.progress::-ms-fill { + background-color: #e8ecf4; + border: none; +} + +.progress.is-white::-webkit-progress-value { + background-color: white; +} + +.progress.is-white::-moz-progress-bar { + background-color: white; +} + +.progress.is-white::-ms-fill { + background-color: white; +} + +.progress.is-white:indeterminate { + background-image: linear-gradient(to right, white 30%, #232a38 30%); +} + +.progress.is-black::-webkit-progress-value { + background-color: #0a0a0a; +} + +.progress.is-black::-moz-progress-bar { + background-color: #0a0a0a; +} + +.progress.is-black::-ms-fill { + background-color: #0a0a0a; +} + +.progress.is-black:indeterminate { + background-image: linear-gradient(to right, #0a0a0a 30%, #232a38 30%); +} + +.progress.is-light::-webkit-progress-value { + background-color: whitesmoke; +} + +.progress.is-light::-moz-progress-bar { + background-color: whitesmoke; +} + +.progress.is-light::-ms-fill { + background-color: whitesmoke; +} + +.progress.is-light:indeterminate { + background-image: linear-gradient(to right, whitesmoke 30%, #232a38 30%); +} + +.progress.is-dark::-webkit-progress-value { + background-color: #363636; +} + +.progress.is-dark::-moz-progress-bar { + background-color: #363636; +} + +.progress.is-dark::-ms-fill { + background-color: #363636; +} + +.progress.is-dark:indeterminate { + background-image: linear-gradient(to right, #363636 30%, #232a38 30%); +} + +.progress.is-primary::-webkit-progress-value { + background-color: #ff5f2e; +} + +.progress.is-primary::-moz-progress-bar { + background-color: #ff5f2e; +} + +.progress.is-primary::-ms-fill { + background-color: #ff5f2e; +} + +.progress.is-primary:indeterminate { + background-image: linear-gradient(to right, #ff5f2e 30%, #232a38 30%); +} + +.progress.is-link::-webkit-progress-value { + background-color: #ff5f2e; +} + +.progress.is-link::-moz-progress-bar { + background-color: #ff5f2e; +} + +.progress.is-link::-ms-fill { + background-color: #ff5f2e; +} + +.progress.is-link:indeterminate { + background-image: linear-gradient(to right, #ff5f2e 30%, #232a38 30%); +} + +.progress.is-info::-webkit-progress-value { + background-color: #3b82f6; +} + +.progress.is-info::-moz-progress-bar { + background-color: #3b82f6; +} + +.progress.is-info::-ms-fill { + background-color: #3b82f6; +} + +.progress.is-info:indeterminate { + background-image: linear-gradient(to right, #3b82f6 30%, #232a38 30%); +} + +.progress.is-success::-webkit-progress-value { + background-color: #10b981; +} + +.progress.is-success::-moz-progress-bar { + background-color: #10b981; +} + +.progress.is-success::-ms-fill { + background-color: #10b981; +} + +.progress.is-success:indeterminate { + background-image: linear-gradient(to right, #10b981 30%, #232a38 30%); +} + +.progress.is-warning::-webkit-progress-value { + background-color: #ffb020; +} + +.progress.is-warning::-moz-progress-bar { + background-color: #ffb020; +} + +.progress.is-warning::-ms-fill { + background-color: #ffb020; +} + +.progress.is-warning:indeterminate { + background-image: linear-gradient(to right, #ffb020 30%, #232a38 30%); +} + +.progress.is-danger::-webkit-progress-value { + background-color: #f04438; +} + +.progress.is-danger::-moz-progress-bar { + background-color: #f04438; +} + +.progress.is-danger::-ms-fill { + background-color: #f04438; +} + +.progress.is-danger:indeterminate { + background-image: linear-gradient(to right, #f04438 30%, #232a38 30%); +} + +.progress:indeterminate { + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; + background-color: #232a38; + background-image: linear-gradient(to right, #e8ecf4 30%, #232a38 30%); + background-position: top left; + background-repeat: no-repeat; + background-size: 150% 150%; +} + +.progress:indeterminate::-webkit-progress-bar { + background-color: transparent; +} + +.progress:indeterminate::-moz-progress-bar { + background-color: transparent; +} + +.progress:indeterminate::-ms-fill { + animation-name: none; +} + +.progress.is-small { + height: 0.75rem; +} + +.progress.is-medium { + height: 1.25rem; +} + +.progress.is-large { + height: 1.5rem; +} + +@keyframes moveIndeterminate { + from { + background-position: 200% 0; + } + to { + background-position: -200% 0; + } +} + +.table { + background-color: #0b0e14; + color: #363636; +} + +.table td, +.table th { + border: 1px solid #232a38; + border-width: 0 0 1px; + padding: 0.5em 0.75em; + vertical-align: top; +} + +.table td.is-white, +.table th.is-white { + background-color: white; + border-color: white; + color: #0a0a0a; +} + +.table td.is-black, +.table th.is-black { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; +} + +.table td.is-light, +.table th.is-light { + background-color: whitesmoke; + border-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.table td.is-dark, +.table th.is-dark { + background-color: #363636; + border-color: #363636; + color: #fff; +} + +.table td.is-primary, +.table th.is-primary { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; +} + +.table td.is-link, +.table th.is-link { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; +} + +.table td.is-info, +.table th.is-info { + background-color: #3b82f6; + border-color: #3b82f6; + color: #fff; +} + +.table td.is-success, +.table th.is-success { + background-color: #10b981; + border-color: #10b981; + color: #fff; +} + +.table td.is-warning, +.table th.is-warning { + background-color: #ffb020; + border-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.table td.is-danger, +.table th.is-danger { + background-color: #f04438; + border-color: #f04438; + color: #fff; +} + +.table td.is-narrow, +.table th.is-narrow { + white-space: nowrap; + width: 1%; +} + +.table td.is-selected, +.table th.is-selected { + background-color: #ff5f2e; + color: #fff; +} + +.table td.is-selected a, +.table td.is-selected strong, +.table th.is-selected a, +.table th.is-selected strong { + color: currentColor; +} + +.table td.is-vcentered, +.table th.is-vcentered { + vertical-align: middle; +} + +.table th { + color: #363636; +} + +.table th:not([align]) { + text-align: left; +} + +.table tr.is-selected { + background-color: #ff5f2e; + color: #fff; +} + +.table tr.is-selected a, +.table tr.is-selected strong { + color: currentColor; +} + +.table tr.is-selected td, +.table tr.is-selected th { + border-color: #fff; + color: currentColor; +} + +.table thead { + background-color: transparent; +} + +.table thead td, +.table thead th { + border-width: 0 0 2px; + color: #363636; +} + +.table tfoot { + background-color: transparent; +} + +.table tfoot td, +.table tfoot th { + border-width: 2px 0 0; + color: #363636; +} + +.table tbody { + background-color: transparent; +} + +.table tbody tr:last-child td, +.table tbody tr:last-child th { + border-bottom-width: 0; +} + +.table.is-bordered td, +.table.is-bordered th { + border-width: 1px; +} + +.table.is-bordered tr:last-child td, +.table.is-bordered tr:last-child th { + border-bottom-width: 1px; +} + +.table.is-fullwidth { + width: 100%; +} + +.table.is-hoverable tbody tr:not(.is-selected):hover { + background-color: #11151d; +} + +.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { + background-color: #11151d; +} + +.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) { + background-color: #161b25; +} + +.table.is-narrow td, +.table.is-narrow th { + padding: 0.25em 0.5em; +} + +.table.is-striped tbody tr:not(.is-selected):nth-child(even) { + background-color: #11151d; +} + +.table-container { + -webkit-overflow-scrolling: touch; + overflow: auto; + overflow-y: hidden; + max-width: 100%; +} + +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.tags .tag { + margin-bottom: 0.5rem; +} + +.tags .tag:not(:last-child) { + margin-right: 0.5rem; +} + +.tags:last-child { + margin-bottom: -0.5rem; +} + +.tags:not(:last-child) { + margin-bottom: 1rem; +} + +.tags.are-medium .tag:not(.is-normal):not(.is-large) { + font-size: 1rem; +} + +.tags.are-large .tag:not(.is-normal):not(.is-medium) { + font-size: 1.25rem; +} + +.tags.is-centered { + justify-content: center; +} + +.tags.is-centered .tag { + margin-right: 0.25rem; + margin-left: 0.25rem; +} + +.tags.is-right { + justify-content: flex-end; +} + +.tags.is-right .tag:not(:first-child) { + margin-left: 0.5rem; +} + +.tags.is-right .tag:not(:last-child) { + margin-right: 0; +} + +.tags.has-addons .tag { + margin-right: 0; +} + +.tags.has-addons .tag:not(:first-child) { + margin-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.tags.has-addons .tag:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.tag:not(body) { + align-items: center; + background-color: whitesmoke; + border-radius: 10px; + color: #e8ecf4; + display: inline-flex; + font-size: 0.75rem; + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; +} + +.tag:not(body) .delete { + margin-left: 0.25rem; + margin-right: -0.375rem; +} + +.tag:not(body).is-white { + background-color: white; + color: #0a0a0a; +} + +.tag:not(body).is-black { + background-color: #0a0a0a; + color: white; +} + +.tag:not(body).is-light { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.tag:not(body).is-dark { + background-color: #363636; + color: #fff; +} + +.tag:not(body).is-primary { + background-color: #ff5f2e; + color: #fff; +} + +.tag:not(body).is-primary.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.tag:not(body).is-link { + background-color: #ff5f2e; + color: #fff; +} + +.tag:not(body).is-link.is-light { + background-color: #ffefeb; + color: #c72f00; +} + +.tag:not(body).is-info { + background-color: #3b82f6; + color: #fff; +} + +.tag:not(body).is-info.is-light { + background-color: #ebf3fe; + color: #0954cd; +} + +.tag:not(body).is-success { + background-color: #10b981; + color: #fff; +} + +.tag:not(body).is-success.is-light { + background-color: #ecfdf8; + color: #0ea473; +} + +.tag:not(body).is-warning { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.tag:not(body).is-warning.is-light { + background-color: #fff8eb; + color: #946000; +} + +.tag:not(body).is-danger { + background-color: #f04438; + color: #fff; +} + +.tag:not(body).is-danger.is-light { + background-color: #feedec; + color: #cc1c0f; +} + +.tag:not(body).is-normal { + font-size: 0.75rem; +} + +.tag:not(body).is-medium { + font-size: 1rem; +} + +.tag:not(body).is-large { + font-size: 1.25rem; +} + +.tag:not(body) .icon:first-child:not(:last-child) { + margin-left: -0.375em; + margin-right: 0.1875em; +} + +.tag:not(body) .icon:last-child:not(:first-child) { + margin-left: 0.1875em; + margin-right: -0.375em; +} + +.tag:not(body) .icon:first-child:last-child { + margin-left: -0.375em; + margin-right: -0.375em; +} + +.tag:not(body).is-delete { + margin-left: 1px; + padding: 0; + position: relative; + width: 2em; +} + +.tag:not(body).is-delete::before, .tag:not(body).is-delete::after { + background-color: currentColor; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; +} + +.tag:not(body).is-delete::before { + height: 1px; + width: 50%; +} + +.tag:not(body).is-delete::after { + height: 50%; + width: 1px; +} + +.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus { + background-color: #e8e8e8; +} + +.tag:not(body).is-delete:active { + background-color: #dbdbdb; +} + +.tag:not(body).is-rounded { + border-radius: 999px; +} + +a.tag:hover { + text-decoration: underline; +} + +.title, +.subtitle { + word-break: break-word; +} + +.title em, +.title span, +.subtitle em, +.subtitle span { + font-weight: inherit; +} + +.title sub, +.subtitle sub { + font-size: 0.75em; +} + +.title sup, +.subtitle sup { + font-size: 0.75em; +} + +.title .tag, +.subtitle .tag { + vertical-align: middle; +} + +.title { + color: #363636; + font-size: 2rem; + font-weight: 600; + line-height: 1.125; +} + +.title strong { + color: inherit; + font-weight: inherit; +} + +.title:not(.is-spaced) + .subtitle { + margin-top: -1.25rem; +} + +.title.is-1 { + font-size: 3rem; +} + +.title.is-2 { + font-size: 2.5rem; +} + +.title.is-3 { + font-size: 2rem; +} + +.title.is-4 { + font-size: 1.5rem; +} + +.title.is-5 { + font-size: 1.25rem; +} + +.title.is-6 { + font-size: 1rem; +} + +.title.is-7 { + font-size: 0.75rem; +} + +.subtitle { + color: #e8ecf4; + font-size: 1.25rem; + font-weight: 400; + line-height: 1.25; +} + +.subtitle strong { + color: #363636; + font-weight: 600; +} + +.subtitle:not(.is-spaced) + .title { + margin-top: -1.25rem; +} + +.subtitle.is-1 { + font-size: 3rem; +} + +.subtitle.is-2 { + font-size: 2.5rem; +} + +.subtitle.is-3 { + font-size: 2rem; +} + +.subtitle.is-4 { + font-size: 1.5rem; +} + +.subtitle.is-5 { + font-size: 1.25rem; +} + +.subtitle.is-6 { + font-size: 1rem; +} + +.subtitle.is-7 { + font-size: 0.75rem; +} + +.heading { + display: block; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.number { + align-items: center; + background-color: whitesmoke; + border-radius: 999px; + display: inline-flex; + font-size: 1.25rem; + height: 2em; + justify-content: center; + margin-right: 1.5rem; + min-width: 2.5em; + padding: 0.25rem 0.5rem; + text-align: center; + vertical-align: top; +} + +/* Bulma Form */ +.select select, .textarea, .input { + background-color: #0b0e14; + border-color: #232a38; + border-radius: 10px; + color: #363636; +} + +.select select::-moz-placeholder, .textarea::-moz-placeholder, .input::-moz-placeholder { + color: rgba(54, 54, 54, 0.3); +} + +.select select::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .input::-webkit-input-placeholder { + color: rgba(54, 54, 54, 0.3); +} + +.select select:-moz-placeholder, .textarea:-moz-placeholder, .input:-moz-placeholder { + color: rgba(54, 54, 54, 0.3); +} + +.select select:-ms-input-placeholder, .textarea:-ms-input-placeholder, .input:-ms-input-placeholder { + color: rgba(54, 54, 54, 0.3); +} + +.select select:hover, .textarea:hover, .input:hover, .select select.is-hovered, .is-hovered.textarea, .is-hovered.input { + border-color: #b5b5b5; +} + +.select select:focus, .textarea:focus, .input:focus, .select select.is-focused, .is-focused.textarea, .is-focused.input, .select select:active, .textarea:active, .input:active, .select select.is-active, .is-active.textarea, .is-active.input { + border-color: #ff5f2e; + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input { + background-color: whitesmoke; + border-color: whitesmoke; + box-shadow: none; + color: #8b95a7; +} + +.select select[disabled]::-moz-placeholder, [disabled].textarea::-moz-placeholder, [disabled].input::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder { + color: rgba(139, 149, 167, 0.3); +} + +.select select[disabled]::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder { + color: rgba(139, 149, 167, 0.3); +} + +.select select[disabled]:-moz-placeholder, [disabled].textarea:-moz-placeholder, [disabled].input:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder { + color: rgba(139, 149, 167, 0.3); +} + +.select select[disabled]:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder { + color: rgba(139, 149, 167, 0.3); +} + +.textarea, .input { + box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); + max-width: 100%; + width: 100%; +} + +[readonly].textarea, [readonly].input { + box-shadow: none; +} + +.is-white.textarea, .is-white.input { + border-color: white; +} + +.is-white.textarea:focus, .is-white.input:focus, .is-white.is-focused.textarea, .is-white.is-focused.input, .is-white.textarea:active, .is-white.input:active, .is-white.is-active.textarea, .is-white.is-active.input { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); +} + +.is-black.textarea, .is-black.input { + border-color: #0a0a0a; +} + +.is-black.textarea:focus, .is-black.input:focus, .is-black.is-focused.textarea, .is-black.is-focused.input, .is-black.textarea:active, .is-black.input:active, .is-black.is-active.textarea, .is-black.is-active.input { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); +} + +.is-light.textarea, .is-light.input { + border-color: whitesmoke; +} + +.is-light.textarea:focus, .is-light.input:focus, .is-light.is-focused.textarea, .is-light.is-focused.input, .is-light.textarea:active, .is-light.input:active, .is-light.is-active.textarea, .is-light.is-active.input { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); +} + +.is-dark.textarea, .is-dark.input { + border-color: #363636; +} + +.is-dark.textarea:focus, .is-dark.input:focus, .is-dark.is-focused.textarea, .is-dark.is-focused.input, .is-dark.textarea:active, .is-dark.input:active, .is-dark.is-active.textarea, .is-dark.is-active.input { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); +} + +.is-primary.textarea, .is-primary.input { + border-color: #ff5f2e; +} + +.is-primary.textarea:focus, .is-primary.input:focus, .is-primary.is-focused.textarea, .is-primary.is-focused.input, .is-primary.textarea:active, .is-primary.input:active, .is-primary.is-active.textarea, .is-primary.is-active.input { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.is-link.textarea, .is-link.input { + border-color: #ff5f2e; +} + +.is-link.textarea:focus, .is-link.input:focus, .is-link.is-focused.textarea, .is-link.is-focused.input, .is-link.textarea:active, .is-link.input:active, .is-link.is-active.textarea, .is-link.is-active.input { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.is-info.textarea, .is-info.input { + border-color: #3b82f6; +} + +.is-info.textarea:focus, .is-info.input:focus, .is-info.is-focused.textarea, .is-info.is-focused.input, .is-info.textarea:active, .is-info.input:active, .is-info.is-active.textarea, .is-info.is-active.input { + box-shadow: 0 0 0 0.125em rgba(59, 130, 246, 0.25); +} + +.is-success.textarea, .is-success.input { + border-color: #10b981; +} + +.is-success.textarea:focus, .is-success.input:focus, .is-success.is-focused.textarea, .is-success.is-focused.input, .is-success.textarea:active, .is-success.input:active, .is-success.is-active.textarea, .is-success.is-active.input { + box-shadow: 0 0 0 0.125em rgba(16, 185, 129, 0.25); +} + +.is-warning.textarea, .is-warning.input { + border-color: #ffb020; +} + +.is-warning.textarea:focus, .is-warning.input:focus, .is-warning.is-focused.textarea, .is-warning.is-focused.input, .is-warning.textarea:active, .is-warning.input:active, .is-warning.is-active.textarea, .is-warning.is-active.input { + box-shadow: 0 0 0 0.125em rgba(255, 176, 32, 0.25); +} + +.is-danger.textarea, .is-danger.input { + border-color: #f04438; +} + +.is-danger.textarea:focus, .is-danger.input:focus, .is-danger.is-focused.textarea, .is-danger.is-focused.input, .is-danger.textarea:active, .is-danger.input:active, .is-danger.is-active.textarea, .is-danger.is-active.input { + box-shadow: 0 0 0 0.125em rgba(240, 68, 56, 0.25); +} + +.is-small.textarea, .is-small.input { + border-radius: 8px; + font-size: 0.75rem; +} + +.is-medium.textarea, .is-medium.input { + font-size: 1.25rem; +} + +.is-large.textarea, .is-large.input { + font-size: 1.5rem; +} + +.is-fullwidth.textarea, .is-fullwidth.input { + display: block; + width: 100%; +} + +.is-inline.textarea, .is-inline.input { + display: inline; + width: auto; +} + +.input.is-rounded { + border-radius: 999px; + padding-left: calc(calc(0.75em - 1px) + 0.375em); + padding-right: calc(calc(0.75em - 1px) + 0.375em); +} + +.input.is-static { + background-color: transparent; + border-color: transparent; + box-shadow: none; + padding-left: 0; + padding-right: 0; +} + +.textarea { + display: block; + max-width: 100%; + min-width: 100%; + padding: calc(0.75em - 1px); + resize: vertical; +} + +.textarea:not([rows]) { + max-height: 40em; + min-height: 8em; +} + +.textarea[rows] { + height: initial; +} + +.textarea.has-fixed-size { + resize: none; +} + +.radio, .checkbox { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; +} + +.radio input, .checkbox input { + cursor: pointer; +} + +.radio:hover, .checkbox:hover { + color: #363636; +} + +[disabled].radio, [disabled].checkbox, fieldset[disabled] .radio, fieldset[disabled] .checkbox, +.radio input[disabled], +.checkbox input[disabled] { + color: #8b95a7; + cursor: not-allowed; +} + +.radio + .radio { + margin-left: 0.5em; +} + +.select { + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; +} + +.select:not(.is-multiple) { + height: 2.5em; +} + +.select:not(.is-multiple):not(.is-loading)::after { + border-color: #ff5f2e; + right: 1.125em; + z-index: 4; +} + +.select.is-rounded select { + border-radius: 999px; + padding-left: 1em; +} + +.select select { + cursor: pointer; + display: block; + font-size: 1em; + max-width: 100%; + outline: none; +} + +.select select::-ms-expand { + display: none; +} + +.select select[disabled]:hover, fieldset[disabled] .select select:hover { + border-color: whitesmoke; +} + +.select select:not([multiple]) { + padding-right: 2.5em; +} + +.select select[multiple] { + height: auto; + padding: 0; +} + +.select select[multiple] option { + padding: 0.5em 1em; +} + +.select:not(.is-multiple):not(.is-loading):hover::after { + border-color: #363636; +} + +.select.is-white:not(:hover)::after { + border-color: white; +} + +.select.is-white select { + border-color: white; +} + +.select.is-white select:hover, .select.is-white select.is-hovered { + border-color: #f2f2f2; +} + +.select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); +} + +.select.is-black:not(:hover)::after { + border-color: #0a0a0a; +} + +.select.is-black select { + border-color: #0a0a0a; +} + +.select.is-black select:hover, .select.is-black select.is-hovered { + border-color: black; +} + +.select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); +} + +.select.is-light:not(:hover)::after { + border-color: whitesmoke; +} + +.select.is-light select { + border-color: whitesmoke; +} + +.select.is-light select:hover, .select.is-light select.is-hovered { + border-color: #e8e8e8; +} + +.select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); +} + +.select.is-dark:not(:hover)::after { + border-color: #363636; +} + +.select.is-dark select { + border-color: #363636; +} + +.select.is-dark select:hover, .select.is-dark select.is-hovered { + border-color: #292929; +} + +.select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); +} + +.select.is-primary:not(:hover)::after { + border-color: #ff5f2e; +} + +.select.is-primary select { + border-color: #ff5f2e; +} + +.select.is-primary select:hover, .select.is-primary select.is-hovered { + border-color: #ff4b15; +} + +.select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.select.is-link:not(:hover)::after { + border-color: #ff5f2e; +} + +.select.is-link select { + border-color: #ff5f2e; +} + +.select.is-link select:hover, .select.is-link select.is-hovered { + border-color: #ff4b15; +} + +.select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 95, 46, 0.25); +} + +.select.is-info:not(:hover)::after { + border-color: #3b82f6; +} + +.select.is-info select { + border-color: #3b82f6; +} + +.select.is-info select:hover, .select.is-info select.is-hovered { + border-color: #2372f5; +} + +.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { + box-shadow: 0 0 0 0.125em rgba(59, 130, 246, 0.25); +} + +.select.is-success:not(:hover)::after { + border-color: #10b981; +} + +.select.is-success select { + border-color: #10b981; +} + +.select.is-success select:hover, .select.is-success select.is-hovered { + border-color: #0ea271; +} + +.select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { + box-shadow: 0 0 0 0.125em rgba(16, 185, 129, 0.25); +} + +.select.is-warning:not(:hover)::after { + border-color: #ffb020; +} + +.select.is-warning select { + border-color: #ffb020; +} + +.select.is-warning select:hover, .select.is-warning select.is-hovered { + border-color: #ffa707; +} + +.select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { + box-shadow: 0 0 0 0.125em rgba(255, 176, 32, 0.25); +} + +.select.is-danger:not(:hover)::after { + border-color: #f04438; +} + +.select.is-danger select { + border-color: #f04438; +} + +.select.is-danger select:hover, .select.is-danger select.is-hovered { + border-color: #ee2e20; +} + +.select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { + box-shadow: 0 0 0 0.125em rgba(240, 68, 56, 0.25); +} + +.select.is-small { + border-radius: 8px; + font-size: 0.75rem; +} + +.select.is-medium { + font-size: 1.25rem; +} + +.select.is-large { + font-size: 1.5rem; +} + +.select.is-disabled::after { + border-color: #8b95a7 !important; + opacity: 0.5; +} + +.select.is-fullwidth { + width: 100%; +} + +.select.is-fullwidth select { + width: 100%; +} + +.select.is-loading::after { + margin-top: 0; + position: absolute; + right: 0.625em; + top: 0.625em; + transform: none; +} + +.select.is-loading.is-small:after { + font-size: 0.75rem; +} + +.select.is-loading.is-medium:after { + font-size: 1.25rem; +} + +.select.is-loading.is-large:after { + font-size: 1.5rem; +} + +.file { + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; +} + +.file.is-white .file-cta { + background-color: white; + border-color: transparent; + color: #0a0a0a; +} + +.file.is-white:hover .file-cta, .file.is-white.is-hovered .file-cta { + background-color: #f9f9f9; + border-color: transparent; + color: #0a0a0a; +} + +.file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); + color: #0a0a0a; +} + +.file.is-white:active .file-cta, .file.is-white.is-active .file-cta { + background-color: #f2f2f2; + border-color: transparent; + color: #0a0a0a; +} + +.file.is-black .file-cta { + background-color: #0a0a0a; + border-color: transparent; + color: white; +} + +.file.is-black:hover .file-cta, .file.is-black.is-hovered .file-cta { + background-color: #040404; + border-color: transparent; + color: white; +} + +.file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); + color: white; +} + +.file.is-black:active .file-cta, .file.is-black.is-active .file-cta { + background-color: black; + border-color: transparent; + color: white; +} + +.file.is-light .file-cta { + background-color: whitesmoke; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-light:hover .file-cta, .file.is-light.is-hovered .file-cta { + background-color: #eeeeee; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); + color: rgba(0, 0, 0, 0.7); +} + +.file.is-light:active .file-cta, .file.is-light.is-active .file-cta { + background-color: #e8e8e8; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-dark .file-cta { + background-color: #363636; + border-color: transparent; + color: #fff; +} + +.file.is-dark:hover .file-cta, .file.is-dark.is-hovered .file-cta { + background-color: #2f2f2f; + border-color: transparent; + color: #fff; +} + +.file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); + color: #fff; +} + +.file.is-dark:active .file-cta, .file.is-dark.is-active .file-cta { + background-color: #292929; + border-color: transparent; + color: #fff; +} + +.file.is-primary .file-cta { + background-color: #ff5f2e; + border-color: transparent; + color: #fff; +} + +.file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { + background-color: #ff5521; + border-color: transparent; + color: #fff; +} + +.file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 95, 46, 0.25); + color: #fff; +} + +.file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { + background-color: #ff4b15; + border-color: transparent; + color: #fff; +} + +.file.is-link .file-cta { + background-color: #ff5f2e; + border-color: transparent; + color: #fff; +} + +.file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { + background-color: #ff5521; + border-color: transparent; + color: #fff; +} + +.file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 95, 46, 0.25); + color: #fff; +} + +.file.is-link:active .file-cta, .file.is-link.is-active .file-cta { + background-color: #ff4b15; + border-color: transparent; + color: #fff; +} + +.file.is-info .file-cta { + background-color: #3b82f6; + border-color: transparent; + color: #fff; +} + +.file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { + background-color: #2f7af5; + border-color: transparent; + color: #fff; +} + +.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(59, 130, 246, 0.25); + color: #fff; +} + +.file.is-info:active .file-cta, .file.is-info.is-active .file-cta { + background-color: #2372f5; + border-color: transparent; + color: #fff; +} + +.file.is-success .file-cta { + background-color: #10b981; + border-color: transparent; + color: #fff; +} + +.file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { + background-color: #0fad79; + border-color: transparent; + color: #fff; +} + +.file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(16, 185, 129, 0.25); + color: #fff; +} + +.file.is-success:active .file-cta, .file.is-success.is-active .file-cta { + background-color: #0ea271; + border-color: transparent; + color: #fff; +} + +.file.is-warning .file-cta { + background-color: #ffb020; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { + background-color: #ffab13; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(255, 176, 32, 0.25); + color: rgba(0, 0, 0, 0.7); +} + +.file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { + background-color: #ffa707; + border-color: transparent; + color: rgba(0, 0, 0, 0.7); +} + +.file.is-danger .file-cta { + background-color: #f04438; + border-color: transparent; + color: #fff; +} + +.file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { + background-color: #ef392c; + border-color: transparent; + color: #fff; +} + +.file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(240, 68, 56, 0.25); + color: #fff; +} + +.file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { + background-color: #ee2e20; + border-color: transparent; + color: #fff; +} + +.file.is-small { + font-size: 0.75rem; +} + +.file.is-normal { + font-size: 1rem; +} + +.file.is-medium { + font-size: 1.25rem; +} + +.file.is-medium .file-icon .fa { + font-size: 21px; +} + +.file.is-large { + font-size: 1.5rem; +} + +.file.is-large .file-icon .fa { + font-size: 28px; +} + +.file.has-name .file-cta { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.file.has-name .file-name { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.file.has-name.is-empty .file-cta { + border-radius: 10px; +} + +.file.has-name.is-empty .file-name { + display: none; +} + +.file.is-boxed .file-label { + flex-direction: column; +} + +.file.is-boxed .file-cta { + flex-direction: column; + height: auto; + padding: 1em 3em; +} + +.file.is-boxed .file-name { + border-width: 0 1px 1px; +} + +.file.is-boxed .file-icon { + height: 1.5em; + width: 1.5em; +} + +.file.is-boxed .file-icon .fa { + font-size: 21px; +} + +.file.is-boxed.is-small .file-icon .fa { + font-size: 14px; +} + +.file.is-boxed.is-medium .file-icon .fa { + font-size: 28px; +} + +.file.is-boxed.is-large .file-icon .fa { + font-size: 35px; +} + +.file.is-boxed.has-name .file-cta { + border-radius: 10px 10px 0 0; +} + +.file.is-boxed.has-name .file-name { + border-radius: 0 0 10px 10px; + border-width: 0 1px 1px; +} + +.file.is-centered { + justify-content: center; +} + +.file.is-fullwidth .file-label { + width: 100%; +} + +.file.is-fullwidth .file-name { + flex-grow: 1; + max-width: none; +} + +.file.is-right { + justify-content: flex-end; +} + +.file.is-right .file-cta { + border-radius: 0 10px 10px 0; +} + +.file.is-right .file-name { + border-radius: 10px 0 0 10px; + border-width: 1px 0 1px 1px; + order: -1; +} + +.file-label { + align-items: stretch; + display: flex; + cursor: pointer; + justify-content: flex-start; + overflow: hidden; + position: relative; +} + +.file-label:hover .file-cta { + background-color: #11151d; + color: #363636; +} + +.file-label:hover .file-name { + border-color: #1e2430; +} + +.file-label:active .file-cta { + background-color: #0c0f15; + color: #363636; +} + +.file-label:active .file-name { + border-color: #191e28; +} + +.file-input { + height: 100%; + left: 0; + opacity: 0; + outline: none; + position: absolute; + top: 0; + width: 100%; +} + +.file-cta, +.file-name { + border-color: #232a38; + border-radius: 10px; + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; +} + +.file-cta { + background-color: #161b25; + color: #e8ecf4; +} + +.file-name { + border-color: #232a38; + border-style: solid; + border-width: 1px 1px 1px 0; + display: block; + max-width: 16em; + overflow: hidden; + text-align: inherit; + text-overflow: ellipsis; +} + +.file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + margin-right: 0.5em; + width: 1em; +} + +.file-icon .fa { + font-size: 14px; +} + +.label { + color: #363636; + display: block; + font-size: 1rem; + font-weight: 700; +} + +.label:not(:last-child) { + margin-bottom: 0.5em; +} + +.label.is-small { + font-size: 0.75rem; +} + +.label.is-medium { + font-size: 1.25rem; +} + +.label.is-large { + font-size: 1.5rem; +} + +.help { + display: block; + font-size: 0.75rem; + margin-top: 0.25rem; +} + +.help.is-white { + color: white; +} + +.help.is-black { + color: #0a0a0a; +} + +.help.is-light { + color: whitesmoke; +} + +.help.is-dark { + color: #363636; +} + +.help.is-primary { + color: #ff5f2e; +} + +.help.is-link { + color: #ff5f2e; +} + +.help.is-info { + color: #3b82f6; +} + +.help.is-success { + color: #10b981; +} + +.help.is-warning { + color: #ffb020; +} + +.help.is-danger { + color: #f04438; +} + +.field:not(:last-child) { + margin-bottom: 0.75rem; +} + +.field.has-addons { + display: flex; + justify-content: flex-start; +} + +.field.has-addons .control:not(:last-child) { + margin-right: -1px; +} + +.field.has-addons .control:not(:first-child):not(:last-child) .button, +.field.has-addons .control:not(:first-child):not(:last-child) .input, +.field.has-addons .control:not(:first-child):not(:last-child) .select select { + border-radius: 0; +} + +.field.has-addons .control:first-child:not(:only-child) .button, +.field.has-addons .control:first-child:not(:only-child) .input, +.field.has-addons .control:first-child:not(:only-child) .select select { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.field.has-addons .control:last-child:not(:only-child) .button, +.field.has-addons .control:last-child:not(:only-child) .input, +.field.has-addons .control:last-child:not(:only-child) .select select { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered, +.field.has-addons .control .input:not([disabled]):hover, +.field.has-addons .control .input:not([disabled]).is-hovered, +.field.has-addons .control .select select:not([disabled]):hover, +.field.has-addons .control .select select:not([disabled]).is-hovered { + z-index: 2; +} + +.field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active, +.field.has-addons .control .input:not([disabled]):focus, +.field.has-addons .control .input:not([disabled]).is-focused, +.field.has-addons .control .input:not([disabled]):active, +.field.has-addons .control .input:not([disabled]).is-active, +.field.has-addons .control .select select:not([disabled]):focus, +.field.has-addons .control .select select:not([disabled]).is-focused, +.field.has-addons .control .select select:not([disabled]):active, +.field.has-addons .control .select select:not([disabled]).is-active { + z-index: 3; +} + +.field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover, +.field.has-addons .control .input:not([disabled]):focus:hover, +.field.has-addons .control .input:not([disabled]).is-focused:hover, +.field.has-addons .control .input:not([disabled]):active:hover, +.field.has-addons .control .input:not([disabled]).is-active:hover, +.field.has-addons .control .select select:not([disabled]):focus:hover, +.field.has-addons .control .select select:not([disabled]).is-focused:hover, +.field.has-addons .control .select select:not([disabled]):active:hover, +.field.has-addons .control .select select:not([disabled]).is-active:hover { + z-index: 4; +} + +.field.has-addons .control.is-expanded { + flex-grow: 1; + flex-shrink: 1; +} + +.field.has-addons.has-addons-centered { + justify-content: center; +} + +.field.has-addons.has-addons-right { + justify-content: flex-end; +} + +.field.has-addons.has-addons-fullwidth .control { + flex-grow: 1; + flex-shrink: 0; +} + +.field.is-grouped { + display: flex; + justify-content: flex-start; +} + +.field.is-grouped > .control { + flex-shrink: 0; +} + +.field.is-grouped > .control:not(:last-child) { + margin-bottom: 0; + margin-right: 0.75rem; +} + +.field.is-grouped > .control.is-expanded { + flex-grow: 1; + flex-shrink: 1; +} + +.field.is-grouped.is-grouped-centered { + justify-content: center; +} + +.field.is-grouped.is-grouped-right { + justify-content: flex-end; +} + +.field.is-grouped.is-grouped-multiline { + flex-wrap: wrap; +} + +.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { + margin-bottom: 0.75rem; +} + +.field.is-grouped.is-grouped-multiline:last-child { + margin-bottom: -0.75rem; +} + +.field.is-grouped.is-grouped-multiline:not(:last-child) { + margin-bottom: 0; +} + +@media screen and (min-width: 769px), print { + .field.is-horizontal { + display: flex; + } +} + +.field-label .label { + font-size: inherit; +} + +@media screen and (max-width: 768px) { + .field-label { + margin-bottom: 0.5rem; + } +} + +@media screen and (min-width: 769px), print { + .field-label { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + margin-right: 1.5rem; + text-align: right; + } + .field-label.is-small { + font-size: 0.75rem; + padding-top: 0.375em; + } + .field-label.is-normal { + padding-top: 0.375em; + } + .field-label.is-medium { + font-size: 1.25rem; + padding-top: 0.375em; + } + .field-label.is-large { + font-size: 1.5rem; + padding-top: 0.375em; + } +} + +.field-body .field .field { + margin-bottom: 0; +} + +@media screen and (min-width: 769px), print { + .field-body { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + } + .field-body .field { + margin-bottom: 0; + } + .field-body > .field { + flex-shrink: 1; + } + .field-body > .field:not(.is-narrow) { + flex-grow: 1; + } + .field-body > .field:not(:last-child) { + margin-right: 0.75rem; + } +} + +.control { + box-sizing: border-box; + clear: both; + font-size: 1rem; + position: relative; + text-align: inherit; +} + +.control.has-icons-left .input:focus ~ .icon, +.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, +.control.has-icons-right .select:focus ~ .icon { + color: #e8ecf4; +} + +.control.has-icons-left .input.is-small ~ .icon, +.control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, +.control.has-icons-right .select.is-small ~ .icon { + font-size: 0.75rem; +} + +.control.has-icons-left .input.is-medium ~ .icon, +.control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, +.control.has-icons-right .select.is-medium ~ .icon { + font-size: 1.25rem; +} + +.control.has-icons-left .input.is-large ~ .icon, +.control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, +.control.has-icons-right .select.is-large ~ .icon { + font-size: 1.5rem; +} + +.control.has-icons-left .icon, .control.has-icons-right .icon { + color: #232a38; + height: 2.5em; + pointer-events: none; + position: absolute; + top: 0; + width: 2.5em; + z-index: 4; +} + +.control.has-icons-left .input, +.control.has-icons-left .select select { + padding-left: 2.5em; +} + +.control.has-icons-left .icon.is-left { + left: 0; +} + +.control.has-icons-right .input, +.control.has-icons-right .select select { + padding-right: 2.5em; +} + +.control.has-icons-right .icon.is-right { + right: 0; +} + +.control.is-loading::after { + position: absolute !important; + right: 0.625em; + top: 0.625em; + z-index: 4; +} + +.control.is-loading.is-small:after { + font-size: 0.75rem; +} + +.control.is-loading.is-medium:after { + font-size: 1.25rem; +} + +.control.is-loading.is-large:after { + font-size: 1.5rem; +} + +/* Bulma Components */ +.breadcrumb { + font-size: 1rem; + white-space: nowrap; +} + +.breadcrumb a { + align-items: center; + color: #ff5f2e; + display: flex; + justify-content: center; + padding: 0 0.75em; +} + +.breadcrumb a:hover { + color: #363636; +} + +.breadcrumb li { + align-items: center; + display: flex; +} + +.breadcrumb li:first-child a { + padding-left: 0; +} + +.breadcrumb li.is-active a { + color: #363636; + cursor: default; + pointer-events: none; +} + +.breadcrumb li + li::before { + color: #b5b5b5; + content: "\0002f"; +} + +.breadcrumb ul, +.breadcrumb ol { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} + +.breadcrumb .icon:first-child { + margin-right: 0.5em; +} + +.breadcrumb .icon:last-child { + margin-left: 0.5em; +} + +.breadcrumb.is-centered ol, +.breadcrumb.is-centered ul { + justify-content: center; +} + +.breadcrumb.is-right ol, +.breadcrumb.is-right ul { + justify-content: flex-end; +} + +.breadcrumb.is-small { + font-size: 0.75rem; +} + +.breadcrumb.is-medium { + font-size: 1.25rem; +} + +.breadcrumb.is-large { + font-size: 1.5rem; +} + +.breadcrumb.has-arrow-separator li + li::before { + content: "\02192"; +} + +.breadcrumb.has-bullet-separator li + li::before { + content: "\02022"; +} + +.breadcrumb.has-dot-separator li + li::before { + content: "\000b7"; +} + +.breadcrumb.has-succeeds-separator li + li::before { + content: "\0227B"; +} + +.card { + background-color: #0b0e14; + border-radius: 16px; + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + color: #e8ecf4; + max-width: 100%; + position: relative; +} + +.card-footer:first-child, .card-content:first-child, .card-header:first-child { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.card-footer:last-child, .card-content:last-child, .card-header:last-child { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; +} + +.card-header { + background-color: transparent; + align-items: stretch; + box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.1); + display: flex; +} + +.card-header-title { + align-items: center; + color: #363636; + display: flex; + flex-grow: 1; + font-weight: 700; + padding: 0.75rem 1rem; +} + +.card-header-title.is-centered { + justify-content: center; +} + +.card-header-icon { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: 0.75rem 1rem; +} + +.card-image { + display: block; + position: relative; +} + +.card-image:first-child img { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.card-image:last-child img { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; +} + +.card-content { + background-color: transparent; + padding: 1.5rem; +} + +.card-footer { + background-color: transparent; + border-top: 1px solid #232a38; + align-items: stretch; + display: flex; +} + +.card-footer-item { + align-items: center; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; + padding: 0.75rem; +} + +.card-footer-item:not(:last-child) { + border-right: 1px solid #232a38; +} + +.card .media:not(:last-child) { + margin-bottom: 1.5rem; +} + +.dropdown { + display: inline-flex; + position: relative; + vertical-align: top; +} + +.dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu { + display: block; +} + +.dropdown.is-right .dropdown-menu { + left: auto; + right: 0; +} + +.dropdown.is-up .dropdown-menu { + bottom: 100%; + padding-bottom: 4px; + padding-top: initial; + top: auto; +} + +.dropdown-menu { + display: none; + left: 0; + min-width: 12rem; + padding-top: 4px; + position: absolute; + top: 100%; + z-index: 20; +} + +.dropdown-content { + background-color: #0b0e14; + border-radius: 10px; + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + padding-bottom: 0.5rem; + padding-top: 0.5rem; +} + +.dropdown-item { + color: #e8ecf4; + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; + position: relative; +} + +a.dropdown-item, +button.dropdown-item { + padding-right: 3rem; + text-align: inherit; + white-space: nowrap; + width: 100%; +} + +a.dropdown-item:hover, +button.dropdown-item:hover { + background-color: whitesmoke; + color: #0a0a0a; +} + +a.dropdown-item.is-active, +button.dropdown-item.is-active { + background-color: #ff5f2e; + color: #fff; +} + +.dropdown-divider { + background-color: #232a38; + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; +} + +.level { + align-items: center; + justify-content: space-between; +} + +.level code { + border-radius: 10px; +} + +.level img { + display: inline-block; + vertical-align: top; +} + +.level.is-mobile { + display: flex; +} + +.level.is-mobile .level-left, +.level.is-mobile .level-right { + display: flex; +} + +.level.is-mobile .level-left + .level-right { + margin-top: 0; +} + +.level.is-mobile .level-item:not(:last-child) { + margin-bottom: 0; + margin-right: 0.75rem; +} + +.level.is-mobile .level-item:not(.is-narrow) { + flex-grow: 1; +} + +@media screen and (min-width: 769px), print { + .level { + display: flex; + } + .level > .level-item:not(.is-narrow) { + flex-grow: 1; + } +} + +.level-item { + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; +} + +.level-item .title, +.level-item .subtitle { + margin-bottom: 0; +} + +@media screen and (max-width: 768px) { + .level-item:not(:last-child) { + margin-bottom: 0.75rem; + } +} + +.level-left, +.level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.level-left .level-item.is-flexible, +.level-right .level-item.is-flexible { + flex-grow: 1; +} + +@media screen and (min-width: 769px), print { + .level-left .level-item:not(:last-child), +.level-right .level-item:not(:last-child) { + margin-right: 0.75rem; + } +} + +.level-left { + align-items: center; + justify-content: flex-start; +} + +@media screen and (max-width: 768px) { + .level-left + .level-right { + margin-top: 1.5rem; + } +} + +@media screen and (min-width: 769px), print { + .level-left { + display: flex; + } +} + +.level-right { + align-items: center; + justify-content: flex-end; +} + +@media screen and (min-width: 769px), print { + .level-right { + display: flex; + } +} + +.media { + align-items: flex-start; + display: flex; + text-align: inherit; +} + +.media .content:not(:last-child) { + margin-bottom: 0.75rem; +} + +.media .media { + border-top: 1px solid rgba(35, 42, 56, 0.5); + display: flex; + padding-top: 0.75rem; +} + +.media .media .content:not(:last-child), +.media .media .control:not(:last-child) { + margin-bottom: 0.5rem; +} + +.media .media .media { + padding-top: 0.5rem; +} + +.media .media .media + .media { + margin-top: 0.5rem; +} + +.media + .media { + border-top: 1px solid rgba(35, 42, 56, 0.5); + margin-top: 1rem; + padding-top: 1rem; +} + +.media.is-large + .media { + margin-top: 1.5rem; + padding-top: 1.5rem; +} + +.media-left, +.media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.media-left { + margin-right: 1rem; +} + +.media-right { + margin-left: 1rem; +} + +.media-content { + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + text-align: inherit; +} + +@media screen and (max-width: 768px) { + .media-content { + overflow-x: auto; + } +} + +.menu { + font-size: 1rem; +} + +.menu.is-small { + font-size: 0.75rem; +} + +.menu.is-medium { + font-size: 1.25rem; +} + +.menu.is-large { + font-size: 1.5rem; +} + +.menu-list { + line-height: 1.25; +} + +.menu-list a { + border-radius: 8px; + color: #e8ecf4; + display: block; + padding: 0.5em 0.75em; +} + +.menu-list a:hover { + background-color: whitesmoke; + color: #363636; +} + +.menu-list a.is-active { + background-color: #ff5f2e; + color: #fff; +} + +.menu-list li ul { + border-left: 1px solid #232a38; + margin: 0.75em; + padding-left: 0.75em; +} + +.menu-label { + color: #8b95a7; + font-size: 0.75em; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.menu-label:not(:first-child) { + margin-top: 1em; +} + +.menu-label:not(:last-child) { + margin-bottom: 1em; +} + +.message { + background-color: whitesmoke; + border-radius: 10px; + font-size: 1rem; +} + +.message strong { + color: currentColor; +} + +.message a:not(.button):not(.tag):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; +} + +.message.is-small { + font-size: 0.75rem; +} + +.message.is-medium { + font-size: 1.25rem; +} + +.message.is-large { + font-size: 1.5rem; +} + +.message.is-white { + background-color: white; +} + +.message.is-white .message-header { + background-color: white; + color: #0a0a0a; +} + +.message.is-white .message-body { + border-color: white; +} + +.message.is-black { + background-color: #fafafa; +} + +.message.is-black .message-header { + background-color: #0a0a0a; + color: white; +} + +.message.is-black .message-body { + border-color: #0a0a0a; +} + +.message.is-light { + background-color: #fafafa; +} + +.message.is-light .message-header { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.message.is-light .message-body { + border-color: whitesmoke; +} + +.message.is-dark { + background-color: #fafafa; +} + +.message.is-dark .message-header { + background-color: #363636; + color: #fff; +} + +.message.is-dark .message-body { + border-color: #363636; +} + +.message.is-primary { + background-color: #ffefeb; +} + +.message.is-primary .message-header { + background-color: #ff5f2e; + color: #fff; +} + +.message.is-primary .message-body { + border-color: #ff5f2e; + color: #c72f00; +} + +.message.is-link { + background-color: #ffefeb; +} + +.message.is-link .message-header { + background-color: #ff5f2e; + color: #fff; +} + +.message.is-link .message-body { + border-color: #ff5f2e; + color: #c72f00; +} + +.message.is-info { + background-color: #ebf3fe; +} + +.message.is-info .message-header { + background-color: #3b82f6; + color: #fff; +} + +.message.is-info .message-body { + border-color: #3b82f6; + color: #0954cd; +} + +.message.is-success { + background-color: #ecfdf8; +} + +.message.is-success .message-header { + background-color: #10b981; + color: #fff; +} + +.message.is-success .message-body { + border-color: #10b981; + color: #0ea473; +} + +.message.is-warning { + background-color: #fff8eb; +} + +.message.is-warning .message-header { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.message.is-warning .message-body { + border-color: #ffb020; + color: #946000; +} + +.message.is-danger { + background-color: #feedec; +} + +.message.is-danger .message-header { + background-color: #f04438; + color: #fff; +} + +.message.is-danger .message-body { + border-color: #f04438; + color: #cc1c0f; +} + +.message-header { + align-items: center; + background-color: #e8ecf4; + border-radius: 10px 10px 0 0; + color: rgba(0, 0, 0, 0.7); + display: flex; + font-weight: 700; + justify-content: space-between; + line-height: 1.25; + padding: 0.75em 1em; + position: relative; +} + +.message-header .delete { + flex-grow: 0; + flex-shrink: 0; + margin-left: 0.75em; +} + +.message-header + .message-body { + border-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.message-body { + border-color: #232a38; + border-radius: 10px; + border-style: solid; + border-width: 0 0 0 4px; + color: #e8ecf4; + padding: 1.25em 1.5em; +} + +.message-body code, +.message-body pre { + background-color: #0b0e14; +} + +.message-body pre code { + background-color: transparent; +} + +.modal { + align-items: center; + display: none; + flex-direction: column; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: 40; +} + +.modal.is-active { + display: flex; +} + +.modal-background { + background-color: rgba(10, 10, 10, 0.86); +} + +.modal-content, +.modal-card { + margin: 0 20px; + max-height: calc(100vh - 160px); + overflow: auto; + position: relative; + width: 100%; +} + +@media screen and (min-width: 769px) { + .modal-content, +.modal-card { + margin: 0 auto; + max-height: calc(100vh - 40px); + width: 640px; + } +} + +.modal-close { + background: none; + height: 40px; + position: fixed; + right: 20px; + top: 20px; + width: 40px; +} + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - 40px); + overflow: hidden; + -ms-overflow-y: visible; +} + +.modal-card-head, +.modal-card-foot { + align-items: center; + background-color: whitesmoke; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: 20px; + position: relative; +} + +.modal-card-head { + border-bottom: 1px solid #232a38; + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.modal-card-title { + color: #363636; + flex-grow: 1; + flex-shrink: 0; + font-size: 1.5rem; + line-height: 1; +} + +.modal-card-foot { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + border-top: 1px solid #232a38; +} + +.modal-card-foot .button:not(:last-child) { + margin-right: 0.5em; +} + +.modal-card-body { + -webkit-overflow-scrolling: touch; + background-color: #0b0e14; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: 20px; +} + +.navbar { + background-color: #0b0e14; + min-height: 3.5rem; + position: relative; + z-index: 30; +} + +.navbar.is-white { + background-color: white; + color: #0a0a0a; +} + +.navbar.is-white .navbar-brand > .navbar-item, +.navbar.is-white .navbar-brand .navbar-link { + color: #0a0a0a; +} + +.navbar.is-white .navbar-brand > a.navbar-item:focus, .navbar.is-white .navbar-brand > a.navbar-item:hover, .navbar.is-white .navbar-brand > a.navbar-item.is-active, +.navbar.is-white .navbar-brand .navbar-link:focus, +.navbar.is-white .navbar-brand .navbar-link:hover, +.navbar.is-white .navbar-brand .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; +} + +.navbar.is-white .navbar-brand .navbar-link::after { + border-color: #0a0a0a; +} + +.navbar.is-white .navbar-burger { + color: #0a0a0a; +} + +@media screen and (min-width: 1024px) { + .navbar.is-white .navbar-start > .navbar-item, +.navbar.is-white .navbar-start .navbar-link, +.navbar.is-white .navbar-end > .navbar-item, +.navbar.is-white .navbar-end .navbar-link { + color: #0a0a0a; + } + .navbar.is-white .navbar-start > a.navbar-item:focus, .navbar.is-white .navbar-start > a.navbar-item:hover, .navbar.is-white .navbar-start > a.navbar-item.is-active, +.navbar.is-white .navbar-start .navbar-link:focus, +.navbar.is-white .navbar-start .navbar-link:hover, +.navbar.is-white .navbar-start .navbar-link.is-active, +.navbar.is-white .navbar-end > a.navbar-item:focus, +.navbar.is-white .navbar-end > a.navbar-item:hover, +.navbar.is-white .navbar-end > a.navbar-item.is-active, +.navbar.is-white .navbar-end .navbar-link:focus, +.navbar.is-white .navbar-end .navbar-link:hover, +.navbar.is-white .navbar-end .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; + } + .navbar.is-white .navbar-start .navbar-link::after, +.navbar.is-white .navbar-end .navbar-link::after { + border-color: #0a0a0a; + } + .navbar.is-white .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-white .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-white .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #f2f2f2; + color: #0a0a0a; + } + .navbar.is-white .navbar-dropdown a.navbar-item.is-active { + background-color: white; + color: #0a0a0a; + } +} + +.navbar.is-black { + background-color: #0a0a0a; + color: white; +} + +.navbar.is-black .navbar-brand > .navbar-item, +.navbar.is-black .navbar-brand .navbar-link { + color: white; +} + +.navbar.is-black .navbar-brand > a.navbar-item:focus, .navbar.is-black .navbar-brand > a.navbar-item:hover, .navbar.is-black .navbar-brand > a.navbar-item.is-active, +.navbar.is-black .navbar-brand .navbar-link:focus, +.navbar.is-black .navbar-brand .navbar-link:hover, +.navbar.is-black .navbar-brand .navbar-link.is-active { + background-color: black; + color: white; +} + +.navbar.is-black .navbar-brand .navbar-link::after { + border-color: white; +} + +.navbar.is-black .navbar-burger { + color: white; +} + +@media screen and (min-width: 1024px) { + .navbar.is-black .navbar-start > .navbar-item, +.navbar.is-black .navbar-start .navbar-link, +.navbar.is-black .navbar-end > .navbar-item, +.navbar.is-black .navbar-end .navbar-link { + color: white; + } + .navbar.is-black .navbar-start > a.navbar-item:focus, .navbar.is-black .navbar-start > a.navbar-item:hover, .navbar.is-black .navbar-start > a.navbar-item.is-active, +.navbar.is-black .navbar-start .navbar-link:focus, +.navbar.is-black .navbar-start .navbar-link:hover, +.navbar.is-black .navbar-start .navbar-link.is-active, +.navbar.is-black .navbar-end > a.navbar-item:focus, +.navbar.is-black .navbar-end > a.navbar-item:hover, +.navbar.is-black .navbar-end > a.navbar-item.is-active, +.navbar.is-black .navbar-end .navbar-link:focus, +.navbar.is-black .navbar-end .navbar-link:hover, +.navbar.is-black .navbar-end .navbar-link.is-active { + background-color: black; + color: white; + } + .navbar.is-black .navbar-start .navbar-link::after, +.navbar.is-black .navbar-end .navbar-link::after { + border-color: white; + } + .navbar.is-black .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-black .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-black .navbar-item.has-dropdown.is-active .navbar-link { + background-color: black; + color: white; + } + .navbar.is-black .navbar-dropdown a.navbar-item.is-active { + background-color: #0a0a0a; + color: white; + } +} + +.navbar.is-light { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-light .navbar-brand > .navbar-item, +.navbar.is-light .navbar-brand .navbar-link { + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-light .navbar-brand > a.navbar-item:focus, .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active, +.navbar.is-light .navbar-brand .navbar-link:focus, +.navbar.is-light .navbar-brand .navbar-link:hover, +.navbar.is-light .navbar-brand .navbar-link.is-active { + background-color: #e8e8e8; + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-light .navbar-brand .navbar-link::after { + border-color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-light .navbar-burger { + color: rgba(0, 0, 0, 0.7); +} + +@media screen and (min-width: 1024px) { + .navbar.is-light .navbar-start > .navbar-item, +.navbar.is-light .navbar-start .navbar-link, +.navbar.is-light .navbar-end > .navbar-item, +.navbar.is-light .navbar-end .navbar-link { + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-light .navbar-start > a.navbar-item:focus, .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active, +.navbar.is-light .navbar-start .navbar-link:focus, +.navbar.is-light .navbar-start .navbar-link:hover, +.navbar.is-light .navbar-start .navbar-link.is-active, +.navbar.is-light .navbar-end > a.navbar-item:focus, +.navbar.is-light .navbar-end > a.navbar-item:hover, +.navbar.is-light .navbar-end > a.navbar-item.is-active, +.navbar.is-light .navbar-end .navbar-link:focus, +.navbar.is-light .navbar-end .navbar-link:hover, +.navbar.is-light .navbar-end .navbar-link.is-active { + background-color: #e8e8e8; + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-light .navbar-start .navbar-link::after, +.navbar.is-light .navbar-end .navbar-link::after { + border-color: rgba(0, 0, 0, 0.7); + } + .navbar.is-light .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-light .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #e8e8e8; + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-light .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); + } +} + +.navbar.is-dark { + background-color: #363636; + color: #fff; +} + +.navbar.is-dark .navbar-brand > .navbar-item, +.navbar.is-dark .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-dark .navbar-brand > a.navbar-item:focus, .navbar.is-dark .navbar-brand > a.navbar-item:hover, .navbar.is-dark .navbar-brand > a.navbar-item.is-active, +.navbar.is-dark .navbar-brand .navbar-link:focus, +.navbar.is-dark .navbar-brand .navbar-link:hover, +.navbar.is-dark .navbar-brand .navbar-link.is-active { + background-color: #292929; + color: #fff; +} + +.navbar.is-dark .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-dark .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-dark .navbar-start > .navbar-item, +.navbar.is-dark .navbar-start .navbar-link, +.navbar.is-dark .navbar-end > .navbar-item, +.navbar.is-dark .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-dark .navbar-start > a.navbar-item:focus, .navbar.is-dark .navbar-start > a.navbar-item:hover, .navbar.is-dark .navbar-start > a.navbar-item.is-active, +.navbar.is-dark .navbar-start .navbar-link:focus, +.navbar.is-dark .navbar-start .navbar-link:hover, +.navbar.is-dark .navbar-start .navbar-link.is-active, +.navbar.is-dark .navbar-end > a.navbar-item:focus, +.navbar.is-dark .navbar-end > a.navbar-item:hover, +.navbar.is-dark .navbar-end > a.navbar-item.is-active, +.navbar.is-dark .navbar-end .navbar-link:focus, +.navbar.is-dark .navbar-end .navbar-link:hover, +.navbar.is-dark .navbar-end .navbar-link.is-active { + background-color: #292929; + color: #fff; + } + .navbar.is-dark .navbar-start .navbar-link::after, +.navbar.is-dark .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-dark .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-dark .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #292929; + color: #fff; + } + .navbar.is-dark .navbar-dropdown a.navbar-item.is-active { + background-color: #363636; + color: #fff; + } +} + +.navbar.is-primary { + background-color: #ff5f2e; + color: #fff; +} + +.navbar.is-primary .navbar-brand > .navbar-item, +.navbar.is-primary .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, +.navbar.is-primary .navbar-brand .navbar-link:focus, +.navbar.is-primary .navbar-brand .navbar-link:hover, +.navbar.is-primary .navbar-brand .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; +} + +.navbar.is-primary .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-primary .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-primary .navbar-start > .navbar-item, +.navbar.is-primary .navbar-start .navbar-link, +.navbar.is-primary .navbar-end > .navbar-item, +.navbar.is-primary .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, +.navbar.is-primary .navbar-start .navbar-link:focus, +.navbar.is-primary .navbar-start .navbar-link:hover, +.navbar.is-primary .navbar-start .navbar-link.is-active, +.navbar.is-primary .navbar-end > a.navbar-item:focus, +.navbar.is-primary .navbar-end > a.navbar-item:hover, +.navbar.is-primary .navbar-end > a.navbar-item.is-active, +.navbar.is-primary .navbar-end .navbar-link:focus, +.navbar.is-primary .navbar-end .navbar-link:hover, +.navbar.is-primary .navbar-end .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; + } + .navbar.is-primary .navbar-start .navbar-link::after, +.navbar.is-primary .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ff4b15; + color: #fff; + } + .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { + background-color: #ff5f2e; + color: #fff; + } +} + +.navbar.is-link { + background-color: #ff5f2e; + color: #fff; +} + +.navbar.is-link .navbar-brand > .navbar-item, +.navbar.is-link .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-link .navbar-brand > a.navbar-item:focus, .navbar.is-link .navbar-brand > a.navbar-item:hover, .navbar.is-link .navbar-brand > a.navbar-item.is-active, +.navbar.is-link .navbar-brand .navbar-link:focus, +.navbar.is-link .navbar-brand .navbar-link:hover, +.navbar.is-link .navbar-brand .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; +} + +.navbar.is-link .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-link .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-link .navbar-start > .navbar-item, +.navbar.is-link .navbar-start .navbar-link, +.navbar.is-link .navbar-end > .navbar-item, +.navbar.is-link .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-link .navbar-start > a.navbar-item:focus, .navbar.is-link .navbar-start > a.navbar-item:hover, .navbar.is-link .navbar-start > a.navbar-item.is-active, +.navbar.is-link .navbar-start .navbar-link:focus, +.navbar.is-link .navbar-start .navbar-link:hover, +.navbar.is-link .navbar-start .navbar-link.is-active, +.navbar.is-link .navbar-end > a.navbar-item:focus, +.navbar.is-link .navbar-end > a.navbar-item:hover, +.navbar.is-link .navbar-end > a.navbar-item.is-active, +.navbar.is-link .navbar-end .navbar-link:focus, +.navbar.is-link .navbar-end .navbar-link:hover, +.navbar.is-link .navbar-end .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; + } + .navbar.is-link .navbar-start .navbar-link::after, +.navbar.is-link .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ff4b15; + color: #fff; + } + .navbar.is-link .navbar-dropdown a.navbar-item.is-active { + background-color: #ff5f2e; + color: #fff; + } +} + +.navbar.is-info { + background-color: #3b82f6; + color: #fff; +} + +.navbar.is-info .navbar-brand > .navbar-item, +.navbar.is-info .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-info .navbar-brand > a.navbar-item:focus, .navbar.is-info .navbar-brand > a.navbar-item:hover, .navbar.is-info .navbar-brand > a.navbar-item.is-active, +.navbar.is-info .navbar-brand .navbar-link:focus, +.navbar.is-info .navbar-brand .navbar-link:hover, +.navbar.is-info .navbar-brand .navbar-link.is-active { + background-color: #2372f5; + color: #fff; +} + +.navbar.is-info .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-info .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-info .navbar-start > .navbar-item, +.navbar.is-info .navbar-start .navbar-link, +.navbar.is-info .navbar-end > .navbar-item, +.navbar.is-info .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-info .navbar-start > a.navbar-item:focus, .navbar.is-info .navbar-start > a.navbar-item:hover, .navbar.is-info .navbar-start > a.navbar-item.is-active, +.navbar.is-info .navbar-start .navbar-link:focus, +.navbar.is-info .navbar-start .navbar-link:hover, +.navbar.is-info .navbar-start .navbar-link.is-active, +.navbar.is-info .navbar-end > a.navbar-item:focus, +.navbar.is-info .navbar-end > a.navbar-item:hover, +.navbar.is-info .navbar-end > a.navbar-item.is-active, +.navbar.is-info .navbar-end .navbar-link:focus, +.navbar.is-info .navbar-end .navbar-link:hover, +.navbar.is-info .navbar-end .navbar-link.is-active { + background-color: #2372f5; + color: #fff; + } + .navbar.is-info .navbar-start .navbar-link::after, +.navbar.is-info .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #2372f5; + color: #fff; + } + .navbar.is-info .navbar-dropdown a.navbar-item.is-active { + background-color: #3b82f6; + color: #fff; + } +} + +.navbar.is-success { + background-color: #10b981; + color: #fff; +} + +.navbar.is-success .navbar-brand > .navbar-item, +.navbar.is-success .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-success .navbar-brand > a.navbar-item:focus, .navbar.is-success .navbar-brand > a.navbar-item:hover, .navbar.is-success .navbar-brand > a.navbar-item.is-active, +.navbar.is-success .navbar-brand .navbar-link:focus, +.navbar.is-success .navbar-brand .navbar-link:hover, +.navbar.is-success .navbar-brand .navbar-link.is-active { + background-color: #0ea271; + color: #fff; +} + +.navbar.is-success .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-success .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-success .navbar-start > .navbar-item, +.navbar.is-success .navbar-start .navbar-link, +.navbar.is-success .navbar-end > .navbar-item, +.navbar.is-success .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-success .navbar-start > a.navbar-item:focus, .navbar.is-success .navbar-start > a.navbar-item:hover, .navbar.is-success .navbar-start > a.navbar-item.is-active, +.navbar.is-success .navbar-start .navbar-link:focus, +.navbar.is-success .navbar-start .navbar-link:hover, +.navbar.is-success .navbar-start .navbar-link.is-active, +.navbar.is-success .navbar-end > a.navbar-item:focus, +.navbar.is-success .navbar-end > a.navbar-item:hover, +.navbar.is-success .navbar-end > a.navbar-item.is-active, +.navbar.is-success .navbar-end .navbar-link:focus, +.navbar.is-success .navbar-end .navbar-link:hover, +.navbar.is-success .navbar-end .navbar-link.is-active { + background-color: #0ea271; + color: #fff; + } + .navbar.is-success .navbar-start .navbar-link::after, +.navbar.is-success .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #0ea271; + color: #fff; + } + .navbar.is-success .navbar-dropdown a.navbar-item.is-active { + background-color: #10b981; + color: #fff; + } +} + +.navbar.is-warning { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-warning .navbar-brand > .navbar-item, +.navbar.is-warning .navbar-brand .navbar-link { + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, +.navbar.is-warning .navbar-brand .navbar-link:focus, +.navbar.is-warning .navbar-brand .navbar-link:hover, +.navbar.is-warning .navbar-brand .navbar-link.is-active { + background-color: #ffa707; + color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-warning .navbar-brand .navbar-link::after { + border-color: rgba(0, 0, 0, 0.7); +} + +.navbar.is-warning .navbar-burger { + color: rgba(0, 0, 0, 0.7); +} + +@media screen and (min-width: 1024px) { + .navbar.is-warning .navbar-start > .navbar-item, +.navbar.is-warning .navbar-start .navbar-link, +.navbar.is-warning .navbar-end > .navbar-item, +.navbar.is-warning .navbar-end .navbar-link { + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, +.navbar.is-warning .navbar-start .navbar-link:focus, +.navbar.is-warning .navbar-start .navbar-link:hover, +.navbar.is-warning .navbar-start .navbar-link.is-active, +.navbar.is-warning .navbar-end > a.navbar-item:focus, +.navbar.is-warning .navbar-end > a.navbar-item:hover, +.navbar.is-warning .navbar-end > a.navbar-item.is-active, +.navbar.is-warning .navbar-end .navbar-link:focus, +.navbar.is-warning .navbar-end .navbar-link:hover, +.navbar.is-warning .navbar-end .navbar-link.is-active { + background-color: #ffa707; + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-warning .navbar-start .navbar-link::after, +.navbar.is-warning .navbar-end .navbar-link::after { + border-color: rgba(0, 0, 0, 0.7); + } + .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ffa707; + color: rgba(0, 0, 0, 0.7); + } + .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); + } +} + +.navbar.is-danger { + background-color: #f04438; + color: #fff; +} + +.navbar.is-danger .navbar-brand > .navbar-item, +.navbar.is-danger .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-danger .navbar-brand > a.navbar-item:focus, .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active, +.navbar.is-danger .navbar-brand .navbar-link:focus, +.navbar.is-danger .navbar-brand .navbar-link:hover, +.navbar.is-danger .navbar-brand .navbar-link.is-active { + background-color: #ee2e20; + color: #fff; +} + +.navbar.is-danger .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-danger .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-danger .navbar-start > .navbar-item, +.navbar.is-danger .navbar-start .navbar-link, +.navbar.is-danger .navbar-end > .navbar-item, +.navbar.is-danger .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-danger .navbar-start > a.navbar-item:focus, .navbar.is-danger .navbar-start > a.navbar-item:hover, .navbar.is-danger .navbar-start > a.navbar-item.is-active, +.navbar.is-danger .navbar-start .navbar-link:focus, +.navbar.is-danger .navbar-start .navbar-link:hover, +.navbar.is-danger .navbar-start .navbar-link.is-active, +.navbar.is-danger .navbar-end > a.navbar-item:focus, +.navbar.is-danger .navbar-end > a.navbar-item:hover, +.navbar.is-danger .navbar-end > a.navbar-item.is-active, +.navbar.is-danger .navbar-end .navbar-link:focus, +.navbar.is-danger .navbar-end .navbar-link:hover, +.navbar.is-danger .navbar-end .navbar-link.is-active { + background-color: #ee2e20; + color: #fff; + } + .navbar.is-danger .navbar-start .navbar-link::after, +.navbar.is-danger .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, +.navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, +.navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #ee2e20; + color: #fff; + } + .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { + background-color: #f04438; + color: #fff; + } +} + +.navbar > .container { + align-items: stretch; + display: flex; + min-height: 3.5rem; + width: 100%; +} + +.navbar.has-shadow { + box-shadow: 0 2px 0 0 whitesmoke; +} + +.navbar.is-fixed-bottom, .navbar.is-fixed-top { + left: 0; + position: fixed; + right: 0; + z-index: 30; +} + +.navbar.is-fixed-bottom { + bottom: 0; +} + +.navbar.is-fixed-bottom.has-shadow { + box-shadow: 0 -2px 0 0 whitesmoke; +} + +.navbar.is-fixed-top { + top: 0; +} + +html.has-navbar-fixed-top, +body.has-navbar-fixed-top { + padding-top: 3.5rem; +} + +html.has-navbar-fixed-bottom, +body.has-navbar-fixed-bottom { + padding-bottom: 3.5rem; +} + +.navbar-brand, +.navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: 3.5rem; +} + +.navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover { + background-color: transparent; +} + +.navbar-tabs { + -webkit-overflow-scrolling: touch; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; +} + +.navbar-burger { + color: #e8ecf4; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + cursor: pointer; + display: block; + height: 3.5rem; + position: relative; + width: 3.5rem; + margin-left: auto; +} + +.navbar-burger span { + background-color: currentColor; + display: block; + height: 1px; + left: calc(50% - 8px); + position: absolute; + transform-origin: center; + transition-duration: 86ms; + transition-property: background-color, opacity, transform; + transition-timing-function: ease-out; + width: 16px; +} + +.navbar-burger span:nth-child(1) { + top: calc(50% - 6px); +} + +.navbar-burger span:nth-child(2) { + top: calc(50% - 1px); +} + +.navbar-burger span:nth-child(3) { + top: calc(50% + 4px); +} + +.navbar-burger:hover { + background-color: rgba(0, 0, 0, 0.05); +} + +.navbar-burger.is-active span:nth-child(1) { + transform: translateY(5px) rotate(45deg); +} + +.navbar-burger.is-active span:nth-child(2) { + opacity: 0; +} + +.navbar-burger.is-active span:nth-child(3) { + transform: translateY(-5px) rotate(-45deg); +} + +.navbar-menu { + display: none; +} + +.navbar-item, +.navbar-link { + color: #e8ecf4; + display: block; + line-height: 1.5; + padding: 0.5rem 0.75rem; + position: relative; +} + +.navbar-item .icon:only-child, +.navbar-link .icon:only-child { + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +a.navbar-item, +.navbar-link { + cursor: pointer; +} + +a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, +.navbar-link:focus, +.navbar-link:focus-within, +.navbar-link:hover, +.navbar-link.is-active { + background-color: #11151d; + color: #ff5f2e; +} + +.navbar-item { + flex-grow: 0; + flex-shrink: 0; +} + +.navbar-item img { + max-height: 1.75rem; +} + +.navbar-item.has-dropdown { + padding: 0; +} + +.navbar-item.is-expanded { + flex-grow: 1; + flex-shrink: 1; +} + +.navbar-item.is-tab { + border-bottom: 1px solid transparent; + min-height: 3.5rem; + padding-bottom: calc(0.5rem - 1px); +} + +.navbar-item.is-tab:focus, .navbar-item.is-tab:hover { + background-color: transparent; + border-bottom-color: #ff5f2e; +} + +.navbar-item.is-tab.is-active { + background-color: transparent; + border-bottom-color: #ff5f2e; + border-bottom-style: solid; + border-bottom-width: 3px; + color: #ff5f2e; + padding-bottom: calc(0.5rem - 3px); +} + +.navbar-content { + flex-grow: 1; + flex-shrink: 1; +} + +.navbar-link:not(.is-arrowless) { + padding-right: 2.5em; +} + +.navbar-link:not(.is-arrowless)::after { + border-color: #ff5f2e; + margin-top: -0.375em; + right: 1.125em; +} + +.navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; +} + +.navbar-dropdown .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.navbar-divider { + background-color: whitesmoke; + border: none; + display: none; + height: 2px; + margin: 0.5rem 0; +} + +@media screen and (max-width: 1023px) { + .navbar > .container { + display: block; + } + .navbar-brand .navbar-item, +.navbar-tabs .navbar-item { + align-items: center; + display: flex; + } + .navbar-link::after { + display: none; + } + .navbar-menu { + background-color: #0b0e14; + box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + padding: 0.5rem 0; + } + .navbar-menu.is-active { + display: block; + } + .navbar.is-fixed-bottom-touch, .navbar.is-fixed-top-touch { + left: 0; + position: fixed; + right: 0; + z-index: 30; + } + .navbar.is-fixed-bottom-touch { + bottom: 0; + } + .navbar.is-fixed-bottom-touch.has-shadow { + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + } + .navbar.is-fixed-top-touch { + top: 0; + } + .navbar.is-fixed-top .navbar-menu, .navbar.is-fixed-top-touch .navbar-menu { + -webkit-overflow-scrolling: touch; + max-height: calc(100vh - 3.5rem); + overflow: auto; + } + html.has-navbar-fixed-top-touch, +body.has-navbar-fixed-top-touch { + padding-top: 3.5rem; + } + html.has-navbar-fixed-bottom-touch, +body.has-navbar-fixed-bottom-touch { + padding-bottom: 3.5rem; + } +} + +@media screen and (min-width: 1024px) { + .navbar, +.navbar-menu, +.navbar-start, +.navbar-end { + align-items: stretch; + display: flex; + } + .navbar { + min-height: 3.5rem; + } + .navbar.is-spaced { + padding: 1rem 2rem; + } + .navbar.is-spaced .navbar-start, +.navbar.is-spaced .navbar-end { + align-items: center; + } + .navbar.is-spaced a.navbar-item, +.navbar.is-spaced .navbar-link { + border-radius: 10px; + } + .navbar.is-transparent a.navbar-item:focus, .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, +.navbar.is-transparent .navbar-link:focus, +.navbar.is-transparent .navbar-link:hover, +.navbar.is-transparent .navbar-link.is-active { + background-color: transparent !important; + } + .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:focus-within .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { + background-color: transparent !important; + } + .navbar.is-transparent .navbar-dropdown a.navbar-item:focus, .navbar.is-transparent .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; + } + .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #ff5f2e; + } + .navbar-burger { + display: none; + } + .navbar-item, +.navbar-link { + align-items: center; + display: flex; + } + .navbar-item.has-dropdown { + align-items: stretch; + } + .navbar-item.has-dropdown-up .navbar-link::after { + transform: rotate(135deg) translate(0.25em, -0.25em); + } + .navbar-item.has-dropdown-up .navbar-dropdown { + border-bottom: 2px solid #232a38; + border-radius: 16px 16px 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); + top: auto; + } + .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { + display: block; + } + .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + .navbar-menu { + flex-grow: 1; + flex-shrink: 0; + } + .navbar-start { + justify-content: flex-start; + margin-right: auto; + } + .navbar-end { + justify-content: flex-end; + margin-left: auto; + } + .navbar-dropdown { + background-color: #0b0e14; + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + border-top: 2px solid #232a38; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + display: none; + font-size: 0.875rem; + left: 0; + min-width: 100%; + position: absolute; + top: 100%; + z-index: 20; + } + .navbar-dropdown .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + .navbar-dropdown a.navbar-item { + padding-right: 3rem; + } + .navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { + background-color: whitesmoke; + color: #0a0a0a; + } + .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; + color: #ff5f2e; + } + .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { + border-radius: 16px; + border-top: none; + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (-4px)); + transform: translateY(-5px); + transition-duration: 86ms; + transition-property: opacity, transform; + } + .navbar-dropdown.is-right { + left: auto; + right: 0; + } + .navbar-divider { + display: block; + } + .navbar > .container .navbar-brand, +.container > .navbar .navbar-brand { + margin-left: -0.75rem; + } + .navbar > .container .navbar-menu, +.container > .navbar .navbar-menu { + margin-right: -0.75rem; + } + .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { + left: 0; + position: fixed; + right: 0; + z-index: 30; + } + .navbar.is-fixed-bottom-desktop { + bottom: 0; + } + .navbar.is-fixed-bottom-desktop.has-shadow { + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + } + .navbar.is-fixed-top-desktop { + top: 0; + } + html.has-navbar-fixed-top-desktop, +body.has-navbar-fixed-top-desktop { + padding-top: 3.5rem; + } + html.has-navbar-fixed-bottom-desktop, +body.has-navbar-fixed-bottom-desktop { + padding-bottom: 3.5rem; + } + html.has-spaced-navbar-fixed-top, +body.has-spaced-navbar-fixed-top { + padding-top: 5.5rem; + } + html.has-spaced-navbar-fixed-bottom, +body.has-spaced-navbar-fixed-bottom { + padding-bottom: 5.5rem; + } + a.navbar-item.is-active, +.navbar-link.is-active { + color: #0a0a0a; + } + a.navbar-item.is-active:not(:focus):not(:hover), +.navbar-link.is-active:not(:focus):not(:hover) { + background-color: transparent; + } + .navbar-item.has-dropdown:focus .navbar-link, .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #11151d; + } +} + +.hero.is-fullheight-with-navbar { + min-height: calc(100vh - 3.5rem); +} + +.pagination { + font-size: 1rem; + margin: -0.25rem; +} + +.pagination.is-small { + font-size: 0.75rem; +} + +.pagination.is-medium { + font-size: 1.25rem; +} + +.pagination.is-large { + font-size: 1.5rem; +} + +.pagination.is-rounded .pagination-previous, +.pagination.is-rounded .pagination-next { + padding-left: 1em; + padding-right: 1em; + border-radius: 999px; +} + +.pagination.is-rounded .pagination-link { + border-radius: 999px; +} + +.pagination, +.pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + font-size: 1em; + justify-content: center; + margin: 0.25rem; + padding-left: 0.5em; + padding-right: 0.5em; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link { + border-color: #232a38; + color: #363636; + min-width: 2.5em; +} + +.pagination-previous:hover, +.pagination-next:hover, +.pagination-link:hover { + border-color: #b5b5b5; + color: #363636; +} + +.pagination-previous:focus, +.pagination-next:focus, +.pagination-link:focus { + border-color: #485fc7; +} + +.pagination-previous:active, +.pagination-next:active, +.pagination-link:active { + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); +} + +.pagination-previous[disabled], .pagination-previous.is-disabled, +.pagination-next[disabled], +.pagination-next.is-disabled, +.pagination-link[disabled], +.pagination-link.is-disabled { + background-color: #232a38; + border-color: #232a38; + box-shadow: none; + color: #8b95a7; + opacity: 0.5; +} + +.pagination-previous, +.pagination-next { + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; +} + +.pagination-link.is-current { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; +} + +.pagination-ellipsis { + color: #b5b5b5; + pointer-events: none; +} + +.pagination-list { + flex-wrap: wrap; +} + +.pagination-list li { + list-style: none; +} + +@media screen and (max-width: 768px) { + .pagination { + flex-wrap: wrap; + } + .pagination-previous, +.pagination-next { + flex-grow: 1; + flex-shrink: 1; + } + .pagination-list li { + flex-grow: 1; + flex-shrink: 1; + } +} + +@media screen and (min-width: 769px), print { + .pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; + } + .pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + margin-bottom: 0; + margin-top: 0; + } + .pagination-previous { + order: 2; + } + .pagination-next { + order: 3; + } + .pagination { + justify-content: space-between; + margin-bottom: 0; + margin-top: 0; + } + .pagination.is-centered .pagination-previous { + order: 1; + } + .pagination.is-centered .pagination-list { + justify-content: center; + order: 2; + } + .pagination.is-centered .pagination-next { + order: 3; + } + .pagination.is-right .pagination-previous { + order: 1; + } + .pagination.is-right .pagination-next { + order: 2; + } + .pagination.is-right .pagination-list { + justify-content: flex-end; + order: 3; + } +} + +.panel { + border-radius: 16px; + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + font-size: 1rem; +} + +.panel:not(:last-child) { + margin-bottom: 1.5rem; +} + +.panel.is-white .panel-heading { + background-color: white; + color: #0a0a0a; +} + +.panel.is-white .panel-tabs a.is-active { + border-bottom-color: white; +} + +.panel.is-white .panel-block.is-active .panel-icon { + color: white; +} + +.panel.is-black .panel-heading { + background-color: #0a0a0a; + color: white; +} + +.panel.is-black .panel-tabs a.is-active { + border-bottom-color: #0a0a0a; +} + +.panel.is-black .panel-block.is-active .panel-icon { + color: #0a0a0a; +} + +.panel.is-light .panel-heading { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.panel.is-light .panel-tabs a.is-active { + border-bottom-color: whitesmoke; +} + +.panel.is-light .panel-block.is-active .panel-icon { + color: whitesmoke; +} + +.panel.is-dark .panel-heading { + background-color: #363636; + color: #fff; +} + +.panel.is-dark .panel-tabs a.is-active { + border-bottom-color: #363636; +} + +.panel.is-dark .panel-block.is-active .panel-icon { + color: #363636; +} + +.panel.is-primary .panel-heading { + background-color: #ff5f2e; + color: #fff; +} + +.panel.is-primary .panel-tabs a.is-active { + border-bottom-color: #ff5f2e; +} + +.panel.is-primary .panel-block.is-active .panel-icon { + color: #ff5f2e; +} + +.panel.is-link .panel-heading { + background-color: #ff5f2e; + color: #fff; +} + +.panel.is-link .panel-tabs a.is-active { + border-bottom-color: #ff5f2e; +} + +.panel.is-link .panel-block.is-active .panel-icon { + color: #ff5f2e; +} + +.panel.is-info .panel-heading { + background-color: #3b82f6; + color: #fff; +} + +.panel.is-info .panel-tabs a.is-active { + border-bottom-color: #3b82f6; +} + +.panel.is-info .panel-block.is-active .panel-icon { + color: #3b82f6; +} + +.panel.is-success .panel-heading { + background-color: #10b981; + color: #fff; +} + +.panel.is-success .panel-tabs a.is-active { + border-bottom-color: #10b981; +} + +.panel.is-success .panel-block.is-active .panel-icon { + color: #10b981; +} + +.panel.is-warning .panel-heading { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.panel.is-warning .panel-tabs a.is-active { + border-bottom-color: #ffb020; +} + +.panel.is-warning .panel-block.is-active .panel-icon { + color: #ffb020; +} + +.panel.is-danger .panel-heading { + background-color: #f04438; + color: #fff; +} + +.panel.is-danger .panel-tabs a.is-active { + border-bottom-color: #f04438; +} + +.panel.is-danger .panel-block.is-active .panel-icon { + color: #f04438; +} + +.panel-tabs:not(:last-child), +.panel-block:not(:last-child) { + border-bottom: 1px solid #232a38; +} + +.panel-heading { + background-color: #232a38; + border-radius: 16px 16px 0 0; + color: #363636; + font-size: 1.25em; + font-weight: 700; + line-height: 1.25; + padding: 0.75em 1em; +} + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: 0.875em; + justify-content: center; +} + +.panel-tabs a { + border-bottom: 1px solid #232a38; + margin-bottom: -1px; + padding: 0.5em; +} + +.panel-tabs a.is-active { + border-bottom-color: #4a4a4a; + color: #363636; +} + +.panel-list a { + color: #e8ecf4; +} + +.panel-list a:hover { + color: #ff5f2e; +} + +.panel-block { + align-items: center; + color: #363636; + display: flex; + justify-content: flex-start; + padding: 0.5em 0.75em; +} + +.panel-block input[type="checkbox"] { + margin-right: 0.75em; +} + +.panel-block > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; +} + +.panel-block.is-wrapped { + flex-wrap: wrap; +} + +.panel-block.is-active { + border-left-color: #ff5f2e; + color: #363636; +} + +.panel-block.is-active .panel-icon { + color: #ff5f2e; +} + +.panel-block:last-child { + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; +} + +a.panel-block, +label.panel-block { + cursor: pointer; +} + +a.panel-block:hover, +label.panel-block:hover { + background-color: whitesmoke; +} + +.panel-icon { + display: inline-block; + font-size: 14px; + height: 1em; + line-height: 1em; + text-align: center; + vertical-align: top; + width: 1em; + color: #8b95a7; + margin-right: 0.75em; +} + +.panel-icon .fa { + font-size: inherit; + line-height: inherit; +} + +.tabs { + -webkit-overflow-scrolling: touch; + align-items: stretch; + display: flex; + font-size: 1rem; + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; +} + +.tabs a { + align-items: center; + border-bottom-color: #232a38; + border-bottom-style: solid; + border-bottom-width: 1px; + color: #e8ecf4; + display: flex; + justify-content: center; + margin-bottom: -1px; + padding: 0.5em 1em; + vertical-align: top; +} + +.tabs a:hover { + border-bottom-color: #363636; + color: #363636; +} + +.tabs li { + display: block; +} + +.tabs li.is-active a { + border-bottom-color: #ff5f2e; + color: #ff5f2e; +} + +.tabs ul { + align-items: center; + border-bottom-color: #232a38; + border-bottom-style: solid; + border-bottom-width: 1px; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; +} + +.tabs ul.is-left { + padding-right: 0.75em; +} + +.tabs ul.is-center { + flex: none; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; +} + +.tabs ul.is-right { + justify-content: flex-end; + padding-left: 0.75em; +} + +.tabs .icon:first-child { + margin-right: 0.5em; +} + +.tabs .icon:last-child { + margin-left: 0.5em; +} + +.tabs.is-centered ul { + justify-content: center; +} + +.tabs.is-right ul { + justify-content: flex-end; +} + +.tabs.is-boxed a { + border: 1px solid transparent; + border-radius: 10px 10px 0 0; +} + +.tabs.is-boxed a:hover { + background-color: whitesmoke; + border-bottom-color: #232a38; +} + +.tabs.is-boxed li.is-active a { + background-color: #0b0e14; + border-color: #232a38; + border-bottom-color: transparent !important; +} + +.tabs.is-fullwidth li { + flex-grow: 1; + flex-shrink: 0; +} + +.tabs.is-toggle a { + border-color: #232a38; + border-style: solid; + border-width: 1px; + margin-bottom: 0; + position: relative; +} + +.tabs.is-toggle a:hover { + background-color: whitesmoke; + border-color: #b5b5b5; + z-index: 2; +} + +.tabs.is-toggle li + li { + margin-left: -1px; +} + +.tabs.is-toggle li:first-child a { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} + +.tabs.is-toggle li:last-child a { + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} + +.tabs.is-toggle li.is-active a { + background-color: #ff5f2e; + border-color: #ff5f2e; + color: #fff; + z-index: 1; +} + +.tabs.is-toggle ul { + border-bottom: none; +} + +.tabs.is-toggle.is-toggle-rounded li:first-child a { + border-bottom-left-radius: 999px; + border-top-left-radius: 999px; + padding-left: 1.25em; +} + +.tabs.is-toggle.is-toggle-rounded li:last-child a { + border-bottom-right-radius: 999px; + border-top-right-radius: 999px; + padding-right: 1.25em; +} + +.tabs.is-small { + font-size: 0.75rem; +} + +.tabs.is-medium { + font-size: 1.25rem; +} + +.tabs.is-large { + font-size: 1.5rem; +} + +/* Bulma Grid */ +.column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: 0.75rem; +} + +.columns.is-mobile > .column.is-narrow { + flex: none; + width: unset; +} + +.columns.is-mobile > .column.is-full { + flex: none; + width: 100%; +} + +.columns.is-mobile > .column.is-three-quarters { + flex: none; + width: 75%; +} + +.columns.is-mobile > .column.is-two-thirds { + flex: none; + width: 66.6666%; +} + +.columns.is-mobile > .column.is-half { + flex: none; + width: 50%; +} + +.columns.is-mobile > .column.is-one-third { + flex: none; + width: 33.3333%; +} + +.columns.is-mobile > .column.is-one-quarter { + flex: none; + width: 25%; +} + +.columns.is-mobile > .column.is-one-fifth { + flex: none; + width: 20%; +} + +.columns.is-mobile > .column.is-two-fifths { + flex: none; + width: 40%; +} + +.columns.is-mobile > .column.is-three-fifths { + flex: none; + width: 60%; +} + +.columns.is-mobile > .column.is-four-fifths { + flex: none; + width: 80%; +} + +.columns.is-mobile > .column.is-offset-three-quarters { + margin-left: 75%; +} + +.columns.is-mobile > .column.is-offset-two-thirds { + margin-left: 66.6666%; +} + +.columns.is-mobile > .column.is-offset-half { + margin-left: 50%; +} + +.columns.is-mobile > .column.is-offset-one-third { + margin-left: 33.3333%; +} + +.columns.is-mobile > .column.is-offset-one-quarter { + margin-left: 25%; +} + +.columns.is-mobile > .column.is-offset-one-fifth { + margin-left: 20%; +} + +.columns.is-mobile > .column.is-offset-two-fifths { + margin-left: 40%; +} + +.columns.is-mobile > .column.is-offset-three-fifths { + margin-left: 60%; +} + +.columns.is-mobile > .column.is-offset-four-fifths { + margin-left: 80%; +} + +.columns.is-mobile > .column.is-0 { + flex: none; + width: 0%; +} + +.columns.is-mobile > .column.is-offset-0 { + margin-left: 0%; +} + +.columns.is-mobile > .column.is-1 { + flex: none; + width: 8.33333%; +} + +.columns.is-mobile > .column.is-offset-1 { + margin-left: 8.33333%; +} + +.columns.is-mobile > .column.is-2 { + flex: none; + width: 16.66667%; +} + +.columns.is-mobile > .column.is-offset-2 { + margin-left: 16.66667%; +} + +.columns.is-mobile > .column.is-3 { + flex: none; + width: 25%; +} + +.columns.is-mobile > .column.is-offset-3 { + margin-left: 25%; +} + +.columns.is-mobile > .column.is-4 { + flex: none; + width: 33.33333%; +} + +.columns.is-mobile > .column.is-offset-4 { + margin-left: 33.33333%; +} + +.columns.is-mobile > .column.is-5 { + flex: none; + width: 41.66667%; +} + +.columns.is-mobile > .column.is-offset-5 { + margin-left: 41.66667%; +} + +.columns.is-mobile > .column.is-6 { + flex: none; + width: 50%; +} + +.columns.is-mobile > .column.is-offset-6 { + margin-left: 50%; +} + +.columns.is-mobile > .column.is-7 { + flex: none; + width: 58.33333%; +} + +.columns.is-mobile > .column.is-offset-7 { + margin-left: 58.33333%; +} + +.columns.is-mobile > .column.is-8 { + flex: none; + width: 66.66667%; +} + +.columns.is-mobile > .column.is-offset-8 { + margin-left: 66.66667%; +} + +.columns.is-mobile > .column.is-9 { + flex: none; + width: 75%; +} + +.columns.is-mobile > .column.is-offset-9 { + margin-left: 75%; +} + +.columns.is-mobile > .column.is-10 { + flex: none; + width: 83.33333%; +} + +.columns.is-mobile > .column.is-offset-10 { + margin-left: 83.33333%; +} + +.columns.is-mobile > .column.is-11 { + flex: none; + width: 91.66667%; +} + +.columns.is-mobile > .column.is-offset-11 { + margin-left: 91.66667%; +} + +.columns.is-mobile > .column.is-12 { + flex: none; + width: 100%; +} + +.columns.is-mobile > .column.is-offset-12 { + margin-left: 100%; +} + +@media screen and (max-width: 768px) { + .column.is-narrow-mobile { + flex: none; + width: unset; + } + .column.is-full-mobile { + flex: none; + width: 100%; + } + .column.is-three-quarters-mobile { + flex: none; + width: 75%; + } + .column.is-two-thirds-mobile { + flex: none; + width: 66.6666%; + } + .column.is-half-mobile { + flex: none; + width: 50%; + } + .column.is-one-third-mobile { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter-mobile { + flex: none; + width: 25%; + } + .column.is-one-fifth-mobile { + flex: none; + width: 20%; + } + .column.is-two-fifths-mobile { + flex: none; + width: 40%; + } + .column.is-three-fifths-mobile { + flex: none; + width: 60%; + } + .column.is-four-fifths-mobile { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters-mobile { + margin-left: 75%; + } + .column.is-offset-two-thirds-mobile { + margin-left: 66.6666%; + } + .column.is-offset-half-mobile { + margin-left: 50%; + } + .column.is-offset-one-third-mobile { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter-mobile { + margin-left: 25%; + } + .column.is-offset-one-fifth-mobile { + margin-left: 20%; + } + .column.is-offset-two-fifths-mobile { + margin-left: 40%; + } + .column.is-offset-three-fifths-mobile { + margin-left: 60%; + } + .column.is-offset-four-fifths-mobile { + margin-left: 80%; + } + .column.is-0-mobile { + flex: none; + width: 0%; + } + .column.is-offset-0-mobile { + margin-left: 0%; + } + .column.is-1-mobile { + flex: none; + width: 8.33333%; + } + .column.is-offset-1-mobile { + margin-left: 8.33333%; + } + .column.is-2-mobile { + flex: none; + width: 16.66667%; + } + .column.is-offset-2-mobile { + margin-left: 16.66667%; + } + .column.is-3-mobile { + flex: none; + width: 25%; + } + .column.is-offset-3-mobile { + margin-left: 25%; + } + .column.is-4-mobile { + flex: none; + width: 33.33333%; + } + .column.is-offset-4-mobile { + margin-left: 33.33333%; + } + .column.is-5-mobile { + flex: none; + width: 41.66667%; + } + .column.is-offset-5-mobile { + margin-left: 41.66667%; + } + .column.is-6-mobile { + flex: none; + width: 50%; + } + .column.is-offset-6-mobile { + margin-left: 50%; + } + .column.is-7-mobile { + flex: none; + width: 58.33333%; + } + .column.is-offset-7-mobile { + margin-left: 58.33333%; + } + .column.is-8-mobile { + flex: none; + width: 66.66667%; + } + .column.is-offset-8-mobile { + margin-left: 66.66667%; + } + .column.is-9-mobile { + flex: none; + width: 75%; + } + .column.is-offset-9-mobile { + margin-left: 75%; + } + .column.is-10-mobile { + flex: none; + width: 83.33333%; + } + .column.is-offset-10-mobile { + margin-left: 83.33333%; + } + .column.is-11-mobile { + flex: none; + width: 91.66667%; + } + .column.is-offset-11-mobile { + margin-left: 91.66667%; + } + .column.is-12-mobile { + flex: none; + width: 100%; + } + .column.is-offset-12-mobile { + margin-left: 100%; + } +} + +@media screen and (min-width: 769px), print { + .column.is-narrow, .column.is-narrow-tablet { + flex: none; + width: unset; + } + .column.is-full, .column.is-full-tablet { + flex: none; + width: 100%; + } + .column.is-three-quarters, .column.is-three-quarters-tablet { + flex: none; + width: 75%; + } + .column.is-two-thirds, .column.is-two-thirds-tablet { + flex: none; + width: 66.6666%; + } + .column.is-half, .column.is-half-tablet { + flex: none; + width: 50%; + } + .column.is-one-third, .column.is-one-third-tablet { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter, .column.is-one-quarter-tablet { + flex: none; + width: 25%; + } + .column.is-one-fifth, .column.is-one-fifth-tablet { + flex: none; + width: 20%; + } + .column.is-two-fifths, .column.is-two-fifths-tablet { + flex: none; + width: 40%; + } + .column.is-three-fifths, .column.is-three-fifths-tablet { + flex: none; + width: 60%; + } + .column.is-four-fifths, .column.is-four-fifths-tablet { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { + margin-left: 75%; + } + .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { + margin-left: 66.6666%; + } + .column.is-offset-half, .column.is-offset-half-tablet { + margin-left: 50%; + } + .column.is-offset-one-third, .column.is-offset-one-third-tablet { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { + margin-left: 25%; + } + .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { + margin-left: 20%; + } + .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { + margin-left: 40%; + } + .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { + margin-left: 60%; + } + .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { + margin-left: 80%; + } + .column.is-0, .column.is-0-tablet { + flex: none; + width: 0%; + } + .column.is-offset-0, .column.is-offset-0-tablet { + margin-left: 0%; + } + .column.is-1, .column.is-1-tablet { + flex: none; + width: 8.33333%; + } + .column.is-offset-1, .column.is-offset-1-tablet { + margin-left: 8.33333%; + } + .column.is-2, .column.is-2-tablet { + flex: none; + width: 16.66667%; + } + .column.is-offset-2, .column.is-offset-2-tablet { + margin-left: 16.66667%; + } + .column.is-3, .column.is-3-tablet { + flex: none; + width: 25%; + } + .column.is-offset-3, .column.is-offset-3-tablet { + margin-left: 25%; + } + .column.is-4, .column.is-4-tablet { + flex: none; + width: 33.33333%; + } + .column.is-offset-4, .column.is-offset-4-tablet { + margin-left: 33.33333%; + } + .column.is-5, .column.is-5-tablet { + flex: none; + width: 41.66667%; + } + .column.is-offset-5, .column.is-offset-5-tablet { + margin-left: 41.66667%; + } + .column.is-6, .column.is-6-tablet { + flex: none; + width: 50%; + } + .column.is-offset-6, .column.is-offset-6-tablet { + margin-left: 50%; + } + .column.is-7, .column.is-7-tablet { + flex: none; + width: 58.33333%; + } + .column.is-offset-7, .column.is-offset-7-tablet { + margin-left: 58.33333%; + } + .column.is-8, .column.is-8-tablet { + flex: none; + width: 66.66667%; + } + .column.is-offset-8, .column.is-offset-8-tablet { + margin-left: 66.66667%; + } + .column.is-9, .column.is-9-tablet { + flex: none; + width: 75%; + } + .column.is-offset-9, .column.is-offset-9-tablet { + margin-left: 75%; + } + .column.is-10, .column.is-10-tablet { + flex: none; + width: 83.33333%; + } + .column.is-offset-10, .column.is-offset-10-tablet { + margin-left: 83.33333%; + } + .column.is-11, .column.is-11-tablet { + flex: none; + width: 91.66667%; + } + .column.is-offset-11, .column.is-offset-11-tablet { + margin-left: 91.66667%; + } + .column.is-12, .column.is-12-tablet { + flex: none; + width: 100%; + } + .column.is-offset-12, .column.is-offset-12-tablet { + margin-left: 100%; + } +} + +@media screen and (max-width: 1023px) { + .column.is-narrow-touch { + flex: none; + width: unset; + } + .column.is-full-touch { + flex: none; + width: 100%; + } + .column.is-three-quarters-touch { + flex: none; + width: 75%; + } + .column.is-two-thirds-touch { + flex: none; + width: 66.6666%; + } + .column.is-half-touch { + flex: none; + width: 50%; + } + .column.is-one-third-touch { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter-touch { + flex: none; + width: 25%; + } + .column.is-one-fifth-touch { + flex: none; + width: 20%; + } + .column.is-two-fifths-touch { + flex: none; + width: 40%; + } + .column.is-three-fifths-touch { + flex: none; + width: 60%; + } + .column.is-four-fifths-touch { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters-touch { + margin-left: 75%; + } + .column.is-offset-two-thirds-touch { + margin-left: 66.6666%; + } + .column.is-offset-half-touch { + margin-left: 50%; + } + .column.is-offset-one-third-touch { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter-touch { + margin-left: 25%; + } + .column.is-offset-one-fifth-touch { + margin-left: 20%; + } + .column.is-offset-two-fifths-touch { + margin-left: 40%; + } + .column.is-offset-three-fifths-touch { + margin-left: 60%; + } + .column.is-offset-four-fifths-touch { + margin-left: 80%; + } + .column.is-0-touch { + flex: none; + width: 0%; + } + .column.is-offset-0-touch { + margin-left: 0%; + } + .column.is-1-touch { + flex: none; + width: 8.33333%; + } + .column.is-offset-1-touch { + margin-left: 8.33333%; + } + .column.is-2-touch { + flex: none; + width: 16.66667%; + } + .column.is-offset-2-touch { + margin-left: 16.66667%; + } + .column.is-3-touch { + flex: none; + width: 25%; + } + .column.is-offset-3-touch { + margin-left: 25%; + } + .column.is-4-touch { + flex: none; + width: 33.33333%; + } + .column.is-offset-4-touch { + margin-left: 33.33333%; + } + .column.is-5-touch { + flex: none; + width: 41.66667%; + } + .column.is-offset-5-touch { + margin-left: 41.66667%; + } + .column.is-6-touch { + flex: none; + width: 50%; + } + .column.is-offset-6-touch { + margin-left: 50%; + } + .column.is-7-touch { + flex: none; + width: 58.33333%; + } + .column.is-offset-7-touch { + margin-left: 58.33333%; + } + .column.is-8-touch { + flex: none; + width: 66.66667%; + } + .column.is-offset-8-touch { + margin-left: 66.66667%; + } + .column.is-9-touch { + flex: none; + width: 75%; + } + .column.is-offset-9-touch { + margin-left: 75%; + } + .column.is-10-touch { + flex: none; + width: 83.33333%; + } + .column.is-offset-10-touch { + margin-left: 83.33333%; + } + .column.is-11-touch { + flex: none; + width: 91.66667%; + } + .column.is-offset-11-touch { + margin-left: 91.66667%; + } + .column.is-12-touch { + flex: none; + width: 100%; + } + .column.is-offset-12-touch { + margin-left: 100%; + } +} + +@media screen and (min-width: 1024px) { + .column.is-narrow-desktop { + flex: none; + width: unset; + } + .column.is-full-desktop { + flex: none; + width: 100%; + } + .column.is-three-quarters-desktop { + flex: none; + width: 75%; + } + .column.is-two-thirds-desktop { + flex: none; + width: 66.6666%; + } + .column.is-half-desktop { + flex: none; + width: 50%; + } + .column.is-one-third-desktop { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter-desktop { + flex: none; + width: 25%; + } + .column.is-one-fifth-desktop { + flex: none; + width: 20%; + } + .column.is-two-fifths-desktop { + flex: none; + width: 40%; + } + .column.is-three-fifths-desktop { + flex: none; + width: 60%; + } + .column.is-four-fifths-desktop { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters-desktop { + margin-left: 75%; + } + .column.is-offset-two-thirds-desktop { + margin-left: 66.6666%; + } + .column.is-offset-half-desktop { + margin-left: 50%; + } + .column.is-offset-one-third-desktop { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter-desktop { + margin-left: 25%; + } + .column.is-offset-one-fifth-desktop { + margin-left: 20%; + } + .column.is-offset-two-fifths-desktop { + margin-left: 40%; + } + .column.is-offset-three-fifths-desktop { + margin-left: 60%; + } + .column.is-offset-four-fifths-desktop { + margin-left: 80%; + } + .column.is-0-desktop { + flex: none; + width: 0%; + } + .column.is-offset-0-desktop { + margin-left: 0%; + } + .column.is-1-desktop { + flex: none; + width: 8.33333%; + } + .column.is-offset-1-desktop { + margin-left: 8.33333%; + } + .column.is-2-desktop { + flex: none; + width: 16.66667%; + } + .column.is-offset-2-desktop { + margin-left: 16.66667%; + } + .column.is-3-desktop { + flex: none; + width: 25%; + } + .column.is-offset-3-desktop { + margin-left: 25%; + } + .column.is-4-desktop { + flex: none; + width: 33.33333%; + } + .column.is-offset-4-desktop { + margin-left: 33.33333%; + } + .column.is-5-desktop { + flex: none; + width: 41.66667%; + } + .column.is-offset-5-desktop { + margin-left: 41.66667%; + } + .column.is-6-desktop { + flex: none; + width: 50%; + } + .column.is-offset-6-desktop { + margin-left: 50%; + } + .column.is-7-desktop { + flex: none; + width: 58.33333%; + } + .column.is-offset-7-desktop { + margin-left: 58.33333%; + } + .column.is-8-desktop { + flex: none; + width: 66.66667%; + } + .column.is-offset-8-desktop { + margin-left: 66.66667%; + } + .column.is-9-desktop { + flex: none; + width: 75%; + } + .column.is-offset-9-desktop { + margin-left: 75%; + } + .column.is-10-desktop { + flex: none; + width: 83.33333%; + } + .column.is-offset-10-desktop { + margin-left: 83.33333%; + } + .column.is-11-desktop { + flex: none; + width: 91.66667%; + } + .column.is-offset-11-desktop { + margin-left: 91.66667%; + } + .column.is-12-desktop { + flex: none; + width: 100%; + } + .column.is-offset-12-desktop { + margin-left: 100%; + } +} + +@media screen and (min-width: 1216px) { + .column.is-narrow-widescreen { + flex: none; + width: unset; + } + .column.is-full-widescreen { + flex: none; + width: 100%; + } + .column.is-three-quarters-widescreen { + flex: none; + width: 75%; + } + .column.is-two-thirds-widescreen { + flex: none; + width: 66.6666%; + } + .column.is-half-widescreen { + flex: none; + width: 50%; + } + .column.is-one-third-widescreen { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter-widescreen { + flex: none; + width: 25%; + } + .column.is-one-fifth-widescreen { + flex: none; + width: 20%; + } + .column.is-two-fifths-widescreen { + flex: none; + width: 40%; + } + .column.is-three-fifths-widescreen { + flex: none; + width: 60%; + } + .column.is-four-fifths-widescreen { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters-widescreen { + margin-left: 75%; + } + .column.is-offset-two-thirds-widescreen { + margin-left: 66.6666%; + } + .column.is-offset-half-widescreen { + margin-left: 50%; + } + .column.is-offset-one-third-widescreen { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter-widescreen { + margin-left: 25%; + } + .column.is-offset-one-fifth-widescreen { + margin-left: 20%; + } + .column.is-offset-two-fifths-widescreen { + margin-left: 40%; + } + .column.is-offset-three-fifths-widescreen { + margin-left: 60%; + } + .column.is-offset-four-fifths-widescreen { + margin-left: 80%; + } + .column.is-0-widescreen { + flex: none; + width: 0%; + } + .column.is-offset-0-widescreen { + margin-left: 0%; + } + .column.is-1-widescreen { + flex: none; + width: 8.33333%; + } + .column.is-offset-1-widescreen { + margin-left: 8.33333%; + } + .column.is-2-widescreen { + flex: none; + width: 16.66667%; + } + .column.is-offset-2-widescreen { + margin-left: 16.66667%; + } + .column.is-3-widescreen { + flex: none; + width: 25%; + } + .column.is-offset-3-widescreen { + margin-left: 25%; + } + .column.is-4-widescreen { + flex: none; + width: 33.33333%; + } + .column.is-offset-4-widescreen { + margin-left: 33.33333%; + } + .column.is-5-widescreen { + flex: none; + width: 41.66667%; + } + .column.is-offset-5-widescreen { + margin-left: 41.66667%; + } + .column.is-6-widescreen { + flex: none; + width: 50%; + } + .column.is-offset-6-widescreen { + margin-left: 50%; + } + .column.is-7-widescreen { + flex: none; + width: 58.33333%; + } + .column.is-offset-7-widescreen { + margin-left: 58.33333%; + } + .column.is-8-widescreen { + flex: none; + width: 66.66667%; + } + .column.is-offset-8-widescreen { + margin-left: 66.66667%; + } + .column.is-9-widescreen { + flex: none; + width: 75%; + } + .column.is-offset-9-widescreen { + margin-left: 75%; + } + .column.is-10-widescreen { + flex: none; + width: 83.33333%; + } + .column.is-offset-10-widescreen { + margin-left: 83.33333%; + } + .column.is-11-widescreen { + flex: none; + width: 91.66667%; + } + .column.is-offset-11-widescreen { + margin-left: 91.66667%; + } + .column.is-12-widescreen { + flex: none; + width: 100%; + } + .column.is-offset-12-widescreen { + margin-left: 100%; + } +} + +@media screen and (min-width: 1408px) { + .column.is-narrow-fullhd { + flex: none; + width: unset; + } + .column.is-full-fullhd { + flex: none; + width: 100%; + } + .column.is-three-quarters-fullhd { + flex: none; + width: 75%; + } + .column.is-two-thirds-fullhd { + flex: none; + width: 66.6666%; + } + .column.is-half-fullhd { + flex: none; + width: 50%; + } + .column.is-one-third-fullhd { + flex: none; + width: 33.3333%; + } + .column.is-one-quarter-fullhd { + flex: none; + width: 25%; + } + .column.is-one-fifth-fullhd { + flex: none; + width: 20%; + } + .column.is-two-fifths-fullhd { + flex: none; + width: 40%; + } + .column.is-three-fifths-fullhd { + flex: none; + width: 60%; + } + .column.is-four-fifths-fullhd { + flex: none; + width: 80%; + } + .column.is-offset-three-quarters-fullhd { + margin-left: 75%; + } + .column.is-offset-two-thirds-fullhd { + margin-left: 66.6666%; + } + .column.is-offset-half-fullhd { + margin-left: 50%; + } + .column.is-offset-one-third-fullhd { + margin-left: 33.3333%; + } + .column.is-offset-one-quarter-fullhd { + margin-left: 25%; + } + .column.is-offset-one-fifth-fullhd { + margin-left: 20%; + } + .column.is-offset-two-fifths-fullhd { + margin-left: 40%; + } + .column.is-offset-three-fifths-fullhd { + margin-left: 60%; + } + .column.is-offset-four-fifths-fullhd { + margin-left: 80%; + } + .column.is-0-fullhd { + flex: none; + width: 0%; + } + .column.is-offset-0-fullhd { + margin-left: 0%; + } + .column.is-1-fullhd { + flex: none; + width: 8.33333%; + } + .column.is-offset-1-fullhd { + margin-left: 8.33333%; + } + .column.is-2-fullhd { + flex: none; + width: 16.66667%; + } + .column.is-offset-2-fullhd { + margin-left: 16.66667%; + } + .column.is-3-fullhd { + flex: none; + width: 25%; + } + .column.is-offset-3-fullhd { + margin-left: 25%; + } + .column.is-4-fullhd { + flex: none; + width: 33.33333%; + } + .column.is-offset-4-fullhd { + margin-left: 33.33333%; + } + .column.is-5-fullhd { + flex: none; + width: 41.66667%; + } + .column.is-offset-5-fullhd { + margin-left: 41.66667%; + } + .column.is-6-fullhd { + flex: none; + width: 50%; + } + .column.is-offset-6-fullhd { + margin-left: 50%; + } + .column.is-7-fullhd { + flex: none; + width: 58.33333%; + } + .column.is-offset-7-fullhd { + margin-left: 58.33333%; + } + .column.is-8-fullhd { + flex: none; + width: 66.66667%; + } + .column.is-offset-8-fullhd { + margin-left: 66.66667%; + } + .column.is-9-fullhd { + flex: none; + width: 75%; + } + .column.is-offset-9-fullhd { + margin-left: 75%; + } + .column.is-10-fullhd { + flex: none; + width: 83.33333%; + } + .column.is-offset-10-fullhd { + margin-left: 83.33333%; + } + .column.is-11-fullhd { + flex: none; + width: 91.66667%; + } + .column.is-offset-11-fullhd { + margin-left: 91.66667%; + } + .column.is-12-fullhd { + flex: none; + width: 100%; + } + .column.is-offset-12-fullhd { + margin-left: 100%; + } +} + +.columns { + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; +} + +.columns:last-child { + margin-bottom: -0.75rem; +} + +.columns:not(:last-child) { + margin-bottom: calc(1.5rem - 0.75rem); +} + +.columns.is-centered { + justify-content: center; +} + +.columns.is-gapless { + margin-left: 0; + margin-right: 0; + margin-top: 0; +} + +.columns.is-gapless > .column { + margin: 0; + padding: 0 !important; +} + +.columns.is-gapless:not(:last-child) { + margin-bottom: 1.5rem; +} + +.columns.is-gapless:last-child { + margin-bottom: 0; +} + +.columns.is-mobile { + display: flex; +} + +.columns.is-multiline { + flex-wrap: wrap; +} + +.columns.is-vcentered { + align-items: center; +} + +@media screen and (min-width: 769px), print { + .columns:not(.is-desktop) { + display: flex; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-desktop { + display: flex; + } +} + +.columns.is-variable { + --columnGap: 0.75rem; + margin-left: calc(-1 * var(--columnGap)); + margin-right: calc(-1 * var(--columnGap)); +} + +.columns.is-variable > .column { + padding-left: var(--columnGap); + padding-right: var(--columnGap); +} + +.columns.is-variable.is-0 { + --columnGap: 0rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-0-mobile { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-0-tablet { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-0-tablet-only { + --columnGap: 0rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-0-touch { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-0-desktop { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-0-desktop-only { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-0-widescreen { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-0-widescreen-only { + --columnGap: 0rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-0-fullhd { + --columnGap: 0rem; + } +} + +.columns.is-variable.is-1 { + --columnGap: 0.25rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-1-mobile { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-1-tablet { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-1-tablet-only { + --columnGap: 0.25rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-1-touch { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-1-desktop { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-1-desktop-only { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-1-widescreen { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-1-widescreen-only { + --columnGap: 0.25rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-1-fullhd { + --columnGap: 0.25rem; + } +} + +.columns.is-variable.is-2 { + --columnGap: 0.5rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-2-mobile { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-2-tablet { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-2-tablet-only { + --columnGap: 0.5rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-2-touch { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-2-desktop { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-2-desktop-only { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-2-widescreen { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-2-widescreen-only { + --columnGap: 0.5rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-2-fullhd { + --columnGap: 0.5rem; + } +} + +.columns.is-variable.is-3 { + --columnGap: 0.75rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-3-mobile { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-3-tablet { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-3-tablet-only { + --columnGap: 0.75rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-3-touch { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-3-desktop { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-3-desktop-only { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-3-widescreen { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-3-widescreen-only { + --columnGap: 0.75rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-3-fullhd { + --columnGap: 0.75rem; + } +} + +.columns.is-variable.is-4 { + --columnGap: 1rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-4-mobile { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-4-tablet { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-4-tablet-only { + --columnGap: 1rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-4-touch { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-4-desktop { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-4-desktop-only { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-4-widescreen { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-4-widescreen-only { + --columnGap: 1rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-4-fullhd { + --columnGap: 1rem; + } +} + +.columns.is-variable.is-5 { + --columnGap: 1.25rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-5-mobile { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-5-tablet { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-5-tablet-only { + --columnGap: 1.25rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-5-touch { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-5-desktop { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-5-desktop-only { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-5-widescreen { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-5-widescreen-only { + --columnGap: 1.25rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-5-fullhd { + --columnGap: 1.25rem; + } +} + +.columns.is-variable.is-6 { + --columnGap: 1.5rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-6-mobile { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-6-tablet { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-6-tablet-only { + --columnGap: 1.5rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-6-touch { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-6-desktop { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-6-desktop-only { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-6-widescreen { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-6-widescreen-only { + --columnGap: 1.5rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-6-fullhd { + --columnGap: 1.5rem; + } +} + +.columns.is-variable.is-7 { + --columnGap: 1.75rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-7-mobile { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-7-tablet { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-7-tablet-only { + --columnGap: 1.75rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-7-touch { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-7-desktop { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-7-desktop-only { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-7-widescreen { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-7-widescreen-only { + --columnGap: 1.75rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-7-fullhd { + --columnGap: 1.75rem; + } +} + +.columns.is-variable.is-8 { + --columnGap: 2rem; +} + +@media screen and (max-width: 768px) { + .columns.is-variable.is-8-mobile { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 769px), print { + .columns.is-variable.is-8-tablet { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .columns.is-variable.is-8-tablet-only { + --columnGap: 2rem; + } +} + +@media screen and (max-width: 1023px) { + .columns.is-variable.is-8-touch { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 1024px) { + .columns.is-variable.is-8-desktop { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .columns.is-variable.is-8-desktop-only { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 1216px) { + .columns.is-variable.is-8-widescreen { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .columns.is-variable.is-8-widescreen-only { + --columnGap: 2rem; + } +} + +@media screen and (min-width: 1408px) { + .columns.is-variable.is-8-fullhd { + --columnGap: 2rem; + } +} + +.tile { + align-items: stretch; + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; +} + +.tile.is-ancestor { + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; +} + +.tile.is-ancestor:last-child { + margin-bottom: -0.75rem; +} + +.tile.is-ancestor:not(:last-child) { + margin-bottom: 0.75rem; +} + +.tile.is-child { + margin: 0 !important; +} + +.tile.is-parent { + padding: 0.75rem; +} + +.tile.is-vertical { + flex-direction: column; +} + +.tile.is-vertical > .tile.is-child:not(:last-child) { + margin-bottom: 1.5rem !important; +} + +@media screen and (min-width: 769px), print { + .tile:not(.is-child) { + display: flex; + } + .tile.is-1 { + flex: none; + width: 8.33333%; + } + .tile.is-2 { + flex: none; + width: 16.66667%; + } + .tile.is-3 { + flex: none; + width: 25%; + } + .tile.is-4 { + flex: none; + width: 33.33333%; + } + .tile.is-5 { + flex: none; + width: 41.66667%; + } + .tile.is-6 { + flex: none; + width: 50%; + } + .tile.is-7 { + flex: none; + width: 58.33333%; + } + .tile.is-8 { + flex: none; + width: 66.66667%; + } + .tile.is-9 { + flex: none; + width: 75%; + } + .tile.is-10 { + flex: none; + width: 83.33333%; + } + .tile.is-11 { + flex: none; + width: 91.66667%; + } + .tile.is-12 { + flex: none; + width: 100%; + } +} + +/* Bulma Helpers */ +.has-text-white { + color: white !important; +} + +a.has-text-white:hover, a.has-text-white:focus { + color: #e6e6e6 !important; +} + +.has-background-white { + background-color: white !important; +} + +.has-text-black { + color: #0a0a0a !important; +} + +a.has-text-black:hover, a.has-text-black:focus { + color: black !important; +} + +.has-background-black { + background-color: #0a0a0a !important; +} + +.has-text-light { + color: whitesmoke !important; +} + +a.has-text-light:hover, a.has-text-light:focus { + color: #dbdbdb !important; +} + +.has-background-light { + background-color: whitesmoke !important; +} + +.has-text-dark { + color: #363636 !important; +} + +a.has-text-dark:hover, a.has-text-dark:focus { + color: #1c1c1c !important; +} + +.has-background-dark { + background-color: #363636 !important; +} + +.has-text-primary { + color: #ff5f2e !important; +} + +a.has-text-primary:hover, a.has-text-primary:focus { + color: #fa3b00 !important; +} + +.has-background-primary { + background-color: #ff5f2e !important; +} + +.has-text-primary-light { + color: #ffefeb !important; +} + +a.has-text-primary-light:hover, a.has-text-primary-light:focus { + color: #ffc8b8 !important; +} + +.has-background-primary-light { + background-color: #ffefeb !important; +} + +.has-text-primary-dark { + color: #c72f00 !important; +} + +a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { + color: #fa3b00 !important; +} + +.has-background-primary-dark { + background-color: #c72f00 !important; +} + +.has-text-link { + color: #ff5f2e !important; +} + +a.has-text-link:hover, a.has-text-link:focus { + color: #fa3b00 !important; +} + +.has-background-link { + background-color: #ff5f2e !important; +} + +.has-text-link-light { + color: #ffefeb !important; +} + +a.has-text-link-light:hover, a.has-text-link-light:focus { + color: #ffc8b8 !important; +} + +.has-background-link-light { + background-color: #ffefeb !important; +} + +.has-text-link-dark { + color: #c72f00 !important; +} + +a.has-text-link-dark:hover, a.has-text-link-dark:focus { + color: #fa3b00 !important; +} + +.has-background-link-dark { + background-color: #c72f00 !important; +} + +.has-text-info { + color: #3b82f6 !important; +} + +a.has-text-info:hover, a.has-text-info:focus { + color: #0b63f3 !important; +} + +.has-background-info { + background-color: #3b82f6 !important; +} + +.has-text-info-light { + color: #ebf3fe !important; +} + +a.has-text-info-light:hover, a.has-text-info-light:focus { + color: #bbd3fc !important; +} + +.has-background-info-light { + background-color: #ebf3fe !important; +} + +.has-text-info-dark { + color: #0954cd !important; +} + +a.has-text-info-dark:hover, a.has-text-info-dark:focus { + color: #156af4 !important; +} + +.has-background-info-dark { + background-color: #0954cd !important; +} + +.has-text-success { + color: #10b981 !important; +} + +a.has-text-success:hover, a.has-text-success:focus { + color: #0c8a60 !important; +} + +.has-background-success { + background-color: #10b981 !important; +} + +.has-text-success-light { + color: #ecfdf8 !important; +} + +a.has-text-success-light:hover, a.has-text-success-light:focus { + color: #bdf9e5 !important; +} + +.has-background-success-light { + background-color: #ecfdf8 !important; +} + +.has-text-success-dark { + color: #0ea473 !important; +} + +a.has-text-success-dark:hover, a.has-text-success-dark:focus { + color: #12d393 !important; +} + +.has-background-success-dark { + background-color: #0ea473 !important; +} + +.has-text-warning { + color: #ffb020 !important; +} + +a.has-text-warning:hover, a.has-text-warning:focus { + color: #ec9800 !important; +} + +.has-background-warning { + background-color: #ffb020 !important; +} + +.has-text-warning-light { + color: #fff8eb !important; +} + +a.has-text-warning-light:hover, a.has-text-warning-light:focus { + color: #ffe6b8 !important; +} + +.has-background-warning-light { + background-color: #fff8eb !important; +} + +.has-text-warning-dark { + color: #946000 !important; +} + +a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { + color: #c78000 !important; +} + +.has-background-warning-dark { + background-color: #946000 !important; +} + +.has-text-danger { + color: #f04438 !important; +} + +a.has-text-danger:hover, a.has-text-danger:focus { + color: #e41f11 !important; +} + +.has-background-danger { + background-color: #f04438 !important; +} + +.has-text-danger-light { + color: #feedec !important; +} + +a.has-text-danger-light:hover, a.has-text-danger-light:focus { + color: #fac1bd !important; +} + +.has-background-danger-light { + background-color: #feedec !important; +} + +.has-text-danger-dark { + color: #cc1c0f !important; +} + +a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { + color: #ee2e20 !important; +} + +.has-background-danger-dark { + background-color: #cc1c0f !important; +} + +.has-text-black-bis { + color: #121212 !important; +} + +.has-background-black-bis { + background-color: #121212 !important; +} + +.has-text-black-ter { + color: #242424 !important; +} + +.has-background-black-ter { + background-color: #242424 !important; +} + +.has-text-grey-darker { + color: #363636 !important; +} + +.has-background-grey-darker { + background-color: #363636 !important; +} + +.has-text-grey-dark { + color: #4a4a4a !important; +} + +.has-background-grey-dark { + background-color: #4a4a4a !important; +} + +.has-text-grey { + color: #7a7a7a !important; +} + +.has-background-grey { + background-color: #7a7a7a !important; +} + +.has-text-grey-light { + color: #b5b5b5 !important; +} + +.has-background-grey-light { + background-color: #b5b5b5 !important; +} + +.has-text-grey-lighter { + color: #dbdbdb !important; +} + +.has-background-grey-lighter { + background-color: #dbdbdb !important; +} + +.has-text-white-ter { + color: whitesmoke !important; +} + +.has-background-white-ter { + background-color: whitesmoke !important; +} + +.has-text-white-bis { + color: #fafafa !important; +} + +.has-background-white-bis { + background-color: #fafafa !important; +} + +.is-flex-direction-row { + flex-direction: row !important; +} + +.is-flex-direction-row-reverse { + flex-direction: row-reverse !important; +} + +.is-flex-direction-column { + flex-direction: column !important; +} + +.is-flex-direction-column-reverse { + flex-direction: column-reverse !important; +} + +.is-flex-wrap-nowrap { + flex-wrap: nowrap !important; +} + +.is-flex-wrap-wrap { + flex-wrap: wrap !important; +} + +.is-flex-wrap-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.is-justify-content-flex-start { + justify-content: flex-start !important; +} + +.is-justify-content-flex-end { + justify-content: flex-end !important; +} + +.is-justify-content-center { + justify-content: center !important; +} + +.is-justify-content-space-between { + justify-content: space-between !important; +} + +.is-justify-content-space-around { + justify-content: space-around !important; +} + +.is-justify-content-space-evenly { + justify-content: space-evenly !important; +} + +.is-justify-content-start { + justify-content: start !important; +} + +.is-justify-content-end { + justify-content: end !important; +} + +.is-justify-content-left { + justify-content: left !important; +} + +.is-justify-content-right { + justify-content: right !important; +} + +.is-align-content-flex-start { + align-content: flex-start !important; +} + +.is-align-content-flex-end { + align-content: flex-end !important; +} + +.is-align-content-center { + align-content: center !important; +} + +.is-align-content-space-between { + align-content: space-between !important; +} + +.is-align-content-space-around { + align-content: space-around !important; +} + +.is-align-content-space-evenly { + align-content: space-evenly !important; +} + +.is-align-content-stretch { + align-content: stretch !important; +} + +.is-align-content-start { + align-content: start !important; +} + +.is-align-content-end { + align-content: end !important; +} + +.is-align-content-baseline { + align-content: baseline !important; +} + +.is-align-items-stretch { + align-items: stretch !important; +} + +.is-align-items-flex-start { + align-items: flex-start !important; +} + +.is-align-items-flex-end { + align-items: flex-end !important; +} + +.is-align-items-center { + align-items: center !important; +} + +.is-align-items-baseline { + align-items: baseline !important; +} + +.is-align-items-start { + align-items: start !important; +} + +.is-align-items-end { + align-items: end !important; +} + +.is-align-items-self-start { + align-items: self-start !important; +} + +.is-align-items-self-end { + align-items: self-end !important; +} + +.is-align-self-auto { + align-self: auto !important; +} + +.is-align-self-flex-start { + align-self: flex-start !important; +} + +.is-align-self-flex-end { + align-self: flex-end !important; +} + +.is-align-self-center { + align-self: center !important; +} + +.is-align-self-baseline { + align-self: baseline !important; +} + +.is-align-self-stretch { + align-self: stretch !important; +} + +.is-flex-grow-0 { + flex-grow: 0 !important; +} + +.is-flex-grow-1 { + flex-grow: 1 !important; +} + +.is-flex-grow-2 { + flex-grow: 2 !important; +} + +.is-flex-grow-3 { + flex-grow: 3 !important; +} + +.is-flex-grow-4 { + flex-grow: 4 !important; +} + +.is-flex-grow-5 { + flex-grow: 5 !important; +} + +.is-flex-shrink-0 { + flex-shrink: 0 !important; +} + +.is-flex-shrink-1 { + flex-shrink: 1 !important; +} + +.is-flex-shrink-2 { + flex-shrink: 2 !important; +} + +.is-flex-shrink-3 { + flex-shrink: 3 !important; +} + +.is-flex-shrink-4 { + flex-shrink: 4 !important; +} + +.is-flex-shrink-5 { + flex-shrink: 5 !important; +} + +.is-clearfix::after { + clear: both; + content: " "; + display: table; +} + +.is-pulled-left { + float: left !important; +} + +.is-pulled-right { + float: right !important; +} + +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-clickable { + cursor: pointer !important; + pointer-events: all !important; +} + +.is-clipped { + overflow: hidden !important; +} + +.is-relative { + position: relative !important; +} + +.is-marginless { + margin: 0 !important; +} + +.is-paddingless { + padding: 0 !important; +} + +.m-0 { + margin: 0 !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.mr-0 { + margin-right: 0 !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.ml-0 { + margin-left: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.m-1 { + margin: 0.25rem !important; +} + +.mt-1 { + margin-top: 0.25rem !important; +} + +.mr-1 { + margin-right: 0.25rem !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.ml-1 { + margin-left: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.m-2 { + margin: 0.5rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mr-2 { + margin-right: 0.5rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.ml-2 { + margin-left: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.m-3 { + margin: 0.75rem !important; +} + +.mt-3 { + margin-top: 0.75rem !important; +} + +.mr-3 { + margin-right: 0.75rem !important; +} + +.mb-3 { + margin-bottom: 0.75rem !important; +} + +.ml-3 { + margin-left: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.m-4 { + margin: 1rem !important; +} + +.mt-4 { + margin-top: 1rem !important; +} + +.mr-4 { + margin-right: 1rem !important; +} + +.mb-4 { + margin-bottom: 1rem !important; +} + +.ml-4 { + margin-left: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.m-5 { + margin: 1.5rem !important; +} + +.mt-5 { + margin-top: 1.5rem !important; +} + +.mr-5 { + margin-right: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 1.5rem !important; +} + +.ml-5 { + margin-left: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.m-6 { + margin: 3rem !important; +} + +.mt-6 { + margin-top: 3rem !important; +} + +.mr-6 { + margin-right: 3rem !important; +} + +.mb-6 { + margin-bottom: 3rem !important; +} + +.ml-6 { + margin-left: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.m-auto { + margin: auto !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.p-0 { + padding: 0 !important; +} + +.pt-0 { + padding-top: 0 !important; +} + +.pr-0 { + padding-right: 0 !important; +} + +.pb-0 { + padding-bottom: 0 !important; +} + +.pl-0 { + padding-left: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.p-1 { + padding: 0.25rem !important; +} + +.pt-1 { + padding-top: 0.25rem !important; +} + +.pr-1 { + padding-right: 0.25rem !important; +} + +.pb-1 { + padding-bottom: 0.25rem !important; +} + +.pl-1 { + padding-left: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.p-2 { + padding: 0.5rem !important; +} + +.pt-2 { + padding-top: 0.5rem !important; +} + +.pr-2 { + padding-right: 0.5rem !important; +} + +.pb-2 { + padding-bottom: 0.5rem !important; +} + +.pl-2 { + padding-left: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.p-3 { + padding: 0.75rem !important; +} + +.pt-3 { + padding-top: 0.75rem !important; +} + +.pr-3 { + padding-right: 0.75rem !important; +} + +.pb-3 { + padding-bottom: 0.75rem !important; +} + +.pl-3 { + padding-left: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.p-4 { + padding: 1rem !important; +} + +.pt-4 { + padding-top: 1rem !important; +} + +.pr-4 { + padding-right: 1rem !important; +} + +.pb-4 { + padding-bottom: 1rem !important; +} + +.pl-4 { + padding-left: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.p-5 { + padding: 1.5rem !important; +} + +.pt-5 { + padding-top: 1.5rem !important; +} + +.pr-5 { + padding-right: 1.5rem !important; +} + +.pb-5 { + padding-bottom: 1.5rem !important; +} + +.pl-5 { + padding-left: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.p-6 { + padding: 3rem !important; +} + +.pt-6 { + padding-top: 3rem !important; +} + +.pr-6 { + padding-right: 3rem !important; +} + +.pb-6 { + padding-bottom: 3rem !important; +} + +.pl-6 { + padding-left: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.p-auto { + padding: auto !important; +} + +.pt-auto { + padding-top: auto !important; +} + +.pr-auto { + padding-right: auto !important; +} + +.pb-auto { + padding-bottom: auto !important; +} + +.pl-auto { + padding-left: auto !important; +} + +.px-auto { + padding-left: auto !important; + padding-right: auto !important; +} + +.py-auto { + padding-top: auto !important; + padding-bottom: auto !important; +} + +.is-size-1 { + font-size: 3rem !important; +} + +.is-size-2 { + font-size: 2.5rem !important; +} + +.is-size-3 { + font-size: 2rem !important; +} + +.is-size-4 { + font-size: 1.5rem !important; +} + +.is-size-5 { + font-size: 1.25rem !important; +} + +.is-size-6 { + font-size: 1rem !important; +} + +.is-size-7 { + font-size: 0.75rem !important; +} + +@media screen and (max-width: 768px) { + .is-size-1-mobile { + font-size: 3rem !important; + } + .is-size-2-mobile { + font-size: 2.5rem !important; + } + .is-size-3-mobile { + font-size: 2rem !important; + } + .is-size-4-mobile { + font-size: 1.5rem !important; + } + .is-size-5-mobile { + font-size: 1.25rem !important; + } + .is-size-6-mobile { + font-size: 1rem !important; + } + .is-size-7-mobile { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 769px), print { + .is-size-1-tablet { + font-size: 3rem !important; + } + .is-size-2-tablet { + font-size: 2.5rem !important; + } + .is-size-3-tablet { + font-size: 2rem !important; + } + .is-size-4-tablet { + font-size: 1.5rem !important; + } + .is-size-5-tablet { + font-size: 1.25rem !important; + } + .is-size-6-tablet { + font-size: 1rem !important; + } + .is-size-7-tablet { + font-size: 0.75rem !important; + } +} + +@media screen and (max-width: 1023px) { + .is-size-1-touch { + font-size: 3rem !important; + } + .is-size-2-touch { + font-size: 2.5rem !important; + } + .is-size-3-touch { + font-size: 2rem !important; + } + .is-size-4-touch { + font-size: 1.5rem !important; + } + .is-size-5-touch { + font-size: 1.25rem !important; + } + .is-size-6-touch { + font-size: 1rem !important; + } + .is-size-7-touch { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1024px) { + .is-size-1-desktop { + font-size: 3rem !important; + } + .is-size-2-desktop { + font-size: 2.5rem !important; + } + .is-size-3-desktop { + font-size: 2rem !important; + } + .is-size-4-desktop { + font-size: 1.5rem !important; + } + .is-size-5-desktop { + font-size: 1.25rem !important; + } + .is-size-6-desktop { + font-size: 1rem !important; + } + .is-size-7-desktop { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1216px) { + .is-size-1-widescreen { + font-size: 3rem !important; + } + .is-size-2-widescreen { + font-size: 2.5rem !important; + } + .is-size-3-widescreen { + font-size: 2rem !important; + } + .is-size-4-widescreen { + font-size: 1.5rem !important; + } + .is-size-5-widescreen { + font-size: 1.25rem !important; + } + .is-size-6-widescreen { + font-size: 1rem !important; + } + .is-size-7-widescreen { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1408px) { + .is-size-1-fullhd { + font-size: 3rem !important; + } + .is-size-2-fullhd { + font-size: 2.5rem !important; + } + .is-size-3-fullhd { + font-size: 2rem !important; + } + .is-size-4-fullhd { + font-size: 1.5rem !important; + } + .is-size-5-fullhd { + font-size: 1.25rem !important; + } + .is-size-6-fullhd { + font-size: 1rem !important; + } + .is-size-7-fullhd { + font-size: 0.75rem !important; + } +} + +.has-text-centered { + text-align: center !important; +} + +.has-text-justified { + text-align: justify !important; +} + +.has-text-left { + text-align: left !important; +} + +.has-text-right { + text-align: right !important; +} + +@media screen and (max-width: 768px) { + .has-text-centered-mobile { + text-align: center !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-centered-tablet { + text-align: center !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-centered-tablet-only { + text-align: center !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-centered-touch { + text-align: center !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-centered-desktop { + text-align: center !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-centered-desktop-only { + text-align: center !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-centered-widescreen { + text-align: center !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-centered-widescreen-only { + text-align: center !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-centered-fullhd { + text-align: center !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-justified-mobile { + text-align: justify !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-justified-tablet { + text-align: justify !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-justified-tablet-only { + text-align: justify !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-justified-touch { + text-align: justify !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-justified-desktop { + text-align: justify !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-justified-desktop-only { + text-align: justify !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-justified-widescreen { + text-align: justify !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-justified-widescreen-only { + text-align: justify !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-justified-fullhd { + text-align: justify !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-left-mobile { + text-align: left !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-left-tablet { + text-align: left !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-left-tablet-only { + text-align: left !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-left-touch { + text-align: left !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-left-desktop { + text-align: left !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-left-desktop-only { + text-align: left !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-left-widescreen { + text-align: left !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-left-widescreen-only { + text-align: left !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-left-fullhd { + text-align: left !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-right-mobile { + text-align: right !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-right-tablet { + text-align: right !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-right-tablet-only { + text-align: right !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-right-touch { + text-align: right !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-right-desktop { + text-align: right !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-right-desktop-only { + text-align: right !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-right-widescreen { + text-align: right !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-right-widescreen-only { + text-align: right !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-right-fullhd { + text-align: right !important; + } +} + +.is-capitalized { + text-transform: capitalize !important; +} + +.is-lowercase { + text-transform: lowercase !important; +} + +.is-uppercase { + text-transform: uppercase !important; +} + +.is-italic { + font-style: italic !important; +} + +.is-underlined { + text-decoration: underline !important; +} + +.has-text-weight-light { + font-weight: 300 !important; +} + +.has-text-weight-normal { + font-weight: 400 !important; +} + +.has-text-weight-medium { + font-weight: 500 !important; +} + +.has-text-weight-semibold { + font-weight: 600 !important; +} + +.has-text-weight-bold { + font-weight: 700 !important; +} + +.is-family-primary { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important; +} + +.is-family-secondary { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important; +} + +.is-family-sans-serif { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important; +} + +.is-family-monospace { + font-family: monospace !important; +} + +.is-family-code { + font-family: monospace !important; +} + +.is-block { + display: block !important; +} + +@media screen and (max-width: 768px) { + .is-block-mobile { + display: block !important; + } +} + +@media screen and (min-width: 769px), print { + .is-block-tablet { + display: block !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-block-tablet-only { + display: block !important; + } +} + +@media screen and (max-width: 1023px) { + .is-block-touch { + display: block !important; + } +} + +@media screen and (min-width: 1024px) { + .is-block-desktop { + display: block !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-block-desktop-only { + display: block !important; + } +} + +@media screen and (min-width: 1216px) { + .is-block-widescreen { + display: block !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-block-widescreen-only { + display: block !important; + } +} + +@media screen and (min-width: 1408px) { + .is-block-fullhd { + display: block !important; + } +} + +.is-flex { + display: flex !important; +} + +@media screen and (max-width: 768px) { + .is-flex-mobile { + display: flex !important; + } +} + +@media screen and (min-width: 769px), print { + .is-flex-tablet { + display: flex !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-flex-tablet-only { + display: flex !important; + } +} + +@media screen and (max-width: 1023px) { + .is-flex-touch { + display: flex !important; + } +} + +@media screen and (min-width: 1024px) { + .is-flex-desktop { + display: flex !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-flex-desktop-only { + display: flex !important; + } +} + +@media screen and (min-width: 1216px) { + .is-flex-widescreen { + display: flex !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-flex-widescreen-only { + display: flex !important; + } +} + +@media screen and (min-width: 1408px) { + .is-flex-fullhd { + display: flex !important; + } +} + +.is-inline { + display: inline !important; +} + +@media screen and (max-width: 768px) { + .is-inline-mobile { + display: inline !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-tablet { + display: inline !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-tablet-only { + display: inline !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-touch { + display: inline !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-desktop { + display: inline !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-desktop-only { + display: inline !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-widescreen { + display: inline !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-widescreen-only { + display: inline !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-fullhd { + display: inline !important; + } +} + +.is-inline-block { + display: inline-block !important; +} + +@media screen and (max-width: 768px) { + .is-inline-block-mobile { + display: inline-block !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-block-tablet { + display: inline-block !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-block-tablet-only { + display: inline-block !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-block-touch { + display: inline-block !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-block-desktop { + display: inline-block !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-block-desktop-only { + display: inline-block !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-block-widescreen { + display: inline-block !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-block-widescreen-only { + display: inline-block !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-block-fullhd { + display: inline-block !important; + } +} + +.is-inline-flex { + display: inline-flex !important; +} + +@media screen and (max-width: 768px) { + .is-inline-flex-mobile { + display: inline-flex !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-flex-tablet { + display: inline-flex !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-flex-tablet-only { + display: inline-flex !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-flex-touch { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-flex-desktop { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-flex-desktop-only { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-flex-widescreen { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-flex-widescreen-only { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-flex-fullhd { + display: inline-flex !important; + } +} + +.is-hidden { + display: none !important; +} + +.is-sr-only { + border: none !important; + clip: rect(0, 0, 0, 0) !important; + height: 0.01em !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 0.01em !important; +} + +@media screen and (max-width: 768px) { + .is-hidden-mobile { + display: none !important; + } +} + +@media screen and (min-width: 769px), print { + .is-hidden-tablet { + display: none !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-hidden-tablet-only { + display: none !important; + } +} + +@media screen and (max-width: 1023px) { + .is-hidden-touch { + display: none !important; + } +} + +@media screen and (min-width: 1024px) { + .is-hidden-desktop { + display: none !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-hidden-desktop-only { + display: none !important; + } +} + +@media screen and (min-width: 1216px) { + .is-hidden-widescreen { + display: none !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-hidden-widescreen-only { + display: none !important; + } +} + +@media screen and (min-width: 1408px) { + .is-hidden-fullhd { + display: none !important; + } +} + +.is-invisible { + visibility: hidden !important; +} + +@media screen and (max-width: 768px) { + .is-invisible-mobile { + visibility: hidden !important; + } +} + +@media screen and (min-width: 769px), print { + .is-invisible-tablet { + visibility: hidden !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-invisible-tablet-only { + visibility: hidden !important; + } +} + +@media screen and (max-width: 1023px) { + .is-invisible-touch { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1024px) { + .is-invisible-desktop { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-invisible-desktop-only { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1216px) { + .is-invisible-widescreen { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-invisible-widescreen-only { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1408px) { + .is-invisible-fullhd { + visibility: hidden !important; + } +} + +/* Bulma Layout */ +.hero { + align-items: stretch; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.hero .navbar { + background: none; +} + +.hero .tabs ul { + border-bottom: none; +} + +.hero.is-white { + background-color: white; + color: #0a0a0a; +} + +.hero.is-white a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-white strong { + color: inherit; +} + +.hero.is-white .title { + color: #0a0a0a; +} + +.hero.is-white .subtitle { + color: rgba(10, 10, 10, 0.9); +} + +.hero.is-white .subtitle a:not(.button), +.hero.is-white .subtitle strong { + color: #0a0a0a; +} + +@media screen and (max-width: 1023px) { + .hero.is-white .navbar-menu { + background-color: white; + } +} + +.hero.is-white .navbar-item, +.hero.is-white .navbar-link { + color: rgba(10, 10, 10, 0.7); +} + +.hero.is-white a.navbar-item:hover, .hero.is-white a.navbar-item.is-active, +.hero.is-white .navbar-link:hover, +.hero.is-white .navbar-link.is-active { + background-color: #f2f2f2; + color: #0a0a0a; +} + +.hero.is-white .tabs a { + color: #0a0a0a; + opacity: 0.9; +} + +.hero.is-white .tabs a:hover { + opacity: 1; +} + +.hero.is-white .tabs li.is-active a { + color: white !important; + opacity: 1; +} + +.hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { + color: #0a0a0a; +} + +.hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover { + background-color: #0a0a0a; + border-color: #0a0a0a; + color: white; +} + +.hero.is-white.is-bold { + background-image: linear-gradient(141deg, #e8e3e4 0%, white 71%, white 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-white.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #e8e3e4 0%, white 71%, white 100%); + } +} + +.hero.is-black { + background-color: #0a0a0a; + color: white; +} + +.hero.is-black a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-black strong { + color: inherit; +} + +.hero.is-black .title { + color: white; +} + +.hero.is-black .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-black .subtitle a:not(.button), +.hero.is-black .subtitle strong { + color: white; +} + +@media screen and (max-width: 1023px) { + .hero.is-black .navbar-menu { + background-color: #0a0a0a; + } +} + +.hero.is-black .navbar-item, +.hero.is-black .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-black a.navbar-item:hover, .hero.is-black a.navbar-item.is-active, +.hero.is-black .navbar-link:hover, +.hero.is-black .navbar-link.is-active { + background-color: black; + color: white; +} + +.hero.is-black .tabs a { + color: white; + opacity: 0.9; +} + +.hero.is-black .tabs a:hover { + opacity: 1; +} + +.hero.is-black .tabs li.is-active a { + color: #0a0a0a !important; + opacity: 1; +} + +.hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { + color: white; +} + +.hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover { + background-color: white; + border-color: white; + color: #0a0a0a; +} + +.hero.is-black.is-bold { + background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-black.is-bold .navbar-menu { + background-image: linear-gradient(141deg, black 0%, #0a0a0a 71%, #181616 100%); + } +} + +.hero.is-light { + background-color: whitesmoke; + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-light a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-light strong { + color: inherit; +} + +.hero.is-light .title { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-light .subtitle { + color: rgba(0, 0, 0, 0.9); +} + +.hero.is-light .subtitle a:not(.button), +.hero.is-light .subtitle strong { + color: rgba(0, 0, 0, 0.7); +} + +@media screen and (max-width: 1023px) { + .hero.is-light .navbar-menu { + background-color: whitesmoke; + } +} + +.hero.is-light .navbar-item, +.hero.is-light .navbar-link { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-light a.navbar-item:hover, .hero.is-light a.navbar-item.is-active, +.hero.is-light .navbar-link:hover, +.hero.is-light .navbar-link.is-active { + background-color: #e8e8e8; + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-light .tabs a { + color: rgba(0, 0, 0, 0.7); + opacity: 0.9; +} + +.hero.is-light .tabs a:hover { + opacity: 1; +} + +.hero.is-light .tabs li.is-active a { + color: whitesmoke !important; + opacity: 1; +} + +.hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover { + background-color: rgba(0, 0, 0, 0.7); + border-color: rgba(0, 0, 0, 0.7); + color: whitesmoke; +} + +.hero.is-light.is-bold { + background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-light.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #dfd8d9 0%, whitesmoke 71%, white 100%); + } +} + +.hero.is-dark { + background-color: #363636; + color: #fff; +} + +.hero.is-dark a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-dark strong { + color: inherit; +} + +.hero.is-dark .title { + color: #fff; +} + +.hero.is-dark .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-dark .subtitle a:not(.button), +.hero.is-dark .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-dark .navbar-menu { + background-color: #363636; + } +} + +.hero.is-dark .navbar-item, +.hero.is-dark .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-dark a.navbar-item:hover, .hero.is-dark a.navbar-item.is-active, +.hero.is-dark .navbar-link:hover, +.hero.is-dark .navbar-link.is-active { + background-color: #292929; + color: #fff; +} + +.hero.is-dark .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-dark .tabs a:hover { + opacity: 1; +} + +.hero.is-dark .tabs li.is-active a { + color: #363636 !important; + opacity: 1; +} + +.hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { + color: #fff; +} + +.hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #363636; +} + +.hero.is-dark.is-bold { + background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-dark.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); + } +} + +.hero.is-primary { + background-color: #ff5f2e; + color: #fff; +} + +.hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-primary strong { + color: inherit; +} + +.hero.is-primary .title { + color: #fff; +} + +.hero.is-primary .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-primary .subtitle a:not(.button), +.hero.is-primary .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-primary .navbar-menu { + background-color: #ff5f2e; + } +} + +.hero.is-primary .navbar-item, +.hero.is-primary .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, +.hero.is-primary .navbar-link:hover, +.hero.is-primary .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; +} + +.hero.is-primary .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-primary .tabs a:hover { + opacity: 1; +} + +.hero.is-primary .tabs li.is-active a { + color: #ff5f2e !important; + opacity: 1; +} + +.hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { + color: #fff; +} + +.hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #ff5f2e; +} + +.hero.is-primary.is-bold { + background-image: linear-gradient(141deg, #fa1100 0%, #ff5f2e 71%, #ff9148 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-primary.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #fa1100 0%, #ff5f2e 71%, #ff9148 100%); + } +} + +.hero.is-link { + background-color: #ff5f2e; + color: #fff; +} + +.hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-link strong { + color: inherit; +} + +.hero.is-link .title { + color: #fff; +} + +.hero.is-link .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-link .subtitle a:not(.button), +.hero.is-link .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-link .navbar-menu { + background-color: #ff5f2e; + } +} + +.hero.is-link .navbar-item, +.hero.is-link .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, +.hero.is-link .navbar-link:hover, +.hero.is-link .navbar-link.is-active { + background-color: #ff4b15; + color: #fff; +} + +.hero.is-link .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-link .tabs a:hover { + opacity: 1; +} + +.hero.is-link .tabs li.is-active a { + color: #ff5f2e !important; + opacity: 1; +} + +.hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { + color: #fff; +} + +.hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #ff5f2e; +} + +.hero.is-link.is-bold { + background-image: linear-gradient(141deg, #fa1100 0%, #ff5f2e 71%, #ff9148 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-link.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #fa1100 0%, #ff5f2e 71%, #ff9148 100%); + } +} + +.hero.is-info { + background-color: #3b82f6; + color: #fff; +} + +.hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-info strong { + color: inherit; +} + +.hero.is-info .title { + color: #fff; +} + +.hero.is-info .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-info .subtitle a:not(.button), +.hero.is-info .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-info .navbar-menu { + background-color: #3b82f6; + } +} + +.hero.is-info .navbar-item, +.hero.is-info .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, +.hero.is-info .navbar-link:hover, +.hero.is-info .navbar-link.is-active { + background-color: #2372f5; + color: #fff; +} + +.hero.is-info .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-info .tabs a:hover { + opacity: 1; +} + +.hero.is-info .tabs li.is-active a { + color: #3b82f6 !important; + opacity: 1; +} + +.hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { + color: #fff; +} + +.hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #3b82f6; +} + +.hero.is-info.is-bold { + background-image: linear-gradient(141deg, #008bfe 0%, #3b82f6 71%, #4f74fc 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-info.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #008bfe 0%, #3b82f6 71%, #4f74fc 100%); + } +} + +.hero.is-success { + background-color: #10b981; + color: #fff; +} + +.hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-success strong { + color: inherit; +} + +.hero.is-success .title { + color: #fff; +} + +.hero.is-success .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-success .subtitle a:not(.button), +.hero.is-success .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-success .navbar-menu { + background-color: #10b981; + } +} + +.hero.is-success .navbar-item, +.hero.is-success .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, +.hero.is-success .navbar-link:hover, +.hero.is-success .navbar-link.is-active { + background-color: #0ea271; + color: #fff; +} + +.hero.is-success .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-success .tabs a:hover { + opacity: 1; +} + +.hero.is-success .tabs li.is-active a { + color: #10b981 !important; + opacity: 1; +} + +.hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { + color: #fff; +} + +.hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #10b981; +} + +.hero.is-success.is-bold { + background-image: linear-gradient(141deg, #04924b 0%, #10b981 71%, #0cd6b5 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-success.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #04924b 0%, #10b981 71%, #0cd6b5 100%); + } +} + +.hero.is-warning { + background-color: #ffb020; + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-warning strong { + color: inherit; +} + +.hero.is-warning .title { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-warning .subtitle { + color: rgba(0, 0, 0, 0.9); +} + +.hero.is-warning .subtitle a:not(.button), +.hero.is-warning .subtitle strong { + color: rgba(0, 0, 0, 0.7); +} + +@media screen and (max-width: 1023px) { + .hero.is-warning .navbar-menu { + background-color: #ffb020; + } +} + +.hero.is-warning .navbar-item, +.hero.is-warning .navbar-link { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, +.hero.is-warning .navbar-link:hover, +.hero.is-warning .navbar-link.is-active { + background-color: #ffa707; + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-warning .tabs a { + color: rgba(0, 0, 0, 0.7); + opacity: 0.9; +} + +.hero.is-warning .tabs a:hover { + opacity: 1; +} + +.hero.is-warning .tabs li.is-active a { + color: #ffb020 !important; + opacity: 1; +} + +.hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { + color: rgba(0, 0, 0, 0.7); +} + +.hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { + background-color: rgba(0, 0, 0, 0.7); + border-color: rgba(0, 0, 0, 0.7); + color: #ffb020; +} + +.hero.is-warning.is-bold { + background-image: linear-gradient(141deg, #ec7100 0%, #ffb020 71%, #ffda3a 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-warning.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #ec7100 0%, #ffb020 71%, #ffda3a 100%); + } +} + +.hero.is-danger { + background-color: #f04438; + color: #fff; +} + +.hero.is-danger a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-danger strong { + color: inherit; +} + +.hero.is-danger .title { + color: #fff; +} + +.hero.is-danger .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-danger .subtitle a:not(.button), +.hero.is-danger .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-danger .navbar-menu { + background-color: #f04438; + } +} + +.hero.is-danger .navbar-item, +.hero.is-danger .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, +.hero.is-danger .navbar-link:hover, +.hero.is-danger .navbar-link.is-active { + background-color: #ee2e20; + color: #fff; +} + +.hero.is-danger .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-danger .tabs a:hover { + opacity: 1; +} + +.hero.is-danger .tabs li.is-active a { + color: #f04438 !important; + opacity: 1; +} + +.hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { + color: #fff; +} + +.hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { + background-color: rgba(10, 10, 10, 0.1); +} + +.hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #f04438; +} + +.hero.is-danger.is-bold { + background-image: linear-gradient(141deg, #f0051d 0%, #f04438 71%, #f6734b 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-danger.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #f0051d 0%, #f04438 71%, #f6734b 100%); + } +} + +.hero.is-small .hero-body { + padding: 1.5rem; +} + +@media screen and (min-width: 769px), print { + .hero.is-medium .hero-body { + padding: 9rem 4.5rem; + } +} + +@media screen and (min-width: 769px), print { + .hero.is-large .hero-body { + padding: 18rem 6rem; + } +} + +.hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body { + align-items: center; + display: flex; +} + +.hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container { + flex-grow: 1; + flex-shrink: 1; +} + +.hero.is-halfheight { + min-height: 50vh; +} + +.hero.is-fullheight { + min-height: 100vh; +} + +.hero-video { + overflow: hidden; +} + +.hero-video video { + left: 50%; + min-height: 100%; + min-width: 100%; + position: absolute; + top: 50%; + transform: translate3d(-50%, -50%, 0); +} + +.hero-video.is-transparent { + opacity: 0.3; +} + +@media screen and (max-width: 768px) { + .hero-video { + display: none; + } +} + +.hero-buttons { + margin-top: 1.5rem; +} + +@media screen and (max-width: 768px) { + .hero-buttons .button { + display: flex; + } + .hero-buttons .button:not(:last-child) { + margin-bottom: 0.75rem; + } +} + +@media screen and (min-width: 769px), print { + .hero-buttons { + display: flex; + justify-content: center; + } + .hero-buttons .button:not(:last-child) { + margin-right: 1.5rem; + } +} + +.hero-head, +.hero-foot { + flex-grow: 0; + flex-shrink: 0; +} + +.hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: 3rem 1.5rem; +} + +@media screen and (min-width: 769px), print { + .hero-body { + padding: 3rem 3rem; + } +} + +.section { + padding: 3rem 1.5rem; +} + +@media screen and (min-width: 1024px) { + .section { + padding: 3rem 3rem; + } + .section.is-medium { + padding: 9rem 4.5rem; + } + .section.is-large { + padding: 18rem 6rem; + } +} + +.footer { + background-color: #11151d; + padding: 3rem 1.5rem 6rem; +} + +:root { + --forge-bg: #0b0e14; + --forge-bg-secondary: #11151d; + --forge-card: #161b25; + --forge-border: #232a38; + --forge-text: #e8ecf4; + --forge-text-muted: #8b95a7; + --accent: #ff5f2e; + --accent-2: #ffb020; + --gradient: linear-gradient(120deg, var(--accent), var(--accent-2)); + --glow: rgba(255, 95, 46, 0.25); + --status-success: #10b981; + --status-warning: #ffb020; + --status-danger: #f04438; + --status-info: #3b82f6; + --bg: var(--forge-bg); + --panel: var(--forge-card); + --panel2: var(--forge-bg-secondary); + --border: var(--forge-border); + --text: var(--forge-text); + --text-dim: var(--forge-text-muted); + --danger: var(--status-danger); +} + +html, body { + background: var(--forge-bg); + color: var(--forge-text); +} + +.navbar { + background: var(--forge-bg-secondary); + border-bottom: 1px solid var(--forge-border); +} + +.navbar-item.brand { + gap: 8px; + font-size: 1rem; +} + +.navbar-item, .navbar-link { + color: var(--forge-text); +} + +.navbar-item.is-active, .navbar-item:hover, .navbar-link:hover { + color: var(--accent); + background: var(--forge-card); +} + +.table { + background: transparent; + color: var(--forge-text); +} + +.table thead th { + background: var(--forge-bg-secondary); + color: var(--forge-text-muted); + border-color: var(--forge-border); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 600; + position: sticky; + top: 0; + z-index: 2; +} + +.table td, .table th { + border-color: var(--forge-border); + vertical-align: middle; +} + +.table.is-striped tbody tr:nth-child(even) { + background: var(--forge-bg-secondary); +} + +.table tbody tr:hover { + background: var(--forge-card); +} + +.tabs a { + color: var(--forge-text-muted); + border-bottom-color: var(--forge-border); +} + +.tabs li.is-active a { + color: var(--accent); + border-bottom-color: var(--accent); +} + +.tabs.is-toggle a { + border-color: var(--forge-border); + background: var(--forge-bg-secondary); +} + +.tabs.is-toggle li.is-active a { + background: var(--accent); + border-color: var(--accent); + color: #14100c; +} + +.title, h1, h2, h3 { + color: var(--forge-text); +} + +.subtitle { + color: var(--forge-text-muted); + font-weight: 400; +} + +.button.is-primary, button.primary { + background: var(--gradient); + border: none; + color: #14100c; + font-weight: 700; +} + +.button.is-primary:hover, button.primary:hover { + box-shadow: 0 6px 16px -6px var(--glow); +} + +.box, .card { + background: linear-gradient(180deg, var(--forge-card), var(--forge-bg-secondary)); + border: 1px solid var(--forge-border); + box-shadow: none; + transition: box-shadow .15s ease; +} + +.box:hover, .card:hover { + box-shadow: 0 10px 25px -8px var(--glow); +} + +.forge-badge { + display: inline-block; + padding: 0.4rem 1rem; + border-radius: 999px; + background: rgba(255, 95, 46, 0.1); + border: 1px solid rgba(255, 95, 46, 0.35); + color: var(--accent); + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.forge-badge.is-success { + background: rgba(16, 185, 129, 0.12); + border-color: rgba(16, 185, 129, 0.35); + color: var(--status-success); +} + +.forge-badge.is-danger { + background: rgba(240, 68, 56, 0.12); + border-color: rgba(240, 68, 56, 0.35); + color: var(--status-danger); +} + +.input, .textarea, .select select { + background: var(--forge-bg-secondary); + border-color: var(--forge-border); + color: var(--forge-text); +} + +.input:focus, .textarea:focus, .select select:focus { + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(255, 95, 46, 0.2); +} + +label.label { + color: var(--forge-text-muted); + font-size: 0.85rem; + font-weight: 600; +} + +.modal-card, .modal-content { + background: var(--forge-card); + border: 1px solid var(--forge-border); +} + +.modal-card-head, .modal-card-foot { + background: var(--forge-bg-secondary); + border-color: var(--forge-border); +} + +.notification { + color: var(--forge-text); +} + +.notification.is-success { + background: rgba(16, 185, 129, 0.12); + color: var(--status-success); +} + +.notification.is-danger { + background: rgba(240, 68, 56, 0.12); + color: var(--status-danger); +} + +.notification.is-warning { + background: rgba(255, 176, 32, 0.12); + color: var(--status-warning); +} + +.notification.is-info { + background: rgba(59, 130, 246, 0.12); + color: var(--status-info); +} + +.forge-gradient-title { + background: var(--gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Tokens (--bg, --panel, --accent...) définis une seule fois dans + forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier + continue de référencer les mêmes noms de variable qu'avant la charte + Forge (voir les alias --bg/--panel/--panel2/--border/--text/--text-dim/ + --danger dans forge-theme.scss), pour n'avoir à toucher qu'aux VALEURS + des tokens, jamais aux ~600 lignes de règles ci-dessous qui les + consomment déjà. */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: system-ui,-apple-system,"Segoe UI",sans-serif; + background: var(--bg); + color: var(--text); +} + +h1 { + font-size: 20px; + margin: 0 0 6px; +} + +h2 { + font-size: 13px; + text-transform: uppercase; + letter-spacing: .05em; + color: var(--text-dim); + margin: 24px 0 8px; +} + +h3 { + font-size: 13px; + color: var(--accent); + margin: 14px 0 6px; +} + +label { + display: block; + font-size: 12px; + color: var(--text-dim); + margin: 8px 0 4px; +} + +input[type=text], input[type=number], input[type=date], textarea, select { + width: 100%; + background: var(--panel2); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text); + padding: 8px 10px; + font-size: 13px; + font-family: inherit; +} + +input[type=checkbox] { + width: auto; + margin-top: 6px; } -input[type=checkbox]{ width:auto; margin-top:6px; } /* .topbar : Bulma fournit déjà la mise en page (navbar) — cette classe ne sert plus qu'à la repérer dans les layouts plein-écran (body.builderBody/objectEditBody, voir plus bas) et à la rattacher au thème sombre. */ -.topbar{ border-bottom:1px solid var(--border); } +.topbar { + border-bottom: 1px solid var(--border); +} /* Barre de navigation d'UN JEU (voir base.html) — toujours visible entre les différents éditeurs d'un même jeu, en ligne (contrairement à .navList/.navRow ci-dessous, empilés verticalement dans le panneau "Créer" du tableau de bord). */ -.gameNavBar{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); } -.gameNavLink{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; } -.gameNavLink:hover{ background:var(--panel2); border-color:var(--accent); } -.gameNavLink.active{ background:var(--panel2); border-color:var(--accent); color:var(--accent); } -.content{ max-width:760px; margin:0 auto; padding:28px 20px; } +.gameNavBar { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 6px; + padding: 8px 20px; + background: transparent; + border-bottom: 1px solid var(--border); +} -.card{ border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); margin:12px 0; } -.inline-form .fieldRow{ display:flex; gap:8px; align-items:flex-end; } -.inline-form .fieldRow input{ flex:1; } -.fieldRow{ display:flex; gap:10px; } -.fieldRow > div{ flex:1; } -.formField{ margin-bottom:6px; } +.gameNavLink { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--panel); + text-decoration: none; + color: var(--text); + font-size: 12.5px; +} + +.gameNavLink:hover { + background: var(--panel2); + border-color: var(--accent); +} + +.gameNavLink.active { + background: var(--panel2); + border-color: var(--accent); + color: var(--accent); +} + +.content { + max-width: 760px; + margin: 0 auto; + padding: 28px 20px; +} + +.card { + border: 1px solid var(--border); + border-radius: 10px; + padding: 16px; + background: var(--panel); + margin: 12px 0; +} + +.inline-form .fieldRow { + display: flex; + gap: 8px; + align-items: flex-end; +} + +.inline-form .fieldRow input { + flex: 1; +} + +.fieldRow { + display: flex; + gap: 10px; +} + +.fieldRow > div { + flex: 1; +} + +.formField { + margin-bottom: 6px; +} + +button { + background: var(--panel2); + border: 1px solid var(--border); + color: var(--text); + border-radius: 10px; + padding: 9px 14px; + cursor: pointer; + font-size: 13px; +} -button{ background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:9px 14px; cursor:pointer; font-size:13px; } /* Un qui doit se comporter comme un visuellement (ex. ouvrir un panneau plutôt que suivre un href, mais garder l'apparence d'un lien dans un tableau) — annule le style bouton par défaut ci-dessus. */ -.linkLikeButton{ background:none; border:none; padding:0; color:var(--accent); text-decoration:none; font-size:inherit; } -.linkLikeButton:hover{ text-decoration:underline; } -button.primary{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; } -button.smallBtn{ padding:5px 10px; font-size:11.5px; } -button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); } -.actionsRow{ margin-top:16px; } +.linkLikeButton { + background: none; + border: none; + padding: 0; + color: var(--accent); + text-decoration: none; + font-size: inherit; +} + +.linkLikeButton:hover { + text-decoration: underline; +} + +/* button.primary : couleur/dégradé posés une seule fois, centralement, + dans forge-theme.scss (".button.is-primary, button.primary") — pas ici, + pour ne pas entrer en conflit de cascade avec cette règle centrale. */ +button.smallBtn { + padding: 5px 10px; + font-size: 11.5px; +} + +button.danger { + color: var(--danger); + border-color: rgba(240, 68, 56, 0.4); +} + +.actionsRow { + margin-top: 16px; +} /* Nav compacte à une seule ligne (icône + libellé) — pour une liste d'actions fixe (ex. colonne "Créer" du tableau de bord d'un jeu) : sobre et dense plutôt qu'une carte à deux lignes. */ -.navList{ display:flex; flex-direction:column; gap:3px; } -.navRow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; } -.navRow:hover{ background:var(--panel2); border-color:var(--accent); } +.navList { + display: flex; + flex-direction: column; + gap: 3px; +} -.hint{ font-size:11.5px; color:var(--text-dim); line-height:1.5; } -.autosaveStatus{ display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; } -.autosaveStatus.saving{ color:var(--text-dim); } -.autosaveStatus.saved{ color:#7bd88f; } -.warningBanner{ border:1px solid var(--danger); background:rgba(226,104,95,.1); color:var(--text); - border-radius:8px; padding:10px 14px; font-size:12.5px; margin:12px 0; } -.dangerZone{ border:1px solid rgba(226,104,95,.4); border-radius:8px; padding:10px 12px; margin-top:14px; } -.dangerZone h3{ color:var(--danger); margin-top:0; } -.fieldsExistingRow{ display:flex; align-items:center; justify-content:space-between; - padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; font-size:12.5px; } -.fieldsExistingRow form{ margin:0; } +.navRow { + display: flex; + align-items: center; + gap: 8px; + padding: 7px 10px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--panel); + text-decoration: none; + color: var(--text); + font-size: 12.5px; +} -.fieldRowCard{ margin-bottom:10px; } -.relationTarget{ margin-top:6px; } +.navRow:hover { + background: var(--panel2); + border-color: var(--accent); +} + +.hint { + font-size: 11.5px; + color: var(--text-dim); + line-height: 1.5; +} + +.autosaveStatus { + display: inline-flex; + align-items: center; + gap: 6px; + transition: color .2s ease; +} + +.autosaveStatus.saving { + color: var(--text-dim); +} + +.autosaveStatus.saved { + color: var(--status-success); +} + +.warningBanner { + border: 1px solid var(--danger); + background: rgba(240, 68, 56, 0.1); + color: var(--text); + border-radius: 8px; + padding: 10px 14px; + font-size: 12.5px; + margin: 12px 0; +} + +.dangerZone { + border: 1px solid rgba(240, 68, 56, 0.4); + border-radius: 8px; + padding: 10px 12px; + margin-top: 14px; +} + +.dangerZone h3 { + color: var(--danger); + margin-top: 0; +} + +.fieldsExistingRow { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 10px; + border: 1px solid var(--border); + border-radius: 6px; + margin-bottom: 6px; + font-size: 12.5px; +} + +.fieldsExistingRow form { + margin: 0; +} + +.fieldRowCard { + margin-bottom: 10px; +} + +.relationTarget { + margin-top: 6px; +} /* Liste de conditions de "Donnée liée" (voir c_clause_list.py) : un nombre ILLIMITÉ de lignes peut s'y accumuler — sans limite de hauteur, le @@ -77,41 +12251,105 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); } LISTE elle-même à une hauteur confortable, le reste du panneau (et le bouton "+ Ajouter une condition" juste en dessous) reste toujours à portée sans avoir à chercher le bas de la liste. */ -.clauseListWrap{ max-height:260px; overflow-y:auto; padding-right:2px; } -.clauseRow{ margin-bottom:8px; } -.clauseRow:last-child{ margin-bottom:0; } +.clauseListWrap { + max-height: 260px; + overflow-y: auto; + padding-right: 2px; +} + +.clauseRow { + margin-bottom: 8px; +} + +.clauseRow:last-child { + margin-bottom: 0; +} /* .dataTable : Bulma fournit déjà la mise en page du tableau (classes "table is-fullwidth is-hoverable", voir data_list.html) — ceci ne fait plus que tronquer les cellules trop longues avec "...", pour garder une vue d'ensemble compacte (le détail complet s'ouvre dans la modale Bulma ci-dessous via le bouton 👁️). */ -.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +.dataTable td { + max-width: 220px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} /* ---------- Détail d'une entrée (bouton 👁️) ---------- */ /* Contenu du panneau de détail (voir openRowDetailPanel() dans game_dashboard.html) — affiche chaque champ en entier, sans troncature, contrairement au tableau dense qui les tronque. */ -.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); } -.rowDetailField:last-child{ border-bottom:none; } -.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; } -.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; } +.rowDetailField { + padding: 10px 0; + border-bottom: 1px solid var(--border); +} -.content-wide{ max-width:1080px; } -.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; } -.twoCol .colLeft{ flex:0 0 340px; } -.twoCol .colRight{ flex:1; min-width:0; } -@media (max-width: 820px){ - .twoCol{ flex-direction:column; } - .twoCol .colLeft{ flex:none; width:100%; } +.rowDetailField:last-child { + border-bottom: none; +} + +.rowDetailLabel { + font-size: 11px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: .05em; + margin-bottom: 4px; +} + +.rowDetailValue { + font-size: 13.5px; + white-space: pre-wrap; + word-break: break-word; +} + +.content-wide { + max-width: 1080px; +} + +.twoCol { + display: flex; + gap: 24px; + align-items: flex-start; + margin-top: 10px; +} + +.twoCol .colLeft { + flex: 0 0 340px; +} + +.twoCol .colRight { + flex: 1; + min-width: 0; +} + +@media (max-width: 820px) { + .twoCol { + flex-direction: column; + } + .twoCol .colLeft { + flex: none; + width: 100%; + } /* En dessous de 820px, les deux colonnes s'empilent : le défilement interne séparé par colonne n'a plus de sens (il n'y a plus qu'une colonne) — on revient à une page classique qui défile normalement, comme pour l'éditeur d'écran ci-dessous. */ - body.objectEditBody{ height:auto; overflow:visible; } - body.objectEditBody > main.content{ overflow:visible; } - .content-objectEdit .colLeft, .content-objectEdit .colRight{ height:auto; overflow:visible; } - .fieldsTableWrap{ max-height:60vh; } + body.objectEditBody { + height: auto; + overflow: visible; + } + body.objectEditBody > main.content { + overflow: visible; + } + .content-objectEdit .colLeft, .content-objectEdit .colRight { + height: auto; + overflow: visible; + } + .fieldsTableWrap { + max-height: 60vh; + } } /* ---------- Modifier un objet : tableau des champs existants ---------- */ @@ -120,12 +12358,36 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); } des champs) défilent chacune de leur côté — indispensable dès qu'un objet a beaucoup de champs, pour garder une vue d'ensemble sans perdre le formulaire "Ajouter un champ" hors de l'écran. */ -body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; } -body.objectEditBody > #pageChrome{ flex:0 0 auto; } -body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } +body.objectEditBody { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + overflow: hidden; +} -.content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; } -.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form, .content-objectEdit > .warningBanner{ flex:0 0 auto; } +body.objectEditBody > #pageChrome { + flex: 0 0 auto; +} + +body.objectEditBody > main.content { + flex: 1 1 auto; + min-height: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.content-objectEdit { + width: 100%; + display: flex; + flex-direction: column; + min-height: 0; +} + +.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form, .content-objectEdit > .warningBanner { + flex: 0 0 auto; +} /* Un qui doit envelopper les DEUX colonnes à la fois (un seul formulaire soumis ensemble, ex. object_form.html : nom de l'objet à @@ -134,32 +12396,109 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden disponible qu'il doit occuper. "display:contents" le rend transparent : .twoCol se comporte comme s'il était directement enfant de .content-objectEdit. */ -.formPassthrough{ display:contents; } -.content-objectEdit .twoCol{ flex:1 1 auto; min-height:0; align-items:stretch; } -.content-objectEdit .colLeft{ overflow-y:auto; height:100%; } -.content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; } -.content-objectEdit .colRight h2{ flex:0 0 auto; } -.content-objectEdit .colRight > .hint, .content-objectEdit .colRight > button{ flex:0 0 auto; } +.formPassthrough { + display: contents; +} -.fieldsTableWrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; } -.fieldsTable{ width:100%; border-collapse:collapse; font-size:12.5px; } -.fieldsTable th, .fieldsTable td{ border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; white-space:nowrap; } -.fieldsTable th{ position:sticky; top:0; background:var(--panel2); color:var(--text-dim); z-index:1; } -.fieldsTable tbody tr:hover{ background:rgba(255,255,255,.02); } -.fieldsTable tbody tr:last-child td{ border-bottom:none; } -.fieldsTable td input, .fieldsTable td select{ min-width:120px; width:auto; } -.fieldsTableActions{ display:flex; gap:6px; } +.content-objectEdit .twoCol { + flex: 1 1 auto; + min-height: 0; + align-items: stretch; +} + +.content-objectEdit .colLeft { + overflow-y: auto; + height: 100%; +} + +.content-objectEdit .colRight { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; +} + +.content-objectEdit .colRight h2 { + flex: 0 0 auto; +} + +.content-objectEdit .colRight > .hint, .content-objectEdit .colRight > button { + flex: 0 0 auto; +} + +.fieldsTableWrap { + flex: 1 1 auto; + min-height: 0; + overflow: auto; + border: 1px solid var(--border); + border-radius: 8px; +} + +.fieldsTable { + width: 100%; + border-collapse: collapse; + font-size: 12.5px; +} + +.fieldsTable th, .fieldsTable td { + border-bottom: 1px solid var(--border); + padding: 8px 10px; + text-align: left; + white-space: nowrap; +} + +.fieldsTable th { + position: sticky; + top: 0; + background: var(--panel2); + color: var(--text-dim); + z-index: 1; +} + +.fieldsTable tbody tr:hover { + background: rgba(255, 255, 255, 0.02); +} + +.fieldsTable tbody tr:last-child td { + border-bottom: none; +} + +.fieldsTable td input, .fieldsTable td select { + min-width: 120px; + width: auto; +} + +.fieldsTableActions { + display: flex; + gap: 6px; +} /* ---------- Éditeur d'écrans (façon Elementor/Bricks) ---------- */ /* La page de l'éditeur d'écran ne doit jamais défiler elle-même : elle occupe exactement la hauteur de la fenêtre (topbar + zone de travail), et ce sont les zones internes (panneaux, écran, panneau de logique) qui défilent chacune de leur côté si besoin. */ -body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; } -body.builderBody > #pageChrome{ flex:0 0 auto; } -body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } +body.builderBody { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + overflow: hidden; +} -.content-builder{ +body.builderBody > #pageChrome { + flex: 0 0 auto; +} + +body.builderBody > main.content { + flex: 1 1 auto; + min-height: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.content-builder { /* .content (ci-dessus) pose "margin:0 auto" pour centrer une page normale — mais sur cette page, le body est un flex-container en colonne (body.builderBody), et une marge horizontale "auto" y désactive le @@ -171,25 +12510,40 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d sans raison apparente à chaque interaction. "width:100%" donne une taille définie à la place : la marge "auto" ne fait alors que centrer l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */ - width:100%; - max-width:1600px; + width: 100%; + max-width: 1600px; /* Sans fil d'Ariane sur cette page (voir breadcrumb_wrap dans screen_edit.html), .content garde quand même son padding par défaut (28px en haut) — réduit ici pour que le canevas commence le plus haut possible sur la page. */ - padding:10px 20px 8px; + padding: 10px 20px 8px; } /* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) — toutes les trois occupent exactement la même hauteur (celle qui reste disponible), avec leur propre défilement interne si leur contenu dépasse. */ -.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; flex:1 1 auto; min-height:0; } +.builder3 { + display: flex; + gap: 20px; + align-items: stretch; + margin-top: 8px; + flex: 1 1 auto; + min-height: 0; +} + /* overflow:hidden (pas auto) : le défilement doit se faire DANS le canevas lui-même (voir .canvasFrame plus bas) ou dans l'onglet actif (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement), jamais sur cette zone entière — sans quoi la barre d'onglets et la barre d'outils défileraient avec le contenu au lieu de rester fixes en haut. */ -.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; } +.builderCanvasArea { + flex: 1 1 auto; + min-width: 0; + height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; +} /* ---------- Panneaux gauche/droite flottants ---------- */ /* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux @@ -200,42 +12554,115 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d réellement. Position et état ouvert/fermé mémorisés par écran (voir floatPanel*() dans screen_edit.html) pour survivre à un changement de sélection (qui remplace tout #builder3) ou un rechargement. */ -.floatPanel{ - position:fixed; top:90px; max-height:calc(100vh - 120px); - min-width:0; display:flex; flex-direction:column; z-index:60; - background:var(--panel); border:1px solid var(--border); border-radius:10px; - box-shadow:0 12px 40px rgba(0,0,0,.55); +.floatPanel { + position: fixed; + top: 90px; + max-height: calc(100vh - 120px); + min-width: 0; + display: flex; + flex-direction: column; + z-index: 60; + background: var(--panel); + border: 1px solid var(--border); + border-radius: 10px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); } -.floatPanel.hidden{ display:none; } + +.floatPanel.hidden { + display: none; +} + /* Coin de redimensionnement (voir wireFloatPanelResize() dans game_dashboard.html) — un panneau devient redimensionnable simplement en lui ajoutant ce coin, JS mis à part rien d'autre à faire côté CSS. */ -.floatPanelResizeHandle{ - position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; - background:linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%); - border-radius:0 0 10px 0; +.floatPanelResizeHandle { + position: absolute; + right: 0; + bottom: 0; + width: 16px; + height: 16px; + cursor: nwse-resize; + background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%); + border-radius: 0 0 10px 0; } -.floatPanel--left{ left:24px; width:280px; } -.floatPanel--right{ right:24px; width:340px; } -.floatPanel--center{ left:50%; width:560px; max-width:calc(100vw - 48px); transform:translateX(-50%); } + +.floatPanel--left { + left: 24px; + width: 280px; +} + +.floatPanel--right { + right: 24px; + width: 340px; +} + +.floatPanel--center { + left: 50%; + width: 560px; + max-width: calc(100vw - 48px); + transform: translateX(-50%); +} + /* Plein écran (voir makeFloatPanelFullscreenable() dans game_dashboard.html) — juste un repère visuel (bordure accent) sur le panneau agrandi, tout le positionnement réel est posé directement en style inline par le JS (pour pouvoir revenir exactement à la position/taille d'avant en sortant). */ -.floatPanel--fullscreen{ border-color:var(--accent); } -.floatPanelHeader{ - display:flex; align-items:center; justify-content:space-between; gap:8px; - padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel2); - border-radius:10px 10px 0 0; cursor:move; flex:0 0 auto; user-select:none; +.floatPanel--fullscreen { + border-color: var(--accent); } -.floatPanelHeader .floatPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; } -.floatPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; } -.floatPanelReopenBtn{ position:fixed; top:90px; z-index:60; display:none; } -.floatPanelReopenBtn.visible{ display:inline-flex; } -#panelLeftReopenBtn{ left:24px; } -#propsPanelReopenBtn{ right:24px; } -.widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } +.floatPanelHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 8px 10px; + border-bottom: 1px solid var(--border); + background: var(--panel2); + border-radius: 10px 10px 0 0; + cursor: move; + flex: 0 0 auto; + user-select: none; +} + +.floatPanelHeader .floatPanelTitle { + font-size: 11px; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: .05em; +} + +.floatPanelBody { + padding: 12px; + overflow-y: auto; + min-height: 0; + flex: 1 1 auto; +} + +.floatPanelReopenBtn { + position: fixed; + top: 90px; + z-index: 60; + display: none; +} + +.floatPanelReopenBtn.visible { + display: inline-flex; +} + +#panelLeftReopenBtn { + left: 24px; +} + +#propsPanelReopenBtn { + right: 24px; +} + +.widgetGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} /* Icônes (widget Icône + galerie du panneau de propriétés) — SVG posé en silhouette via "mask-image" plutôt qu'une police d'icônes (@font-face) : @@ -247,41 +12674,113 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d affiché en masque n'est jamais concerné par ce blocage. Voir render_icone.py (widget) et fontawesome_icons.py (liste + chemin des fichiers, statiques dans static/icons/). */ -.icon-svg{ - display:inline-block; width:1em; height:1em; flex:0 0 auto; - background-color:currentColor; - -webkit-mask-image:var(--icon-url); mask-image:var(--icon-url); - -webkit-mask-size:contain; mask-size:contain; - -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; - -webkit-mask-position:center; mask-position:center; +.icon-svg { + display: inline-block; + width: 1em; + height: 1em; + flex: 0 0 auto; + background-color: currentColor; + -webkit-mask-image: var(--icon-url); + mask-image: var(--icon-url); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; } /* Galerie d'icônes (panneau de propriétés) — voir fontawesome_icons.py et addIconElement()/filterIconGallery() plus bas. */ -.iconGallery{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; max-height:220px; overflow-y:auto; margin-top:8px; } -.iconGalleryTile{ - aspect-ratio:1; display:flex; align-items:center; justify-content:center; - background:var(--panel2); border:1px solid var(--border); border-radius:6px; - color:var(--text); cursor:grab; padding:0; +.iconGallery { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 6px; + max-height: 220px; + overflow-y: auto; + margin-top: 8px; } -.iconGalleryTile .icon-svg{ width:16px; height:16px; } -.iconGalleryTile:hover{ border-color:var(--accent); color:var(--accent); } -.iconGalleryTile.dragging{ opacity:0.4; } -.iconGalleryTile.iconHidden{ display:none; } -.widgetBtnForm{ margin:0; } -.widgetBtn{ - width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; - padding:12px 6px; border:1px solid var(--border); border-radius:10px; background:var(--panel); - color:var(--text); cursor:pointer; + +.iconGalleryTile { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + background: var(--panel2); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text); + cursor: grab; + padding: 0; } -.widgetBtn:hover{ border-color:var(--accent); background:var(--panel2); } -.widgetIcon{ font-size:22px; } -.widgetLabel{ font-size:11px; text-align:center; line-height:1.2; color:var(--text-dim); } -.canvasToolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; } -.aspectBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; } +.iconGalleryTile .icon-svg { + width: 16px; + height: 16px; +} -.canvasFrame{ +.iconGalleryTile:hover { + border-color: var(--accent); + color: var(--accent); +} + +.iconGalleryTile.dragging { + opacity: 0.4; +} + +.iconGalleryTile.iconHidden { + display: none; +} + +.widgetBtnForm { + margin: 0; +} + +.widgetBtn { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + padding: 12px 6px; + border: 1px solid var(--border); + border-radius: 10px; + background: var(--panel); + color: var(--text); + cursor: pointer; +} + +.widgetBtn:hover { + border-color: var(--accent); + background: var(--panel2); +} + +.widgetIcon { + font-size: 22px; +} + +.widgetLabel { + font-size: 11px; + text-align: center; + line-height: 1.2; + color: var(--text-dim); +} + +.canvasToolbar { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 10px; +} + +.aspectBtn.active { + background: var(--accent); + border-color: var(--accent); + color: #fff; +} + +.canvasFrame { /* flex:1 1 auto + min-height:0 : occupe tout l'espace restant sous la barre d'outils dans .builderTabPanel (voir screen_edit.html). Le canevas (voir .canvas ci-dessous) est réglé pour remplir EXACTEMENT @@ -293,26 +12792,55 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d LUI qui défile (overflow:auto) si jamais le contenu déborde malgré tout — jamais .builderCanvasArea (voir plus haut), pour garder la barre d'onglets/d'outils toujours visible. */ - flex:1 1 auto; min-height:0; width:100%; padding:4px; border:1px solid var(--border); border-radius:16px; background:var(--panel); - display:flex; overflow:auto; + flex: 1 1 auto; + min-height: 0; + width: 100%; + padding: 4px; + border: 1px solid var(--border); + border-radius: 16px; + background: var(--panel); + display: flex; + overflow: auto; } -.canvas{ - position:relative; width:100%; height:100%; flex:1 1 auto; margin:0; background:#0b0d12; border-radius:8px; - overflow:hidden; border:1px solid var(--border); + +.canvas { + position: relative; + width: 100%; + height: 100%; + flex: 1 1 auto; + margin: 0; + background: #0b0d12; + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--border); } -.canvasElement{ + +.canvasElement { /* Pas d'overflow:hidden ici : une échelle (transform:scale) ou une animation posée sur cet élément (voir la Timeline d'animation) vit sur CE cadre (voir filters/element_style_filter.py) — le rogner clippait l'effet à la taille d'origine de la boîte au lieu de le laisser grossir/bouger avec elle. La zone de l'écran elle-même (.canvas, ci-dessus) reste rognée, donc rien ne peut déborder de l'écran final. */ - box-sizing:border-box; cursor:move; user-select:none; - border:1px dashed transparent; + box-sizing: border-box; + cursor: move; + user-select: none; + border: 1px dashed transparent; +} + +.canvasElement:hover { + border-color: rgba(91, 140, 255, 0.5); +} + +.canvasElement.selected { + border: 2px solid var(--accent); +} + +.canvasElementInner { + width: 100%; + height: 100%; + pointer-events: none; } -.canvasElement:hover{ border-color:rgba(91,140,255,.5); } -.canvasElement.selected{ border:2px solid var(--accent); } -.canvasElementInner{ width:100%; height:100%; pointer-events:none; } /* Surbrillance de l'élément sélectionné dans l'arborescence, posée en JS sur sa propre balise (voir applySelectionHighlight) — seul moyen de la voir @@ -325,120 +12853,369 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d jauges collée en haut d'un conteneur. Un box-shadow EN CREUX (inset) reste toujours à l'intérieur de la boîte, jamais rogné, et épouse naturellement les coins arrondis de l'élément lui-même. */ -.elementHighlighted{ - box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px rgba(91,140,255,.2); -} -.resizeHandle{ - position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize; - background:var(--accent); border-radius:3px 0 6px 0; opacity:.85; +.elementHighlighted { + box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px rgba(91, 140, 255, 0.2); } -.listRow.selected{ border-color:var(--accent); background:var(--panel2); } +.resizeHandle { + position: absolute; + right: 0; + bottom: 0; + width: 14px; + height: 14px; + cursor: nwse-resize; + background: var(--accent); + border-radius: 3px 0 6px 0; + opacity: .85; +} -.childList{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px 18px; padding-left:10px; border-left:2px dashed var(--border); } -.childRow{ padding:7px 10px; font-size:12px; } -.childRow .rowTitle{ font-size:12px; } +.listRow.selected { + border-color: var(--accent); + background: var(--panel2); +} + +.childList { + display: flex; + flex-direction: column; + gap: 6px; + margin: 2px 0 10px 18px; + padding-left: 10px; + border-left: 2px dashed var(--border); +} + +.childRow { + padding: 7px 10px; + font-size: 12px; +} + +.childRow .rowTitle { + font-size: 12px; +} /* Arborescence compacte des éléments de l'écran (panneau gauche) — une ligne par élément, indentation par imbrication réelle (profondeur illimitée) plutôt qu'un seul niveau d'enfants comme l'ancienne .childList, pour rester lisible même avec beaucoup d'éléments. */ -.elementTree{ display:flex; flex-direction:column; gap:1px; max-height:55vh; overflow-y:auto; margin-bottom:14px; } -.treeNode{ display:flex; flex-direction:column; } -.treeRow{ display:flex; align-items:center; gap:2px; } -.treeToggle{ - flex:0 0 auto; width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; - color:var(--text-dim); font-size:10px; display:flex; align-items:center; justify-content:center; - transition:transform .12s ease; +.elementTree { + display: flex; + flex-direction: column; + gap: 1px; + max-height: 55vh; + overflow-y: auto; + margin-bottom: 14px; } -.treeToggle:hover{ color:var(--text); } -.treeToggleSpacer{ flex:0 0 auto; width:16px; height:16px; } -.treeNode.collapsed > .treeRow > .treeToggle{ transform:rotate(-90deg); } -.treeNode.collapsed > .treeChildren{ display:none; } -.treeRowLink{ - flex:1; display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px; - text-decoration:none; color:var(--text); font-size:12.5px; line-height:1.5; - white-space:nowrap; overflow:hidden; min-width:0; -} -.treeRowLink:hover{ background:var(--panel2); } -.treeRowLink.selected{ background:var(--accent); color:#0b0e14; font-weight:600; } -.treeIcon{ flex:0 0 auto; font-size:12px; } -.treeLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } -.treeChildren{ display:flex; flex-direction:column; margin-left:10px; padding-left:8px; border-left:1px dashed var(--border); } -.treeRow.dragging{ opacity:0.4; } -.treeRow.dropBefore{ box-shadow: inset 0 2px 0 0 var(--accent); } -.treeRow.dropAfter{ box-shadow: inset 0 -2px 0 0 var(--accent); } -.treeRow.dropInside{ background:rgba(91,140,255,.25); box-shadow: inset 0 0 0 1px var(--accent); border-radius:4px; } -.contextMenu{ - position:fixed; z-index:500; background:var(--panel); border:1px solid var(--border); - border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:4px; min-width:160px; +.treeNode { + display: flex; + flex-direction: column; } -.contextMenu button{ - display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); - padding:7px 10px; border-radius:5px; font-size:13px; cursor:pointer; + +.treeRow { + display: flex; + align-items: center; + gap: 2px; +} + +.treeToggle { + flex: 0 0 auto; + width: 16px; + height: 16px; + padding: 0; + border: none; + background: none; + cursor: pointer; + color: var(--text-dim); + font-size: 10px; + display: flex; + align-items: center; + justify-content: center; + transition: transform .12s ease; +} + +.treeToggle:hover { + color: var(--text); +} + +.treeToggleSpacer { + flex: 0 0 auto; + width: 16px; + height: 16px; +} + +.treeNode.collapsed > .treeRow > .treeToggle { + transform: rotate(-90deg); +} + +.treeNode.collapsed > .treeChildren { + display: none; +} + +.treeRowLink { + flex: 1; + display: flex; + align-items: center; + gap: 6px; + padding: 4px 6px; + border-radius: 5px; + text-decoration: none; + color: var(--text); + font-size: 12.5px; + line-height: 1.5; + white-space: nowrap; + overflow: hidden; + min-width: 0; +} + +.treeRowLink:hover { + background: var(--panel2); +} + +.treeRowLink.selected { + background: var(--accent); + color: #0b0e14; + font-weight: 600; +} + +.treeIcon { + flex: 0 0 auto; + font-size: 12px; +} + +.treeLabel { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.treeChildren { + display: flex; + flex-direction: column; + margin-left: 10px; + padding-left: 8px; + border-left: 1px dashed var(--border); +} + +.treeRow.dragging { + opacity: 0.4; +} + +.treeRow.dropBefore { + box-shadow: inset 0 2px 0 0 var(--accent); +} + +.treeRow.dropAfter { + box-shadow: inset 0 -2px 0 0 var(--accent); +} + +.treeRow.dropInside { + background: rgba(91, 140, 255, 0.25); + box-shadow: inset 0 0 0 1px var(--accent); + border-radius: 4px; +} + +.contextMenu { + position: fixed; + z-index: 500; + background: var(--panel); + border: 1px solid var(--border); + border-radius: 8px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + padding: 4px; + min-width: 160px; +} + +.contextMenu button { + display: block; + width: 100%; + text-align: left; + background: none; + border: none; + color: var(--text); + padding: 7px 10px; + border-radius: 5px; + font-size: 13px; + cursor: pointer; +} + +.contextMenu button:hover { + background: var(--panel2); } -.contextMenu button:hover{ background:var(--panel2); } /* Élément à onglets (voir render_onglets.py) : la barre d'onglets elle-même est un vrai composant Bulma ("tabs" > "ul" > "li", voir render_onglets.py) — il ne reste ici que les panneaux, que Bulma n'a pas de composant pour. */ -.forgeTabPanels{ min-width:0; } -.forgeTabPanel{ padding-top:10px; } - -.propGroup{ border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--panel); } -.propGroup > summary{ - list-style:none; cursor:pointer; padding:9px 12px; font-size:13px; color:var(--accent); - font-weight:600; user-select:none; display:flex; align-items:center; justify-content:space-between; +.forgeTabPanels { + min-width: 0; } -.propGroup > summary::-webkit-details-marker{ display:none; } -.propGroup > summary::after{ content:"▸"; color:var(--text-dim); font-size:11px; transition:transform .15s; } -.propGroup[open] > summary::after{ transform:rotate(90deg); } -.propGroup > summary:hover{ background:var(--panel2); } -.propGroupBody{ padding:2px 12px 12px; } -.propGroupBody h3{ margin-top:0; } +.forgeTabPanel { + padding-top: 10px; +} + +.propGroup { + border: 1px solid var(--border); + border-radius: 8px; + margin-bottom: 8px; + background: var(--panel); +} + +.propGroup > summary { + list-style: none; + cursor: pointer; + padding: 9px 12px; + font-size: 13px; + color: var(--accent); + font-weight: 600; + user-select: none; + display: flex; + align-items: center; + justify-content: space-between; +} + +.propGroup > summary::-webkit-details-marker { + display: none; +} + +.propGroup > summary::after { + content: "▸"; + color: var(--text-dim); + font-size: 11px; + transition: transform .15s; +} + +.propGroup[open] > summary::after { + transform: rotate(90deg); +} + +.propGroup > summary:hover { + background: var(--panel2); +} + +.propGroupBody { + padding: 2px 12px 12px; +} + +.propGroupBody h3 { + margin-top: 0; +} /* .posGrid/.controlRow/.sizeField/.sliderRow/.alignGroup : Bulma fournit déjà la mise en page (columns/field/control/buttons has-addons, voir screen_edit.html) — ce qui reste ici n'est que ce que Bulma ne fournit pas nativement : l'espacement propre à un curseur (slider) et son pastille de valeur affichée à côté. */ -.posGrid input:disabled{ opacity:0.4; cursor:not-allowed; } -.sliderRow{ display:flex; align-items:center; gap:10px; } -.sliderRow input[type=range]{ flex:1; } -.sliderValue{ min-width:44px; text-align:right; } -input[type=color]{ width:52px; height:34px; padding:2px; } +.posGrid input:disabled { + opacity: 0.4; + cursor: not-allowed; +} -.propsPanel .sectionDivider, .floatPanel .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; } -.actionAddForm{ margin-top:10px; } +.sliderRow { + display: flex; + align-items: center; + gap: 10px; +} -.uploadRow{ margin-top:6px; } -.uploadInput{ font-size:11px; color:var(--text-dim); } -.uploadStatus{ display:block; margin-top:4px; } -code{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11.5px; } +.sliderRow input[type=range] { + flex: 1; +} -@media (max-width: 1300px){ +.sliderValue { + min-width: 44px; + text-align: right; +} + +input[type=color] { + width: 52px; + height: 34px; + padding: 2px; +} + +.propsPanel .sectionDivider, .floatPanel .sectionDivider { + border: none; + border-top: 1px solid var(--border); + margin: 14px 0; +} + +.actionAddForm { + margin-top: 10px; +} + +.uploadRow { + margin-top: 6px; +} + +.uploadInput { + font-size: 11px; + color: var(--text-dim); +} + +.uploadStatus { + display: block; + margin-top: 4px; +} + +code { + background: var(--panel2); + border: 1px solid var(--border); + border-radius: 4px; + padding: 1px 6px; + font-size: 11.5px; +} + +@media (max-width: 1300px) { /* Sous cette largeur, les 3 colonnes s'empilent : le principe "tout tient dans la fenêtre, chaque zone défile pour elle-même" n'a plus de sens (il n'y a plus qu'une seule colonne) — on revient à une page classique qui défile normalement. */ - body.builderBody{ height:auto; overflow:visible; } - body.builderBody > main.content{ overflow:visible; } - .builder3{ flex-direction:column; flex:none; } - .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; } + body.builderBody { + height: auto; + overflow: visible; + } + body.builderBody > main.content { + overflow: visible; + } + .builder3 { + flex-direction: column; + flex: none; + } + .builderCanvasArea { + flex: none; + width: 100%; + height: auto; + max-height: none; + overflow: visible; + } /* Le "letterboxing" par hauteur (voir .canvas plus haut) suppose une chaîne de hauteurs définies jusqu'ici — qui n'existe plus une fois .builderCanvasArea repassée en "height:auto" ci-dessus. Revient donc à un dimensionnement par LARGEUR, comme une page qui défile normalement. */ - .canvasFrame{ flex:none; overflow:visible; } - .canvas{ height:auto; width:100%; } + .canvasFrame { + flex: none; + overflow: visible; + } + .canvas { + height: auto; + width: 100%; + } /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il couvrirait tout l'écran) : les deux rejoignent la pile normale et restent toujours ouverts/visibles, quel que soit l'état mémorisé — .hidden est ignoré grâce au "!important" sur "display" ci-dessous. */ - .floatPanel{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; left:auto; right:auto; display:flex !important; } - .floatPanelReopenBtn{ display:none !important; } + .floatPanel { + position: static; + flex: none; + width: 100%; + height: auto; + max-height: none; + box-shadow: none; + top: auto; + left: auto; + right: auto; + display: flex !important; + } + .floatPanelReopenBtn { + display: none !important; + } } /* ---------- Onglets du centre : Écran / Logique de la scène / Timeline @@ -449,89 +13226,331 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p redimensionnable à la souris : un onglet "prend toute la place" par nature, pas besoin d'une poignée de redimensionnement séparée, et en changer d'onglet équivaut à "fermer" celui qu'on quitte. */ -.builderTabs{ display:flex; gap:2px; flex:0 0 auto; border-bottom:1px solid var(--border); margin-bottom:10px; } -.builderTabBtn{ - background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; - padding:8px 12px; color:var(--text-dim); font-size:12.5px; cursor:pointer; +.builderTabs { + display: flex; + gap: 2px; + flex: 0 0 auto; + border-bottom: 1px solid var(--border); + margin-bottom: 10px; } -.builderTabBtn:hover{ color:var(--text); } -.builderTabBtn.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } -.builderTabPanel{ flex:1 1 auto; min-height:0; display:none; flex-direction:column; } -.builderTabPanel.active{ display:flex; } +.builderTabBtn { + background: transparent; + border: none; + border-bottom: 2px solid transparent; + border-radius: 0; + padding: 8px 12px; + color: var(--text-dim); + font-size: 12.5px; + cursor: pointer; +} + +.builderTabBtn:hover { + color: var(--text); +} + +.builderTabBtn.active { + color: var(--accent); + border-bottom-color: var(--accent); + font-weight: 600; +} + +.builderTabPanel { + flex: 1 1 auto; + min-height: 0; + display: none; + flex-direction: column; +} + +.builderTabPanel.active { + display: flex; +} /* Sous-onglets Champs/Données À L'INTÉRIEUR d'un panneau "Modifier un objet" (voir game_dashboard.html) — classes distinctes de .builderTabs/ .builderTabBtn/.builderTabPanel (utilisées par le style, réutilisé tel quel) pour que switchDashTab() (onglets du tableau de bord lui-même, ciblage global) n'aille jamais les toucher par erreur. */ -.objectPanelTabs{ margin:14px 0 10px; } -.objectPanelTabPanel{ display:none; flex-direction:column; } -.objectPanelTabPanel.active{ display:flex; } - -.flowToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; flex:0 0 auto; } - -.nodeForm{ border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:var(--panel2); max-width:420px; flex:0 0 auto; } -.nodeForm label{ margin-top:8px; } - -.flowCanvasWrap{ position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto; border:1px dashed var(--border); border-radius:8px; background:#0d0f15; } -.flowCanvas{ position:relative; width:2200px; height:1400px; } -.flowEdgesSvg{ position:absolute; top:0; left:0; width:2200px; height:1400px; pointer-events:none; z-index:0; } -.flowEdgeLine{ stroke:var(--accent); stroke-width:2; pointer-events:stroke; cursor:pointer; } -.flowEdgeLine.flowEdgeTrue{ stroke:#4caf7d; } -.flowEdgeLine.flowEdgeFalse{ stroke:var(--danger); } - -.flowNode{ - position:absolute; width:220px; min-height:52px; border-radius:8px; border:1px solid var(--border); - background:var(--panel2); padding:10px 12px; font-size:12.5px; cursor:grab; z-index:1; user-select:none; +.objectPanelTabs { + margin: 14px 0 10px; } -.flowNode-trigger{ border-color:#5b8cff; } -.flowNode-condition{ border-color:#e0b23c; } -.flowNode-action{ border-color:#4caf7d; } -.flowNodeBody{ padding-right:16px; line-height:1.4; word-break:break-word; } -.flowNodeDelete{ - position:absolute; top:4px; right:4px; width:18px; height:18px; padding:0; line-height:1; - font-size:11px; border-radius:4px; background:transparent; border:none; color:var(--text-dim); + +.objectPanelTabPanel { + display: none; + flex-direction: column; } -.flowNodeDelete:hover{ color:var(--danger); } -.flowPort{ - position:absolute; width:14px; height:14px; border-radius:50%; background:var(--panel); - border:2px solid var(--accent); top:50%; transform:translateY(-50%); cursor:crosshair; z-index:2; + +.objectPanelTabPanel.active { + display: flex; +} + +.flowToolbar { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 10px; + flex: 0 0 auto; +} + +.nodeForm { + border: 1px solid var(--border); + border-radius: 8px; + padding: 12px; + margin-bottom: 12px; + background: var(--panel2); + max-width: 420px; + flex: 0 0 auto; +} + +.nodeForm label { + margin-top: 8px; +} + +.flowCanvasWrap { + position: relative; + width: 100%; + flex: 1 1 auto; + min-height: 120px; + overflow: auto; + border: 1px dashed var(--border); + border-radius: 8px; + background: var(--bg); +} + +.flowCanvas { + position: relative; + width: 2200px; + height: 1400px; +} + +.flowEdgesSvg { + position: absolute; + top: 0; + left: 0; + width: 2200px; + height: 1400px; + pointer-events: none; + z-index: 0; +} + +.flowEdgeLine { + stroke: var(--accent); + stroke-width: 2; + pointer-events: stroke; + cursor: pointer; +} + +.flowEdgeLine.flowEdgeTrue { + stroke: var(--status-success); +} + +.flowEdgeLine.flowEdgeFalse { + stroke: var(--danger); +} + +.flowNode { + position: absolute; + width: 220px; + min-height: 52px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--panel2); + padding: 10px 12px; + font-size: 12.5px; + cursor: grab; + z-index: 1; + user-select: none; +} + +.flowNode-trigger { + border-color: var(--status-info); +} + +.flowNode-condition { + border-color: var(--status-warning); +} + +.flowNode-action { + border-color: var(--status-success); +} + +.flowNodeBody { + padding-right: 16px; + line-height: 1.4; + word-break: break-word; +} + +.flowNodeDelete { + position: absolute; + top: 4px; + right: 4px; + width: 18px; + height: 18px; + padding: 0; + line-height: 1; + font-size: 11px; + border-radius: 4px; + background: transparent; + border: none; + color: var(--text-dim); +} + +.flowNodeDelete:hover { + color: var(--danger); +} + +.flowPort { + position: absolute; + width: 14px; + height: 14px; + border-radius: 50%; + background: var(--panel); + border: 2px solid var(--accent); + top: 50%; + transform: translateY(-50%); + cursor: crosshair; + z-index: 2; +} + +.flowPortIn { + left: -8px; +} + +.flowPortOut { + right: -8px; +} + +.flowPortTrue { + right: -8px; + top: 35%; + border-color: var(--status-success); +} + +.flowPortFalse { + right: -8px; + top: 65%; + border-color: var(--danger); } -.flowPortIn{ left:-8px; } -.flowPortOut{ right:-8px; } -.flowPortTrue{ right:-8px; top:35%; border-color:#4caf7d; } -.flowPortFalse{ right:-8px; top:65%; border-color:var(--danger); } /* ---------- Timeline d'animation : panneau sous "Logique de la scène" ---------- */ -.animTimelineWrap{ - position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto; - border:1px dashed var(--border); border-radius:8px; background:#0d0f15; +.animTimelineWrap { + position: relative; + width: 100%; + flex: 1 1 auto; + min-height: 120px; + overflow: auto; + border: 1px dashed var(--border); + border-radius: 8px; + background: var(--bg); } -.animRuler{ display:flex; height:22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:#0d0f15; z-index:3; } -.animRulerSpacer{ position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2; border-right:1px solid var(--border); } -.animRulerTicksWrap{ position:relative; flex:0 0 auto; } -.animRulerTick{ - position:absolute; top:0; bottom:0; font-size:10px; color:var(--text-dim); - border-left:1px solid var(--border); padding-left:3px; + +.animRuler { + display: flex; + height: 22px; + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + background: var(--bg); + z-index: 3; } -.animTracks{ position:relative; } -.animTrack{ position:relative; height:38px; border-bottom:1px solid var(--border); display:flex; align-items:stretch; } -.animTrackLabel{ - position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2; - padding:0 8px; font-size:12px; display:flex; align-items:center; border-right:1px solid var(--border); - overflow:hidden; text-overflow:ellipsis; white-space:nowrap; + +.animRulerSpacer { + position: sticky; + left: 0; + width: 140px; + flex: 0 0 140px; + background: var(--panel); + z-index: 2; + border-right: 1px solid var(--border); } -.animTrackLane{ position:relative; flex:0 0 auto; } -.animClip{ - position:absolute; top:5px; height:28px; border-radius:6px; background:var(--accent); color:#fff; - font-size:11px; padding:5px 8px; cursor:grab; overflow:hidden; white-space:nowrap; user-select:none; - box-sizing:border-box; + +.animRulerTicksWrap { + position: relative; + flex: 0 0 auto; +} + +.animRulerTick { + position: absolute; + top: 0; + bottom: 0; + font-size: 10px; + color: var(--text-dim); + border-left: 1px solid var(--border); + padding-left: 3px; +} + +.animTracks { + position: relative; +} + +.animTrack { + position: relative; + height: 38px; + border-bottom: 1px solid var(--border); + display: flex; + align-items: stretch; +} + +.animTrackLabel { + position: sticky; + left: 0; + width: 140px; + flex: 0 0 140px; + background: var(--panel); + z-index: 2; + padding: 0 8px; + font-size: 12px; + display: flex; + align-items: center; + border-right: 1px solid var(--border); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.animTrackLane { + position: relative; + flex: 0 0 auto; +} + +.animClip { + position: absolute; + top: 5px; + height: 28px; + border-radius: 6px; + background: var(--accent); + color: #fff; + font-size: 11px; + padding: 5px 8px; + cursor: grab; + overflow: hidden; + white-space: nowrap; + user-select: none; + box-sizing: border-box; +} + +.animClip.selected { + outline: 2px solid #fff; +} + +.animClipResizeHandle { + position: absolute; + right: 0; + top: 0; + width: 8px; + height: 100%; + cursor: ew-resize; +} + +.animKeyframeRow { + align-items: flex-start; +} + +.animKeyframeRow textarea { + font-family: monospace; + font-size: 11px; } -.animClip.selected{ outline:2px solid #fff; } -.animClipResizeHandle{ position:absolute; right:0; top:0; width:8px; height:100%; cursor:ew-resize; } -.animKeyframeRow{ align-items:flex-start; } -.animKeyframeRow textarea{ font-family:monospace; font-size:11px; } /* ---------- Tableau de bord d'un jeu (game_dashboard.html) ---------- */ /* Une seule fenêtre, un onglet par catégorie (écrans/objets/éléments de @@ -541,72 +13560,270 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p Contrairement à leur usage dans l'éditeur d'écran, ici la page défile normalement (pas de hauteur figée) : une liste peut être longue, pas besoin d'un défilement interne séparé par panneau. */ -.dashTabCount{ font-size:10px; color:var(--text-dim); background:var(--panel2); border-radius:999px; padding:1px 6px; margin-left:4px; } -.dashPanelHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } -.dashPanelHeader h2{ margin:0; } -.dashCreateBar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); } -.dashCreateBar input, .dashCreateBar select{ width:auto; flex:1 1 160px; } -.dashDangerZone{ margin-top:28px; } +.dashTabCount { + font-size: 10px; + color: var(--text-dim); + background: var(--panel2); + border-radius: 999px; + padding: 1px 6px; + margin-left: 4px; +} + +.dashPanelHeader { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-bottom: 8px; +} + +.dashPanelHeader h2 { + margin: 0; +} + +.dashCreateBar { + display: flex; + gap: 8px; + align-items: center; + margin-bottom: 12px; + padding: 10px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--panel); +} + +.dashCreateBar input, .dashCreateBar select { + width: auto; + flex: 1 1 160px; +} + +.dashDangerZone { + margin-top: 28px; +} /* ---------- Filtre de colonnes (onglet Données, game_dashboard.html) ---------- */ /* Menu déroulant compact sous le bouton "🔧 Colonnes" — un objet avec beaucoup de champs rend le tableau illisible, ce menu permet d'en masquer certains (voir toggleDataColumn() : agit directement sur [data-col] plutôt que de reconstruire le tableau). */ -.columnFilterWrap{ position:relative; display:inline-block; } -.columnFilterMenu{ - position:absolute; top:100%; left:0; margin-top:4px; z-index:70; - background:var(--panel); border:1px solid var(--border); border-radius:8px; - padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.55); - display:flex; flex-direction:column; gap:2px; min-width:180px; max-height:280px; overflow-y:auto; +.columnFilterWrap { + position: relative; + display: inline-block; +} + +.columnFilterMenu { + position: absolute; + top: 100%; + left: 0; + margin-top: 4px; + z-index: 70; + background: var(--panel); + border: 1px solid var(--border); + border-radius: 8px; + padding: 8px; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); + display: flex; + flex-direction: column; + gap: 2px; + min-width: 180px; + max-height: 280px; + overflow-y: auto; +} + +.columnFilterMenu.hidden { + display: none; +} + +.columnFilterOption { + display: flex; + align-items: center; + gap: 6px; + padding: 4px 6px; + border-radius: 4px; + font-size: 12.5px; + white-space: nowrap; +} + +.columnFilterOption:hover { + background: var(--panel2); } -.columnFilterMenu.hidden{ display:none; } -.columnFilterOption{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:4px; font-size:12.5px; white-space:nowrap; } -.columnFilterOption:hover{ background:var(--panel2); } /* ---------- Panneau "Configurer la valeur" (variable Objet/Tableau) ---------- */ /* La colonne "Clé" n'a de sens que pour un Objet (paires clé/valeur) — un Tableau n'est qu'une liste de valeurs, voir openVarValuePanel() dans game_dashboard.html. */ -#varValuePanel[data-mode="tableau"] .varValueKeyField{ display:none; } +#varValuePanel[data-mode="tableau"] .varValueKeyField { + display: none; +} /* ---------- Inscription : schéma visuel du mot de passe ---------- */ /* Jauge + liste de critères mise à jour en direct (voir register.html) — les mêmes 5 critères que auth/password_strength.py côté serveur. */ -.passwordStrengthBar{ height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-top:8px; } -.passwordStrengthFill{ height:100%; width:0; border-radius:3px; background:var(--danger, #e05252); transition:width .15s ease, background-color .15s ease; } -.passwordStrengthFill.weak{ background:var(--danger, #e05252); } -.passwordStrengthFill.medium{ background:#e0a952; } -.passwordStrengthFill.good{ background:#d7d652; } -.passwordStrengthFill.strong{ background:#4caf50; } -.passwordChecklist{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; } -.passwordChecklist li{ font-size:12.5px; color:var(--text-dim); padding-left:18px; position:relative; } -.passwordChecklist li::before{ content:"○"; position:absolute; left:0; } -.passwordChecklist li.ok{ color:#4caf50; } -.passwordChecklist li.ok::before{ content:"✓"; } -.passwordChecklist-compact{ flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; } -.passwordChecklist-compact li{ font-size:11px; } +.passwordStrengthBar { + height: 6px; + border-radius: 3px; + background: var(--panel2); + overflow: hidden; + margin-top: 8px; +} + +.passwordStrengthFill { + height: 100%; + width: 0; + border-radius: 3px; + background: var(--status-danger); + transition: width .15s ease, background-color .15s ease; +} + +.passwordStrengthFill.weak { + background: var(--status-danger); +} + +.passwordStrengthFill.medium { + background: var(--status-warning); +} + +.passwordStrengthFill.good { + background: var(--accent-2); +} + +.passwordStrengthFill.strong { + background: var(--status-success); +} + +.passwordChecklist { + list-style: none; + margin: 8px 0 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 2px; +} + +.passwordChecklist li { + font-size: 12.5px; + color: var(--text-dim); + padding-left: 18px; + position: relative; +} + +.passwordChecklist li::before { + content: "○"; + position: absolute; + left: 0; +} + +.passwordChecklist li.ok { + color: var(--status-success); +} + +.passwordChecklist li.ok::before { + content: "✓"; +} + +.passwordChecklist-compact { + flex-direction: row; + flex-wrap: wrap; + column-gap: 10px; + row-gap: 2px; +} + +.passwordChecklist-compact li { + font-size: 11px; +} /* ---------- Page de profil : compacte, sur 2 colonnes ---------- */ -.profileSection{ padding-top:1.5rem; padding-bottom:1.5rem; } -.profileContainer{ max-width:980px; } -.profileNotif{ padding:0.6rem 0.9rem; margin-bottom:0.75rem; } -.profileGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; } -.profileCol{ display:flex; flex-direction:column; gap:14px; min-width:0; } -.profileBox{ padding:0.85rem 1rem; } -.profileBox-danger{ border:1px solid #b33; } -.profileForm .field{ margin-bottom:8px; } -.profileForm .field:last-child{ margin-bottom:0; } -.profileForm-row{ display:flex; flex-wrap:wrap; gap:8px; } -.profileForm-row .field{ flex:1 1 120px; margin-bottom:0; } -.profileForm-row .field.profileForm-full{ flex-basis:100%; } -@media (max-width:720px){ - .profileGrid{ grid-template-columns:1fr; } +.profileSection { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.profileContainer { + max-width: 980px; +} + +.profileNotif { + padding: 0.6rem 0.9rem; + margin-bottom: 0.75rem; +} + +.profileGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 14px; + align-items: start; +} + +.profileCol { + display: flex; + flex-direction: column; + gap: 14px; + min-width: 0; +} + +.profileBox { + padding: 0.85rem 1rem; +} + +.profileBox-danger { + border: 1px solid var(--status-danger); +} + +.profileForm .field { + margin-bottom: 8px; +} + +.profileForm .field:last-child { + margin-bottom: 0; +} + +.profileForm-row { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.profileForm-row .field { + flex: 1 1 120px; + margin-bottom: 0; +} + +.profileForm-row .field.profileForm-full { + flex-basis: 100%; +} + +@media (max-width: 720px) { + .profileGrid { + grid-template-columns: 1fr; + } } /* ---------- Inscription : QR code de la double authentification ---------- */ -.totpQrWrap{ background:#fff; padding:16px; border-radius:8px; display:inline-block; max-width:220px; } -.totpQrWrap svg{ display:block; width:100%; height:auto; } +.totpQrWrap { + background: #fff; + padding: 16px; + border-radius: 8px; + display: inline-block; + max-width: 220px; +} -.recoveryCodesGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } -.recoveryCode{ display:block; text-align:center; padding:8px; background:#161616; border-radius:6px; letter-spacing:1px; } +.totpQrWrap svg { + display: block; + width: 100%; + height: auto; +} + +.recoveryCodesGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; +} + +.recoveryCode { + display: block; + text-align: center; + padding: 8px; + background: var(--panel2); + border-radius: 10px; + letter-spacing: 1px; +} diff --git a/styles/bulma/LICENSE b/styles/bulma/LICENSE new file mode 100644 index 00000000..3fdc17cd --- /dev/null +++ b/styles/bulma/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2022 Jeremy Thomas + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/styles/bulma/bulma.sass b/styles/bulma/bulma.sass new file mode 100644 index 00000000..87dec21b --- /dev/null +++ b/styles/bulma/bulma.sass @@ -0,0 +1,10 @@ +@charset "utf-8" +/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ +@import "sass/utilities/_all" +@import "sass/base/_all" +@import "sass/elements/_all" +@import "sass/form/_all" +@import "sass/components/_all" +@import "sass/grid/_all" +@import "sass/helpers/_all" +@import "sass/layout/_all" diff --git a/styles/bulma/sass/base/_all.sass b/styles/bulma/sass/base/_all.sass new file mode 100644 index 00000000..a5ae0a7b --- /dev/null +++ b/styles/bulma/sass/base/_all.sass @@ -0,0 +1,6 @@ +/* Bulma Base */ +@charset "utf-8" + +@import "minireset" +@import "generic" +@import "animations" diff --git a/styles/bulma/sass/base/animations.sass b/styles/bulma/sass/base/animations.sass new file mode 100644 index 00000000..a14525d7 --- /dev/null +++ b/styles/bulma/sass/base/animations.sass @@ -0,0 +1,5 @@ +@keyframes spinAround + from + transform: rotate(0deg) + to + transform: rotate(359deg) diff --git a/styles/bulma/sass/base/generic.sass b/styles/bulma/sass/base/generic.sass new file mode 100644 index 00000000..42c736ae --- /dev/null +++ b/styles/bulma/sass/base/generic.sass @@ -0,0 +1,145 @@ +@import "../utilities/mixins" + +$body-background-color: $scheme-main !default +$body-size: 16px !default +$body-min-width: 300px !default +$body-rendering: optimizeLegibility !default +$body-family: $family-primary !default +$body-overflow-x: hidden !default +$body-overflow-y: scroll !default + +$body-color: $text !default +$body-font-size: 1em !default +$body-weight: $weight-normal !default +$body-line-height: 1.5 !default + +$code-family: $family-code !default +$code-padding: 0.25em 0.5em 0.25em !default +$code-weight: normal !default +$code-size: 0.875em !default + +$small-font-size: 0.875em !default + +$hr-background-color: $background !default +$hr-height: 2px !default +$hr-margin: 1.5rem 0 !default + +$strong-color: $text-strong !default +$strong-weight: $weight-bold !default + +$pre-font-size: 0.875em !default +$pre-padding: 1.25rem 1.5rem !default +$pre-code-font-size: 1em !default + +html + background-color: $body-background-color + font-size: $body-size + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + min-width: $body-min-width + overflow-x: $body-overflow-x + overflow-y: $body-overflow-y + text-rendering: $body-rendering + text-size-adjust: 100% + +article, +aside, +figure, +footer, +header, +hgroup, +section + display: block + +body, +button, +input, +optgroup, +select, +textarea + font-family: $body-family + +code, +pre + -moz-osx-font-smoothing: auto + -webkit-font-smoothing: auto + font-family: $code-family + +body + color: $body-color + font-size: $body-font-size + font-weight: $body-weight + line-height: $body-line-height + +// Inline + +a + color: $link + cursor: pointer + text-decoration: none + strong + color: currentColor + &:hover + color: $link-hover + +code + background-color: $code-background + color: $code + font-size: $code-size + font-weight: $code-weight + padding: $code-padding + +hr + background-color: $hr-background-color + border: none + display: block + height: $hr-height + margin: $hr-margin + +img + height: auto + max-width: 100% + +input[type="checkbox"], +input[type="radio"] + vertical-align: baseline + +small + font-size: $small-font-size + +span + font-style: inherit + font-weight: inherit + +strong + color: $strong-color + font-weight: $strong-weight + +// Block + +fieldset + border: none + +pre + +overflow-touch + background-color: $pre-background + color: $pre + font-size: $pre-font-size + overflow-x: auto + padding: $pre-padding + white-space: pre + word-wrap: normal + code + background-color: transparent + color: currentColor + font-size: $pre-code-font-size + padding: 0 + +table + td, + th + vertical-align: top + &:not([align]) + text-align: inherit + th + color: $text-strong diff --git a/styles/bulma/sass/base/helpers.sass b/styles/bulma/sass/base/helpers.sass new file mode 100644 index 00000000..e356830f --- /dev/null +++ b/styles/bulma/sass/base/helpers.sass @@ -0,0 +1 @@ +@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead." diff --git a/styles/bulma/sass/base/minireset.sass b/styles/bulma/sass/base/minireset.sass new file mode 100644 index 00000000..aa2b6f3a --- /dev/null +++ b/styles/bulma/sass/base/minireset.sass @@ -0,0 +1,79 @@ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ +// Blocks +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 + margin: 0 + padding: 0 + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 + font-size: 100% + font-weight: normal + +// List +ul + list-style: none + +// Form +button, +input, +select, +textarea + margin: 0 + +// Box sizing +html + box-sizing: border-box + +* + &, + &::before, + &::after + box-sizing: inherit + +// Media +img, +video + height: auto + max-width: 100% + +// Iframe +iframe + border: 0 + +// Table +table + border-collapse: collapse + border-spacing: 0 + +td, +th + padding: 0 + &:not([align]) + text-align: inherit diff --git a/styles/bulma/sass/components/_all.sass b/styles/bulma/sass/components/_all.sass new file mode 100644 index 00000000..a7062ec1 --- /dev/null +++ b/styles/bulma/sass/components/_all.sass @@ -0,0 +1,15 @@ +/* Bulma Components */ +@charset "utf-8" + +@import "breadcrumb" +@import "card" +@import "dropdown" +@import "level" +@import "media" +@import "menu" +@import "message" +@import "modal" +@import "navbar" +@import "pagination" +@import "panel" +@import "tabs" diff --git a/styles/bulma/sass/components/breadcrumb.sass b/styles/bulma/sass/components/breadcrumb.sass new file mode 100644 index 00000000..60bb17b0 --- /dev/null +++ b/styles/bulma/sass/components/breadcrumb.sass @@ -0,0 +1,77 @@ +@import "../utilities/mixins" + +$breadcrumb-item-color: $link !default +$breadcrumb-item-hover-color: $link-hover !default +$breadcrumb-item-active-color: $text-strong !default + +$breadcrumb-item-padding-vertical: 0 !default +$breadcrumb-item-padding-horizontal: 0.75em !default + +$breadcrumb-item-separator-color: $border-hover !default + +.breadcrumb + @extend %block + @extend %unselectable + font-size: $size-normal + white-space: nowrap + a + align-items: center + color: $breadcrumb-item-color + display: flex + justify-content: center + padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal + &:hover + color: $breadcrumb-item-hover-color + li + align-items: center + display: flex + &:first-child a + +ltr-property("padding", 0, false) + &.is-active + a + color: $breadcrumb-item-active-color + cursor: default + pointer-events: none + & + li::before + color: $breadcrumb-item-separator-color + content: "\0002f" + ul, + ol + align-items: flex-start + display: flex + flex-wrap: wrap + justify-content: flex-start + .icon + &:first-child + +ltr-property("margin", 0.5em) + &:last-child + +ltr-property("margin", 0.5em, false) + // Alignment + &.is-centered + ol, + ul + justify-content: center + &.is-right + ol, + ul + justify-content: flex-end + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + // Styles + &.has-arrow-separator + li + li::before + content: "\02192" + &.has-bullet-separator + li + li::before + content: "\02022" + &.has-dot-separator + li + li::before + content: "\000b7" + &.has-succeeds-separator + li + li::before + content: "\0227B" diff --git a/styles/bulma/sass/components/card.sass b/styles/bulma/sass/components/card.sass new file mode 100644 index 00000000..73387f38 --- /dev/null +++ b/styles/bulma/sass/components/card.sass @@ -0,0 +1,103 @@ +@import "../utilities/mixins" + +$card-color: $text !default +$card-background-color: $scheme-main !default +$card-shadow: $shadow !default +$card-radius: 0.25rem !default + +$card-header-background-color: transparent !default +$card-header-color: $text-strong !default +$card-header-padding: 0.75rem 1rem !default +$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default +$card-header-weight: $weight-bold !default + +$card-content-background-color: transparent !default +$card-content-padding: 1.5rem !default + +$card-footer-background-color: transparent !default +$card-footer-border-top: 1px solid $border-light !default +$card-footer-padding: 0.75rem !default + +$card-media-margin: $block-spacing !default + +.card + background-color: $card-background-color + border-radius: $card-radius + box-shadow: $card-shadow + color: $card-color + max-width: 100% + position: relative + +%card-item + &:first-child + border-top-left-radius: $card-radius + border-top-right-radius: $card-radius + &:last-child + border-bottom-left-radius: $card-radius + border-bottom-right-radius: $card-radius + +.card-header + @extend %card-item + background-color: $card-header-background-color + align-items: stretch + box-shadow: $card-header-shadow + display: flex + +.card-header-title + align-items: center + color: $card-header-color + display: flex + flex-grow: 1 + font-weight: $card-header-weight + padding: $card-header-padding + &.is-centered + justify-content: center + +.card-header-icon + +reset + align-items: center + cursor: pointer + display: flex + justify-content: center + padding: $card-header-padding + +.card-image + display: block + position: relative + &:first-child + img + border-top-left-radius: $card-radius + border-top-right-radius: $card-radius + &:last-child + img + border-bottom-left-radius: $card-radius + border-bottom-right-radius: $card-radius + +.card-content + @extend %card-item + background-color: $card-content-background-color + padding: $card-content-padding + +.card-footer + @extend %card-item + background-color: $card-footer-background-color + border-top: $card-footer-border-top + align-items: stretch + display: flex + +.card-footer-item + align-items: center + display: flex + flex-basis: 0 + flex-grow: 1 + flex-shrink: 0 + justify-content: center + padding: $card-footer-padding + &:not(:last-child) + +ltr-property("border", $card-footer-border-top) + +// Combinations + +.card + .media:not(:last-child) + margin-bottom: $card-media-margin diff --git a/styles/bulma/sass/components/dropdown.sass b/styles/bulma/sass/components/dropdown.sass new file mode 100644 index 00000000..3743cb77 --- /dev/null +++ b/styles/bulma/sass/components/dropdown.sass @@ -0,0 +1,83 @@ +@import "../utilities/mixins" + +$dropdown-menu-min-width: 12rem !default + +$dropdown-content-background-color: $scheme-main !default +$dropdown-content-arrow: $link !default +$dropdown-content-offset: 4px !default +$dropdown-content-padding-bottom: 0.5rem !default +$dropdown-content-padding-top: 0.5rem !default +$dropdown-content-radius: $radius !default +$dropdown-content-shadow: $shadow !default +$dropdown-content-z: 20 !default + +$dropdown-item-color: $text !default +$dropdown-item-hover-color: $scheme-invert !default +$dropdown-item-hover-background-color: $background !default +$dropdown-item-active-color: $link-invert !default +$dropdown-item-active-background-color: $link !default + +$dropdown-divider-background-color: $border-light !default + +.dropdown + display: inline-flex + position: relative + vertical-align: top + &.is-active, + &.is-hoverable:hover + .dropdown-menu + display: block + &.is-right + .dropdown-menu + left: auto + right: 0 + &.is-up + .dropdown-menu + bottom: 100% + padding-bottom: $dropdown-content-offset + padding-top: initial + top: auto + +.dropdown-menu + display: none + +ltr-position(0, false) + min-width: $dropdown-menu-min-width + padding-top: $dropdown-content-offset + position: absolute + top: 100% + z-index: $dropdown-content-z + +.dropdown-content + background-color: $dropdown-content-background-color + border-radius: $dropdown-content-radius + box-shadow: $dropdown-content-shadow + padding-bottom: $dropdown-content-padding-bottom + padding-top: $dropdown-content-padding-top + +.dropdown-item + color: $dropdown-item-color + display: block + font-size: 0.875rem + line-height: 1.5 + padding: 0.375rem 1rem + position: relative + +a.dropdown-item, +button.dropdown-item + +ltr-property("padding", 3rem) + text-align: inherit + white-space: nowrap + width: 100% + &:hover + background-color: $dropdown-item-hover-background-color + color: $dropdown-item-hover-color + &.is-active + background-color: $dropdown-item-active-background-color + color: $dropdown-item-active-color + +.dropdown-divider + background-color: $dropdown-divider-background-color + border: none + display: block + height: 1px + margin: 0.5rem 0 diff --git a/styles/bulma/sass/components/level.sass b/styles/bulma/sass/components/level.sass new file mode 100644 index 00000000..6793ae06 --- /dev/null +++ b/styles/bulma/sass/components/level.sass @@ -0,0 +1,79 @@ +@import "../utilities/mixins" + +$level-item-spacing: ($block-spacing * 0.5) !default + +.level + @extend %block + align-items: center + justify-content: space-between + code + border-radius: $radius + img + display: inline-block + vertical-align: top + // Modifiers + &.is-mobile + display: flex + .level-left, + .level-right + display: flex + .level-left + .level-right + margin-top: 0 + .level-item + &:not(:last-child) + margin-bottom: 0 + +ltr-property("margin", $level-item-spacing) + &:not(.is-narrow) + flex-grow: 1 + // Responsiveness + +tablet + display: flex + & > .level-item + &:not(.is-narrow) + flex-grow: 1 + +.level-item + align-items: center + display: flex + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + justify-content: center + .title, + .subtitle + margin-bottom: 0 + // Responsiveness + +mobile + &:not(:last-child) + margin-bottom: $level-item-spacing + +.level-left, +.level-right + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + .level-item + // Modifiers + &.is-flexible + flex-grow: 1 + // Responsiveness + +tablet + &:not(:last-child) + +ltr-property("margin", $level-item-spacing) + +.level-left + align-items: center + justify-content: flex-start + // Responsiveness + +mobile + & + .level-right + margin-top: 1.5rem + +tablet + display: flex + +.level-right + align-items: center + justify-content: flex-end + // Responsiveness + +tablet + display: flex diff --git a/styles/bulma/sass/components/media.sass b/styles/bulma/sass/components/media.sass new file mode 100644 index 00000000..fc3f7d16 --- /dev/null +++ b/styles/bulma/sass/components/media.sass @@ -0,0 +1,59 @@ +@import "../utilities/mixins" + +$media-border-color: bulmaRgba($border, 0.5) !default +$media-border-size: 1px !default +$media-spacing: 1rem !default +$media-spacing-large: 1.5rem !default +$media-content-spacing: 0.75rem !default +$media-level-1-spacing: 0.75rem !default +$media-level-1-content-spacing: 0.5rem !default +$media-level-2-spacing: 0.5rem !default + +.media + align-items: flex-start + display: flex + text-align: inherit + .content:not(:last-child) + margin-bottom: $media-content-spacing + .media + border-top: $media-border-size solid $media-border-color + display: flex + padding-top: $media-level-1-spacing + .content:not(:last-child), + .control:not(:last-child) + margin-bottom: $media-level-1-content-spacing + .media + padding-top: $media-level-2-spacing + & + .media + margin-top: $media-level-2-spacing + & + .media + border-top: $media-border-size solid $media-border-color + margin-top: $media-spacing + padding-top: $media-spacing + // Sizes + &.is-large + & + .media + margin-top: $media-spacing-large + padding-top: $media-spacing-large + +.media-left, +.media-right + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + +.media-left + +ltr-property("margin", $media-spacing) + +.media-right + +ltr-property("margin", $media-spacing, false) + +.media-content + flex-basis: auto + flex-grow: 1 + flex-shrink: 1 + text-align: inherit + ++mobile + .media-content + overflow-x: auto diff --git a/styles/bulma/sass/components/menu.sass b/styles/bulma/sass/components/menu.sass new file mode 100644 index 00000000..31dc56fd --- /dev/null +++ b/styles/bulma/sass/components/menu.sass @@ -0,0 +1,59 @@ +@import "../utilities/mixins" + +$menu-item-color: $text !default +$menu-item-radius: $radius-small !default +$menu-item-hover-color: $text-strong !default +$menu-item-hover-background-color: $background !default +$menu-item-active-color: $link-invert !default +$menu-item-active-background-color: $link !default + +$menu-list-border-left: 1px solid $border !default +$menu-list-line-height: 1.25 !default +$menu-list-link-padding: 0.5em 0.75em !default +$menu-nested-list-margin: 0.75em !default +$menu-nested-list-padding-left: 0.75em !default + +$menu-label-color: $text-light !default +$menu-label-font-size: 0.75em !default +$menu-label-letter-spacing: 0.1em !default +$menu-label-spacing: 1em !default + +.menu + font-size: $size-normal + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + +.menu-list + line-height: $menu-list-line-height + a + border-radius: $menu-item-radius + color: $menu-item-color + display: block + padding: $menu-list-link-padding + &:hover + background-color: $menu-item-hover-background-color + color: $menu-item-hover-color + // Modifiers + &.is-active + background-color: $menu-item-active-background-color + color: $menu-item-active-color + li + ul + +ltr-property("border", $menu-list-border-left, false) + margin: $menu-nested-list-margin + +ltr-property("padding", $menu-nested-list-padding-left, false) + +.menu-label + color: $menu-label-color + font-size: $menu-label-font-size + letter-spacing: $menu-label-letter-spacing + text-transform: uppercase + &:not(:first-child) + margin-top: $menu-label-spacing + &:not(:last-child) + margin-bottom: $menu-label-spacing diff --git a/styles/bulma/sass/components/message.sass b/styles/bulma/sass/components/message.sass new file mode 100644 index 00000000..ab837803 --- /dev/null +++ b/styles/bulma/sass/components/message.sass @@ -0,0 +1,101 @@ +@import "../utilities/mixins" + +$message-background-color: $background !default +$message-radius: $radius !default + +$message-header-background-color: $text !default +$message-header-color: $text-invert !default +$message-header-weight: $weight-bold !default +$message-header-padding: 0.75em 1em !default +$message-header-radius: $radius !default + +$message-body-border-color: $border !default +$message-body-border-width: 0 0 0 4px !default +$message-body-color: $text !default +$message-body-padding: 1.25em 1.5em !default +$message-body-radius: $radius !default + +$message-body-pre-background-color: $scheme-main !default +$message-body-pre-code-background-color: transparent !default + +$message-header-body-border-width: 0 !default +$message-colors: $colors !default + +.message + @extend %block + background-color: $message-background-color + border-radius: $message-radius + font-size: $size-normal + strong + color: currentColor + a:not(.button):not(.tag):not(.dropdown-item) + color: currentColor + text-decoration: underline + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + // Colors + @each $name, $components in $message-colors + $color: nth($components, 1) + $color-invert: nth($components, 2) + $color-light: null + $color-dark: null + + @if length($components) >= 3 + $color-light: nth($components, 3) + @if length($components) >= 4 + $color-dark: nth($components, 4) + @else + $color-luminance: colorLuminance($color) + $darken-percentage: $color-luminance * 70% + $desaturate-percentage: $color-luminance * 30% + $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage) + @else + $color-lightning: max((100% - lightness($color)) - 2%, 0%) + $color-light: lighten($color, $color-lightning) + + &.is-#{$name} + background-color: $color-light + .message-header + background-color: $color + color: $color-invert + .message-body + border-color: $color + color: $color-dark + +.message-header + align-items: center + background-color: $message-header-background-color + border-radius: $message-header-radius $message-header-radius 0 0 + color: $message-header-color + display: flex + font-weight: $message-header-weight + justify-content: space-between + line-height: 1.25 + padding: $message-header-padding + position: relative + .delete + flex-grow: 0 + flex-shrink: 0 + +ltr-property("margin", 0.75em, false) + & + .message-body + border-width: $message-header-body-border-width + border-top-left-radius: 0 + border-top-right-radius: 0 + +.message-body + border-color: $message-body-border-color + border-radius: $message-body-radius + border-style: solid + border-width: $message-body-border-width + color: $message-body-color + padding: $message-body-padding + code, + pre + background-color: $message-body-pre-background-color + pre code + background-color: $message-body-pre-code-background-color diff --git a/styles/bulma/sass/components/modal.sass b/styles/bulma/sass/components/modal.sass new file mode 100644 index 00000000..fdbddd6a --- /dev/null +++ b/styles/bulma/sass/components/modal.sass @@ -0,0 +1,117 @@ +@import "../utilities/mixins" + +$modal-z: 40 !default + +$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default + +$modal-content-width: 640px !default +$modal-content-margin-mobile: 20px !default +$modal-content-spacing-mobile: 160px !default +$modal-content-spacing-tablet: 40px !default + +$modal-close-dimensions: 40px !default +$modal-close-right: 20px !default +$modal-close-top: 20px !default + +$modal-card-spacing: 40px !default + +$modal-card-head-background-color: $background !default +$modal-card-head-border-bottom: 1px solid $border !default +$modal-card-head-padding: 20px !default +$modal-card-head-radius: $radius-large !default + +$modal-card-title-color: $text-strong !default +$modal-card-title-line-height: 1 !default +$modal-card-title-size: $size-4 !default + +$modal-card-foot-radius: $radius-large !default +$modal-card-foot-border-top: 1px solid $border !default + +$modal-card-body-background-color: $scheme-main !default +$modal-card-body-padding: 20px !default + +$modal-breakpoint: $tablet !default + +.modal + @extend %overlay + align-items: center + display: none + flex-direction: column + justify-content: center + overflow: hidden + position: fixed + z-index: $modal-z + // Modifiers + &.is-active + display: flex + +.modal-background + @extend %overlay + background-color: $modal-background-background-color + +.modal-content, +.modal-card + margin: 0 $modal-content-margin-mobile + max-height: calc(100vh - #{$modal-content-spacing-mobile}) + overflow: auto + position: relative + width: 100% + // Responsiveness + +from($modal-breakpoint) + margin: 0 auto + max-height: calc(100vh - #{$modal-content-spacing-tablet}) + width: $modal-content-width + +.modal-close + @extend %delete + background: none + height: $modal-close-dimensions + position: fixed + +ltr-position($modal-close-right) + top: $modal-close-top + width: $modal-close-dimensions + +.modal-card + display: flex + flex-direction: column + max-height: calc(100vh - #{$modal-card-spacing}) + overflow: hidden + -ms-overflow-y: visible + +.modal-card-head, +.modal-card-foot + align-items: center + background-color: $modal-card-head-background-color + display: flex + flex-shrink: 0 + justify-content: flex-start + padding: $modal-card-head-padding + position: relative + +.modal-card-head + border-bottom: $modal-card-head-border-bottom + border-top-left-radius: $modal-card-head-radius + border-top-right-radius: $modal-card-head-radius + +.modal-card-title + color: $modal-card-title-color + flex-grow: 1 + flex-shrink: 0 + font-size: $modal-card-title-size + line-height: $modal-card-title-line-height + +.modal-card-foot + border-bottom-left-radius: $modal-card-foot-radius + border-bottom-right-radius: $modal-card-foot-radius + border-top: $modal-card-foot-border-top + .button + &:not(:last-child) + +ltr-property("margin", 0.5em) + +.modal-card-body + +overflow-touch + background-color: $modal-card-body-background-color + flex-grow: 1 + flex-shrink: 1 + overflow: auto + padding: $modal-card-body-padding diff --git a/styles/bulma/sass/components/navbar.sass b/styles/bulma/sass/components/navbar.sass new file mode 100644 index 00000000..f64c4880 --- /dev/null +++ b/styles/bulma/sass/components/navbar.sass @@ -0,0 +1,446 @@ +@import "../utilities/mixins" + +$navbar-background-color: $scheme-main !default +$navbar-box-shadow-size: 0 2px 0 0 !default +$navbar-box-shadow-color: $background !default +$navbar-height: 3.25rem !default +$navbar-padding-vertical: 1rem !default +$navbar-padding-horizontal: 2rem !default +$navbar-z: 30 !default +$navbar-fixed-z: 30 !default + +$navbar-item-color: $text !default +$navbar-item-hover-color: $link !default +$navbar-item-hover-background-color: $scheme-main-bis !default +$navbar-item-active-color: $scheme-invert !default +$navbar-item-active-background-color: transparent !default +$navbar-item-img-max-height: 1.75rem !default + +$navbar-burger-color: $navbar-item-color !default + +$navbar-tab-hover-background-color: transparent !default +$navbar-tab-hover-border-bottom-color: $link !default +$navbar-tab-active-color: $link !default +$navbar-tab-active-background-color: transparent !default +$navbar-tab-active-border-bottom-color: $link !default +$navbar-tab-active-border-bottom-style: solid !default +$navbar-tab-active-border-bottom-width: 3px !default + +$navbar-dropdown-background-color: $scheme-main !default +$navbar-dropdown-border-top: 2px solid $border !default +$navbar-dropdown-offset: -4px !default +$navbar-dropdown-arrow: $link !default +$navbar-dropdown-radius: $radius-large !default +$navbar-dropdown-z: 20 !default + +$navbar-dropdown-boxed-radius: $radius-large !default +$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default + +$navbar-dropdown-item-hover-color: $scheme-invert !default +$navbar-dropdown-item-hover-background-color: $background !default +$navbar-dropdown-item-active-color: $link !default +$navbar-dropdown-item-active-background-color: $background !default + +$navbar-divider-background-color: $background !default +$navbar-divider-height: 2px !default + +$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default + +$navbar-breakpoint: $desktop !default + +$navbar-colors: $colors !default + +=navbar-fixed + left: 0 + position: fixed + right: 0 + z-index: $navbar-fixed-z + +.navbar + background-color: $navbar-background-color + min-height: $navbar-height + position: relative + z-index: $navbar-z + @each $name, $pair in $navbar-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + .navbar-brand + & > .navbar-item, + .navbar-link + color: $color-invert + & > a.navbar-item, + .navbar-link + &:focus, + &:hover, + &.is-active + background-color: bulmaDarken($color, 5%) + color: $color-invert + .navbar-link + &::after + border-color: $color-invert + .navbar-burger + color: $color-invert + +from($navbar-breakpoint) + .navbar-start, + .navbar-end + & > .navbar-item, + .navbar-link + color: $color-invert + & > a.navbar-item, + .navbar-link + &:focus, + &:hover, + &.is-active + background-color: bulmaDarken($color, 5%) + color: $color-invert + .navbar-link + &::after + border-color: $color-invert + .navbar-item.has-dropdown:focus .navbar-link, + .navbar-item.has-dropdown:hover .navbar-link, + .navbar-item.has-dropdown.is-active .navbar-link + background-color: bulmaDarken($color, 5%) + color: $color-invert + .navbar-dropdown + a.navbar-item + &.is-active + background-color: $color + color: $color-invert + & > .container + align-items: stretch + display: flex + min-height: $navbar-height + width: 100% + &.has-shadow + box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color + &.is-fixed-bottom, + &.is-fixed-top + +navbar-fixed + &.is-fixed-bottom + bottom: 0 + &.has-shadow + box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color + &.is-fixed-top + top: 0 + +html, +body + &.has-navbar-fixed-top + padding-top: $navbar-height + &.has-navbar-fixed-bottom + padding-bottom: $navbar-height + +.navbar-brand, +.navbar-tabs + align-items: stretch + display: flex + flex-shrink: 0 + min-height: $navbar-height + +.navbar-brand + a.navbar-item + &:focus, + &:hover + background-color: transparent + +.navbar-tabs + +overflow-touch + max-width: 100vw + overflow-x: auto + overflow-y: hidden + +.navbar-burger + @extend %reset + color: $navbar-burger-color + +hamburger($navbar-height) + +ltr-property("margin", auto, false) + +.navbar-menu + display: none + +.navbar-item, +.navbar-link + color: $navbar-item-color + display: block + line-height: 1.5 + padding: 0.5rem 0.75rem + position: relative + .icon + &:only-child + margin-left: -0.25rem + margin-right: -0.25rem + +a.navbar-item, +.navbar-link + cursor: pointer + &:focus, + &:focus-within, + &:hover, + &.is-active + background-color: $navbar-item-hover-background-color + color: $navbar-item-hover-color + +.navbar-item + flex-grow: 0 + flex-shrink: 0 + img + max-height: $navbar-item-img-max-height + &.has-dropdown + padding: 0 + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-tab + border-bottom: 1px solid transparent + min-height: $navbar-height + padding-bottom: calc(0.5rem - 1px) + &:focus, + &:hover + background-color: $navbar-tab-hover-background-color + border-bottom-color: $navbar-tab-hover-border-bottom-color + &.is-active + background-color: $navbar-tab-active-background-color + border-bottom-color: $navbar-tab-active-border-bottom-color + border-bottom-style: $navbar-tab-active-border-bottom-style + border-bottom-width: $navbar-tab-active-border-bottom-width + color: $navbar-tab-active-color + padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}) + +.navbar-content + flex-grow: 1 + flex-shrink: 1 + +.navbar-link:not(.is-arrowless) + +ltr-property("padding", 2.5em) + &::after + @extend %arrow + border-color: $navbar-dropdown-arrow + margin-top: -0.375em + +ltr-position(1.125em) + +.navbar-dropdown + font-size: 0.875rem + padding-bottom: 0.5rem + padding-top: 0.5rem + .navbar-item + padding-left: 1.5rem + padding-right: 1.5rem + +.navbar-divider + background-color: $navbar-divider-background-color + border: none + display: none + height: $navbar-divider-height + margin: 0.5rem 0 + ++until($navbar-breakpoint) + .navbar > .container + display: block + .navbar-brand, + .navbar-tabs + .navbar-item + align-items: center + display: flex + .navbar-link + &::after + display: none + .navbar-menu + background-color: $navbar-background-color + box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1) + padding: 0.5rem 0 + &.is-active + display: block + // Fixed navbar + .navbar + &.is-fixed-bottom-touch, + &.is-fixed-top-touch + +navbar-fixed + &.is-fixed-bottom-touch + bottom: 0 + &.has-shadow + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) + &.is-fixed-top-touch + top: 0 + &.is-fixed-top, + &.is-fixed-top-touch + .navbar-menu + +overflow-touch + max-height: calc(100vh - #{$navbar-height}) + overflow: auto + html, + body + &.has-navbar-fixed-top-touch + padding-top: $navbar-height + &.has-navbar-fixed-bottom-touch + padding-bottom: $navbar-height + ++from($navbar-breakpoint) + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end + align-items: stretch + display: flex + .navbar + min-height: $navbar-height + &.is-spaced + padding: $navbar-padding-vertical $navbar-padding-horizontal + .navbar-start, + .navbar-end + align-items: center + a.navbar-item, + .navbar-link + border-radius: $radius + &.is-transparent + a.navbar-item, + .navbar-link + &:focus, + &:hover, + &.is-active + background-color: transparent !important + .navbar-item.has-dropdown + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover + .navbar-link + background-color: transparent !important + .navbar-dropdown + a.navbar-item + &:focus, + &:hover + background-color: $navbar-dropdown-item-hover-background-color + color: $navbar-dropdown-item-hover-color + &.is-active + background-color: $navbar-dropdown-item-active-background-color + color: $navbar-dropdown-item-active-color + .navbar-burger + display: none + .navbar-item, + .navbar-link + align-items: center + display: flex + .navbar-item + &.has-dropdown + align-items: stretch + &.has-dropdown-up + .navbar-link::after + transform: rotate(135deg) translate(0.25em, -0.25em) + .navbar-dropdown + border-bottom: $navbar-dropdown-border-top + border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0 + border-top: none + bottom: 100% + box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1) + top: auto + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover + .navbar-dropdown + display: block + .navbar.is-spaced &, + &.is-boxed + opacity: 1 + pointer-events: auto + transform: translateY(0) + .navbar-menu + flex-grow: 1 + flex-shrink: 0 + .navbar-start + justify-content: flex-start + +ltr-property("margin", auto) + .navbar-end + justify-content: flex-end + +ltr-property("margin", auto, false) + .navbar-dropdown + background-color: $navbar-dropdown-background-color + border-bottom-left-radius: $navbar-dropdown-radius + border-bottom-right-radius: $navbar-dropdown-radius + border-top: $navbar-dropdown-border-top + box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1) + display: none + font-size: 0.875rem + +ltr-position(0, false) + min-width: 100% + position: absolute + top: 100% + z-index: $navbar-dropdown-z + .navbar-item + padding: 0.375rem 1rem + white-space: nowrap + a.navbar-item + +ltr-property("padding", 3rem) + &:focus, + &:hover + background-color: $navbar-dropdown-item-hover-background-color + color: $navbar-dropdown-item-hover-color + &.is-active + background-color: $navbar-dropdown-item-active-background-color + color: $navbar-dropdown-item-active-color + .navbar.is-spaced &, + &.is-boxed + border-radius: $navbar-dropdown-boxed-radius + border-top: none + box-shadow: $navbar-dropdown-boxed-shadow + display: block + opacity: 0 + pointer-events: none + top: calc(100% + (#{$navbar-dropdown-offset})) + transform: translateY(-5px) + transition-duration: $speed + transition-property: opacity, transform + &.is-right + left: auto + right: 0 + .navbar-divider + display: block + .navbar > .container, + .container > .navbar + .navbar-brand + +ltr-property("margin", -.75rem, false) + .navbar-menu + +ltr-property("margin", -.75rem) + // Fixed navbar + .navbar + &.is-fixed-bottom-desktop, + &.is-fixed-top-desktop + +navbar-fixed + &.is-fixed-bottom-desktop + bottom: 0 + &.has-shadow + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1) + &.is-fixed-top-desktop + top: 0 + html, + body + &.has-navbar-fixed-top-desktop + padding-top: $navbar-height + &.has-navbar-fixed-bottom-desktop + padding-bottom: $navbar-height + &.has-spaced-navbar-fixed-top + padding-top: $navbar-height + ($navbar-padding-vertical * 2) + &.has-spaced-navbar-fixed-bottom + padding-bottom: $navbar-height + ($navbar-padding-vertical * 2) + // Hover/Active states + a.navbar-item, + .navbar-link + &.is-active + color: $navbar-item-active-color + &.is-active:not(:focus):not(:hover) + background-color: $navbar-item-active-background-color + .navbar-item.has-dropdown + &:focus, + &:hover, + &.is-active + .navbar-link + background-color: $navbar-item-hover-background-color + +// Combination + +.hero + &.is-fullheight-with-navbar + min-height: calc(100vh - #{$navbar-height}) diff --git a/styles/bulma/sass/components/pagination.sass b/styles/bulma/sass/components/pagination.sass new file mode 100644 index 00000000..950949d9 --- /dev/null +++ b/styles/bulma/sass/components/pagination.sass @@ -0,0 +1,167 @@ +@import "../utilities/controls" +@import "../utilities/mixins" + +$pagination-color: $text-strong !default +$pagination-border-color: $border !default +$pagination-margin: -0.25rem !default +$pagination-min-width: $control-height !default + +$pagination-item-font-size: 1em !default +$pagination-item-margin: 0.25rem !default +$pagination-item-padding-left: 0.5em !default +$pagination-item-padding-right: 0.5em !default + +$pagination-nav-padding-left: 0.75em !default +$pagination-nav-padding-right: 0.75em !default + +$pagination-hover-color: $link-hover !default +$pagination-hover-border-color: $link-hover-border !default + +$pagination-focus-color: $link-focus !default +$pagination-focus-border-color: $link-focus-border !default + +$pagination-active-color: $link-active !default +$pagination-active-border-color: $link-active-border !default + +$pagination-disabled-color: $text-light !default +$pagination-disabled-background-color: $border !default +$pagination-disabled-border-color: $border !default + +$pagination-current-color: $link-invert !default +$pagination-current-background-color: $link !default +$pagination-current-border-color: $link !default + +$pagination-ellipsis-color: $grey-light !default + +$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default + +.pagination + @extend %block + font-size: $size-normal + margin: $pagination-margin + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + &.is-rounded + .pagination-previous, + .pagination-next + padding-left: 1em + padding-right: 1em + border-radius: $radius-rounded + .pagination-link + border-radius: $radius-rounded + +.pagination, +.pagination-list + align-items: center + display: flex + justify-content: center + text-align: center + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis + @extend %control + @extend %unselectable + font-size: $pagination-item-font-size + justify-content: center + margin: $pagination-item-margin + padding-left: $pagination-item-padding-left + padding-right: $pagination-item-padding-right + text-align: center + +.pagination-previous, +.pagination-next, +.pagination-link + border-color: $pagination-border-color + color: $pagination-color + min-width: $pagination-min-width + &:hover + border-color: $pagination-hover-border-color + color: $pagination-hover-color + &:focus + border-color: $pagination-focus-border-color + &:active + box-shadow: $pagination-shadow-inset + &[disabled], + &.is-disabled + background-color: $pagination-disabled-background-color + border-color: $pagination-disabled-border-color + box-shadow: none + color: $pagination-disabled-color + opacity: 0.5 + +.pagination-previous, +.pagination-next + padding-left: $pagination-nav-padding-left + padding-right: $pagination-nav-padding-right + white-space: nowrap + +.pagination-link + &.is-current + background-color: $pagination-current-background-color + border-color: $pagination-current-border-color + color: $pagination-current-color + +.pagination-ellipsis + color: $pagination-ellipsis-color + pointer-events: none + +.pagination-list + flex-wrap: wrap + li + list-style: none + ++mobile + .pagination + flex-wrap: wrap + .pagination-previous, + .pagination-next + flex-grow: 1 + flex-shrink: 1 + .pagination-list + li + flex-grow: 1 + flex-shrink: 1 + ++tablet + .pagination-list + flex-grow: 1 + flex-shrink: 1 + justify-content: flex-start + order: 1 + .pagination-previous, + .pagination-next, + .pagination-link, + .pagination-ellipsis + margin-bottom: 0 + margin-top: 0 + .pagination-previous + order: 2 + .pagination-next + order: 3 + .pagination + justify-content: space-between + margin-bottom: 0 + margin-top: 0 + &.is-centered + .pagination-previous + order: 1 + .pagination-list + justify-content: center + order: 2 + .pagination-next + order: 3 + &.is-right + .pagination-previous + order: 1 + .pagination-next + order: 2 + .pagination-list + justify-content: flex-end + order: 3 diff --git a/styles/bulma/sass/components/panel.sass b/styles/bulma/sass/components/panel.sass new file mode 100644 index 00000000..afaffcd9 --- /dev/null +++ b/styles/bulma/sass/components/panel.sass @@ -0,0 +1,121 @@ +@import "../utilities/mixins" + +$panel-margin: $block-spacing !default +$panel-item-border: 1px solid $border-light !default +$panel-radius: $radius-large !default +$panel-shadow: $shadow !default + +$panel-heading-background-color: $border-light !default +$panel-heading-color: $text-strong !default +$panel-heading-line-height: 1.25 !default +$panel-heading-padding: 0.75em 1em !default +$panel-heading-radius: $radius !default +$panel-heading-size: 1.25em !default +$panel-heading-weight: $weight-bold !default + +$panel-tabs-font-size: 0.875em !default +$panel-tab-border-bottom: 1px solid $border !default +$panel-tab-active-border-bottom-color: $link-active-border !default +$panel-tab-active-color: $link-active !default + +$panel-list-item-color: $text !default +$panel-list-item-hover-color: $link !default + +$panel-block-color: $text-strong !default +$panel-block-hover-background-color: $background !default +$panel-block-active-border-left-color: $link !default +$panel-block-active-color: $link-active !default +$panel-block-active-icon-color: $link !default + +$panel-icon-color: $text-light !default +$panel-colors: $colors !default + +.panel + border-radius: $panel-radius + box-shadow: $panel-shadow + font-size: $size-normal + &:not(:last-child) + margin-bottom: $panel-margin + // Colors + @each $name, $components in $panel-colors + $color: nth($components, 1) + $color-invert: nth($components, 2) + &.is-#{$name} + .panel-heading + background-color: $color + color: $color-invert + .panel-tabs a.is-active + border-bottom-color: $color + .panel-block.is-active .panel-icon + color: $color + +.panel-tabs, +.panel-block + &:not(:last-child) + border-bottom: $panel-item-border + +.panel-heading + background-color: $panel-heading-background-color + border-radius: $panel-radius $panel-radius 0 0 + color: $panel-heading-color + font-size: $panel-heading-size + font-weight: $panel-heading-weight + line-height: $panel-heading-line-height + padding: $panel-heading-padding + +.panel-tabs + align-items: flex-end + display: flex + font-size: $panel-tabs-font-size + justify-content: center + a + border-bottom: $panel-tab-border-bottom + margin-bottom: -1px + padding: 0.5em + // Modifiers + &.is-active + border-bottom-color: $panel-tab-active-border-bottom-color + color: $panel-tab-active-color + +.panel-list + a + color: $panel-list-item-color + &:hover + color: $panel-list-item-hover-color + +.panel-block + align-items: center + color: $panel-block-color + display: flex + justify-content: flex-start + padding: 0.5em 0.75em + input[type="checkbox"] + +ltr-property("margin", 0.75em) + & > .control + flex-grow: 1 + flex-shrink: 1 + width: 100% + &.is-wrapped + flex-wrap: wrap + &.is-active + border-left-color: $panel-block-active-border-left-color + color: $panel-block-active-color + .panel-icon + color: $panel-block-active-icon-color + &:last-child + border-bottom-left-radius: $panel-radius + border-bottom-right-radius: $panel-radius + +a.panel-block, +label.panel-block + cursor: pointer + &:hover + background-color: $panel-block-hover-background-color + +.panel-icon + +fa(14px, 1em) + color: $panel-icon-color + +ltr-property("margin", 0.75em) + .fa + font-size: inherit + line-height: inherit diff --git a/styles/bulma/sass/components/tabs.sass b/styles/bulma/sass/components/tabs.sass new file mode 100644 index 00000000..2cb6a543 --- /dev/null +++ b/styles/bulma/sass/components/tabs.sass @@ -0,0 +1,176 @@ +@import "../utilities/mixins" + +$tabs-border-bottom-color: $border !default +$tabs-border-bottom-style: solid !default +$tabs-border-bottom-width: 1px !default +$tabs-link-color: $text !default +$tabs-link-hover-border-bottom-color: $text-strong !default +$tabs-link-hover-color: $text-strong !default +$tabs-link-active-border-bottom-color: $link !default +$tabs-link-active-color: $link !default +$tabs-link-padding: 0.5em 1em !default + +$tabs-boxed-link-radius: $radius !default +$tabs-boxed-link-hover-background-color: $background !default +$tabs-boxed-link-hover-border-bottom-color: $border !default + +$tabs-boxed-link-active-background-color: $scheme-main !default +$tabs-boxed-link-active-border-color: $border !default +$tabs-boxed-link-active-border-bottom-color: transparent !default + +$tabs-toggle-link-border-color: $border !default +$tabs-toggle-link-border-style: solid !default +$tabs-toggle-link-border-width: 1px !default +$tabs-toggle-link-hover-background-color: $background !default +$tabs-toggle-link-hover-border-color: $border-hover !default +$tabs-toggle-link-radius: $radius !default +$tabs-toggle-link-active-background-color: $link !default +$tabs-toggle-link-active-border-color: $link !default +$tabs-toggle-link-active-color: $link-invert !default + +.tabs + @extend %block + +overflow-touch + @extend %unselectable + align-items: stretch + display: flex + font-size: $size-normal + justify-content: space-between + overflow: hidden + overflow-x: auto + white-space: nowrap + a + align-items: center + border-bottom-color: $tabs-border-bottom-color + border-bottom-style: $tabs-border-bottom-style + border-bottom-width: $tabs-border-bottom-width + color: $tabs-link-color + display: flex + justify-content: center + margin-bottom: -#{$tabs-border-bottom-width} + padding: $tabs-link-padding + vertical-align: top + &:hover + border-bottom-color: $tabs-link-hover-border-bottom-color + color: $tabs-link-hover-color + li + display: block + &.is-active + a + border-bottom-color: $tabs-link-active-border-bottom-color + color: $tabs-link-active-color + ul + align-items: center + border-bottom-color: $tabs-border-bottom-color + border-bottom-style: $tabs-border-bottom-style + border-bottom-width: $tabs-border-bottom-width + display: flex + flex-grow: 1 + flex-shrink: 0 + justify-content: flex-start + &.is-left + padding-right: 0.75em + &.is-center + flex: none + justify-content: center + padding-left: 0.75em + padding-right: 0.75em + &.is-right + justify-content: flex-end + padding-left: 0.75em + .icon + &:first-child + +ltr-property("margin", 0.5em) + &:last-child + +ltr-property("margin", 0.5em, false) + // Alignment + &.is-centered + ul + justify-content: center + &.is-right + ul + justify-content: flex-end + // Styles + &.is-boxed + a + border: 1px solid transparent + +ltr + border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0 + +rtl + border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius + &:hover + background-color: $tabs-boxed-link-hover-background-color + border-bottom-color: $tabs-boxed-link-hover-border-bottom-color + li + &.is-active + a + background-color: $tabs-boxed-link-active-background-color + border-color: $tabs-boxed-link-active-border-color + border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important + &.is-fullwidth + li + flex-grow: 1 + flex-shrink: 0 + &.is-toggle + a + border-color: $tabs-toggle-link-border-color + border-style: $tabs-toggle-link-border-style + border-width: $tabs-toggle-link-border-width + margin-bottom: 0 + position: relative + &:hover + background-color: $tabs-toggle-link-hover-background-color + border-color: $tabs-toggle-link-hover-border-color + z-index: 2 + li + & + li + +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false) + &:first-child a + +ltr + border-top-left-radius: $tabs-toggle-link-radius + border-bottom-left-radius: $tabs-toggle-link-radius + +rtl + border-top-right-radius: $tabs-toggle-link-radius + border-bottom-right-radius: $tabs-toggle-link-radius + &:last-child a + +ltr + border-top-right-radius: $tabs-toggle-link-radius + border-bottom-right-radius: $tabs-toggle-link-radius + +rtl + border-top-left-radius: $tabs-toggle-link-radius + border-bottom-left-radius: $tabs-toggle-link-radius + &.is-active + a + background-color: $tabs-toggle-link-active-background-color + border-color: $tabs-toggle-link-active-border-color + color: $tabs-toggle-link-active-color + z-index: 1 + ul + border-bottom: none + &.is-toggle-rounded + li + &:first-child a + +ltr + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded + padding-left: 1.25em + +rtl + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded + padding-right: 1.25em + &:last-child a + +ltr + border-bottom-right-radius: $radius-rounded + border-top-right-radius: $radius-rounded + padding-right: 1.25em + +rtl + border-bottom-left-radius: $radius-rounded + border-top-left-radius: $radius-rounded + padding-left: 1.25em + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large diff --git a/styles/bulma/sass/elements/_all.sass b/styles/bulma/sass/elements/_all.sass new file mode 100644 index 00000000..511047aa --- /dev/null +++ b/styles/bulma/sass/elements/_all.sass @@ -0,0 +1,16 @@ +/* Bulma Elements */ +@charset "utf-8" + +@import "box" +@import "button" +@import "container" +@import "content" +@import "icon" +@import "image" +@import "notification" +@import "progress" +@import "table" +@import "tag" +@import "title" + +@import "other" diff --git a/styles/bulma/sass/elements/box.sass b/styles/bulma/sass/elements/box.sass new file mode 100644 index 00000000..85524301 --- /dev/null +++ b/styles/bulma/sass/elements/box.sass @@ -0,0 +1,26 @@ +@import "../utilities/mixins" + +$box-color: $text !default +$box-background-color: $scheme-main !default +$box-radius: $radius-large !default +$box-shadow: $shadow !default +$box-padding: 1.25rem !default + +$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default +$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default + +.box + @extend %block + background-color: $box-background-color + border-radius: $box-radius + box-shadow: $box-shadow + color: $box-color + display: block + padding: $box-padding + +a.box + &:hover, + &:focus + box-shadow: $box-link-hover-shadow + &:active + box-shadow: $box-link-active-shadow diff --git a/styles/bulma/sass/elements/button.sass b/styles/bulma/sass/elements/button.sass new file mode 100644 index 00000000..63080640 --- /dev/null +++ b/styles/bulma/sass/elements/button.sass @@ -0,0 +1,357 @@ +@import "../utilities/controls" +@import "../utilities/mixins" + +$button-color: $text-strong !default +$button-background-color: $scheme-main !default +$button-family: false !default + +$button-border-color: $border !default +$button-border-width: $control-border-width !default + +$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default +$button-padding-horizontal: 1em !default + +$button-hover-color: $link-hover !default +$button-hover-border-color: $link-hover-border !default + +$button-focus-color: $link-focus !default +$button-focus-border-color: $link-focus-border !default +$button-focus-box-shadow-size: 0 0 0 0.125em !default +$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default + +$button-active-color: $link-active !default +$button-active-border-color: $link-active-border !default + +$button-text-color: $text !default +$button-text-decoration: underline !default +$button-text-hover-background-color: $background !default +$button-text-hover-color: $text-strong !default + +$button-ghost-background: none !default +$button-ghost-border-color: transparent !default +$button-ghost-color: $link !default +$button-ghost-decoration: none !default +$button-ghost-hover-color: $link !default +$button-ghost-hover-decoration: underline !default + +$button-disabled-background-color: $scheme-main !default +$button-disabled-border-color: $border !default +$button-disabled-shadow: none !default +$button-disabled-opacity: 0.5 !default + +$button-static-color: $text-light !default +$button-static-background-color: $scheme-main-ter !default +$button-static-border-color: $border !default + +$button-colors: $colors !default +$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default + +// The button sizes use mixins so they can be used at different breakpoints +=button-small + &:not(.is-rounded) + border-radius: $radius-small + font-size: $size-small +=button-normal + font-size: $size-normal +=button-medium + font-size: $size-medium +=button-large + font-size: $size-large + +.button + @extend %control + @extend %unselectable + background-color: $button-background-color + border-color: $button-border-color + border-width: $button-border-width + color: $button-color + cursor: pointer + @if $button-family + font-family: $button-family + justify-content: center + padding-bottom: $button-padding-vertical + padding-left: $button-padding-horizontal + padding-right: $button-padding-horizontal + padding-top: $button-padding-vertical + text-align: center + white-space: nowrap + strong + color: inherit + .icon + &, + &.is-small, + &.is-medium, + &.is-large + height: 1.5em + width: 1.5em + &:first-child:not(:last-child) + +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false) + +ltr-property("margin", $button-padding-horizontal * 0.25) + &:last-child:not(:first-child) + +ltr-property("margin", $button-padding-horizontal * 0.25, false) + +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})) + &:first-child:last-child + margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) + margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}) + // States + &:hover, + &.is-hovered + border-color: $button-hover-border-color + color: $button-hover-color + &:focus, + &.is-focused + border-color: $button-focus-border-color + color: $button-focus-color + &:not(:active) + box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color + &:active, + &.is-active + border-color: $button-active-border-color + color: $button-active-color + // Colors + &.is-text + background-color: transparent + border-color: transparent + color: $button-text-color + text-decoration: $button-text-decoration + &:hover, + &.is-hovered, + &:focus, + &.is-focused + background-color: $button-text-hover-background-color + color: $button-text-hover-color + &:active, + &.is-active + background-color: bulmaDarken($button-text-hover-background-color, 5%) + color: $button-text-hover-color + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: transparent + box-shadow: none + &.is-ghost + background: $button-ghost-background + border-color: $button-ghost-border-color + color: $button-ghost-color + text-decoration: $button-ghost-decoration + &:hover, + &.is-hovered + color: $button-ghost-hover-color + text-decoration: $button-ghost-hover-decoration + @each $name, $pair in $button-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + border-color: transparent + color: $color-invert + &:hover, + &.is-hovered + background-color: bulmaDarken($color, 2.5%) + border-color: transparent + color: $color-invert + &:focus, + &.is-focused + border-color: transparent + color: $color-invert + &:not(:active) + box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25) + &:active, + &.is-active + background-color: bulmaDarken($color, 5%) + border-color: transparent + color: $color-invert + &[disabled], + fieldset[disabled] & + background-color: $color + border-color: $color + box-shadow: none + &.is-inverted + background-color: $color-invert + color: $color + &:hover, + &.is-hovered + background-color: bulmaDarken($color-invert, 5%) + &[disabled], + fieldset[disabled] & + background-color: $color-invert + border-color: transparent + box-shadow: none + color: $color + &.is-loading + &::after + border-color: transparent transparent $color-invert $color-invert !important + &.is-outlined + background-color: transparent + border-color: $color + color: $color + &:hover, + &.is-hovered, + &:focus, + &.is-focused + background-color: $color + border-color: $color + color: $color-invert + &.is-loading + &::after + border-color: transparent transparent $color $color !important + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color-invert $color-invert !important + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: $color + box-shadow: none + color: $color + &.is-inverted.is-outlined + background-color: transparent + border-color: $color-invert + color: $color-invert + &:hover, + &.is-hovered, + &:focus, + &.is-focused + background-color: $color-invert + color: $color + &.is-loading + &:hover, + &.is-hovered, + &:focus, + &.is-focused + &::after + border-color: transparent transparent $color $color !important + &[disabled], + fieldset[disabled] & + background-color: transparent + border-color: $color-invert + box-shadow: none + color: $color-invert + // If light and dark colors are provided + @if length($pair) >= 4 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + &.is-light + background-color: $color-light + color: $color-dark + &:hover, + &.is-hovered + background-color: bulmaDarken($color-light, 2.5%) + border-color: transparent + color: $color-dark + &:active, + &.is-active + background-color: bulmaDarken($color-light, 5%) + border-color: transparent + color: $color-dark + // Sizes + &.is-small + +button-small + &.is-normal + +button-normal + &.is-medium + +button-medium + &.is-large + +button-large + // Modifiers + &[disabled], + fieldset[disabled] & + background-color: $button-disabled-background-color + border-color: $button-disabled-border-color + box-shadow: $button-disabled-shadow + opacity: $button-disabled-opacity + &.is-fullwidth + display: flex + width: 100% + &.is-loading + color: transparent !important + pointer-events: none + &::after + @extend %loader + +center(1em) + position: absolute !important + &.is-static + background-color: $button-static-background-color + border-color: $button-static-border-color + color: $button-static-color + box-shadow: none + pointer-events: none + &.is-rounded + border-radius: $radius-rounded + padding-left: calc(#{$button-padding-horizontal} + 0.25em) + padding-right: calc(#{$button-padding-horizontal} + 0.25em) + +.buttons + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + .button + margin-bottom: 0.5rem + &:not(:last-child):not(.is-fullwidth) + +ltr-property("margin", 0.5rem) + &:last-child + margin-bottom: -0.5rem + &:not(:last-child) + margin-bottom: 1rem + // Sizes + &.are-small + .button:not(.is-normal):not(.is-medium):not(.is-large) + +button-small + &.are-medium + .button:not(.is-small):not(.is-normal):not(.is-large) + +button-medium + &.are-large + .button:not(.is-small):not(.is-normal):not(.is-medium) + +button-large + &.has-addons + .button + &:not(:first-child) + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:not(:last-child) + border-bottom-right-radius: 0 + border-top-right-radius: 0 + +ltr-property("margin", -1px) + &:last-child + +ltr-property("margin", 0) + &:hover, + &.is-hovered + z-index: 2 + &:focus, + &.is-focused, + &:active, + &.is-active, + &.is-selected + z-index: 3 + &:hover + z-index: 4 + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-centered + justify-content: center + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem + &.is-right + justify-content: flex-end + &:not(.has-addons) + .button:not(.is-fullwidth) + margin-left: 0.25rem + margin-right: 0.25rem + +@each $bp-name, $bp-sizes in $button-responsive-sizes + +breakpoint($bp-name) + @each $size, $value in $bp-sizes + @if $size != "normal" + .button.is-responsive.is-#{$size} + font-size: $value + @else + .button.is-responsive, + .button.is-responsive.is-normal + font-size: $value diff --git a/styles/bulma/sass/elements/container.sass b/styles/bulma/sass/elements/container.sass new file mode 100644 index 00000000..c13011e3 --- /dev/null +++ b/styles/bulma/sass/elements/container.sass @@ -0,0 +1,29 @@ +@import "../utilities/mixins" + +$container-offset: (2 * $gap) !default +$container-max-width: $fullhd !default + +.container + flex-grow: 1 + margin: 0 auto + position: relative + width: auto + &.is-fluid + max-width: none !important + padding-left: $gap + padding-right: $gap + width: 100% + +desktop + max-width: $desktop - $container-offset + +until-widescreen + &.is-widescreen:not(.is-max-desktop) + max-width: min($widescreen, $container-max-width) - $container-offset + +until-fullhd + &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) + max-width: min($fullhd, $container-max-width) - $container-offset + +widescreen + &:not(.is-max-desktop) + max-width: min($widescreen, $container-max-width) - $container-offset + +fullhd + &:not(.is-max-desktop):not(.is-max-widescreen) + max-width: min($fullhd, $container-max-width) - $container-offset diff --git a/styles/bulma/sass/elements/content.sass b/styles/bulma/sass/elements/content.sass new file mode 100644 index 00000000..3f709ad7 --- /dev/null +++ b/styles/bulma/sass/elements/content.sass @@ -0,0 +1,162 @@ +@import "../utilities/mixins" + +$content-heading-color: $text-strong !default +$content-heading-weight: $weight-semibold !default +$content-heading-line-height: 1.125 !default + +$content-block-margin-bottom: 1em !default + +$content-blockquote-background-color: $background !default +$content-blockquote-border-left: 5px solid $border !default +$content-blockquote-padding: 1.25em 1.5em !default + +$content-pre-padding: 1.25em 1.5em !default + +$content-table-cell-border: 1px solid $border !default +$content-table-cell-border-width: 0 0 1px !default +$content-table-cell-padding: 0.5em 0.75em !default +$content-table-cell-heading-color: $text-strong !default +$content-table-head-cell-border-width: 0 0 2px !default +$content-table-head-cell-color: $text-strong !default +$content-table-body-last-row-cell-border-bottom-width: 0 !default +$content-table-foot-cell-border-width: 2px 0 0 !default +$content-table-foot-cell-color: $text-strong !default + +.content + @extend %block + // Inline + li + li + margin-top: 0.25em + // Block + p, + dl, + ol, + ul, + blockquote, + pre, + table + &:not(:last-child) + margin-bottom: $content-block-margin-bottom + h1, + h2, + h3, + h4, + h5, + h6 + color: $content-heading-color + font-weight: $content-heading-weight + line-height: $content-heading-line-height + h1 + font-size: 2em + margin-bottom: 0.5em + &:not(:first-child) + margin-top: 1em + h2 + font-size: 1.75em + margin-bottom: 0.5714em + &:not(:first-child) + margin-top: 1.1428em + h3 + font-size: 1.5em + margin-bottom: 0.6666em + &:not(:first-child) + margin-top: 1.3333em + h4 + font-size: 1.25em + margin-bottom: 0.8em + h5 + font-size: 1.125em + margin-bottom: 0.8888em + h6 + font-size: 1em + margin-bottom: 1em + blockquote + background-color: $content-blockquote-background-color + +ltr-property("border", $content-blockquote-border-left, false) + padding: $content-blockquote-padding + ol + list-style-position: outside + +ltr-property("margin", 2em, false) + margin-top: 1em + &:not([type]) + list-style-type: decimal + &.is-lower-alpha + list-style-type: lower-alpha + &.is-lower-roman + list-style-type: lower-roman + &.is-upper-alpha + list-style-type: upper-alpha + &.is-upper-roman + list-style-type: upper-roman + ul + list-style: disc outside + +ltr-property("margin", 2em, false) + margin-top: 1em + ul + list-style-type: circle + margin-top: 0.5em + ul + list-style-type: square + dd + +ltr-property("margin", 2em, false) + figure + margin-left: 2em + margin-right: 2em + text-align: center + &:not(:first-child) + margin-top: 2em + &:not(:last-child) + margin-bottom: 2em + img + display: inline-block + figcaption + font-style: italic + pre + +overflow-touch + overflow-x: auto + padding: $content-pre-padding + white-space: pre + word-wrap: normal + sup, + sub + font-size: 75% + table + width: 100% + td, + th + border: $content-table-cell-border + border-width: $content-table-cell-border-width + padding: $content-table-cell-padding + vertical-align: top + th + color: $content-table-cell-heading-color + &:not([align]) + text-align: inherit + thead + td, + th + border-width: $content-table-head-cell-border-width + color: $content-table-head-cell-color + tfoot + td, + th + border-width: $content-table-foot-cell-border-width + color: $content-table-foot-cell-color + tbody + tr + &:last-child + td, + th + border-bottom-width: $content-table-body-last-row-cell-border-bottom-width + .tabs + li + li + margin-top: 0 + // Sizes + &.is-small + font-size: $size-small + &.is-normal + font-size: $size-normal + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large diff --git a/styles/bulma/sass/elements/form.sass b/styles/bulma/sass/elements/form.sass new file mode 100644 index 00000000..3122dc4c --- /dev/null +++ b/styles/bulma/sass/elements/form.sass @@ -0,0 +1 @@ +@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead." diff --git a/styles/bulma/sass/elements/icon.sass b/styles/bulma/sass/elements/icon.sass new file mode 100644 index 00000000..0befe2b1 --- /dev/null +++ b/styles/bulma/sass/elements/icon.sass @@ -0,0 +1,46 @@ +$icon-dimensions: 1.5rem !default +$icon-dimensions-small: 1rem !default +$icon-dimensions-medium: 2rem !default +$icon-dimensions-large: 3rem !default +$icon-text-spacing: 0.25em !default + +.icon + align-items: center + display: inline-flex + justify-content: center + height: $icon-dimensions + width: $icon-dimensions + // Sizes + &.is-small + height: $icon-dimensions-small + width: $icon-dimensions-small + &.is-medium + height: $icon-dimensions-medium + width: $icon-dimensions-medium + &.is-large + height: $icon-dimensions-large + width: $icon-dimensions-large + +.icon-text + align-items: flex-start + color: inherit + display: inline-flex + flex-wrap: wrap + line-height: $icon-dimensions + vertical-align: top + .icon + flex-grow: 0 + flex-shrink: 0 + &:not(:last-child) + +ltr + margin-right: $icon-text-spacing + +rtl + margin-left: $icon-text-spacing + &:not(:first-child) + +ltr + margin-left: $icon-text-spacing + +rtl + margin-right: $icon-text-spacing + +div.icon-text + display: flex diff --git a/styles/bulma/sass/elements/image.sass b/styles/bulma/sass/elements/image.sass new file mode 100644 index 00000000..fc46541f --- /dev/null +++ b/styles/bulma/sass/elements/image.sass @@ -0,0 +1,73 @@ +@import "../utilities/mixins" + +$dimensions: 16 24 32 48 64 96 128 !default + +.image + display: block + position: relative + img + display: block + height: auto + width: 100% + &.is-rounded + border-radius: $radius-rounded + &.is-fullwidth + width: 100% + // Ratio + &.is-square, + &.is-1by1, + &.is-5by4, + &.is-4by3, + &.is-3by2, + &.is-5by3, + &.is-16by9, + &.is-2by1, + &.is-3by1, + &.is-4by5, + &.is-3by4, + &.is-2by3, + &.is-3by5, + &.is-9by16, + &.is-1by2, + &.is-1by3 + img, + .has-ratio + @extend %overlay + height: 100% + width: 100% + &.is-square, + &.is-1by1 + padding-top: 100% + &.is-5by4 + padding-top: 80% + &.is-4by3 + padding-top: 75% + &.is-3by2 + padding-top: 66.6666% + &.is-5by3 + padding-top: 60% + &.is-16by9 + padding-top: 56.25% + &.is-2by1 + padding-top: 50% + &.is-3by1 + padding-top: 33.3333% + &.is-4by5 + padding-top: 125% + &.is-3by4 + padding-top: 133.3333% + &.is-2by3 + padding-top: 150% + &.is-3by5 + padding-top: 166.6666% + &.is-9by16 + padding-top: 177.7777% + &.is-1by2 + padding-top: 200% + &.is-1by3 + padding-top: 300% + // Sizes + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + height: $dimension * 1px + width: $dimension * 1px diff --git a/styles/bulma/sass/elements/notification.sass b/styles/bulma/sass/elements/notification.sass new file mode 100644 index 00000000..f5c60216 --- /dev/null +++ b/styles/bulma/sass/elements/notification.sass @@ -0,0 +1,52 @@ +@import "../utilities/mixins" + +$notification-background-color: $background !default +$notification-code-background-color: $scheme-main !default +$notification-radius: $radius !default +$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default +$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default +$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default + +$notification-colors: $colors !default + +.notification + @extend %block + background-color: $notification-background-color + border-radius: $notification-radius + position: relative + +ltr + padding: $notification-padding-ltr + +rtl + padding: $notification-padding-rtl + a:not(.button):not(.dropdown-item) + color: currentColor + text-decoration: underline + strong + color: currentColor + code, + pre + background: $notification-code-background-color + pre code + background: transparent + & > .delete + +ltr-position(0.5rem) + position: absolute + top: 0.5rem + .title, + .subtitle, + .content + color: currentColor + // Colors + @each $name, $pair in $notification-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + // If light and dark colors are provided + @if length($pair) >= 4 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + &.is-light + background-color: $color-light + color: $color-dark diff --git a/styles/bulma/sass/elements/other.sass b/styles/bulma/sass/elements/other.sass new file mode 100644 index 00000000..e83f3613 --- /dev/null +++ b/styles/bulma/sass/elements/other.sass @@ -0,0 +1,31 @@ +@import "../utilities/mixins" + +.block + @extend %block + +.delete + @extend %delete + +.heading + display: block + font-size: 11px + letter-spacing: 1px + margin-bottom: 5px + text-transform: uppercase + +.loader + @extend %loader + +.number + align-items: center + background-color: $background + border-radius: $radius-rounded + display: inline-flex + font-size: $size-medium + height: 2em + justify-content: center + margin-right: 1.5rem + min-width: 2.5em + padding: 0.25rem 0.5rem + text-align: center + vertical-align: top diff --git a/styles/bulma/sass/elements/progress.sass b/styles/bulma/sass/elements/progress.sass new file mode 100644 index 00000000..4daeb807 --- /dev/null +++ b/styles/bulma/sass/elements/progress.sass @@ -0,0 +1,73 @@ +@import "../utilities/mixins" + +$progress-bar-background-color: $border-light !default +$progress-value-background-color: $text !default +$progress-border-radius: $radius-rounded !default + +$progress-indeterminate-duration: 1.5s !default + +$progress-colors: $colors !default + +.progress + @extend %block + -moz-appearance: none + -webkit-appearance: none + border: none + border-radius: $progress-border-radius + display: block + height: $size-normal + overflow: hidden + padding: 0 + width: 100% + &::-webkit-progress-bar + background-color: $progress-bar-background-color + &::-webkit-progress-value + background-color: $progress-value-background-color + &::-moz-progress-bar + background-color: $progress-value-background-color + &::-ms-fill + background-color: $progress-value-background-color + border: none + // Colors + @each $name, $pair in $progress-colors + $color: nth($pair, 1) + &.is-#{$name} + &::-webkit-progress-value + background-color: $color + &::-moz-progress-bar + background-color: $color + &::-ms-fill + background-color: $color + &:indeterminate + background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) + + &:indeterminate + animation-duration: $progress-indeterminate-duration + animation-iteration-count: infinite + animation-name: moveIndeterminate + animation-timing-function: linear + background-color: $progress-bar-background-color + background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) + background-position: top left + background-repeat: no-repeat + background-size: 150% 150% + &::-webkit-progress-bar + background-color: transparent + &::-moz-progress-bar + background-color: transparent + &::-ms-fill + animation-name: none + + // Sizes + &.is-small + height: $size-small + &.is-medium + height: $size-medium + &.is-large + height: $size-large + +@keyframes moveIndeterminate + from + background-position: 200% 0 + to + background-position: -200% 0 diff --git a/styles/bulma/sass/elements/table.sass b/styles/bulma/sass/elements/table.sass new file mode 100644 index 00000000..f47d2123 --- /dev/null +++ b/styles/bulma/sass/elements/table.sass @@ -0,0 +1,134 @@ +@import "../utilities/mixins" + +$table-color: $text-strong !default +$table-background-color: $scheme-main !default + +$table-cell-border: 1px solid $border !default +$table-cell-border-width: 0 0 1px !default +$table-cell-padding: 0.5em 0.75em !default +$table-cell-heading-color: $text-strong !default +$table-cell-text-align: left !default + +$table-head-cell-border-width: 0 0 2px !default +$table-head-cell-color: $text-strong !default +$table-foot-cell-border-width: 2px 0 0 !default +$table-foot-cell-color: $text-strong !default + +$table-head-background-color: transparent !default +$table-body-background-color: transparent !default +$table-foot-background-color: transparent !default + +$table-row-hover-background-color: $scheme-main-bis !default + +$table-row-active-background-color: $primary !default +$table-row-active-color: $primary-invert !default + +$table-striped-row-even-background-color: $scheme-main-bis !default +$table-striped-row-even-hover-background-color: $scheme-main-ter !default + +$table-colors: $colors !default + +.table + @extend %block + background-color: $table-background-color + color: $table-color + td, + th + border: $table-cell-border + border-width: $table-cell-border-width + padding: $table-cell-padding + vertical-align: top + // Colors + @each $name, $pair in $table-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + border-color: $color + color: $color-invert + // Modifiers + &.is-narrow + white-space: nowrap + width: 1% + &.is-selected + background-color: $table-row-active-background-color + color: $table-row-active-color + a, + strong + color: currentColor + &.is-vcentered + vertical-align: middle + th + color: $table-cell-heading-color + &:not([align]) + text-align: $table-cell-text-align + tr + &.is-selected + background-color: $table-row-active-background-color + color: $table-row-active-color + a, + strong + color: currentColor + td, + th + border-color: $table-row-active-color + color: currentColor + thead + background-color: $table-head-background-color + td, + th + border-width: $table-head-cell-border-width + color: $table-head-cell-color + tfoot + background-color: $table-foot-background-color + td, + th + border-width: $table-foot-cell-border-width + color: $table-foot-cell-color + tbody + background-color: $table-body-background-color + tr + &:last-child + td, + th + border-bottom-width: 0 + // Modifiers + &.is-bordered + td, + th + border-width: 1px + tr + &:last-child + td, + th + border-bottom-width: 1px + &.is-fullwidth + width: 100% + &.is-hoverable + tbody + tr:not(.is-selected) + &:hover + background-color: $table-row-hover-background-color + &.is-striped + tbody + tr:not(.is-selected) + &:hover + background-color: $table-row-hover-background-color + &:nth-child(even) + background-color: $table-striped-row-even-hover-background-color + &.is-narrow + td, + th + padding: 0.25em 0.5em + &.is-striped + tbody + tr:not(.is-selected) + &:nth-child(even) + background-color: $table-striped-row-even-background-color + +.table-container + @extend %block + +overflow-touch + overflow: auto + overflow-y: hidden + max-width: 100% diff --git a/styles/bulma/sass/elements/tag.sass b/styles/bulma/sass/elements/tag.sass new file mode 100644 index 00000000..392daee6 --- /dev/null +++ b/styles/bulma/sass/elements/tag.sass @@ -0,0 +1,140 @@ +@import "../utilities/mixins" + +$tag-background-color: $background !default +$tag-color: $text !default +$tag-radius: $radius !default +$tag-delete-margin: 1px !default + +$tag-colors: $colors !default + +.tags + align-items: center + display: flex + flex-wrap: wrap + justify-content: flex-start + .tag + margin-bottom: 0.5rem + &:not(:last-child) + +ltr-property("margin", 0.5rem) + &:last-child + margin-bottom: -0.5rem + &:not(:last-child) + margin-bottom: 1rem + // Sizes + &.are-medium + .tag:not(.is-normal):not(.is-large) + font-size: $size-normal + &.are-large + .tag:not(.is-normal):not(.is-medium) + font-size: $size-medium + &.is-centered + justify-content: center + .tag + margin-right: 0.25rem + margin-left: 0.25rem + &.is-right + justify-content: flex-end + .tag + &:not(:first-child) + margin-left: 0.5rem + &:not(:last-child) + margin-right: 0 + &.has-addons + .tag + +ltr-property("margin", 0) + &:not(:first-child) + +ltr-property("margin", 0, false) + +ltr + border-top-left-radius: 0 + border-bottom-left-radius: 0 + +rtl + border-top-right-radius: 0 + border-bottom-right-radius: 0 + &:not(:last-child) + +ltr + border-top-right-radius: 0 + border-bottom-right-radius: 0 + +rtl + border-top-left-radius: 0 + border-bottom-left-radius: 0 + +.tag:not(body) + align-items: center + background-color: $tag-background-color + border-radius: $tag-radius + color: $tag-color + display: inline-flex + font-size: $size-small + height: 2em + justify-content: center + line-height: 1.5 + padding-left: 0.75em + padding-right: 0.75em + white-space: nowrap + .delete + +ltr-property("margin", 0.25rem, false) + +ltr-property("margin", -0.375rem) + // Colors + @each $name, $pair in $tag-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + // If a light and dark colors are provided + @if length($pair) > 3 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + &.is-light + background-color: $color-light + color: $color-dark + // Sizes + &.is-normal + font-size: $size-small + &.is-medium + font-size: $size-normal + &.is-large + font-size: $size-medium + .icon + &:first-child:not(:last-child) + +ltr-property("margin", -0.375em, false) + +ltr-property("margin", 0.1875em) + &:last-child:not(:first-child) + +ltr-property("margin", 0.1875em, false) + +ltr-property("margin", -0.375em) + &:first-child:last-child + +ltr-property("margin", -0.375em, false) + +ltr-property("margin", -0.375em) + // Modifiers + &.is-delete + +ltr-property("margin", $tag-delete-margin, false) + padding: 0 + position: relative + width: 2em + &::before, + &::after + background-color: currentColor + content: "" + display: block + left: 50% + position: absolute + top: 50% + transform: translateX(-50%) translateY(-50%) rotate(45deg) + transform-origin: center center + &::before + height: 1px + width: 50% + &::after + height: 50% + width: 1px + &:hover, + &:focus + background-color: darken($tag-background-color, 5%) + &:active + background-color: darken($tag-background-color, 10%) + &.is-rounded + border-radius: $radius-rounded + +a.tag + &:hover + text-decoration: underline diff --git a/styles/bulma/sass/elements/title.sass b/styles/bulma/sass/elements/title.sass new file mode 100644 index 00000000..022420c2 --- /dev/null +++ b/styles/bulma/sass/elements/title.sass @@ -0,0 +1,70 @@ +@import "../utilities/mixins" + +$title-color: $text-strong !default +$title-family: false !default +$title-size: $size-3 !default +$title-weight: $weight-semibold !default +$title-line-height: 1.125 !default +$title-strong-color: inherit !default +$title-strong-weight: inherit !default +$title-sub-size: 0.75em !default +$title-sup-size: 0.75em !default + +$subtitle-color: $text !default +$subtitle-family: false !default +$subtitle-size: $size-5 !default +$subtitle-weight: $weight-normal !default +$subtitle-line-height: 1.25 !default +$subtitle-strong-color: $text-strong !default +$subtitle-strong-weight: $weight-semibold !default +$subtitle-negative-margin: -1.25rem !default + +.title, +.subtitle + @extend %block + word-break: break-word + em, + span + font-weight: inherit + sub + font-size: $title-sub-size + sup + font-size: $title-sup-size + .tag + vertical-align: middle + +.title + color: $title-color + @if $title-family + font-family: $title-family + font-size: $title-size + font-weight: $title-weight + line-height: $title-line-height + strong + color: $title-strong-color + font-weight: $title-strong-weight + &:not(.is-spaced) + .subtitle + margin-top: $subtitle-negative-margin + // Sizes + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size + +.subtitle + color: $subtitle-color + @if $subtitle-family + font-family: $subtitle-family + font-size: $subtitle-size + font-weight: $subtitle-weight + line-height: $subtitle-line-height + strong + color: $subtitle-strong-color + font-weight: $subtitle-strong-weight + &:not(.is-spaced) + .title + margin-top: $subtitle-negative-margin + // Sizes + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size diff --git a/styles/bulma/sass/form/_all.sass b/styles/bulma/sass/form/_all.sass new file mode 100644 index 00000000..0a15f80a --- /dev/null +++ b/styles/bulma/sass/form/_all.sass @@ -0,0 +1,9 @@ +/* Bulma Form */ +@charset "utf-8" + +@import "shared" +@import "input-textarea" +@import "checkbox-radio" +@import "select" +@import "file" +@import "tools" diff --git a/styles/bulma/sass/form/checkbox-radio.sass b/styles/bulma/sass/form/checkbox-radio.sass new file mode 100644 index 00000000..f033d113 --- /dev/null +++ b/styles/bulma/sass/form/checkbox-radio.sass @@ -0,0 +1,22 @@ +%checkbox-radio + cursor: pointer + display: inline-block + line-height: 1.25 + position: relative + input + cursor: pointer + &:hover + color: $input-hover-color + &[disabled], + fieldset[disabled] &, + input[disabled] + color: $input-disabled-color + cursor: not-allowed + +.checkbox + @extend %checkbox-radio + +.radio + @extend %checkbox-radio + & + .radio + +ltr-property("margin", 0.5em, false) diff --git a/styles/bulma/sass/form/file.sass b/styles/bulma/sass/form/file.sass new file mode 100644 index 00000000..9b84c848 --- /dev/null +++ b/styles/bulma/sass/form/file.sass @@ -0,0 +1,184 @@ +$file-border-color: $border !default +$file-radius: $radius !default + +$file-cta-background-color: $scheme-main-ter !default +$file-cta-color: $text !default +$file-cta-hover-color: $text-strong !default +$file-cta-active-color: $text-strong !default + +$file-name-border-color: $border !default +$file-name-border-style: solid !default +$file-name-border-width: 1px 1px 1px 0 !default +$file-name-max-width: 16em !default + +$file-colors: $form-colors !default + +.file + @extend %unselectable + align-items: stretch + display: flex + justify-content: flex-start + position: relative + // Colors + @each $name, $pair in $file-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + .file-cta + background-color: $color + border-color: transparent + color: $color-invert + &:hover, + &.is-hovered + .file-cta + background-color: bulmaDarken($color, 2.5%) + border-color: transparent + color: $color-invert + &:focus, + &.is-focused + .file-cta + border-color: transparent + box-shadow: 0 0 0.5em bulmaRgba($color, 0.25) + color: $color-invert + &:active, + &.is-active + .file-cta + background-color: bulmaDarken($color, 5%) + border-color: transparent + color: $color-invert + // Sizes + &.is-small + font-size: $size-small + &.is-normal + font-size: $size-normal + &.is-medium + font-size: $size-medium + .file-icon + .fa + font-size: 21px + &.is-large + font-size: $size-large + .file-icon + .fa + font-size: 28px + // Modifiers + &.has-name + .file-cta + border-bottom-right-radius: 0 + border-top-right-radius: 0 + .file-name + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &.is-empty + .file-cta + border-radius: $file-radius + .file-name + display: none + &.is-boxed + .file-label + flex-direction: column + .file-cta + flex-direction: column + height: auto + padding: 1em 3em + .file-name + border-width: 0 1px 1px + .file-icon + height: 1.5em + width: 1.5em + .fa + font-size: 21px + &.is-small + .file-icon .fa + font-size: 14px + &.is-medium + .file-icon .fa + font-size: 28px + &.is-large + .file-icon .fa + font-size: 35px + &.has-name + .file-cta + border-radius: $file-radius $file-radius 0 0 + .file-name + border-radius: 0 0 $file-radius $file-radius + border-width: 0 1px 1px + &.is-centered + justify-content: center + &.is-fullwidth + .file-label + width: 100% + .file-name + flex-grow: 1 + max-width: none + &.is-right + justify-content: flex-end + .file-cta + border-radius: 0 $file-radius $file-radius 0 + .file-name + border-radius: $file-radius 0 0 $file-radius + border-width: 1px 0 1px 1px + order: -1 + +.file-label + align-items: stretch + display: flex + cursor: pointer + justify-content: flex-start + overflow: hidden + position: relative + &:hover + .file-cta + background-color: bulmaDarken($file-cta-background-color, 2.5%) + color: $file-cta-hover-color + .file-name + border-color: bulmaDarken($file-name-border-color, 2.5%) + &:active + .file-cta + background-color: bulmaDarken($file-cta-background-color, 5%) + color: $file-cta-active-color + .file-name + border-color: bulmaDarken($file-name-border-color, 5%) + +.file-input + height: 100% + left: 0 + opacity: 0 + outline: none + position: absolute + top: 0 + width: 100% + +.file-cta, +.file-name + @extend %control + border-color: $file-border-color + border-radius: $file-radius + font-size: 1em + padding-left: 1em + padding-right: 1em + white-space: nowrap + +.file-cta + background-color: $file-cta-background-color + color: $file-cta-color + +.file-name + border-color: $file-name-border-color + border-style: $file-name-border-style + border-width: $file-name-border-width + display: block + max-width: $file-name-max-width + overflow: hidden + text-align: inherit + text-overflow: ellipsis + +.file-icon + align-items: center + display: flex + height: 1em + justify-content: center + +ltr-property("margin", 0.5em) + width: 1em + .fa + font-size: 14px diff --git a/styles/bulma/sass/form/input-textarea.sass b/styles/bulma/sass/form/input-textarea.sass new file mode 100644 index 00000000..8d842a04 --- /dev/null +++ b/styles/bulma/sass/form/input-textarea.sass @@ -0,0 +1,66 @@ +$textarea-padding: $control-padding-horizontal !default +$textarea-max-height: 40em !default +$textarea-min-height: 8em !default + +$textarea-colors: $form-colors !default + +%input-textarea + @extend %input + box-shadow: $input-shadow + max-width: 100% + width: 100% + &[readonly] + box-shadow: none + // Colors + @each $name, $pair in $textarea-colors + $color: nth($pair, 1) + &.is-#{$name} + border-color: $color + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) + // Sizes + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + // Modifiers + &.is-fullwidth + display: block + width: 100% + &.is-inline + display: inline + width: auto + +.input + @extend %input-textarea + &.is-rounded + border-radius: $radius-rounded + padding-left: calc(#{$control-padding-horizontal} + 0.375em) + padding-right: calc(#{$control-padding-horizontal} + 0.375em) + &.is-static + background-color: transparent + border-color: transparent + box-shadow: none + padding-left: 0 + padding-right: 0 + +.textarea + @extend %input-textarea + display: block + max-width: 100% + min-width: 100% + padding: $textarea-padding + resize: vertical + &:not([rows]) + max-height: $textarea-max-height + min-height: $textarea-min-height + &[rows] + height: initial + // Modifiers + &.has-fixed-size + resize: none diff --git a/styles/bulma/sass/form/select.sass b/styles/bulma/sass/form/select.sass new file mode 100644 index 00000000..951b735f --- /dev/null +++ b/styles/bulma/sass/form/select.sass @@ -0,0 +1,88 @@ +$select-colors: $form-colors !default + +.select + display: inline-block + max-width: 100% + position: relative + vertical-align: top + &:not(.is-multiple) + height: $input-height + &:not(.is-multiple):not(.is-loading) + &::after + @extend %arrow + border-color: $input-arrow + +ltr-position(1.125em) + z-index: 4 + &.is-rounded + select + border-radius: $radius-rounded + +ltr-property("padding", 1em, false) + select + @extend %input + cursor: pointer + display: block + font-size: 1em + max-width: 100% + outline: none + &::-ms-expand + display: none + &[disabled]:hover, + fieldset[disabled] &:hover + border-color: $input-disabled-border-color + &:not([multiple]) + +ltr-property("padding", 2.5em) + &[multiple] + height: auto + padding: 0 + option + padding: 0.5em 1em + // States + &:not(.is-multiple):not(.is-loading):hover + &::after + border-color: $input-hover-color + // Colors + @each $name, $pair in $select-colors + $color: nth($pair, 1) + &.is-#{$name} + &:not(:hover)::after + border-color: $color + select + border-color: $color + &:hover, + &.is-hovered + border-color: bulmaDarken($color, 5%) + &:focus, + &.is-focused, + &:active, + &.is-active + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25) + // Sizes + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + // Modifiers + &.is-disabled + &::after + border-color: $input-disabled-color !important + opacity: 0.5 + &.is-fullwidth + width: 100% + select + width: 100% + &.is-loading + &::after + @extend %loader + margin-top: 0 + position: absolute + +ltr-position(0.625em) + top: 0.625em + transform: none + &.is-small:after + font-size: $size-small + &.is-medium:after + font-size: $size-medium + &.is-large:after + font-size: $size-large diff --git a/styles/bulma/sass/form/shared.sass b/styles/bulma/sass/form/shared.sass new file mode 100644 index 00000000..422d7aa3 --- /dev/null +++ b/styles/bulma/sass/form/shared.sass @@ -0,0 +1,60 @@ +@import "../utilities/controls" +@import "../utilities/mixins" + +$form-colors: $colors !default + +$input-color: $text-strong !default +$input-background-color: $scheme-main !default +$input-border-color: $border !default +$input-height: $control-height !default +$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default +$input-placeholder-color: bulmaRgba($input-color, 0.3) !default + +$input-hover-color: $text-strong !default +$input-hover-border-color: $border-hover !default + +$input-focus-color: $text-strong !default +$input-focus-border-color: $link !default +$input-focus-box-shadow-size: 0 0 0 0.125em !default +$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default + +$input-disabled-color: $text-light !default +$input-disabled-background-color: $background !default +$input-disabled-border-color: $background !default +$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default + +$input-arrow: $link !default + +$input-icon-color: $border !default +$input-icon-active-color: $text !default + +$input-radius: $radius !default + +=input + @extend %control + background-color: $input-background-color + border-color: $input-border-color + border-radius: $input-radius + color: $input-color + +placeholder + color: $input-placeholder-color + &:hover, + &.is-hovered + border-color: $input-hover-border-color + &:focus, + &.is-focused, + &:active, + &.is-active + border-color: $input-focus-border-color + box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color + &[disabled], + fieldset[disabled] & + background-color: $input-disabled-background-color + border-color: $input-disabled-border-color + box-shadow: none + color: $input-disabled-color + +placeholder + color: $input-disabled-placeholder-color + +%input + +input diff --git a/styles/bulma/sass/form/tools.sass b/styles/bulma/sass/form/tools.sass new file mode 100644 index 00000000..73b09b64 --- /dev/null +++ b/styles/bulma/sass/form/tools.sass @@ -0,0 +1,215 @@ +$label-color: $text-strong !default +$label-weight: $weight-bold !default + +$help-size: $size-small !default + +$label-colors: $form-colors !default + +.label + color: $label-color + display: block + font-size: $size-normal + font-weight: $label-weight + &:not(:last-child) + margin-bottom: 0.5em + // Sizes + &.is-small + font-size: $size-small + &.is-medium + font-size: $size-medium + &.is-large + font-size: $size-large + +.help + display: block + font-size: $help-size + margin-top: 0.25rem + @each $name, $pair in $label-colors + $color: nth($pair, 1) + &.is-#{$name} + color: $color + +// Containers + +.field + &:not(:last-child) + margin-bottom: 0.75rem + // Modifiers + &.has-addons + display: flex + justify-content: flex-start + .control + &:not(:last-child) + +ltr-property("margin", -1px) + &:not(:first-child):not(:last-child) + .button, + .input, + .select select + border-radius: 0 + &:first-child:not(:only-child) + .button, + .input, + .select select + +ltr + border-bottom-right-radius: 0 + border-top-right-radius: 0 + +rtl + border-bottom-left-radius: 0 + border-top-left-radius: 0 + &:last-child:not(:only-child) + .button, + .input, + .select select + +ltr + border-bottom-left-radius: 0 + border-top-left-radius: 0 + +rtl + border-bottom-right-radius: 0 + border-top-right-radius: 0 + .button, + .input, + .select select + &:not([disabled]) + &:hover, + &.is-hovered + z-index: 2 + &:focus, + &.is-focused, + &:active, + &.is-active + z-index: 3 + &:hover + z-index: 4 + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.has-addons-centered + justify-content: center + &.has-addons-right + justify-content: flex-end + &.has-addons-fullwidth + .control + flex-grow: 1 + flex-shrink: 0 + &.is-grouped + display: flex + justify-content: flex-start + & > .control + flex-shrink: 0 + &:not(:last-child) + margin-bottom: 0 + +ltr-property("margin", 0.75rem) + &.is-expanded + flex-grow: 1 + flex-shrink: 1 + &.is-grouped-centered + justify-content: center + &.is-grouped-right + justify-content: flex-end + &.is-grouped-multiline + flex-wrap: wrap + & > .control + &:last-child, + &:not(:last-child) + margin-bottom: 0.75rem + &:last-child + margin-bottom: -0.75rem + &:not(:last-child) + margin-bottom: 0 + &.is-horizontal + +tablet + display: flex + +.field-label + .label + font-size: inherit + +mobile + margin-bottom: 0.5rem + +tablet + flex-basis: 0 + flex-grow: 1 + flex-shrink: 0 + +ltr-property("margin", 1.5rem) + text-align: right + &.is-small + font-size: $size-small + padding-top: 0.375em + &.is-normal + padding-top: 0.375em + &.is-medium + font-size: $size-medium + padding-top: 0.375em + &.is-large + font-size: $size-large + padding-top: 0.375em + +.field-body + .field .field + margin-bottom: 0 + +tablet + display: flex + flex-basis: 0 + flex-grow: 5 + flex-shrink: 1 + .field + margin-bottom: 0 + & > .field + flex-shrink: 1 + &:not(.is-narrow) + flex-grow: 1 + &:not(:last-child) + +ltr-property("margin", 0.75rem) + +.control + box-sizing: border-box + clear: both + font-size: $size-normal + position: relative + text-align: inherit + // Modifiers + &.has-icons-left, + &.has-icons-right + .input, + .select + &:focus + & ~ .icon + color: $input-icon-active-color + &.is-small ~ .icon + font-size: $size-small + &.is-medium ~ .icon + font-size: $size-medium + &.is-large ~ .icon + font-size: $size-large + .icon + color: $input-icon-color + height: $input-height + pointer-events: none + position: absolute + top: 0 + width: $input-height + z-index: 4 + &.has-icons-left + .input, + .select select + padding-left: $input-height + .icon.is-left + left: 0 + &.has-icons-right + .input, + .select select + padding-right: $input-height + .icon.is-right + right: 0 + &.is-loading + &::after + @extend %loader + position: absolute !important + +ltr-position(0.625em) + top: 0.625em + z-index: 4 + &.is-small:after + font-size: $size-small + &.is-medium:after + font-size: $size-medium + &.is-large:after + font-size: $size-large diff --git a/styles/bulma/sass/grid/_all.sass b/styles/bulma/sass/grid/_all.sass new file mode 100644 index 00000000..0b5ed310 --- /dev/null +++ b/styles/bulma/sass/grid/_all.sass @@ -0,0 +1,5 @@ +/* Bulma Grid */ +@charset "utf-8" + +@import "columns" +@import "tiles" diff --git a/styles/bulma/sass/grid/columns.sass b/styles/bulma/sass/grid/columns.sass new file mode 100644 index 00000000..e66112b5 --- /dev/null +++ b/styles/bulma/sass/grid/columns.sass @@ -0,0 +1,513 @@ +@import "../utilities/mixins" + +$column-gap: 0.75rem !default + +.column + display: block + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 + padding: $column-gap + .columns.is-mobile > &.is-narrow + flex: none + width: unset + .columns.is-mobile > &.is-full + flex: none + width: 100% + .columns.is-mobile > &.is-three-quarters + flex: none + width: 75% + .columns.is-mobile > &.is-two-thirds + flex: none + width: 66.6666% + .columns.is-mobile > &.is-half + flex: none + width: 50% + .columns.is-mobile > &.is-one-third + flex: none + width: 33.3333% + .columns.is-mobile > &.is-one-quarter + flex: none + width: 25% + .columns.is-mobile > &.is-one-fifth + flex: none + width: 20% + .columns.is-mobile > &.is-two-fifths + flex: none + width: 40% + .columns.is-mobile > &.is-three-fifths + flex: none + width: 60% + .columns.is-mobile > &.is-four-fifths + flex: none + width: 80% + .columns.is-mobile > &.is-offset-three-quarters + +ltr-property("margin", 75%, false) + .columns.is-mobile > &.is-offset-two-thirds + +ltr-property("margin", 66.6666%, false) + .columns.is-mobile > &.is-offset-half + +ltr-property("margin", 50%, false) + .columns.is-mobile > &.is-offset-one-third + +ltr-property("margin", 33.3333%, false) + .columns.is-mobile > &.is-offset-one-quarter + +ltr-property("margin", 25%, false) + .columns.is-mobile > &.is-offset-one-fifth + +ltr-property("margin", 20%, false) + .columns.is-mobile > &.is-offset-two-fifths + +ltr-property("margin", 40%, false) + .columns.is-mobile > &.is-offset-three-fifths + +ltr-property("margin", 60%, false) + .columns.is-mobile > &.is-offset-four-fifths + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + .columns.is-mobile > &.is-#{$i} + flex: none + width: percentage(divide($i, 12)) + .columns.is-mobile > &.is-offset-#{$i} + +ltr-property("margin", percentage(divide($i, 12)), false) + +mobile + &.is-narrow-mobile + flex: none + width: unset + &.is-full-mobile + flex: none + width: 100% + &.is-three-quarters-mobile + flex: none + width: 75% + &.is-two-thirds-mobile + flex: none + width: 66.6666% + &.is-half-mobile + flex: none + width: 50% + &.is-one-third-mobile + flex: none + width: 33.3333% + &.is-one-quarter-mobile + flex: none + width: 25% + &.is-one-fifth-mobile + flex: none + width: 20% + &.is-two-fifths-mobile + flex: none + width: 40% + &.is-three-fifths-mobile + flex: none + width: 60% + &.is-four-fifths-mobile + flex: none + width: 80% + &.is-offset-three-quarters-mobile + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds-mobile + +ltr-property("margin", 66.6666%, false) + &.is-offset-half-mobile + +ltr-property("margin", 50%, false) + &.is-offset-one-third-mobile + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter-mobile + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth-mobile + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths-mobile + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths-mobile + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths-mobile + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}-mobile + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}-mobile + +ltr-property("margin", percentage(divide($i, 12)), false) + +tablet + &.is-narrow, + &.is-narrow-tablet + flex: none + width: unset + &.is-full, + &.is-full-tablet + flex: none + width: 100% + &.is-three-quarters, + &.is-three-quarters-tablet + flex: none + width: 75% + &.is-two-thirds, + &.is-two-thirds-tablet + flex: none + width: 66.6666% + &.is-half, + &.is-half-tablet + flex: none + width: 50% + &.is-one-third, + &.is-one-third-tablet + flex: none + width: 33.3333% + &.is-one-quarter, + &.is-one-quarter-tablet + flex: none + width: 25% + &.is-one-fifth, + &.is-one-fifth-tablet + flex: none + width: 20% + &.is-two-fifths, + &.is-two-fifths-tablet + flex: none + width: 40% + &.is-three-fifths, + &.is-three-fifths-tablet + flex: none + width: 60% + &.is-four-fifths, + &.is-four-fifths-tablet + flex: none + width: 80% + &.is-offset-three-quarters, + &.is-offset-three-quarters-tablet + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds, + &.is-offset-two-thirds-tablet + +ltr-property("margin", 66.6666%, false) + &.is-offset-half, + &.is-offset-half-tablet + +ltr-property("margin", 50%, false) + &.is-offset-one-third, + &.is-offset-one-third-tablet + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter, + &.is-offset-one-quarter-tablet + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth, + &.is-offset-one-fifth-tablet + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths, + &.is-offset-two-fifths-tablet + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths, + &.is-offset-three-fifths-tablet + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths, + &.is-offset-four-fifths-tablet + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}, + &.is-#{$i}-tablet + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}, + &.is-offset-#{$i}-tablet + +ltr-property("margin", percentage(divide($i, 12)), false) + +touch + &.is-narrow-touch + flex: none + width: unset + &.is-full-touch + flex: none + width: 100% + &.is-three-quarters-touch + flex: none + width: 75% + &.is-two-thirds-touch + flex: none + width: 66.6666% + &.is-half-touch + flex: none + width: 50% + &.is-one-third-touch + flex: none + width: 33.3333% + &.is-one-quarter-touch + flex: none + width: 25% + &.is-one-fifth-touch + flex: none + width: 20% + &.is-two-fifths-touch + flex: none + width: 40% + &.is-three-fifths-touch + flex: none + width: 60% + &.is-four-fifths-touch + flex: none + width: 80% + &.is-offset-three-quarters-touch + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds-touch + +ltr-property("margin", 66.6666%, false) + &.is-offset-half-touch + +ltr-property("margin", 50%, false) + &.is-offset-one-third-touch + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter-touch + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth-touch + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths-touch + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths-touch + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths-touch + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}-touch + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}-touch + +ltr-property("margin", percentage(divide($i, 12)), false) + +desktop + &.is-narrow-desktop + flex: none + width: unset + &.is-full-desktop + flex: none + width: 100% + &.is-three-quarters-desktop + flex: none + width: 75% + &.is-two-thirds-desktop + flex: none + width: 66.6666% + &.is-half-desktop + flex: none + width: 50% + &.is-one-third-desktop + flex: none + width: 33.3333% + &.is-one-quarter-desktop + flex: none + width: 25% + &.is-one-fifth-desktop + flex: none + width: 20% + &.is-two-fifths-desktop + flex: none + width: 40% + &.is-three-fifths-desktop + flex: none + width: 60% + &.is-four-fifths-desktop + flex: none + width: 80% + &.is-offset-three-quarters-desktop + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds-desktop + +ltr-property("margin", 66.6666%, false) + &.is-offset-half-desktop + +ltr-property("margin", 50%, false) + &.is-offset-one-third-desktop + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter-desktop + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth-desktop + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths-desktop + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths-desktop + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths-desktop + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}-desktop + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}-desktop + +ltr-property("margin", percentage(divide($i, 12)), false) + +widescreen + &.is-narrow-widescreen + flex: none + width: unset + &.is-full-widescreen + flex: none + width: 100% + &.is-three-quarters-widescreen + flex: none + width: 75% + &.is-two-thirds-widescreen + flex: none + width: 66.6666% + &.is-half-widescreen + flex: none + width: 50% + &.is-one-third-widescreen + flex: none + width: 33.3333% + &.is-one-quarter-widescreen + flex: none + width: 25% + &.is-one-fifth-widescreen + flex: none + width: 20% + &.is-two-fifths-widescreen + flex: none + width: 40% + &.is-three-fifths-widescreen + flex: none + width: 60% + &.is-four-fifths-widescreen + flex: none + width: 80% + &.is-offset-three-quarters-widescreen + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds-widescreen + +ltr-property("margin", 66.6666%, false) + &.is-offset-half-widescreen + +ltr-property("margin", 50%, false) + &.is-offset-one-third-widescreen + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter-widescreen + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth-widescreen + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths-widescreen + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths-widescreen + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths-widescreen + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}-widescreen + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}-widescreen + +ltr-property("margin", percentage(divide($i, 12)), false) + +fullhd + &.is-narrow-fullhd + flex: none + width: unset + &.is-full-fullhd + flex: none + width: 100% + &.is-three-quarters-fullhd + flex: none + width: 75% + &.is-two-thirds-fullhd + flex: none + width: 66.6666% + &.is-half-fullhd + flex: none + width: 50% + &.is-one-third-fullhd + flex: none + width: 33.3333% + &.is-one-quarter-fullhd + flex: none + width: 25% + &.is-one-fifth-fullhd + flex: none + width: 20% + &.is-two-fifths-fullhd + flex: none + width: 40% + &.is-three-fifths-fullhd + flex: none + width: 60% + &.is-four-fifths-fullhd + flex: none + width: 80% + &.is-offset-three-quarters-fullhd + +ltr-property("margin", 75%, false) + &.is-offset-two-thirds-fullhd + +ltr-property("margin", 66.6666%, false) + &.is-offset-half-fullhd + +ltr-property("margin", 50%, false) + &.is-offset-one-third-fullhd + +ltr-property("margin", 33.3333%, false) + &.is-offset-one-quarter-fullhd + +ltr-property("margin", 25%, false) + &.is-offset-one-fifth-fullhd + +ltr-property("margin", 20%, false) + &.is-offset-two-fifths-fullhd + +ltr-property("margin", 40%, false) + &.is-offset-three-fifths-fullhd + +ltr-property("margin", 60%, false) + &.is-offset-four-fifths-fullhd + +ltr-property("margin", 80%, false) + @for $i from 0 through 12 + &.is-#{$i}-fullhd + flex: none + width: percentage(divide($i, 12)) + &.is-offset-#{$i}-fullhd + +ltr-property("margin", percentage(divide($i, 12)), false) + +.columns + +ltr-property("margin", (-$column-gap), false) + +ltr-property("margin", (-$column-gap)) + margin-top: (-$column-gap) + &:last-child + margin-bottom: (-$column-gap) + &:not(:last-child) + margin-bottom: calc(1.5rem - #{$column-gap}) + // Modifiers + &.is-centered + justify-content: center + &.is-gapless + +ltr-property("margin", 0, false) + +ltr-property("margin", 0) + margin-top: 0 + & > .column + margin: 0 + padding: 0 !important + &:not(:last-child) + margin-bottom: 1.5rem + &:last-child + margin-bottom: 0 + &.is-mobile + display: flex + &.is-multiline + flex-wrap: wrap + &.is-vcentered + align-items: center + // Responsiveness + +tablet + &:not(.is-desktop) + display: flex + +desktop + // Modifiers + &.is-desktop + display: flex + +@if $variable-columns + .columns.is-variable + --columnGap: 0.75rem + +ltr-property("margin", calc(-1 * var(--columnGap)), false) + +ltr-property("margin", calc(-1 * var(--columnGap))) + > .column + padding-left: var(--columnGap) + padding-right: var(--columnGap) + @for $i from 0 through 8 + &.is-#{$i} + --columnGap: #{$i * 0.25rem} + +mobile + &.is-#{$i}-mobile + --columnGap: #{$i * 0.25rem} + +tablet + &.is-#{$i}-tablet + --columnGap: #{$i * 0.25rem} + +tablet-only + &.is-#{$i}-tablet-only + --columnGap: #{$i * 0.25rem} + +touch + &.is-#{$i}-touch + --columnGap: #{$i * 0.25rem} + +desktop + &.is-#{$i}-desktop + --columnGap: #{$i * 0.25rem} + +desktop-only + &.is-#{$i}-desktop-only + --columnGap: #{$i * 0.25rem} + +widescreen + &.is-#{$i}-widescreen + --columnGap: #{$i * 0.25rem} + +widescreen-only + &.is-#{$i}-widescreen-only + --columnGap: #{$i * 0.25rem} + +fullhd + &.is-#{$i}-fullhd + --columnGap: #{$i * 0.25rem} diff --git a/styles/bulma/sass/grid/tiles.sass b/styles/bulma/sass/grid/tiles.sass new file mode 100644 index 00000000..d22d738d --- /dev/null +++ b/styles/bulma/sass/grid/tiles.sass @@ -0,0 +1,36 @@ +@import "../utilities/mixins" + +$tile-spacing: 0.75rem !default + +.tile + align-items: stretch + display: block + flex-basis: 0 + flex-grow: 1 + flex-shrink: 1 + min-height: min-content + // Modifiers + &.is-ancestor + margin-left: $tile-spacing * -1 + margin-right: $tile-spacing * -1 + margin-top: $tile-spacing * -1 + &:last-child + margin-bottom: $tile-spacing * -1 + &:not(:last-child) + margin-bottom: $tile-spacing + &.is-child + margin: 0 !important + &.is-parent + padding: $tile-spacing + &.is-vertical + flex-direction: column + & > .tile.is-child:not(:last-child) + margin-bottom: 1.5rem !important + // Responsiveness + +tablet + &:not(.is-child) + display: flex + @for $i from 1 through 12 + &.is-#{$i} + flex: none + width: (divide($i, 12)) * 100% diff --git a/styles/bulma/sass/helpers/_all.sass b/styles/bulma/sass/helpers/_all.sass new file mode 100644 index 00000000..d673da68 --- /dev/null +++ b/styles/bulma/sass/helpers/_all.sass @@ -0,0 +1,12 @@ +/* Bulma Helpers */ +@charset "utf-8" + +@import "color" +@import "flexbox" +@import "float" +@import "other" +@import "overflow" +@import "position" +@import "spacing" +@import "typography" +@import "visibility" diff --git a/styles/bulma/sass/helpers/color.sass b/styles/bulma/sass/helpers/color.sass new file mode 100644 index 00000000..b7a8a503 --- /dev/null +++ b/styles/bulma/sass/helpers/color.sass @@ -0,0 +1,39 @@ +@import "../utilities/derived-variables" + +@each $name, $pair in $colors + $color: nth($pair, 1) + .has-text-#{$name} + color: $color !important + a.has-text-#{$name} + &:hover, + &:focus + color: bulmaDarken($color, 10%) !important + .has-background-#{$name} + background-color: $color !important + @if length($pair) >= 4 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + // Light + .has-text-#{$name}-light + color: $color-light !important + a.has-text-#{$name}-light + &:hover, + &:focus + color: bulmaDarken($color-light, 10%) !important + .has-background-#{$name}-light + background-color: $color-light !important + // Dark + .has-text-#{$name}-dark + color: $color-dark !important + a.has-text-#{$name}-dark + &:hover, + &:focus + color: bulmaLighten($color-dark, 10%) !important + .has-background-#{$name}-dark + background-color: $color-dark !important + +@each $name, $shade in $shades + .has-text-#{$name} + color: $shade !important + .has-background-#{$name} + background-color: $shade !important diff --git a/styles/bulma/sass/helpers/flexbox.sass b/styles/bulma/sass/helpers/flexbox.sass new file mode 100644 index 00000000..2538a2db --- /dev/null +++ b/styles/bulma/sass/helpers/flexbox.sass @@ -0,0 +1,35 @@ +$flex-direction-values: row, row-reverse, column, column-reverse +@each $value in $flex-direction-values + .is-flex-direction-#{$value} + flex-direction: $value !important + +$flex-wrap-values: nowrap, wrap, wrap-reverse +@each $value in $flex-wrap-values + .is-flex-wrap-#{$value} + flex-wrap: $value !important + +$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right +@each $value in $justify-content-values + .is-justify-content-#{$value} + justify-content: $value !important + +$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline +@each $value in $align-content-values + .is-align-content-#{$value} + align-content: $value !important + +$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end +@each $value in $align-items-values + .is-align-items-#{$value} + align-items: $value !important + +$align-self-values: auto, flex-start, flex-end, center, baseline, stretch +@each $value in $align-self-values + .is-align-self-#{$value} + align-self: $value !important + +$flex-operators: grow, shrink +@each $operator in $flex-operators + @for $i from 0 through 5 + .is-flex-#{$operator}-#{$i} + flex-#{$operator}: $i !important diff --git a/styles/bulma/sass/helpers/float.sass b/styles/bulma/sass/helpers/float.sass new file mode 100644 index 00000000..f62f24e0 --- /dev/null +++ b/styles/bulma/sass/helpers/float.sass @@ -0,0 +1,10 @@ +@import "../utilities/mixins" + +.is-clearfix + +clearfix + +.is-pulled-left + float: left !important + +.is-pulled-right + float: right !important diff --git a/styles/bulma/sass/helpers/other.sass b/styles/bulma/sass/helpers/other.sass new file mode 100644 index 00000000..6e2e63ce --- /dev/null +++ b/styles/bulma/sass/helpers/other.sass @@ -0,0 +1,14 @@ +@import "../utilities/mixins" + +.is-radiusless + border-radius: 0 !important + +.is-shadowless + box-shadow: none !important + +.is-clickable + cursor: pointer !important + pointer-events: all !important + +.is-unselectable + @extend %unselectable diff --git a/styles/bulma/sass/helpers/overflow.sass b/styles/bulma/sass/helpers/overflow.sass new file mode 100644 index 00000000..ef1e3ef0 --- /dev/null +++ b/styles/bulma/sass/helpers/overflow.sass @@ -0,0 +1,2 @@ +.is-clipped + overflow: hidden !important diff --git a/styles/bulma/sass/helpers/position.sass b/styles/bulma/sass/helpers/position.sass new file mode 100644 index 00000000..4b8fda47 --- /dev/null +++ b/styles/bulma/sass/helpers/position.sass @@ -0,0 +1,7 @@ +@import "../utilities/mixins" + +.is-overlay + @extend %overlay + +.is-relative + position: relative !important diff --git a/styles/bulma/sass/helpers/spacing.sass b/styles/bulma/sass/helpers/spacing.sass new file mode 100644 index 00000000..0237c738 --- /dev/null +++ b/styles/bulma/sass/helpers/spacing.sass @@ -0,0 +1,31 @@ +.is-marginless + margin: 0 !important + +.is-paddingless + padding: 0 !important + +$spacing-shortcuts: ("margin": "m", "padding": "p") !default +$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default +$spacing-horizontal: "x" !default +$spacing-vertical: "y" !default +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default + +@each $property, $shortcut in $spacing-shortcuts + @each $name, $value in $spacing-values + // All directions + .#{$shortcut}-#{$name} + #{$property}: $value !important + // Cardinal directions + @each $direction, $suffix in $spacing-directions + .#{$shortcut}#{$suffix}-#{$name} + #{$property}-#{$direction}: $value !important + // Horizontal axis + @if $spacing-horizontal != null + .#{$shortcut}#{$spacing-horizontal}-#{$name} + #{$property}-left: $value !important + #{$property}-right: $value !important + // Vertical axis + @if $spacing-vertical != null + .#{$shortcut}#{$spacing-vertical}-#{$name} + #{$property}-top: $value !important + #{$property}-bottom: $value !important diff --git a/styles/bulma/sass/helpers/typography.sass b/styles/bulma/sass/helpers/typography.sass new file mode 100644 index 00000000..dceca77a --- /dev/null +++ b/styles/bulma/sass/helpers/typography.sass @@ -0,0 +1,103 @@ +@import "../utilities/mixins" + +=typography-size($target:'') + @each $size in $sizes + $i: index($sizes, $size) + .is-size-#{$i}#{if($target == '', '', '-' + $target)} + font-size: $size !important + ++typography-size() + ++mobile + +typography-size('mobile') + ++tablet + +typography-size('tablet') + ++touch + +typography-size('touch') + ++desktop + +typography-size('desktop') + ++widescreen + +typography-size('widescreen') + ++fullhd + +typography-size('fullhd') + +$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') + +@each $alignment, $text-align in $alignments + .has-text-#{$alignment} + text-align: #{$text-align} !important + +@each $alignment, $text-align in $alignments + +mobile + .has-text-#{$alignment}-mobile + text-align: #{$text-align} !important + +tablet + .has-text-#{$alignment}-tablet + text-align: #{$text-align} !important + +tablet-only + .has-text-#{$alignment}-tablet-only + text-align: #{$text-align} !important + +touch + .has-text-#{$alignment}-touch + text-align: #{$text-align} !important + +desktop + .has-text-#{$alignment}-desktop + text-align: #{$text-align} !important + +desktop-only + .has-text-#{$alignment}-desktop-only + text-align: #{$text-align} !important + +widescreen + .has-text-#{$alignment}-widescreen + text-align: #{$text-align} !important + +widescreen-only + .has-text-#{$alignment}-widescreen-only + text-align: #{$text-align} !important + +fullhd + .has-text-#{$alignment}-fullhd + text-align: #{$text-align} !important + +.is-capitalized + text-transform: capitalize !important + +.is-lowercase + text-transform: lowercase !important + +.is-uppercase + text-transform: uppercase !important + +.is-italic + font-style: italic !important + +.is-underlined + text-decoration: underline !important + +.has-text-weight-light + font-weight: $weight-light !important +.has-text-weight-normal + font-weight: $weight-normal !important +.has-text-weight-medium + font-weight: $weight-medium !important +.has-text-weight-semibold + font-weight: $weight-semibold !important +.has-text-weight-bold + font-weight: $weight-bold !important + +.is-family-primary + font-family: $family-primary !important + +.is-family-secondary + font-family: $family-secondary !important + +.is-family-sans-serif + font-family: $family-sans-serif !important + +.is-family-monospace + font-family: $family-monospace !important + +.is-family-code + font-family: $family-code !important diff --git a/styles/bulma/sass/helpers/visibility.sass b/styles/bulma/sass/helpers/visibility.sass new file mode 100644 index 00000000..a1bb0d56 --- /dev/null +++ b/styles/bulma/sass/helpers/visibility.sass @@ -0,0 +1,122 @@ +@import "../utilities/mixins" + +$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' + +@each $display in $displays + .is-#{$display} + display: #{$display} !important + +mobile + .is-#{$display}-mobile + display: #{$display} !important + +tablet + .is-#{$display}-tablet + display: #{$display} !important + +tablet-only + .is-#{$display}-tablet-only + display: #{$display} !important + +touch + .is-#{$display}-touch + display: #{$display} !important + +desktop + .is-#{$display}-desktop + display: #{$display} !important + +desktop-only + .is-#{$display}-desktop-only + display: #{$display} !important + +widescreen + .is-#{$display}-widescreen + display: #{$display} !important + +widescreen-only + .is-#{$display}-widescreen-only + display: #{$display} !important + +fullhd + .is-#{$display}-fullhd + display: #{$display} !important + +.is-hidden + display: none !important + +.is-sr-only + border: none !important + clip: rect(0, 0, 0, 0) !important + height: 0.01em !important + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 0.01em !important + ++mobile + .is-hidden-mobile + display: none !important + ++tablet + .is-hidden-tablet + display: none !important + ++tablet-only + .is-hidden-tablet-only + display: none !important + ++touch + .is-hidden-touch + display: none !important + ++desktop + .is-hidden-desktop + display: none !important + ++desktop-only + .is-hidden-desktop-only + display: none !important + ++widescreen + .is-hidden-widescreen + display: none !important + ++widescreen-only + .is-hidden-widescreen-only + display: none !important + ++fullhd + .is-hidden-fullhd + display: none !important + +.is-invisible + visibility: hidden !important + ++mobile + .is-invisible-mobile + visibility: hidden !important + ++tablet + .is-invisible-tablet + visibility: hidden !important + ++tablet-only + .is-invisible-tablet-only + visibility: hidden !important + ++touch + .is-invisible-touch + visibility: hidden !important + ++desktop + .is-invisible-desktop + visibility: hidden !important + ++desktop-only + .is-invisible-desktop-only + visibility: hidden !important + ++widescreen + .is-invisible-widescreen + visibility: hidden !important + ++widescreen-only + .is-invisible-widescreen-only + visibility: hidden !important + ++fullhd + .is-invisible-fullhd + visibility: hidden !important diff --git a/styles/bulma/sass/layout/_all.sass b/styles/bulma/sass/layout/_all.sass new file mode 100644 index 00000000..4d1df5b7 --- /dev/null +++ b/styles/bulma/sass/layout/_all.sass @@ -0,0 +1,6 @@ +/* Bulma Layout */ +@charset "utf-8" + +@import "hero" +@import "section" +@import "footer" diff --git a/styles/bulma/sass/layout/footer.sass b/styles/bulma/sass/layout/footer.sass new file mode 100644 index 00000000..4e9187e1 --- /dev/null +++ b/styles/bulma/sass/layout/footer.sass @@ -0,0 +1,11 @@ +@import "../utilities/derived-variables" + +$footer-background-color: $scheme-main-bis !default +$footer-color: false !default +$footer-padding: 3rem 1.5rem 6rem !default + +.footer + background-color: $footer-background-color + padding: $footer-padding + @if $footer-color + color: $footer-color diff --git a/styles/bulma/sass/layout/hero.sass b/styles/bulma/sass/layout/hero.sass new file mode 100644 index 00000000..bd2312c9 --- /dev/null +++ b/styles/bulma/sass/layout/hero.sass @@ -0,0 +1,153 @@ +@import "../utilities/mixins" + +$hero-body-padding: 3rem 1.5rem !default +$hero-body-padding-tablet: 3rem 3rem !default +$hero-body-padding-small: 1.5rem !default +$hero-body-padding-medium: 9rem 4.5rem !default +$hero-body-padding-large: 18rem 6rem !default + +$hero-colors: $colors !default + +// Main container +.hero + align-items: stretch + display: flex + flex-direction: column + justify-content: space-between + .navbar + background: none + .tabs + ul + border-bottom: none + // Colors + @each $name, $pair in $hero-colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color + color: $color-invert + a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), + strong + color: inherit + .title + color: $color-invert + .subtitle + color: bulmaRgba($color-invert, 0.9) + a:not(.button), + strong + color: $color-invert + .navbar-menu + +touch + background-color: $color + .navbar-item, + .navbar-link + color: bulmaRgba($color-invert, 0.7) + a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: bulmaDarken($color, 5%) + color: $color-invert + .tabs + a + color: $color-invert + opacity: 0.9 + &:hover + opacity: 1 + li + &.is-active a + color: $color !important + opacity: 1 + &.is-boxed, + &.is-toggle + a + color: $color-invert + &:hover + background-color: bulmaRgba($scheme-invert, 0.1) + li.is-active a + &, + &:hover + background-color: $color-invert + border-color: $color-invert + color: $color + // Modifiers + @if type-of($color) == 'color' + &.is-bold + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + +mobile + .navbar-menu + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + // Sizes + &.is-small + .hero-body + padding: $hero-body-padding-small + &.is-medium + +tablet + .hero-body + padding: $hero-body-padding-medium + &.is-large + +tablet + .hero-body + padding: $hero-body-padding-large + &.is-halfheight, + &.is-fullheight, + &.is-fullheight-with-navbar + .hero-body + align-items: center + display: flex + & > .container + flex-grow: 1 + flex-shrink: 1 + &.is-halfheight + min-height: 50vh + &.is-fullheight + min-height: 100vh + +// Components + +.hero-video + @extend %overlay + overflow: hidden + video + left: 50% + min-height: 100% + min-width: 100% + position: absolute + top: 50% + transform: translate3d(-50%, -50%, 0) + // Modifiers + &.is-transparent + opacity: 0.3 + // Responsiveness + +mobile + display: none + +.hero-buttons + margin-top: 1.5rem + // Responsiveness + +mobile + .button + display: flex + &:not(:last-child) + margin-bottom: 0.75rem + +tablet + display: flex + justify-content: center + .button:not(:last-child) + +ltr-property("margin", 1.5rem) + +// Containers + +.hero-head, +.hero-foot + flex-grow: 0 + flex-shrink: 0 + +.hero-body + flex-grow: 1 + flex-shrink: 0 + padding: $hero-body-padding + +tablet + padding: $hero-body-padding-tablet diff --git a/styles/bulma/sass/layout/section.sass b/styles/bulma/sass/layout/section.sass new file mode 100644 index 00000000..9c5a9f48 --- /dev/null +++ b/styles/bulma/sass/layout/section.sass @@ -0,0 +1,17 @@ +@import "../utilities/mixins" + +$section-padding: 3rem 1.5rem !default +$section-padding-desktop: 3rem 3rem !default +$section-padding-medium: 9rem 4.5rem !default +$section-padding-large: 18rem 6rem !default + +.section + padding: $section-padding + // Responsiveness + +desktop + padding: $section-padding-desktop + // Sizes + &.is-medium + padding: $section-padding-medium + &.is-large + padding: $section-padding-large diff --git a/styles/bulma/sass/utilities/_all.sass b/styles/bulma/sass/utilities/_all.sass new file mode 100644 index 00000000..51cf348a --- /dev/null +++ b/styles/bulma/sass/utilities/_all.sass @@ -0,0 +1,9 @@ +/* Bulma Utilities */ +@charset "utf-8" + +@import "initial-variables" +@import "functions" +@import "derived-variables" +@import "mixins" +@import "controls" +@import "extends" diff --git a/styles/bulma/sass/utilities/animations.sass b/styles/bulma/sass/utilities/animations.sass new file mode 100644 index 00000000..1872e08c --- /dev/null +++ b/styles/bulma/sass/utilities/animations.sass @@ -0,0 +1 @@ +@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead." diff --git a/styles/bulma/sass/utilities/controls.sass b/styles/bulma/sass/utilities/controls.sass new file mode 100644 index 00000000..4c738c7f --- /dev/null +++ b/styles/bulma/sass/utilities/controls.sass @@ -0,0 +1,49 @@ +@import "derived-variables" + +$control-radius: $radius !default +$control-radius-small: $radius-small !default + +$control-border-width: 1px !default + +$control-height: 2.5em !default +$control-line-height: 1.5 !default + +$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default +$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default + +=control + -moz-appearance: none + -webkit-appearance: none + align-items: center + border: $control-border-width solid transparent + border-radius: $control-radius + box-shadow: none + display: inline-flex + font-size: $size-normal + height: $control-height + justify-content: flex-start + line-height: $control-line-height + padding-bottom: $control-padding-vertical + padding-left: $control-padding-horizontal + padding-right: $control-padding-horizontal + padding-top: $control-padding-vertical + position: relative + vertical-align: top + // States + &:focus, + &.is-focused, + &:active, + &.is-active + outline: none + &[disabled], + fieldset[disabled] & + cursor: not-allowed + +// The controls sizes use mixins so they can be used at different breakpoints +=control-small + border-radius: $control-radius-small + font-size: $size-small +=control-medium + font-size: $size-medium +=control-large + font-size: $size-large diff --git a/styles/bulma/sass/utilities/derived-variables.sass b/styles/bulma/sass/utilities/derived-variables.sass new file mode 100644 index 00000000..cefc8f1d --- /dev/null +++ b/styles/bulma/sass/utilities/derived-variables.sass @@ -0,0 +1,114 @@ +@import "initial-variables" +@import "functions" + +$primary: $turquoise !default + +$info: $cyan !default +$success: $green !default +$warning: $yellow !default +$danger: $red !default + +$light: $white-ter !default +$dark: $grey-darker !default + +// Invert colors + +$orange-invert: findColorInvert($orange) !default +$yellow-invert: findColorInvert($yellow) !default +$green-invert: findColorInvert($green) !default +$turquoise-invert: findColorInvert($turquoise) !default +$cyan-invert: findColorInvert($cyan) !default +$blue-invert: findColorInvert($blue) !default +$purple-invert: findColorInvert($purple) !default +$red-invert: findColorInvert($red) !default + +$primary-invert: findColorInvert($primary) !default +$primary-light: findLightColor($primary) !default +$primary-dark: findDarkColor($primary) !default +$info-invert: findColorInvert($info) !default +$info-light: findLightColor($info) !default +$info-dark: findDarkColor($info) !default +$success-invert: findColorInvert($success) !default +$success-light: findLightColor($success) !default +$success-dark: findDarkColor($success) !default +$warning-invert: findColorInvert($warning) !default +$warning-light: findLightColor($warning) !default +$warning-dark: findDarkColor($warning) !default +$danger-invert: findColorInvert($danger) !default +$danger-light: findLightColor($danger) !default +$danger-dark: findDarkColor($danger) !default +$light-invert: findColorInvert($light) !default +$dark-invert: findColorInvert($dark) !default + +// General colors + +$scheme-main: $white !default +$scheme-main-bis: $white-bis !default +$scheme-main-ter: $white-ter !default +$scheme-invert: $black !default +$scheme-invert-bis: $black-bis !default +$scheme-invert-ter: $black-ter !default + +$background: $white-ter !default + +$border: $grey-lighter !default +$border-hover: $grey-light !default +$border-light: $grey-lightest !default +$border-light-hover: $grey-light !default + +// Text colors + +$text: $grey-dark !default +$text-invert: findColorInvert($text) !default +$text-light: $grey !default +$text-strong: $grey-darker !default + +// Code colors + +$code: darken($red, 15%) !default +$code-background: $background !default + +$pre: $text !default +$pre-background: $background !default + +// Link colors + +$link: $blue !default +$link-invert: findColorInvert($link) !default +$link-light: findLightColor($link) !default +$link-dark: findDarkColor($link) !default +$link-visited: $purple !default + +$link-hover: $grey-darker !default +$link-hover-border: $grey-light !default + +$link-focus: $grey-darker !default +$link-focus-border: $blue !default + +$link-active: $grey-darker !default +$link-active-border: $grey-dark !default + +// Typography + +$family-primary: $family-sans-serif !default +$family-secondary: $family-sans-serif !default +$family-code: $family-monospace !default + +$size-small: $size-7 !default +$size-normal: $size-6 !default +$size-medium: $size-5 !default +$size-large: $size-4 !default + +// Effects + +$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default + +// Lists and maps +$custom-colors: null !default +$custom-shades: null !default + +$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default + +$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default + +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default diff --git a/styles/bulma/sass/utilities/extends.sass b/styles/bulma/sass/utilities/extends.sass new file mode 100644 index 00000000..c994fc1a --- /dev/null +++ b/styles/bulma/sass/utilities/extends.sass @@ -0,0 +1,25 @@ +@import "mixins" + +%control + +control + +%unselectable + +unselectable + +%arrow + +arrow + +%block + +block + +%delete + +delete + +%loader + +loader + +%overlay + +overlay + +%reset + +reset diff --git a/styles/bulma/sass/utilities/functions.sass b/styles/bulma/sass/utilities/functions.sass new file mode 100644 index 00000000..eeea6f21 --- /dev/null +++ b/styles/bulma/sass/utilities/functions.sass @@ -0,0 +1,135 @@ +@function mergeColorMaps($bulma-colors, $custom-colors) + // We return at least Bulma's hard-coded colors + $merged-colors: $bulma-colors + + // We want a map as input + @if type-of($custom-colors) == 'map' + @each $name, $components in $custom-colors + // The color name should be a string + // and the components either a single color + // or a colors list with at least one element + @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1 + $color-base: null + $color-invert: null + $color-light: null + $color-dark: null + $value: null + + // The param can either be a single color + // or a list of 2 colors + @if type-of($components) == 'color' + $color-base: $components + $color-invert: findColorInvert($color-base) + $color-light: findLightColor($color-base) + $color-dark: findDarkColor($color-base) + @else if type-of($components) == 'list' + $color-base: nth($components, 1) + // If Invert, Light and Dark are provided + @if length($components) > 3 + $color-invert: nth($components, 2) + $color-light: nth($components, 3) + $color-dark: nth($components, 4) + // If only Invert and Light are provided + @else if length($components) > 2 + $color-invert: nth($components, 2) + $color-light: nth($components, 3) + $color-dark: findDarkColor($color-base) + // If only Invert is provided + @else + $color-invert: nth($components, 2) + $color-light: findLightColor($color-base) + $color-dark: findDarkColor($color-base) + + $value: ($color-base, $color-invert, $color-light, $color-dark) + + // We only want to merge the map if the color base is an actual color + @if type-of($color-base) == 'color' + // We merge this colors elements as map with Bulma's colors map + // (we can override them this way, no multiple definition for the same name) + // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) + $merged-colors: map_merge($merged-colors, ($name: $value)) + + @return $merged-colors + +@function powerNumber($number, $exp) + $value: 1 + @if $exp > 0 + @for $i from 1 through $exp + $value: $value * $number + @else if $exp < 0 + @for $i from 1 through -$exp + $value: divide($value, $number) + @return $value + +@function colorLuminance($color) + @if type-of($color) != 'color' + @return 0.55 + $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) + @each $name, $value in $color-rgb + $adjusted: 0 + $value: divide($value, 255) + @if $value < 0.03928 + $value: divide($value, 12.92) + @else + $value: divide(($value + .055), 1.055) + $value: powerNumber($value, 2) + $color-rgb: map-merge($color-rgb, ($name: $value)) + @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) + +@function findColorInvert($color) + @if (colorLuminance($color) > 0.55) + @return rgba(#000, 0.7) + @else + @return #fff + +@function findLightColor($color, $l: 96%) + @if type-of($color) == 'color' + $l: 96% + @if lightness($color) > 96% + $l: lightness($color) + @return change-color($color, $lightness: $l) + @return $background + +@function findDarkColor($color, $base-l: 29%) + @if type-of($color) == 'color' + $luminance: colorLuminance($color) + $luminance-delta: (0.53 - $luminance) + $target-l: round($base-l + ($luminance-delta * 53)) + @return change-color($color, $lightness: max($base-l, $target-l)) + @return $text-strong + +@function bulmaRgba($color, $alpha) + @if type-of($color) != 'color' + @return $color + @return rgba($color, $alpha) + +@function bulmaDarken($color, $amount) + @if type-of($color) != 'color' + @return $color + @return darken($color, $amount) + +@function bulmaLighten($color, $amount) + @if type-of($color) != 'color' + @return $color + @return lighten($color, $amount) + +// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245 +// Replaces old slash division deprecated in Dart Sass +@function divide($dividend, $divisor, $precision: 10) + $sign: if($dividend > 0 and $divisor > 0, 1, -1) + $dividend: abs($dividend) + $divisor: abs($divisor) + $quotient: 0 + $remainder: $dividend + @if $dividend == 0 + @return 0 + @if $divisor == 0 + @error "Cannot divide by 0" + @if $divisor == 1 + @return $dividend + @while $remainder >= $divisor + $quotient: $quotient + 1 + $remainder: $remainder - $divisor + @if $remainder > 0 and $precision > 0 + $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1 + @return ($quotient + $remainder) * $sign diff --git a/styles/bulma/sass/utilities/initial-variables.sass b/styles/bulma/sass/utilities/initial-variables.sass new file mode 100644 index 00000000..3c2d2827 --- /dev/null +++ b/styles/bulma/sass/utilities/initial-variables.sass @@ -0,0 +1,79 @@ +// Colors + +$black: hsl(0, 0%, 4%) !default +$black-bis: hsl(0, 0%, 7%) !default +$black-ter: hsl(0, 0%, 14%) !default + +$grey-darker: hsl(0, 0%, 21%) !default +$grey-dark: hsl(0, 0%, 29%) !default +$grey: hsl(0, 0%, 48%) !default +$grey-light: hsl(0, 0%, 71%) !default +$grey-lighter: hsl(0, 0%, 86%) !default +$grey-lightest: hsl(0, 0%, 93%) !default + +$white-ter: hsl(0, 0%, 96%) !default +$white-bis: hsl(0, 0%, 98%) !default +$white: hsl(0, 0%, 100%) !default + +$orange: hsl(14, 100%, 53%) !default +$yellow: hsl(44, 100%, 77%) !default +$green: hsl(153, 53%, 53%) !default +$turquoise: hsl(171, 100%, 41%) !default +$cyan: hsl(207, 61%, 53%) !default +$blue: hsl(229, 53%, 53%) !default +$purple: hsl(271, 100%, 71%) !default +$red: hsl(348, 86%, 61%) !default + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default +$family-monospace: monospace !default +$render-mode: optimizeLegibility !default + +$size-1: 3rem !default +$size-2: 2.5rem !default +$size-3: 2rem !default +$size-4: 1.5rem !default +$size-5: 1.25rem !default +$size-6: 1rem !default +$size-7: 0.75rem !default + +$weight-light: 300 !default +$weight-normal: 400 !default +$weight-medium: 500 !default +$weight-semibold: 600 !default +$weight-bold: 700 !default + +// Spacing + +$block-spacing: 1.5rem !default + +// Responsiveness + +// The container horizontal gap, which acts as the offset for breakpoints +$gap: 32px !default +// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 +$tablet: 769px !default +// 960px container + 4rem +$desktop: 960px + (2 * $gap) !default +// 1152px container + 4rem +$widescreen: 1152px + (2 * $gap) !default +$widescreen-enabled: true !default +// 1344px container + 4rem +$fullhd: 1344px + (2 * $gap) !default +$fullhd-enabled: true !default +$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default + +// Miscellaneous + +$easing: ease-out !default +$radius-small: 2px !default +$radius: 4px !default +$radius-large: 6px !default +$radius-rounded: 9999px !default +$speed: 86ms !default + +// Flags + +$variable-columns: true !default +$rtl: false !default diff --git a/styles/bulma/sass/utilities/mixins.sass b/styles/bulma/sass/utilities/mixins.sass new file mode 100644 index 00000000..10cbae30 --- /dev/null +++ b/styles/bulma/sass/utilities/mixins.sass @@ -0,0 +1,303 @@ +@import "derived-variables" + +=clearfix + &::after + clear: both + content: " " + display: table + +=center($width, $height: 0) + position: absolute + @if $height != 0 + left: calc(50% - (#{$width} * 0.5)) + top: calc(50% - (#{$height} * 0.5)) + @else + left: calc(50% - (#{$width} * 0.5)) + top: calc(50% - (#{$width} * 0.5)) + +=fa($size, $dimensions) + display: inline-block + font-size: $size + height: $dimensions + line-height: $dimensions + text-align: center + vertical-align: top + width: $dimensions + +=hamburger($dimensions) + -moz-appearance: none + -webkit-appearance: none + appearance: none + background: none + border: none + cursor: pointer + display: block + height: $dimensions + position: relative + width: $dimensions + span + background-color: currentColor + display: block + height: 1px + left: calc(50% - 8px) + position: absolute + transform-origin: center + transition-duration: $speed + transition-property: background-color, opacity, transform + transition-timing-function: $easing + width: 16px + &:nth-child(1) + top: calc(50% - 6px) + &:nth-child(2) + top: calc(50% - 1px) + &:nth-child(3) + top: calc(50% + 4px) + &:hover + background-color: bulmaRgba(black, 0.05) + // Modifers + &.is-active + span + &:nth-child(1) + transform: translateY(5px) rotate(45deg) + &:nth-child(2) + opacity: 0 + &:nth-child(3) + transform: translateY(-5px) rotate(-45deg) + +=overflow-touch + -webkit-overflow-scrolling: touch + +=placeholder + $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' + @each $placeholder in $placeholders + &:#{$placeholder}-placeholder + @content + +=reset + -moz-appearance: none + -webkit-appearance: none + appearance: none + background: none + border: none + color: currentColor + font-family: inherit + font-size: 1em + margin: 0 + padding: 0 + +// Responsiveness + +=from($device) + @media screen and (min-width: $device) + @content + +=until($device) + @media screen and (max-width: $device - 1px) + @content + +=between($from, $until) + @media screen and (min-width: $from) and (max-width: $until - 1px) + @content + +=mobile + @media screen and (max-width: $tablet - 1px) + @content + +=tablet + @media screen and (min-width: $tablet), print + @content + +=tablet-only + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) + @content + +=touch + @media screen and (max-width: $desktop - 1px) + @content + +=desktop + @media screen and (min-width: $desktop) + @content + +=desktop-only + @if $widescreen-enabled + @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) + @content + +=until-widescreen + @if $widescreen-enabled + @media screen and (max-width: $widescreen - 1px) + @content + +=widescreen + @if $widescreen-enabled + @media screen and (min-width: $widescreen) + @content + +=widescreen-only + @if $widescreen-enabled and $fullhd-enabled + @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) + @content + +=until-fullhd + @if $fullhd-enabled + @media screen and (max-width: $fullhd - 1px) + @content + +=fullhd + @if $fullhd-enabled + @media screen and (min-width: $fullhd) + @content + +=breakpoint($name) + $breakpoint: map-get($breakpoints, $name) + @if $breakpoint + $from: map-get($breakpoint, "from") + $until: map-get($breakpoint, "until") + @if $from and $until + +between($from, $until) + @content + @else if $from + +from($from) + @content + @else if $until + +until($until) + @content + +=ltr + @if not $rtl + @content + +=rtl + @if $rtl + @content + +=ltr-property($property, $spacing, $right: true) + $normal: if($right, "right", "left") + $opposite: if($right, "left", "right") + @if $rtl + #{$property}-#{$opposite}: $spacing + @else + #{$property}-#{$normal}: $spacing + +=ltr-position($spacing, $right: true) + $normal: if($right, "right", "left") + $opposite: if($right, "left", "right") + @if $rtl + #{$opposite}: $spacing + @else + #{$normal}: $spacing + +// Placeholders + +=unselectable + -webkit-touch-callout: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + +=arrow($color: transparent) + border: 3px solid $color + border-radius: 2px + border-right: 0 + border-top: 0 + content: " " + display: block + height: 0.625em + margin-top: -0.4375em + pointer-events: none + position: absolute + top: 50% + transform: rotate(-45deg) + transform-origin: center + width: 0.625em + +=block($spacing: $block-spacing) + &:not(:last-child) + margin-bottom: $spacing + +=delete + +unselectable + -moz-appearance: none + -webkit-appearance: none + background-color: bulmaRgba($scheme-invert, 0.2) + border: none + border-radius: $radius-rounded + cursor: pointer + pointer-events: auto + display: inline-block + flex-grow: 0 + flex-shrink: 0 + font-size: 0 + height: 20px + max-height: 20px + max-width: 20px + min-height: 20px + min-width: 20px + outline: none + position: relative + vertical-align: top + width: 20px + &::before, + &::after + background-color: $scheme-main + content: "" + display: block + left: 50% + position: absolute + top: 50% + transform: translateX(-50%) translateY(-50%) rotate(45deg) + transform-origin: center center + &::before + height: 2px + width: 50% + &::after + height: 50% + width: 2px + &:hover, + &:focus + background-color: bulmaRgba($scheme-invert, 0.3) + &:active + background-color: bulmaRgba($scheme-invert, 0.4) + // Sizes + &.is-small + height: 16px + max-height: 16px + max-width: 16px + min-height: 16px + min-width: 16px + width: 16px + &.is-medium + height: 24px + max-height: 24px + max-width: 24px + min-height: 24px + min-width: 24px + width: 24px + &.is-large + height: 32px + max-height: 32px + max-width: 32px + min-height: 32px + min-width: 32px + width: 32px + +=loader + animation: spinAround 500ms infinite linear + border: 2px solid $grey-lighter + border-radius: $radius-rounded + border-right-color: transparent + border-top-color: transparent + content: "" + display: block + height: 1em + position: relative + width: 1em + +=overlay($offset: 0) + bottom: $offset + left: $offset + position: absolute + right: $offset + top: $offset diff --git a/styles/forge-custom.scss b/styles/forge-custom.scss new file mode 100644 index 00000000..6f206f90 --- /dev/null +++ b/styles/forge-custom.scss @@ -0,0 +1,617 @@ +/* Tokens (--bg, --panel, --accent...) définis une seule fois dans + forge-theme.scss, qui @importe ce fichier APRÈS Bulma — ce fichier + continue de référencer les mêmes noms de variable qu'avant la charte + Forge (voir les alias --bg/--panel/--panel2/--border/--text/--text-dim/ + --danger dans forge-theme.scss), pour n'avoir à toucher qu'aux VALEURS + des tokens, jamais aux ~600 lignes de règles ci-dessous qui les + consomment déjà. */ +*{ box-sizing:border-box; } +body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); } +h1{ font-size:20px; margin:0 0 6px; } +h2{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin:24px 0 8px; } +h3{ font-size:13px; color:var(--accent); margin:14px 0 6px; } +label{ display:block; font-size:12px; color:var(--text-dim); margin:8px 0 4px; } +input[type=text], input[type=number], input[type=date], textarea, select{ + width:100%; background:var(--panel2); border:1px solid var(--border); border-radius:6px; + color:var(--text); padding:8px 10px; font-size:13px; font-family:inherit; +} +input[type=checkbox]{ width:auto; margin-top:6px; } + +/* .topbar : Bulma fournit déjà la mise en page (navbar) — cette classe ne + sert plus qu'à la repérer dans les layouts plein-écran + (body.builderBody/objectEditBody, voir plus bas) et à la rattacher au + thème sombre. */ +.topbar{ border-bottom:1px solid var(--border); } + +/* Barre de navigation d'UN JEU (voir base.html) — toujours visible entre + les différents éditeurs d'un même jeu, en ligne (contrairement à + .navList/.navRow ci-dessous, empilés verticalement dans le panneau + "Créer" du tableau de bord). */ +.gameNavBar{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:8px 20px; background:transparent; border-bottom:1px solid var(--border); } +.gameNavLink{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; } +.gameNavLink:hover{ background:var(--panel2); border-color:var(--accent); } +.gameNavLink.active{ background:var(--panel2); border-color:var(--accent); color:var(--accent); } +.content{ max-width:760px; margin:0 auto; padding:28px 20px; } + +.card{ border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--panel); margin:12px 0; } +.inline-form .fieldRow{ display:flex; gap:8px; align-items:flex-end; } +.inline-form .fieldRow input{ flex:1; } +.fieldRow{ display:flex; gap:10px; } +.fieldRow > div{ flex:1; } +.formField{ margin-bottom:6px; } + +button{ background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 14px; cursor:pointer; font-size:13px; } +/* Un qui doit se comporter comme un visuellement (ex. ouvrir + un panneau plutôt que suivre un href, mais garder l'apparence d'un lien + dans un tableau) — annule le style bouton par défaut ci-dessus. */ +.linkLikeButton{ background:none; border:none; padding:0; color:var(--accent); text-decoration:none; font-size:inherit; } +.linkLikeButton:hover{ text-decoration:underline; } +/* button.primary : couleur/dégradé posés une seule fois, centralement, + dans forge-theme.scss (".button.is-primary, button.primary") — pas ici, + pour ne pas entrer en conflit de cascade avec cette règle centrale. */ +button.smallBtn{ padding:5px 10px; font-size:11.5px; } +button.danger{ color:var(--danger); border-color:rgba(240,68,56,.4); } +.actionsRow{ margin-top:16px; } + +/* Nav compacte à une seule ligne (icône + libellé) — pour une liste + d'actions fixe (ex. colonne "Créer" du tableau de bord d'un jeu) : sobre + et dense plutôt qu'une carte à deux lignes. */ +.navList{ display:flex; flex-direction:column; gap:3px; } +.navRow{ display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--panel); text-decoration:none; color:var(--text); font-size:12.5px; } +.navRow:hover{ background:var(--panel2); border-color:var(--accent); } + +.hint{ font-size:11.5px; color:var(--text-dim); line-height:1.5; } +.autosaveStatus{ display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; } +.autosaveStatus.saving{ color:var(--text-dim); } +.autosaveStatus.saved{ color:var(--status-success); } +.warningBanner{ border:1px solid var(--danger); background:rgba(240,68,56,.1); color:var(--text); + border-radius:8px; padding:10px 14px; font-size:12.5px; margin:12px 0; } +.dangerZone{ border:1px solid rgba(240,68,56,.4); border-radius:8px; padding:10px 12px; margin-top:14px; } +.dangerZone h3{ color:var(--danger); margin-top:0; } +.fieldsExistingRow{ display:flex; align-items:center; justify-content:space-between; + padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:6px; font-size:12.5px; } +.fieldsExistingRow form{ margin:0; } + +.fieldRowCard{ margin-bottom:10px; } +.relationTarget{ margin-top:6px; } + +/* Liste de conditions de "Donnée liée" (voir c_clause_list.py) : un nombre + ILLIMITÉ de lignes peut s'y accumuler — sans limite de hauteur, le + panneau de propriétés entier deviendrait interminable à faire défiler + dès qu'on en pose plus de 3-4. max-height + overflow-y borne cette + LISTE elle-même à une hauteur confortable, le reste du panneau (et le + bouton "+ Ajouter une condition" juste en dessous) reste toujours à + portée sans avoir à chercher le bas de la liste. */ +.clauseListWrap{ max-height:260px; overflow-y:auto; padding-right:2px; } +.clauseRow{ margin-bottom:8px; } +.clauseRow:last-child{ margin-bottom:0; } + +/* .dataTable : Bulma fournit déjà la mise en page du tableau (classes + "table is-fullwidth is-hoverable", voir data_list.html) — ceci ne fait + plus que tronquer les cellules trop longues avec "...", pour garder une + vue d'ensemble compacte (le détail complet s'ouvre dans la modale Bulma + ci-dessous via le bouton 👁️). */ +.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } + +/* ---------- Détail d'une entrée (bouton 👁️) ---------- */ +/* Contenu du panneau de détail (voir openRowDetailPanel() dans + game_dashboard.html) — affiche chaque champ en entier, sans troncature, + contrairement au tableau dense qui les tronque. */ +.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); } +.rowDetailField:last-child{ border-bottom:none; } +.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; } +.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; } + +.content-wide{ max-width:1080px; } +.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; } +.twoCol .colLeft{ flex:0 0 340px; } +.twoCol .colRight{ flex:1; min-width:0; } +@media (max-width: 820px){ + .twoCol{ flex-direction:column; } + .twoCol .colLeft{ flex:none; width:100%; } + /* En dessous de 820px, les deux colonnes s'empilent : le défilement + interne séparé par colonne n'a plus de sens (il n'y a plus qu'une + colonne) — on revient à une page classique qui défile normalement, + comme pour l'éditeur d'écran ci-dessous. */ + body.objectEditBody{ height:auto; overflow:visible; } + body.objectEditBody > main.content{ overflow:visible; } + .content-objectEdit .colLeft, .content-objectEdit .colRight{ height:auto; overflow:visible; } + .fieldsTableWrap{ max-height:60vh; } +} + +/* ---------- Modifier un objet : tableau des champs existants ---------- */ +/* Comme l'éditeur d'écran (body.builderBody, plus bas) : la page ne défile + jamais elle-même, seules les zones internes (colonne de gauche, tableau + des champs) défilent chacune de leur côté — indispensable dès qu'un objet + a beaucoup de champs, pour garder une vue d'ensemble sans perdre le + formulaire "Ajouter un champ" hors de l'écran. */ +body.objectEditBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; } +body.objectEditBody > #pageChrome{ flex:0 0 auto; } +body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } + +.content-objectEdit{ width:100%; display:flex; flex-direction:column; min-height:0; } +.content-objectEdit > h1, .content-objectEdit > .hint, .content-objectEdit > form, .content-objectEdit > .warningBanner{ flex:0 0 auto; } + +/* Un qui doit envelopper les DEUX colonnes à la fois (un seul + formulaire soumis ensemble, ex. object_form.html : nom de l'objet à + gauche, liste de champs à droite) ne doit pas devenir lui-même une boîte + dans la mise en page flex — sinon .twoCol à l'intérieur perd la hauteur + disponible qu'il doit occuper. "display:contents" le rend transparent : + .twoCol se comporte comme s'il était directement enfant de + .content-objectEdit. */ +.formPassthrough{ display:contents; } +.content-objectEdit .twoCol{ flex:1 1 auto; min-height:0; align-items:stretch; } +.content-objectEdit .colLeft{ overflow-y:auto; height:100%; } +.content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; } +.content-objectEdit .colRight h2{ flex:0 0 auto; } +.content-objectEdit .colRight > .hint, .content-objectEdit .colRight > button{ flex:0 0 auto; } + +.fieldsTableWrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; } +.fieldsTable{ width:100%; border-collapse:collapse; font-size:12.5px; } +.fieldsTable th, .fieldsTable td{ border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; white-space:nowrap; } +.fieldsTable th{ position:sticky; top:0; background:var(--panel2); color:var(--text-dim); z-index:1; } +.fieldsTable tbody tr:hover{ background:rgba(255,255,255,.02); } +.fieldsTable tbody tr:last-child td{ border-bottom:none; } +.fieldsTable td input, .fieldsTable td select{ min-width:120px; width:auto; } +.fieldsTableActions{ display:flex; gap:6px; } + +/* ---------- Éditeur d'écrans (façon Elementor/Bricks) ---------- */ +/* La page de l'éditeur d'écran ne doit jamais défiler elle-même : elle + occupe exactement la hauteur de la fenêtre (topbar + zone de travail), et + ce sont les zones internes (panneaux, écran, panneau de logique) qui + défilent chacune de leur côté si besoin. */ +body.builderBody{ display:flex; flex-direction:column; height:100vh; margin:0; overflow:hidden; } +body.builderBody > #pageChrome{ flex:0 0 auto; } +body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } + +.content-builder{ + /* .content (ci-dessus) pose "margin:0 auto" pour centrer une page normale + — mais sur cette page, le body est un flex-container en colonne + (body.builderBody), et une marge horizontale "auto" y désactive le + stretch d'un flex-item : sa largeur est alors recalculée en + "shrink-to-fit" à partir de son contenu, un calcul qui traverse toute + la chaîne flex/%/aspect-ratio jusqu'au canvas et redonne un résultat + légèrement différent à chaque changement de contenu du panneau (élément + sélectionné, grille affichée...) — d'où le canvas qui grandit/rétrécit + sans raison apparente à chaque interaction. "width:100%" donne une + taille définie à la place : la marge "auto" ne fait alors que centrer + l'espace restant une fois "max-width" atteint, comme voulu à l'origine. */ + width:100%; + max-width:1600px; + /* Sans fil d'Ariane sur cette page (voir breadcrumb_wrap dans + screen_edit.html), .content garde quand même son padding par défaut + (28px en haut) — réduit ici pour que le canevas commence le plus haut + possible sur la page. */ + padding:10px 20px 8px; +} + +/* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) — + toutes les trois occupent exactement la même hauteur (celle qui reste + disponible), avec leur propre défilement interne si leur contenu dépasse. */ +.builder3{ display:flex; gap:20px; align-items:stretch; margin-top:8px; flex:1 1 auto; min-height:0; } +/* overflow:hidden (pas auto) : le défilement doit se faire DANS le + canevas lui-même (voir .canvasFrame plus bas) ou dans l'onglet actif + (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement), + jamais sur cette zone entière — sans quoi la barre d'onglets et la barre + d'outils défileraient avec le contenu au lieu de rester fixes en haut. */ +.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; } + +/* ---------- Panneaux gauche/droite flottants ---------- */ +/* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux + flex de .builder3 (position:fixed) : .builderCanvasArea (flex:1 1 auto) + récupère automatiquement tout l'espace libéré, sans réglage + supplémentaire — les fermer donne donc une prévisualisation aussi large + que possible, aussi fidèle que possible à ce que "Jouer" affiche + réellement. Position et état ouvert/fermé mémorisés par écran (voir + floatPanel*() dans screen_edit.html) pour survivre à un changement de + sélection (qui remplace tout #builder3) ou un rechargement. */ +.floatPanel{ + position:fixed; top:90px; max-height:calc(100vh - 120px); + min-width:0; display:flex; flex-direction:column; z-index:60; + background:var(--panel); border:1px solid var(--border); border-radius:10px; + box-shadow:0 12px 40px rgba(0,0,0,.55); +} +.floatPanel.hidden{ display:none; } +/* Coin de redimensionnement (voir wireFloatPanelResize() dans + game_dashboard.html) — un panneau devient redimensionnable simplement en + lui ajoutant ce coin, JS mis à part rien d'autre à faire côté CSS. */ +.floatPanelResizeHandle{ + position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; + background:linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 70%, var(--border) 70%, var(--border) 80%, transparent 80%); + border-radius:0 0 10px 0; +} +.floatPanel--left{ left:24px; width:280px; } +.floatPanel--right{ right:24px; width:340px; } +.floatPanel--center{ left:50%; width:560px; max-width:calc(100vw - 48px); transform:translateX(-50%); } +/* Plein écran (voir makeFloatPanelFullscreenable() dans game_dashboard.html) + — juste un repère visuel (bordure accent) sur le panneau agrandi, tout le + positionnement réel est posé directement en style inline par le JS (pour + pouvoir revenir exactement à la position/taille d'avant en sortant). */ +.floatPanel--fullscreen{ border-color:var(--accent); } +.floatPanelHeader{ + display:flex; align-items:center; justify-content:space-between; gap:8px; + padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel2); + border-radius:10px 10px 0 0; cursor:move; flex:0 0 auto; user-select:none; +} +.floatPanelHeader .floatPanelTitle{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; } +.floatPanelBody{ padding:12px; overflow-y:auto; min-height:0; flex:1 1 auto; } +.floatPanelReopenBtn{ position:fixed; top:90px; z-index:60; display:none; } +.floatPanelReopenBtn.visible{ display:inline-flex; } +#panelLeftReopenBtn{ left:24px; } +#propsPanelReopenBtn{ right:24px; } + +.widgetGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } + +/* Icônes (widget Icône + galerie du panneau de propriétés) — SVG posé en + silhouette via "mask-image" plutôt qu'une police d'icônes (@font-face) : + se colore avec "color"/"background-color" comme du texte, MAIS ne dépend + d'aucun fichier de police externe — certains navigateurs/extensions + bloquent le chargement de polices web tierces (protection anti- + fingerprinting), ce qui rendait toutes les icônes Font Awesome invisibles + quelle que soit leur source (CDN ou même hébergées ici). Un simple SVG + affiché en masque n'est jamais concerné par ce blocage. Voir + render_icone.py (widget) et fontawesome_icons.py (liste + chemin des + fichiers, statiques dans static/icons/). */ +.icon-svg{ + display:inline-block; width:1em; height:1em; flex:0 0 auto; + background-color:currentColor; + -webkit-mask-image:var(--icon-url); mask-image:var(--icon-url); + -webkit-mask-size:contain; mask-size:contain; + -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; + -webkit-mask-position:center; mask-position:center; +} + +/* Galerie d'icônes (panneau de propriétés) — voir + fontawesome_icons.py et addIconElement()/filterIconGallery() plus bas. */ +.iconGallery{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; max-height:220px; overflow-y:auto; margin-top:8px; } +.iconGalleryTile{ + aspect-ratio:1; display:flex; align-items:center; justify-content:center; + background:var(--panel2); border:1px solid var(--border); border-radius:6px; + color:var(--text); cursor:grab; padding:0; +} +.iconGalleryTile .icon-svg{ width:16px; height:16px; } +.iconGalleryTile:hover{ border-color:var(--accent); color:var(--accent); } +.iconGalleryTile.dragging{ opacity:0.4; } +.iconGalleryTile.iconHidden{ display:none; } +.widgetBtnForm{ margin:0; } +.widgetBtn{ + width:100%; display:flex; flex-direction:column; align-items:center; gap:4px; + padding:12px 6px; border:1px solid var(--border); border-radius:10px; background:var(--panel); + color:var(--text); cursor:pointer; +} +.widgetBtn:hover{ border-color:var(--accent); background:var(--panel2); } +.widgetIcon{ font-size:22px; } +.widgetLabel{ font-size:11px; text-align:center; line-height:1.2; color:var(--text-dim); } + +.canvasToolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; } +.aspectBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; } + +.canvasFrame{ + /* flex:1 1 auto + min-height:0 : occupe tout l'espace restant sous la + barre d'outils dans .builderTabPanel (voir screen_edit.html). Le + canevas (voir .canvas ci-dessous) est réglé pour remplir EXACTEMENT + ce cadre (100% x 100%, sans respecter l'aspect-ratio Portrait/Paysage/ + Carré dans l'éditeur — ce réglage ne sert qu'à l'aperçu jouable/"Jouer", + voir screen_set_aspect.py) : "prendre toute la place disponible" et + "garder l'aspect-ratio" sont deux exigences contradictoires dès que la + fenêtre n'a pas exactement ce ratio, la première l'emporte ici. C'est + LUI qui défile (overflow:auto) si jamais le contenu déborde malgré + tout — jamais .builderCanvasArea (voir plus haut), pour garder la + barre d'onglets/d'outils toujours visible. */ + flex:1 1 auto; min-height:0; width:100%; padding:4px; border:1px solid var(--border); border-radius:16px; background:var(--panel); + display:flex; overflow:auto; +} +.canvas{ + position:relative; width:100%; height:100%; flex:1 1 auto; margin:0; background:#0b0d12; border-radius:8px; + overflow:hidden; border:1px solid var(--border); +} +.canvasElement{ + /* Pas d'overflow:hidden ici : une échelle (transform:scale) ou une + animation posée sur cet élément (voir la Timeline d'animation) vit sur + CE cadre (voir filters/element_style_filter.py) — le rogner clippait + l'effet à la taille d'origine de la boîte au lieu de le laisser + grossir/bouger avec elle. La zone de l'écran elle-même (.canvas, + ci-dessus) reste rognée, donc rien ne peut déborder de l'écran final. */ + box-sizing:border-box; cursor:move; user-select:none; + border:1px dashed transparent; +} +.canvasElement:hover{ border-color:rgba(91,140,255,.5); } +.canvasElement.selected{ border:2px solid var(--accent); } +.canvasElementInner{ width:100%; height:100%; pointer-events:none; } + +/* Surbrillance de l'élément sélectionné dans l'arborescence, posée en JS sur + sa propre balise (voir applySelectionHighlight) — seul moyen de la voir + sur le canevas quand cet élément est imbriqué dans un conteneur/répéteur/ + groupe de champs, qui n'a pas de cadre ".canvasElement" séparé comme un + élément posé directement sur l'écran. Un "outline" qui dépasse la boîte + (offset positif) se fait couper par le premier ancêtre en overflow:hidden + (le canevas lui-même, ou un conteneur aux coins arrondis) dès que + l'élément touche un de ses bords — très fréquent pour une rangée de + jauges collée en haut d'un conteneur. Un box-shadow EN CREUX (inset) + reste toujours à l'intérieur de la boîte, jamais rogné, et épouse + naturellement les coins arrondis de l'élément lui-même. */ +.elementHighlighted{ + box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 6px rgba(91,140,255,.2); +} +.resizeHandle{ + position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize; + background:var(--accent); border-radius:3px 0 6px 0; opacity:.85; +} + +.listRow.selected{ border-color:var(--accent); background:var(--panel2); } + +.childList{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px 18px; padding-left:10px; border-left:2px dashed var(--border); } +.childRow{ padding:7px 10px; font-size:12px; } +.childRow .rowTitle{ font-size:12px; } + +/* Arborescence compacte des éléments de l'écran (panneau gauche) — une + ligne par élément, indentation par imbrication réelle (profondeur + illimitée) plutôt qu'un seul niveau d'enfants comme l'ancienne .childList, + pour rester lisible même avec beaucoup d'éléments. */ +.elementTree{ display:flex; flex-direction:column; gap:1px; max-height:55vh; overflow-y:auto; margin-bottom:14px; } +.treeNode{ display:flex; flex-direction:column; } +.treeRow{ display:flex; align-items:center; gap:2px; } +.treeToggle{ + flex:0 0 auto; width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; + color:var(--text-dim); font-size:10px; display:flex; align-items:center; justify-content:center; + transition:transform .12s ease; +} +.treeToggle:hover{ color:var(--text); } +.treeToggleSpacer{ flex:0 0 auto; width:16px; height:16px; } +.treeNode.collapsed > .treeRow > .treeToggle{ transform:rotate(-90deg); } +.treeNode.collapsed > .treeChildren{ display:none; } +.treeRowLink{ + flex:1; display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px; + text-decoration:none; color:var(--text); font-size:12.5px; line-height:1.5; + white-space:nowrap; overflow:hidden; min-width:0; +} +.treeRowLink:hover{ background:var(--panel2); } +.treeRowLink.selected{ background:var(--accent); color:#0b0e14; font-weight:600; } +.treeIcon{ flex:0 0 auto; font-size:12px; } +.treeLabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } +.treeChildren{ display:flex; flex-direction:column; margin-left:10px; padding-left:8px; border-left:1px dashed var(--border); } +.treeRow.dragging{ opacity:0.4; } +.treeRow.dropBefore{ box-shadow: inset 0 2px 0 0 var(--accent); } +.treeRow.dropAfter{ box-shadow: inset 0 -2px 0 0 var(--accent); } +.treeRow.dropInside{ background:rgba(91,140,255,.25); box-shadow: inset 0 0 0 1px var(--accent); border-radius:4px; } + +.contextMenu{ + position:fixed; z-index:500; background:var(--panel); border:1px solid var(--border); + border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.4); padding:4px; min-width:160px; +} +.contextMenu button{ + display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); + padding:7px 10px; border-radius:5px; font-size:13px; cursor:pointer; +} +.contextMenu button:hover{ background:var(--panel2); } + +/* Élément à onglets (voir render_onglets.py) : la barre d'onglets elle-même + est un vrai composant Bulma ("tabs" > "ul" > "li", voir render_onglets.py) + — il ne reste ici que les panneaux, que Bulma n'a pas de composant pour. */ +.forgeTabPanels{ min-width:0; } +.forgeTabPanel{ padding-top:10px; } + +.propGroup{ border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--panel); } +.propGroup > summary{ + list-style:none; cursor:pointer; padding:9px 12px; font-size:13px; color:var(--accent); + font-weight:600; user-select:none; display:flex; align-items:center; justify-content:space-between; +} +.propGroup > summary::-webkit-details-marker{ display:none; } +.propGroup > summary::after{ content:"▸"; color:var(--text-dim); font-size:11px; transition:transform .15s; } +.propGroup[open] > summary::after{ transform:rotate(90deg); } +.propGroup > summary:hover{ background:var(--panel2); } +.propGroupBody{ padding:2px 12px 12px; } +.propGroupBody h3{ margin-top:0; } + + +/* .posGrid/.controlRow/.sizeField/.sliderRow/.alignGroup : Bulma fournit + déjà la mise en page (columns/field/control/buttons has-addons, voir + screen_edit.html) — ce qui reste ici n'est que ce que Bulma ne fournit + pas nativement : l'espacement propre à un curseur (slider) et son + pastille de valeur affichée à côté. */ +.posGrid input:disabled{ opacity:0.4; cursor:not-allowed; } +.sliderRow{ display:flex; align-items:center; gap:10px; } +.sliderRow input[type=range]{ flex:1; } +.sliderValue{ min-width:44px; text-align:right; } +input[type=color]{ width:52px; height:34px; padding:2px; } + +.propsPanel .sectionDivider, .floatPanel .sectionDivider{ border:none; border-top:1px solid var(--border); margin:14px 0; } +.actionAddForm{ margin-top:10px; } + +.uploadRow{ margin-top:6px; } +.uploadInput{ font-size:11px; color:var(--text-dim); } +.uploadStatus{ display:block; margin-top:4px; } +code{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11.5px; } + +@media (max-width: 1300px){ + /* Sous cette largeur, les 3 colonnes s'empilent : le principe "tout tient + dans la fenêtre, chaque zone défile pour elle-même" n'a plus de sens + (il n'y a plus qu'une seule colonne) — on revient à une page classique + qui défile normalement. */ + body.builderBody{ height:auto; overflow:visible; } + body.builderBody > main.content{ overflow:visible; } + .builder3{ flex-direction:column; flex:none; } + .builderCanvasArea{ flex:none; width:100%; height:auto; max-height:none; overflow:visible; } + /* Le "letterboxing" par hauteur (voir .canvas plus haut) suppose une + chaîne de hauteurs définies jusqu'ici — qui n'existe plus une fois + .builderCanvasArea repassée en "height:auto" ci-dessus. Revient donc à + un dimensionnement par LARGEUR, comme une page qui défile normalement. */ + .canvasFrame{ flex:none; overflow:visible; } + .canvas{ height:auto; width:100%; } + /* Trop peu de largeur pour qu'un panneau flottant ait un sens (il + couvrirait tout l'écran) : les deux rejoignent la pile normale et + restent toujours ouverts/visibles, quel que soit l'état mémorisé — + .hidden est ignoré grâce au "!important" sur "display" ci-dessous. */ + .floatPanel{ position:static; flex:none; width:100%; height:auto; max-height:none; box-shadow:none; top:auto; left:auto; right:auto; display:flex !important; } + .floatPanelReopenBtn{ display:none !important; } +} + +/* ---------- Onglets du centre : Écran / Logique de la scène / Timeline + d'animation ---------- */ +/* Un seul onglet visible à la fois (voir switchBuilderTab() dans + screen_edit.html), chacun occupant tout l'espace disponible dans + .builderCanvasArea — remplace l'ancien panneau du bas rétractable/ + redimensionnable à la souris : un onglet "prend toute la place" par + nature, pas besoin d'une poignée de redimensionnement séparée, et en + changer d'onglet équivaut à "fermer" celui qu'on quitte. */ +.builderTabs{ display:flex; gap:2px; flex:0 0 auto; border-bottom:1px solid var(--border); margin-bottom:10px; } +.builderTabBtn{ + background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; + padding:8px 12px; color:var(--text-dim); font-size:12.5px; cursor:pointer; +} +.builderTabBtn:hover{ color:var(--text); } +.builderTabBtn.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } + +.builderTabPanel{ flex:1 1 auto; min-height:0; display:none; flex-direction:column; } +.builderTabPanel.active{ display:flex; } + +/* Sous-onglets Champs/Données À L'INTÉRIEUR d'un panneau "Modifier un + objet" (voir game_dashboard.html) — classes distinctes de .builderTabs/ + .builderTabBtn/.builderTabPanel (utilisées par le style, réutilisé tel + quel) pour que switchDashTab() (onglets du tableau de bord lui-même, + ciblage global) n'aille jamais les toucher par erreur. */ +.objectPanelTabs{ margin:14px 0 10px; } +.objectPanelTabPanel{ display:none; flex-direction:column; } +.objectPanelTabPanel.active{ display:flex; } + +.flowToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; flex:0 0 auto; } + +.nodeForm{ border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:var(--panel2); max-width:420px; flex:0 0 auto; } +.nodeForm label{ margin-top:8px; } + +.flowCanvasWrap{ position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto; border:1px dashed var(--border); border-radius:8px; background:var(--bg); } +.flowCanvas{ position:relative; width:2200px; height:1400px; } +.flowEdgesSvg{ position:absolute; top:0; left:0; width:2200px; height:1400px; pointer-events:none; z-index:0; } +.flowEdgeLine{ stroke:var(--accent); stroke-width:2; pointer-events:stroke; cursor:pointer; } +.flowEdgeLine.flowEdgeTrue{ stroke:var(--status-success); } +.flowEdgeLine.flowEdgeFalse{ stroke:var(--danger); } + +.flowNode{ + position:absolute; width:220px; min-height:52px; border-radius:8px; border:1px solid var(--border); + background:var(--panel2); padding:10px 12px; font-size:12.5px; cursor:grab; z-index:1; user-select:none; +} +.flowNode-trigger{ border-color:var(--status-info); } +.flowNode-condition{ border-color:var(--status-warning); } +.flowNode-action{ border-color:var(--status-success); } +.flowNodeBody{ padding-right:16px; line-height:1.4; word-break:break-word; } +.flowNodeDelete{ + position:absolute; top:4px; right:4px; width:18px; height:18px; padding:0; line-height:1; + font-size:11px; border-radius:4px; background:transparent; border:none; color:var(--text-dim); +} +.flowNodeDelete:hover{ color:var(--danger); } +.flowPort{ + position:absolute; width:14px; height:14px; border-radius:50%; background:var(--panel); + border:2px solid var(--accent); top:50%; transform:translateY(-50%); cursor:crosshair; z-index:2; +} +.flowPortIn{ left:-8px; } +.flowPortOut{ right:-8px; } +.flowPortTrue{ right:-8px; top:35%; border-color:var(--status-success); } +.flowPortFalse{ right:-8px; top:65%; border-color:var(--danger); } + +/* ---------- Timeline d'animation : panneau sous "Logique de la scène" ---------- */ +.animTimelineWrap{ + position:relative; width:100%; flex:1 1 auto; min-height:120px; overflow:auto; + border:1px dashed var(--border); border-radius:8px; background:var(--bg); +} +.animRuler{ display:flex; height:22px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:3; } +.animRulerSpacer{ position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2; border-right:1px solid var(--border); } +.animRulerTicksWrap{ position:relative; flex:0 0 auto; } +.animRulerTick{ + position:absolute; top:0; bottom:0; font-size:10px; color:var(--text-dim); + border-left:1px solid var(--border); padding-left:3px; +} +.animTracks{ position:relative; } +.animTrack{ position:relative; height:38px; border-bottom:1px solid var(--border); display:flex; align-items:stretch; } +.animTrackLabel{ + position:sticky; left:0; width:140px; flex:0 0 140px; background:var(--panel); z-index:2; + padding:0 8px; font-size:12px; display:flex; align-items:center; border-right:1px solid var(--border); + overflow:hidden; text-overflow:ellipsis; white-space:nowrap; +} +.animTrackLane{ position:relative; flex:0 0 auto; } +.animClip{ + position:absolute; top:5px; height:28px; border-radius:6px; background:var(--accent); color:#fff; + font-size:11px; padding:5px 8px; cursor:grab; overflow:hidden; white-space:nowrap; user-select:none; + box-sizing:border-box; +} +.animClip.selected{ outline:2px solid #fff; } +.animClipResizeHandle{ position:absolute; right:0; top:0; width:8px; height:100%; cursor:ew-resize; } +.animKeyframeRow{ align-items:flex-start; } +.animKeyframeRow textarea{ font-family:monospace; font-size:11px; } + +/* ---------- Tableau de bord d'un jeu (game_dashboard.html) ---------- */ +/* Une seule fenêtre, un onglet par catégorie (écrans/objets/éléments de + jeu/variables) — réutilise .builderTabs/.builderTabBtn/.builderTabPanel + (voir plus bas, éditeur d'écran) pour la même sensation de "fenêtre à + onglets" qu'ailleurs dans l'outil, plutôt que d'inventer un 2e système. + Contrairement à leur usage dans l'éditeur d'écran, ici la page défile + normalement (pas de hauteur figée) : une liste peut être longue, pas + besoin d'un défilement interne séparé par panneau. */ +.dashTabCount{ font-size:10px; color:var(--text-dim); background:var(--panel2); border-radius:999px; padding:1px 6px; margin-left:4px; } +.dashPanelHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } +.dashPanelHeader h2{ margin:0; } +.dashCreateBar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); } +.dashCreateBar input, .dashCreateBar select{ width:auto; flex:1 1 160px; } +.dashDangerZone{ margin-top:28px; } + +/* ---------- Filtre de colonnes (onglet Données, game_dashboard.html) ---------- */ +/* Menu déroulant compact sous le bouton "🔧 Colonnes" — un objet avec + beaucoup de champs rend le tableau illisible, ce menu permet d'en + masquer certains (voir toggleDataColumn() : agit directement sur + [data-col] plutôt que de reconstruire le tableau). */ +.columnFilterWrap{ position:relative; display:inline-block; } +.columnFilterMenu{ + position:absolute; top:100%; left:0; margin-top:4px; z-index:70; + background:var(--panel); border:1px solid var(--border); border-radius:8px; + padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.55); + display:flex; flex-direction:column; gap:2px; min-width:180px; max-height:280px; overflow-y:auto; +} +.columnFilterMenu.hidden{ display:none; } +.columnFilterOption{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:4px; font-size:12.5px; white-space:nowrap; } +.columnFilterOption:hover{ background:var(--panel2); } + +/* ---------- Panneau "Configurer la valeur" (variable Objet/Tableau) ---------- */ +/* La colonne "Clé" n'a de sens que pour un Objet (paires clé/valeur) — un + Tableau n'est qu'une liste de valeurs, voir openVarValuePanel() dans + game_dashboard.html. */ +#varValuePanel[data-mode="tableau"] .varValueKeyField{ display:none; } + +/* ---------- Inscription : schéma visuel du mot de passe ---------- */ +/* Jauge + liste de critères mise à jour en direct (voir register.html) — + les mêmes 5 critères que auth/password_strength.py côté serveur. */ +.passwordStrengthBar{ height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; margin-top:8px; } +.passwordStrengthFill{ height:100%; width:0; border-radius:3px; background:var(--status-danger); transition:width .15s ease, background-color .15s ease; } +.passwordStrengthFill.weak{ background:var(--status-danger); } +.passwordStrengthFill.medium{ background:var(--status-warning); } +.passwordStrengthFill.good{ background:var(--accent-2); } +.passwordStrengthFill.strong{ background:var(--status-success); } +.passwordChecklist{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; } +.passwordChecklist li{ font-size:12.5px; color:var(--text-dim); padding-left:18px; position:relative; } +.passwordChecklist li::before{ content:"○"; position:absolute; left:0; } +.passwordChecklist li.ok{ color:var(--status-success); } +.passwordChecklist li.ok::before{ content:"✓"; } +.passwordChecklist-compact{ flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; } +.passwordChecklist-compact li{ font-size:11px; } + +/* ---------- Page de profil : compacte, sur 2 colonnes ---------- */ +.profileSection{ padding-top:1.5rem; padding-bottom:1.5rem; } +.profileContainer{ max-width:980px; } +.profileNotif{ padding:0.6rem 0.9rem; margin-bottom:0.75rem; } +.profileGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; } +.profileCol{ display:flex; flex-direction:column; gap:14px; min-width:0; } +.profileBox{ padding:0.85rem 1rem; } +.profileBox-danger{ border:1px solid var(--status-danger); } +.profileForm .field{ margin-bottom:8px; } +.profileForm .field:last-child{ margin-bottom:0; } +.profileForm-row{ display:flex; flex-wrap:wrap; gap:8px; } +.profileForm-row .field{ flex:1 1 120px; margin-bottom:0; } +.profileForm-row .field.profileForm-full{ flex-basis:100%; } +@media (max-width:720px){ + .profileGrid{ grid-template-columns:1fr; } +} + +/* ---------- Inscription : QR code de la double authentification ---------- */ +.totpQrWrap{ background:#fff; padding:16px; border-radius:8px; display:inline-block; max-width:220px; } +.totpQrWrap svg{ display:block; width:100%; height:auto; } + +.recoveryCodesGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } +.recoveryCode{ display:block; text-align:center; padding:8px; background:var(--panel2); border-radius:10px; letter-spacing:1px; } diff --git a/styles/forge-theme.scss b/styles/forge-theme.scss new file mode 100644 index 00000000..d81e320f --- /dev/null +++ b/styles/forge-theme.scss @@ -0,0 +1,183 @@ +// forge-theme.scss — point d'entrée unique compilé par build_css.py en +// static/style.css (voir regles/FORGE_ENGINE_TEMPLATE_BULMA.md, §6). +// +// Bulma est vendoré en local (styles/bulma/, version 0.9.4 — la dernière +// compatible avec libsass, voir build_css.py) : ses variables Sass +// ($primary, $radius...) sont posées ICI, AVANT `@import "bulma"`, pour +// que Bulma recompile ses propres composants (boutons, tags, +// notifications, dropdowns...) avec la palette Forge plutôt que de les +// surcharger un par un après coup en CSS. + +// ---------- Variables Sass consommées par Bulma ---------- +$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; +$body-background-color: #0b0e14; +$scheme-main: #0b0e14; +$scheme-main-bis: #11151d; +$scheme-main-ter: #161b25; +$text: #e8ecf4; +$text-light: #8b95a7; +$border: #232a38; +$border-light: #232a38; +$link: #ff5f2e; +$primary: #ff5f2e; +$info: #3b82f6; +$success: #10b981; +$warning: #ffb020; +$danger: #f04438; +$radius: 10px; +$radius-small: 8px; +$radius-large: 16px; +$radius-rounded: 999px; +$box-radius: 16px; +$card-radius: 16px; +$navbar-height: 3.5rem; + +@import "bulma/bulma"; + +// ---------- Tokens Forge (variables CSS runtime — voir §1 du document de +// règles) : exposées en :root pour rester inspectables/utilisables telles +// quelles par du JS ou du style inline, indépendamment de la compilation +// Sass. Les alias --bg/--panel/--panel2/--border/--text/--text-dim/ +// --danger reprennent les noms déjà utilisés par tout le CSS custom de +// l'app (voir forge-custom.scss, importé juste après) — pas besoin de +// renommer les ~600 lignes de règles déjà écrites, seules les VALEURS +// changent. ---------- +:root { + --forge-bg: #0b0e14; + --forge-bg-secondary: #11151d; + --forge-card: #161b25; + --forge-border: #232a38; + --forge-text: #e8ecf4; + --forge-text-muted: #8b95a7; + --accent: #ff5f2e; + --accent-2: #ffb020; + --gradient: linear-gradient(120deg, var(--accent), var(--accent-2)); + --glow: rgba(255, 95, 46, 0.25); + --status-success: #10b981; + --status-warning: #ffb020; + --status-danger: #f04438; + --status-info: #3b82f6; + + // Alias historiques (voir commentaire ci-dessus). + --bg: var(--forge-bg); + --panel: var(--forge-card); + --panel2: var(--forge-bg-secondary); + --border: var(--forge-border); + --text: var(--forge-text); + --text-dim: var(--forge-text-muted); + --danger: var(--status-danger); +} + +html, body { + background: var(--forge-bg); + color: var(--forge-text); +} + +// ---------- Composants Bulma que la recompilation seule ne couvre pas +// (mise en page propre au navbar/tableaux/onglets de l'app, badges +// maison) — voir §6 du document de règles. ---------- +.navbar { + background: var(--forge-bg-secondary); + border-bottom: 1px solid var(--forge-border); +} +.navbar-item.brand { gap: 8px; font-size: 1rem; } +.navbar-item, .navbar-link { color: var(--forge-text); } +.navbar-item.is-active, .navbar-item:hover, .navbar-link:hover { + color: var(--accent); + background: var(--forge-card); +} + +.table { + background: transparent; + color: var(--forge-text); +} +.table thead th { + background: var(--forge-bg-secondary); + color: var(--forge-text-muted); + border-color: var(--forge-border); + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.04em; + font-weight: 600; + position: sticky; + top: 0; + z-index: 2; +} +.table td, .table th { border-color: var(--forge-border); vertical-align: middle; } +.table.is-striped tbody tr:nth-child(even) { background: var(--forge-bg-secondary); } +.table tbody tr:hover { background: var(--forge-card); } + +.tabs a { color: var(--forge-text-muted); border-bottom-color: var(--forge-border); } +.tabs li.is-active a { color: var(--accent); border-bottom-color: var(--accent); } +.tabs.is-toggle a { border-color: var(--forge-border); background: var(--forge-bg-secondary); } +.tabs.is-toggle li.is-active a { background: var(--accent); border-color: var(--accent); color: #14100c; } + +.title, h1, h2, h3 { color: var(--forge-text); } +.subtitle { color: var(--forge-text-muted); font-weight: 400; } + +.button.is-primary, button.primary { + background: var(--gradient); + border: none; + color: #14100c; + font-weight: 700; +} +.button.is-primary:hover, button.primary:hover { box-shadow: 0 6px 16px -6px var(--glow); } + +.box, .card { + background: linear-gradient(180deg, var(--forge-card), var(--forge-bg-secondary)); + border: 1px solid var(--forge-border); + box-shadow: none; + transition: box-shadow .15s ease; +} +.box:hover, .card:hover { box-shadow: 0 10px 25px -8px var(--glow); } + +.forge-badge { + display: inline-block; + padding: 0.4rem 1rem; + border-radius: 999px; + background: rgba(255, 95, 46, 0.1); + border: 1px solid rgba(255, 95, 46, 0.35); + color: var(--accent); + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; +} +.forge-badge.is-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); color: var(--status-success); } +.forge-badge.is-danger { background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.35); color: var(--status-danger); } + +.input, .textarea, .select select { + background: var(--forge-bg-secondary); + border-color: var(--forge-border); + color: var(--forge-text); +} +.input:focus, .textarea:focus, .select select:focus { + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(255, 95, 46, 0.2); +} +label.label { color: var(--forge-text-muted); font-size: 0.85rem; font-weight: 600; } + +.modal-card, .modal-content { background: var(--forge-card); border: 1px solid var(--forge-border); } +.modal-card-head, .modal-card-foot { background: var(--forge-bg-secondary); border-color: var(--forge-border); } + +.notification { color: var(--forge-text); } +.notification.is-success { background: rgba(16, 185, 129, 0.12); color: var(--status-success); } +.notification.is-danger { background: rgba(240, 68, 56, 0.12); color: var(--status-danger); } +.notification.is-warning { background: rgba(255, 176, 32, 0.12); color: var(--status-warning); } +.notification.is-info { background: rgba(59, 130, 246, 0.12); color: var(--status-info); } + +// Titre H1 en dégradé signature — réservé aux pages d'accueil/marketing et +// à l'écran de connexion (§5), voir .authHero (templates/auth/*.html, +// Phase B). +.forge-gradient-title { + background: var(--gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +// ---------- CSS custom de l'app (floatPanel, canvas, arbre d'éléments, +// graphe de logique, timeline, éditeurs de jeu...) — structurellement +// inchangé, consomme les tokens ci-dessus via les alias historiques. +// ---------- +@import "forge-custom"; diff --git a/templates/base.html b/templates/base.html index 83dd3209..f75daacb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ {% block title %}Forge Engine{% endblock %} - + @@ -25,7 +25,10 @@ - 🛠️ Forge Engine + + + Forge Engine + {% if g.get('current_user') %} diff --git a/templates/play.html b/templates/play.html index cd2c7e82..98fca6f1 100644 --- a/templates/play.html +++ b/templates/play.html @@ -4,12 +4,12 @@ {{ game.name }} — Jouer + - -